/* =========================================================================
   PB CTA Strip (acf/pb-f-cta-strip)
   All rules scoped under .pb-section-pb-f-cta-strip.
   Closing CTA band — full-width image background, multiply overlay,
   heading with an inline accent first word, optional subtext,
   1..N right-arrow buttons.

   Layout responsibilities of this file:
   - Variant A (1 button, no subtext): heading L / button R, single row.
   - Variant B (2 buttons, with subtext): heading+subtext L / buttons R, single row.
   - Variant C (3+ buttons): heading top row, buttons row wraps below,
     first button anchored left, remaining grouped right.

   Right-arrow button colour presets (.arrow-button.arrow-{orange|teal|teal-light|
   teal-dark|teal-mid|white}) are defined globally in
   assets/styles/parts/pb-button.css — DO NOT redefine them here.
   ========================================================================= */

/* ---- Section base -------------------------------------------------------- */

.pb-section-pb-f-cta-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---- Section background (used when no bg image) -------------------------- */
/* Background colour + the contrast-safe body/heading derivation come from the
   global .pb-section.bg-* rules (pb-section-bgcolors.css · Phase 4 G2) — the
   single source of truth. This block no longer sets its own .bg-* backgrounds.

   Removed in Phase 4: .bg-teal-dark / .bg-white (duplicated the global);
   .bg-teal-mid (mis-pointed to --colour-primary-teal — now resolves to the
   correct --colour-teal-mid globally); .bg-aqua ('aqua' is remapped to
   .bg-teal-light by pb_bg_class()); .bg-light-grey using
   --colour-complementary-light-grey (#e6ebeb — now uses the global
   --colour-background-light #f7f8fa).

   Only the accent first word is derived locally (below): it is a brand
   highlight, not generic body text, so it is not covered by G2. */

/* ---- Overlay ------------------------------------------------------------- */

.pb-section-pb-f-cta-strip .pb-cta-strip-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

/* ---- Inner content wrapper ---------------------------------------------- */
/* Two-column flex: LEFT = heading (+ optional subtext), RIGHT = buttons row.
   Wraps when the buttons row is flagged to drop below the heading. */

.pb-section-pb-f-cta-strip .pb-cta-strip-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1267px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;        /* vertically centre L/R columns */
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 50px;
}

.pb-section-pb-f-cta-strip .pb-cta-strip-content.buttons-vertical-top {
    align-items: flex-start;
}

.pb-section-pb-f-cta-strip .pb-cta-strip-content.buttons-vertical-bottom {
    align-items: flex-end;
}

@media (min-width: 768px) {
    .pb-section-pb-f-cta-strip .pb-cta-strip-content {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1280px) {
    .pb-section-pb-f-cta-strip .pb-cta-strip-content {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---- LEFT column: heading + optional subtext ---------------------------- */

.pb-section-pb-f-cta-strip .pb-cta-strip-text {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* When the buttons row will wrap below, force the LEFT column to be the
   full row so the H2 occupies its own line and the buttons row gets its own
   line beneath it. */
.pb-section-pb-f-cta-strip .pb-cta-strip-content.buttons-wrap-below .pb-cta-strip-text {
    flex-basis: 100%;
}

/* ---- Heading ------------------------------------------------------------- */

.pb-section-pb-f-cta-strip .pb-cta-heading {
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--colour-white);
}

@media (min-width: 768px) {
    .pb-section-pb-f-cta-strip .pb-cta-heading {
        font-size: 36px;
    }
}

@media (min-width: 1130px) {
    .pb-section-pb-f-cta-strip .pb-cta-heading {
        font-size: 40px;
    }
}

/* Heading colour is DERIVED, not author-chosen (Phase 4):
   - On a solid .bg-*, the global heading rules (.pb-section.bg-* h2, specificity
     0,2,1 in pb-section-bgcolors.css) set the contrast-safe colour and override
     the white base above (0,2,0).
   - On a background image (.has-bg-image, no .bg-* class) the dark multiply
     overlay means the white base is correct.
   The former .heading-color-{white,teal-dark,red} modifier rules are removed. */

/* Both spans render inline so the accent word + rest read as one phrase. */
.pb-section-pb-f-cta-strip .pb-cta-heading .cta-heading-accent,
.pb-section-pb-f-cta-strip .pb-cta-heading .cta-heading-main {
    display: inline;
}

/* ---- Accent first word (DERIVED brand highlight) ------------------------- */
/* The accent word is a brand highlight, not generic body text, so its colour is
   NOT covered by the G2 section `color` derivation — it is derived here, per
   background, always meeting WCAG contrast for large heading text (≥3:1) and,
   where achievable, ≥4.5:1.

   Default (background image, no .bg-* class): teal-light reads as the brand
   highlight over the dark multiply overlay (5.29:1 on dark teal, 7.46:1 on
   black). */
.pb-section-pb-f-cta-strip .pb-cta-heading .cta-heading-accent {
    color: var(--colour-teal-light);
}

/* LIGHT backgrounds → orange highlight (#e61e09: 4.6:1 on white/light-grey AA;
   a strong brand pop against the derived teal-dark heading). */
.pb-section-pb-f-cta-strip.bg-white .pb-cta-heading .cta-heading-accent,
.pb-section-pb-f-cta-strip.bg-light-grey .pb-cta-heading .cta-heading-accent {
    color: var(--colour-primary-orange);
}

/* DARK teal-dark / black → teal-light highlight (5.29:1 / 7.46:1). */
.pb-section-pb-f-cta-strip.bg-teal-dark .pb-cta-heading .cta-heading-accent,
.pb-section-pb-f-cta-strip.bg-black .pb-cta-heading .cta-heading-accent {
    color: var(--colour-teal-light);
}

/* SATURATED teal / teal-mid / orange → teal-light fails contrast here, so the
   accent matches the white heading (the only safe foreground on these grounds
   per §2.2/§2.3). It reads as one phrase with the heading. */
.pb-section-pb-f-cta-strip.bg-teal .pb-cta-heading .cta-heading-accent,
.pb-section-pb-f-cta-strip.bg-teal-mid .pb-cta-heading .cta-heading-accent,
.pb-section-pb-f-cta-strip.bg-orange .pb-cta-heading .cta-heading-accent {
    color: var(--colour-white);
}

/* teal-light background → teal-dark accent (5.29:1; matches the derived dark
   heading — white would be 1.95:1 and orange ~2.4:1, both failing). */
.pb-section-pb-f-cta-strip.bg-teal-light .pb-cta-heading .cta-heading-accent {
    color: var(--colour-teal-dark);
}

/* ---- Subtext ------------------------------------------------------------- */
/* Subtext colour is DERIVED, not author-chosen (Phase 4): it inherits the
   section's derived foreground `color` (set per background by G2 in
   pb-section-bgcolors.css) — teal-dark on light backgrounds, white on dark.
   The white base below only takes effect for the background-image case
   (.has-bg-image, no .bg-* class) where the dark multiply overlay needs light
   text; on any solid .bg-* the inherited derived colour wins.
   The former heading-color / .bg-aqua subtext + heading flips are removed —
   the global derivation now handles every light/dark pairing. */

.pb-section-pb-f-cta-strip .pb-cta-subtext {
    margin: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    color: var(--colour-white); /* image-overlay default; overridden by inherit on solid .bg-* */
    opacity: 0.9; /* meets 1.4.3 against the dark teal/overlay */
    max-width: 470px;
}

/* On a solid background, follow the section's contrast-safe derived colour. */
.pb-section-pb-f-cta-strip:not(.has-bg-image) .pb-cta-subtext {
    color: inherit;
    opacity: 1;
}

.pb-section-pb-f-cta-strip .pb-cta-subtext p {
    font-size: 20px;
}

/* ---- RIGHT column: buttons row ------------------------------------------ */

.pb-section-pb-f-cta-strip .pb-cta-strip-buttons {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .pb-section-pb-f-cta-strip .pb-cta-strip-buttons {
        gap: 24px;
    }
}

/* Variant C: when the buttons row sits below the heading it spans the full
   width with first-left / rest-right grouping. The first child gets
   margin-right: auto, which pushes every subsequent sibling to the right
   edge while keeping them grouped together. */
.pb-section-pb-f-cta-strip .pb-cta-strip-content.buttons-wrap-below .pb-cta-strip-buttons {
    flex-basis: 100%;
    width: 100%;
    justify-content: flex-end;
}

.pb-section-pb-f-cta-strip .pb-cta-strip-content.buttons-wrap-below .pb-cta-strip-buttons > :first-child {
    margin-right: auto;
}

/* ---- Editor-preview placeholder heading --------------------------------- */

.pb-section-pb-f-cta-strip .pb-cta-heading.is-placeholder {
    opacity: 0.7;
    font-style: italic;
    text-transform: none;
}

/* ---- Accessibility: focus-visible on arrow buttons ---------------------- */
/* WCAG 2.4.7 / 2.4.13 — the shared .arrow-button currently ships without
   a focus-visible state. We add one inside the CTA strip's scope so this
   block doesn't regress on keyboard focus. The ring uses a 3px solid
   outline with offset for ≥3:1 against any of the documented overlay /
   background colours (1.4.11 non-text contrast). */
.pb-section-pb-f-cta-strip .pb-cta-strip-buttons .arrow-button:focus {
    outline: none;
}

.pb-section-pb-f-cta-strip .pb-cta-strip-buttons .arrow-button:focus-visible {
    outline: 3px solid var(--colour-white);
    outline-offset: 3px;
    border-radius: 2px;
}

/* On light section backgrounds, switch the ring to dark teal so the
   contrast against the page background is still ≥3:1. (`.bg-teal-light` covers
   the value formerly stored as 'aqua', now remapped by pb_bg_class().) */
.pb-section-pb-f-cta-strip.bg-white .pb-cta-strip-buttons .arrow-button:focus-visible,
.pb-section-pb-f-cta-strip.bg-light-grey .pb-cta-strip-buttons .arrow-button:focus-visible,
.pb-section-pb-f-cta-strip.bg-teal-light .pb-cta-strip-buttons .arrow-button:focus-visible {
    outline-color: var(--colour-teal-dark);
}

/* ---- Accessibility: target size (2.5.8) --------------------------------- */
/* Belt-and-braces minimum hit area. The shared arrow button is already
   ~42px tall on desktop; this just guarantees ≥24px on the smallest
   screens and ≥44px on touch viewports where it matters most. */
.pb-section-pb-f-cta-strip .pb-cta-strip-buttons .arrow-button {
    min-height: 44px;
}

/* ---- Mobile (< 768px) --------------------------------------------------- */
/* On narrow screens the whole strip stacks: heading on top, subtext below
   it, buttons row stacked full-width beneath. */

@media (max-width: 767px) {

    .pb-section-pb-f-cta-strip .pb-cta-strip-content {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .pb-section-pb-f-cta-strip .pb-cta-strip-text {
        flex-basis: auto;
        gap: 8px;
    }

    .pb-section-pb-f-cta-strip .pb-cta-strip-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
        justify-content: flex-start;
    }

    /* On mobile, the wrap-below first-child margin trick is unnecessary
       (everything stacks); cancel it so it doesn't leak. */
    .pb-section-pb-f-cta-strip .pb-cta-strip-content.buttons-wrap-below .pb-cta-strip-buttons > :first-child {
        margin-left: 0;
        margin-right: 0;
    }

}