/* Styles for the acf/ctas home block – ctas 129:432 (set 122:1241
   Default / Variant2, mobile 10001:2075), heKkCZqetGZ4Jss8DyuX3n.
   A photo with a frosted coloured card riding over its foot, and the CTA
   titles as a column of serif tabs whose active one takes the card's
   colour. The photo bleeds to the viewport edge – both edges while
   stacked, the left edge beside the titles – through the container-
   relative negative margin, so no width is ever fixed. */
.contentBlock.ctas {
    /* The ground is the mockup's own white – `background` 129:223 fills
       neutral/white from the foot of welcome-zoom through ctas – and the
       lift is this block's own stacking context: the card, the titles and
       the connector layer on z-indexes inside it (below).

       Both used to be REQUIRED by the journey above (blocks/home/journey/
       journey.css): until 2026-09-22 its frame was a sticky layer on a runway
       reaching a screen down into this block, so ctas had to be painted OVER
       the held frame – an opaque ground alone lost to a sticky element's
       positioned paint, and the z-index lifted the whole box past it. The
       journey now clips its fixed frame to its own box (Feedbucket #985907)
       and needs nothing from its neighbours, so these two lines are kept for
       ctas's own sake only. */
    position:   relative;
    z-index:    1;
    background: var(--color-white);

    /* The vertical rhythm is PADDING here, not the .contentBlock margin, for
       two reasons that happen to be the same reason. A margin paints nothing,
       so the journey's held frame showed through the strip above and below
       this block; and the drawn block is tight to its content (the photo
       starts at the instance's own y=0, the card ends at its foot), so
       without padding the content has no air at all. The figures are the gap
       the mockups leave under the block before the grey highlights band:
       ctas-mobile 10001:2075 ends 3189 against highlights 11010:999 at 3253,
       and ctas 129:432 ends 3631 against `hightlights-background` 129:232 at
       3760.

       The PHONE takes none above, and still takes none now that the journey
       pins on mobile too (journey.css, 2026-09-15). The strip the padding
       clears is a MARGIN problem and this block has no margin: its white
       ground starts at its own top edge, so the photo rides straight onto the
       held frame with nothing showing between. The air above read as a gap
       between the photo and the block before it (Charlie's call,
       2026-09-15). */
    margin:     0;
    padding:    0 0 64px;

    @media (min-width: 992px) {
        padding: 129px 0;
    }

    /* photo → titles; the active title's connector spans it */
    --ctas-gap: 70px;
    /* the bleed runs past the viewport edge – clip it so a classic
       scrollbar's 100vw can never open a horizontal scroll */
    overflow-x: clip;

    @media (min-width: 1200px) {
        --ctas-gap: 110px;
    }

    .ctas {
        display:        flex;
        flex-direction: column;

        /* Side by side from 992px as a GRID, not a flex row: the titles are
           centred on the PHOTO, as the file draws them (129:432 – the five
           titles run y 21 to 515 against the 565 photo while the card rides
           on over its foot to 718), so the row they centre in has to end
           where the photo does, not where the card does. Row 1 is the
           photo, row 2 the card's overhang below it; the panels subgrid
           their rows so both tracks are sized by the photo and the tallest
           of the cards (every panel is laid out – see .ctaPanel), and the
           titles sit in row 1 alone. The titles'
           column hugs the longest title, capped at 35 % of the row as the
           flex row capped it at 35 % of the container (the row is wider by
           the bleed, below – a little more rope for a title longer than any
           drawn). Charlie's call, 2026-09-22 – the titles were top-aligned
           to the photo before.

           The photo's bleed to the viewport's left edge moves up HERE from
           .ctaPanels for the grid: a grid item's percentage margin resolves
           against its grid AREA, not the container, so the panels' own
           `50% - 50vw` would start the photo a column's-worth off screen.
           On the row the 50 % is still the container's, and the photo
           column simply begins at the viewport edge. */
        @media (min-width: 992px) {
            display:               grid;
            grid-template-columns: minmax(0, 1fr) fit-content(35%);
            grid-template-rows:    auto auto;
            column-gap:            var(--ctas-gap);
            margin-left:           calc(50% - 50vw);
        }
    }

    .ctaPanels {
        position: relative;
        /* stacked, the photo runs edge to edge: half the container back to
           the viewport's centre – Bootstrap's own width, nothing fixed */
        margin:   0 calc(50% - 50vw);

        /* one cell that every panel is laid out in (see .ctaPanel) */
        @media (min-width: 576px) {
            display: grid;
        }

        /* beside the titles the bleed is the row's (see .ctas) – the panel
           fills its column, which already starts at the viewport edge */
        @media (min-width: 992px) {
            grid-column:        1;
            grid-row:           1 / 3;
            grid-template-rows: subgrid;
            min-width:          0;
            margin:             0;
        }
    }

    /* the drawn colourways – Default teal, Variant2 gold; slate completes the
       design system's coloured-card set. Set on the panel and its tab alike */
    .ctaPanel,
    .ctaTab {
        &.teal {
            --cta-colour: var(--color-teal);
            --cta-fill:   var(--color-teal-80);
            --cta-ink:    var(--color-white);
        }

        &.gold {
            --cta-colour: var(--color-gold);
            --cta-fill:   var(--color-gold-80);
            --cta-ink:    var(--color-plum-dark);
        }

        &.slate {
            --cta-colour: var(--color-slate);
            --cta-fill:   var(--color-slate-80);
            --cta-ink:    var(--color-white);
        }
    }

    .ctaPanel {
        /* A GRID, not a flex column – the photo in row 1, the card in row 2.
           The card rides up over the photo on a negative top margin
           (.ctaCard), and in a flex column that margin came off the
           column's height: on the phone the card (298) is shorter than the
           overlap it rides up by (74 % of 440 = 326), so the column ended
           28px above the photo's foot and the titles after it landed on the
           photograph (Feedbucket #1003656). A grid row cannot go below
           zero, so the panel is never shorter than the photo, and the card
           only ever ADDS its overhang – the design's phone (10001:2075:
           360 photo, card 93..390) has it overhang by 30, which is what
           the second row holds there. */
        display:            grid;
        grid-template-rows: auto auto;

        /* From 576 the cards hug their copy (.ctaCard), so they differ in
           height from one title to the next – and a block that changed
           height with them would move what follows it on every click: the
           titles themselves while they stack under the panel, the next band
           once they sit beside it. So every panel is laid out in the one
           cell and the idle ones are only invisible: the block is as tall as
           its tallest card whichever title is chosen, and a shorter card
           leaves the difference as ground below it. The idle panels are
           still behind `hidden` for ctas.js and assistive tech – the
           !important answers Bootstrap's own `[hidden]` rule – and their
           photos stay undrawn, so each still loads only when its title is
           chosen; the photo's box keeps its size from its aspect-ratio.
           Below 576 the panels still swap with `hidden` alone. */
        @media (min-width: 576px) {
            grid-area: 1 / 1;

            &[hidden] {
                display:    grid !important;
                visibility: hidden;

                .ctaImage > * {
                    display: none;
                }
            }
        }

        @media (min-width: 992px) {
            grid-row:           1 / 3;
            grid-template-rows: subgrid;
        }

        &.active {
            animation: ctasReveal var(--transition-slow) both;
        }

        @media (prefers-reduced-motion: reduce) {
            &.active {
                animation: none;
            }
        }
    }

    .ctaImage {
        aspect-ratio: 1;
        /* the panel is a column flex container (a grid from 992px), so
           without this the photo's own intrinsic height becomes its
           automatic minimum and overrides aspect-ratio (the 902/565 band
           rendered 600 tall) */
        min-height:   0;
        /* and in the grid the same again sideways: where the titles stack
           taller than the photo (992–1199, five titles against a 936px
           container), the row is the titles' height and the photo's
           automatic minimum WIDTH is transferred from it through the ratio –
           the band grew 82px into the gap. With no minimum, and stretched
           in both axes (below), it fills the column by the row instead, the
           ratio giving way and the cover-fitted image filling the taller
           box – the design's own phone variant is squarer still. From
           1200px the photo is the taller of the two and keeps its 902/565 */
        min-width:    0;

        picture,
        img {
            display:    block;
            width:      100%;
            height:     100%;
            object-fit: cover;
        }

        @media (min-width: 576px) {
            aspect-ratio: 902 / 565;
        }

        @media (min-width: 992px) {
            grid-row:     1;
            /* explicit, both axes: a grid item with an aspect ratio aligns
               `start` by default rather than stretching, which left the
               photo 51px short of the titles' row at 992 – stretched in
               both axes the box is the column by the row, and the ratio
               only decides the row where the photo is the taller item */
            align-self:   stretch;
            justify-self: stretch;
        }
    }

    .ctaCard {
        position:                relative;
        z-index:                 1;
        display:                 flex;
        flex-direction:          column;
        align-items:             flex-start;
        gap:                     24px;
        /* The phone draws the card 297 tall with its button on the floor
           (group-121 in 10001:2075 – three lines of copy, the button 66
           below them) – a min-height, so longer copy still grows it.

           From 576 there is no floor. The desktop file's 298 (group-7, in
           129:432 and Variant2 122:1242 alike) is not a height the card
           holds but four lines of copy: heading 445–494, the copy's four
           30px lines 507–627 (its text box runs on to 634), button 650–697,
           card 420–718. The site's copy runs to two or three lines, and the
           floor left 40–90px of empty card between the text and the link,
           so the card now hugs its copy: the link sits the drawn 23 under
           the last line on desktop (.button, below), the card's own 24 on
           tablet, which already shares the desktop's landscape photo. Hannah
           asked for a shorter card, 2026-09-23 (Feedbucket #994790). */
        min-height:              298px;
        /* the card rides up over the photo: a % margin resolves against the
           panel's width, which the photo's aspect-ratio ties to its height –
           the top edge lands 26% down the square photo, 74% down the
           landscape one. Side margins restore the container's own gutter */
        margin:                  -74% calc(var(--bs-gutter-x, 24px) * .5) 0;
        /* its own height in the panel's second row (see .ctaPanel) – stretched
           to the row it would grow to the photo's foot whenever the copy runs
           shorter than the overlap */
        align-self:              start;
        padding:                 25px;
        border:                  1px solid var(--color-white);
        border-radius:           var(--border-radius-lg);
        background:              var(--cta-fill);
        box-shadow:              var(--shadow-md);
        -webkit-backdrop-filter: blur(var(--blur-frosted));
        backdrop-filter:         blur(var(--blur-frosted));
        color:                   var(--cta-ink);

        /* From 576 Bootstrap's .container stops filling the screen (540px,
           720px from 768) while the panel still bleeds to it, so the gutter
           alone put the card 12px from the screen edge with the page's
           content on the container's – 57px on an iPad portrait. Half the
           panel's overhang past the container, plus the gutter, puts the
           card's edges back on the content edge; the panel and the overhang
           are both measured in vw, so a classic scrollbar cancels out
           (go-live check, 2026-10-21). */
        @media (min-width: 576px) {
            min-height:    0;
            margin-top:    -16%;
            margin-inline: calc((100% - 540px) / 2 + var(--bs-gutter-x, 24px) * .5);
        }

        @media (min-width: 768px) {
            margin-inline: calc((100% - 720px) / 2 + var(--bs-gutter-x, 24px) * .5);
        }

        @media (min-width: 992px) {
            /* row 2 of the panel's subgrid: the negative top margin still
               rides the card up over the photo, and only the overhang below
               the photo sizes the row – the tallest card's overhang, so each
               card keeps its own copy's height rather than stretching to it */
            grid-row:     2;
            gap:          13px;
            width:        77.6%;
            margin-right: 0;
            margin-left:  14.6%;
        }
    }

    .ctaHeading {
        margin: 0;
        font:   var(--text-40kl);
        color:  inherit;
    }

    .ctaText {
        margin: 0;
        font:   var(--text-18kl);

        p {
            margin: 0 0 16px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .ctaCard .button {
        /* onto the phone's floor; from 576 the card hugs its copy and there
           is no space for it to take */
        margin-top: auto;

        /* the drawn 23 from the copy's last line (627 to 650, group-7):
           the card's 13 gap and 10 more */
        @media (min-width: 992px) {
            align-self: flex-end;
            margin-top: 10px;
        }
    }

    .ctaTabs {
        display:        flex;
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
        margin-top:     10px;

        @media (min-width: 992px) {
            position:    relative;
            /* above the panels so the connector paints over the photo */
            z-index:     2;
            /* the photo's row only, centred in it (see .ctas) */
            grid-column: 2;
            grid-row:    1;
            align-self:  center;
            gap:         38px;
            margin-top:  0;
        }
    }

    .ctaTab {
        position:           relative;
        margin:             0;
        padding:            0;
        border:             0;
        background:         none;
        font:               var(--text-70cl);
        text-align:         left;
        color:              var(--color-plum);
        cursor:             pointer;
        transition:         color var(--transition-base);
        -webkit-appearance: none;
        appearance:         none;

        &.active {
            color: var(--cta-colour);
        }

        @media (hover: hover) and (pointer: fine) {
            &:not(.active):hover {
                color: var(--cta-colour);
            }
        }

        &:focus-visible {
            outline:        2px solid var(--color-purple);
            outline-offset: 4px;
        }

        /* the connector (group-11 129:432) – a 2px rule from 24px before the
           active title back across the gap and 110px into the photo: white
           where it crosses the photo, the title's colour over the page */
        @media (min-width: 992px) {
            &.active::before {
                content:        '';
                position:       absolute;
                top:            50%;
                right:          calc(100% + 24px);
                width:          calc(var(--ctas-gap) - 24px + 110px);
                height:         2px;
                translate:      0 -50%;
                background:     linear-gradient(to right, var(--color-white) 110px, currentColor 110px);
                pointer-events: none;
            }
        }
    }
}

/* the item swap – a short fade as the new panel comes in */
@keyframes ctasReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Page editor only – the canvas column is not the viewport, so the
   viewport-relative bleed is meaningless there: the photo sits inside the
   block's own card instead. */
.acf-block-preview .contentBlock.ctas {
    .ctas {
        margin-left: 0;
    }

    .ctaPanels {
        margin-right: 0;
        margin-left:  0;
    }
}