.cta-banner-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.cta-banner-wrapper {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    min-height: 20rem;
    background-color: var(--bs-secondary-500);
}

.cta-banner-eyebrow {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--bs-main-500);
    margin: 0;
}

.cta-banner-title {
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
    max-width: 37.5rem;
}

/* The readable-width cap lives on the title/description themselves, not on
   .cta-banner-content — the button row needs to stay free to size to its own
   natural width (wider than 37.5rem once both buttons have real text), so it
   can sit side by side whenever there's room instead of always wrapping. */
.cta-banner-desc {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    max-width: 37.5rem;
}

.cta-banner-desc p {
    margin-bottom: 0;
}

.cta-banner-actions {
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Always above the wrapper's images (portraits/bg/figure are all
   position:absolute below), regardless of variant. */
.cta-banner-content {
    position: relative;
    z-index: 2;
}

/* ===== Variant: centered — flat background, two portraits flanking the content ===== */

.cta-banner-wrapper--centered {
    justify-content: center;
}

.cta-banner-wrapper--centered .cta-banner-content {
    align-items: center;
    text-align: center;
    padding: 3rem 2rem 4rem;
}

.cta-banner-wrapper--centered .cta-banner-actions {
    justify-content: center;
}

/* Absolutely positioned (not a flex item stretched by the row's cross size),
   anchored to the wrapper's bottom edge with a fixed height rather than
   spanning top-to-bottom — that stretched every source photo into an
   unnaturally tall, narrow box, forcing object-fit:cover to crop hard into
   the sides of the person to fill it. A shorter, wider box needs far less
   side-cropping and leaves the intended breathing room above the head. It
   also keeps this decoupled from the row's flex cross-size, so both variants
   — which share this same wrapper — still end up exactly the same height
   regardless of how much their own content wraps. */
.cta-banner-portrait {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 14rem;
    max-width: 28%;
    height: 16rem;
}

.cta-banner-portrait-left {
    left: 2rem;
}

.cta-banner-portrait-right {
    right: 2rem;
}

.cta-banner-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* ===== Variant: media — background image with a teal tint, figure layered on top ===== */

/* A percentage, not a fixed rem value: this is the boundary that keeps the
   text/button column clear of the figure (which is absolutely positioned and
   doesn't reserve its own flex space), so it needs to scale with the wrapper
   rather than risk the button row running under the photo on wide screens.
   62% (up from an original 45/55 split) trades some of the figure's width
   for room to keep both CTA buttons on one line through typical desktop
   widths instead of just very wide ones — see .cta-banner-figure below,
   narrowed to match. Right padding is trimmed to 3rem rather than matching
   the other sides: the figure's own right inset is 2rem, so this still
   leaves a clear 1rem gap from the photo. Left padding is trimmed too since
   nothing there borders the figure, matching the centered variant's 2rem. */
.cta-banner-wrapper--media .cta-banner-content {
    max-width: 62%;
    padding: 4rem 3rem 4rem 2.5rem;
}

.cta-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Teal tint over the background image only — the figure sits above this in
   the stacking order and stays untinted. Two layers instead of mix-blend-mode
   (which has already broken cross-browser on this project and can't be
   verified in a real Safari here): a flat tint for overall legibility, plus a
   left-to-right gradient so the text side reads even over busy photos. */
.cta-banner-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--bs-secondary-500);
    opacity: 0.75;
}

.cta-banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, var(--bs-secondary-500) 0%, transparent 60%);
}

/* Same reasoning as .cta-banner-portrait above: absolutely positioned and
   bottom-anchored with a fixed height (not stretched top-to-bottom), so it
   can't grow the wrapper taller than the centered variant's, and matches its
   headroom above rather than reaching the very top of the banner. Narrowed
   from an original 45% to 38% (complementing .cta-banner-content's 62%
   above) to give the CTA button row enough room to stay on one line at
   typical desktop widths. */
.cta-banner-figure {
    position: absolute;
    bottom: 0;
    right: 2rem;
    z-index: 2;
    width: 38%;
    height: 16rem;
}

.cta-banner-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
    display: block;
}

@media screen and (max-width: 62em) {
    /* Width alone was overridden here before, leaving the base rule's fixed
       16rem height in place — an 8rem × 16rem (1:2) box crops far harder
       into the sides than intended. aspect-ratio keeps the crop proportional
       (same ratio already used for the mobile portraits below) instead of
       inheriting a height that no longer matches the narrower width. */
    .cta-banner-portrait {
        width: 8rem;
        aspect-ratio: 3 / 4;
        height: auto;
    }

    .cta-banner-portrait-left {
        left: 1rem;
    }

    .cta-banner-portrait-right {
        right: 1rem;
    }

    .cta-banner-wrapper--centered .cta-banner-content {
        padding: 2.5rem 1.5rem;
    }

    .cta-banner-wrapper--media .cta-banner-content {
        max-width: 55%;
        padding: 2.5rem;
    }

    .cta-banner-title {
        font-size: 1.75rem;
    }

    .cta-banner-desc {
        font-size: 1rem;
    }

    .cta-banner-wrapper--media .cta-banner-figure {
        width: 40%;
        right: 1rem;
    }

    /* Text side needs to read against the figure too at this width, not just
       the background photo, so the gradient goes vertical here instead. */
    .cta-banner-wrapper--media .cta-banner-bg::after {
        background: linear-gradient(to bottom, var(--bs-secondary-500) 40%, transparent 100%);
    }
}

/* Side-by-side content stops reading well before the 36em/576px phone
   breakpoint — by ~48em/768px "media" is down to ~250px of text and
   "centered" to ~296px between two portraits — so the stacked layout below
   takes over at 768px instead, a breakpoint already established elsewhere in
   this theme (banner-cards, layout-image-cards, etc.). The 62em block above
   stays untouched: side-by-side still works fine through that range. */
@media screen and (max-width: 48em) {
    .cta-banner-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .cta-banner-wrapper {
        min-height: auto;
    }

    .cta-banner-actions {
        flex-direction: column;
        align-self: stretch;
        margin-top: 0.75rem;
    }

    /* Centered: content full-width on top, then the two portraits side by
       side on the row below it — the only way two vertical portraits keep
       reading well stacked. */
    .cta-banner-wrapper--centered {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cta-banner-wrapper--centered .cta-banner-content {
        order: 1;
        flex-basis: 100%;
        max-width: 100%;
        /* Flex items default to min-width:auto (never shrink below their own
           content's needed width) — without overriding that, the CTA button
           labels (white-space:nowrap, needed for the hover-slide effect)
           could force this row wider than the viewport instead of the row
           just accepting the space it's given. */
        min-width: 0;
        padding: 2rem 1.5rem;
    }

    /* Back into normal flow here — the absolute positioning that keeps the
       desktop crop/height stable would fight the "stack below content" layout
       this breakpoint needs. Specificity (two classes) beats the base
       .cta-banner-portrait / .cta-banner-portrait-left/-right rules above. */
    .cta-banner-wrapper--centered .cta-banner-portrait {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        order: 2;
        flex: 1 1 50%;
        max-width: 50%;
        width: auto;
        height: auto;
        aspect-ratio: 3 / 4;
        max-height: 18rem;
    }

    /* Only one of the two portrait fields loaded: give it the full-width
       reading it looks intentional at instead of sitting at a lonely 50%. */
    .cta-banner-wrapper--portraits-1 .cta-banner-portrait {
        flex-basis: 70%;
        max-width: 70%;
    }

    /* Same full-bleed treatment as the media variant below: both should span
       edge-to-edge on mobile, not just sit boxed inside the container. */
    .cta-banner-section--centered > .container {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }

    /* Media: content stays a plain solid-teal block on top (no photo behind
       the text at this width); the background photo + figure move into a
       single fixed-height strip below it, full-bleed to the viewport edges,
       with a top fade so the transition from the solid teal above reads
       smoothly. The figure is pinned to the wrapper's bottom edge rather
       than nested in the flow, so it lines up with the bg strip exactly
       without needing to know the content block's height. */
    .cta-banner-wrapper--media {
        flex-direction: column;
    }

    /* Full-bleed via the container's own padding instead of width:100vw +
       negative margins — 100vw includes the classic scrollbar's width, which
       causes horizontal scroll on a narrowed desktop browser (the most likely
       way this gets tested). Same padding-neutralizing pattern already used
       in cards-banner.css / layout-image-cards.css. */
    .cta-banner-section--media > .container {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }

    .cta-banner-wrapper--media .cta-banner-content {
        order: 1;
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    .cta-banner-wrapper--media .cta-banner-bg {
        position: relative;
        inset: auto;
        order: 2;
        height: 16rem;
        width: 100%;
    }

    .cta-banner-wrapper--media .cta-banner-bg::after {
        background: linear-gradient(to bottom, var(--bs-secondary-500) 0%, transparent 40%);
    }

    .cta-banner-wrapper--media .cta-banner-figure {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: 16rem;
        width: 100%;
    }
}