/*------------------------------------*\

    Half text / half media

    Spec behaviour:
      - media drops below the text on mobile
      - admin picks the media side (left/right) and a white or green
        background

    The row is full-bleed and media corners are square. On desktop the
    media fills the full height of the row (matching the text column's
    padding + content), rather than the static, centred, padded block the
    written spec originally described - a deliberate art-direction change.

\*------------------------------------*/

.image-text {
    overflow: hidden;
}

.image-text .flex-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.image-text__half {
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
}


/*------------------------------------*\
    Copy
\*------------------------------------*/

.image-text__text {
    align-self: center;
    padding: var(--fx-section-space) 1.25rem;
    position: relative;
    z-index: 0;
}

/* Brand tree-ring illustration (attachment 2850), used as a decorative
   watermark behind the copy. It carries an empty alt attribute (no alt
   text set on the attachment, so wp_get_attachment_image() renders
   alt=""), so it's already correctly skipped by screen readers. */
.image-text__watermark {
    display: none;
    height: 30rem;
    object-fit: contain;
    opacity: 0.35;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30rem;
    z-index: -1;
}

.image-text.bg-green .image-text__watermark {
    /* Warm line art needs lifting to register against #1E3120 */
    filter: brightness(1.35);
    opacity: 0.3;
}

.image-text__text > :first-child {
    margin-top: 0;
}

.image-text__text > :last-child {
    margin-bottom: 0;
}

.image-text__text p {
    max-width: 40em;
}

/* Body copy on the dark Background Color variant. Headings / links /
   strong are owned by flexible-content.css (higher-specificity .bg-green
   surface rules); this keeps paragraphs and lists readable if a global
   Avada body color tries to paint them dark. */
.image-text.bg-green .image-text__text :is(p, li, dd, blockquote) {
    color: rgba(255, 255, 255, 0.88);
}


/*------------------------------------*\
    Media
\*------------------------------------*/

.image-text__img,
.image-text__video {
    aspect-ratio: 4 / 3;
    box-shadow: var(--fx-shadow-sm);
    overflow: hidden;
    position: relative;
}

.image-text__img img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.image-text__video > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.image-text__video-link {
    align-items: center;
    background: rgba(15, 24, 16, 0.35);
    display: flex;
    height: 100%;
    inset: 0;
    justify-content: center;
    position: absolute;
    transition: background-color var(--fx-transition);
    width: 100%;
    z-index: 1;
}

.image-text__video-link:hover,
.image-text__video-link:focus-visible {
    background: rgba(15, 24, 16, 0.5);
}

.image-text__video--no-poster {
    background: var(--fx-cream);
}

.image-text__play {
    align-items: center;
    background: var(--fx-green);
    border-radius: 50%;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 24, 16, 0.35);
    color: var(--fx-white);
    display: flex;
    font-size: 1.375rem;
    height: 4.5rem;
    justify-content: center;
    padding-left: 0.25rem;
    position: relative;
    transition: transform var(--fx-transition), background-color var(--fx-transition);
    width: 4.5rem;
}

/* Soft ring that expands on hover */
.image-text__play::before {
    border: 0.0625rem solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    content: "";
    inset: -0.625rem;
    position: absolute;
    transition: inset var(--fx-transition), opacity var(--fx-transition);
}

.image-text__video-link:hover .image-text__play,
.image-text__video-link:focus-visible .image-text__play {
    background: var(--fx-dark-green);
    transform: scale(1.06);
}

.image-text__video-link:hover .image-text__play::before {
    inset: -1rem;
    opacity: 0.7;
}

.image-text__video-link:focus-visible {
    outline: 0.1875rem solid var(--fx-white);
    outline-offset: -0.375rem;
}


/*------------------------------------*\
    Breakpoints
\*------------------------------------*/

@media (min-width: 768px) {
    .image-text__text {
        padding: var(--fx-section-space) 2rem;
    }

    /* Anchored to the outer edge, away from the media half */
    .image-text__watermark {
        display: block;
    }

    /* Copy sits on the left here, so the artwork is pushed further off the
       edge to stay clear of the start of each line. */
    .image-text--right .image-text__watermark {
        left: -15rem;
    }

    /* Copy sits on the right; lines end before the artwork begins. */
    .image-text--left .image-text__watermark {
        right: -9rem;
    }
}

@media (min-width: 1200px) {
    .image-text .flex-row {
        align-items: stretch;
        flex-direction: row;
        gap: 0;
    }

    .image-text__half {
        flex-basis: 50%;
        width: 50%;
    }

    /* The row is full-bleed, but the copy still lines up with the page
       container used by every other block. 50% resolves against the row
       (the full section width), so this stays scrollbar-safe where 100vw
       would not: half the section, less half the 75rem container, plus
       the container's own 1.5rem gutter. */
    .image-text__text {
        padding-block: var(--fx-section-space);
    }

    .image-text--right .image-text__text {
        padding-inline: max(2rem, calc(50% - 36rem)) clamp(2.5rem, 6vw, 5.25rem);
    }

    .image-text--left .image-text__text {
        padding-inline: clamp(2.5rem, 6vw, 5.25rem) max(2rem, calc(50% - 36rem));
    }

    /* Media fills the full height of the row (which the text column's own
       padding and content determine), flush with the section's top and
       bottom edges rather than a padded, centred block. */
    .image-text__img,
    .image-text__video {
        aspect-ratio: auto;
        height: 100%;
        width: 100%;
    }

    .image-text--left .flex-row {
        flex-direction: row-reverse;
    }
}