/*---*\
    CTA Section (Text-Only)

    Centered headline stack + primary/secondary CTAs on gradient or
    gradient-over-photo backgrounds (Figma 10279:15181, 10279:15164).

    KEY FEATURES:
    - Single WYSIWYG field drives subheading, heading, body, and button links.
    - Solid brand gradient (.bg-gradient) or full-bleed photo (.has-bg-image)
      with a semi-transparent gradient overlay for legibility.
    - Centered subheading row with brand icons on both sides of the label text.
    - Narrow readable copy width on .cta-section__inner (~50rem max).

    LIMITATIONS:
    - Decorative backdrop markup renders only when an admin selects a background
      image; gradient-only variant has no photo layer.
    - Primary/secondary inverse button hovers for .has-bg-image live in
      global.css, not this file.

    IMPLEMENTATION NOTES:
    - Section shell: .section-padding, .bg-gradient or .has-bg-image (markup in
      block-templates/general/cta-section.php).
    - Dependencies: global.css (buttons, .sub-heading, .bg-gradient utilities),
      custom-properties.css (sitewide tokens), trumps.css (.object-fit on photo).
    - .sub-heading::after { display: block } overrides global.css so the trailing
      icon shows when the row is centered (global hides ::after unless
      .justify-content-center is present).

\*---*/

.cta-section {
    position: relative;
    text-align: center;
}

/* Match dark-band utilities so headings/body/links invert like .bg-gradient */
.cta-section.has-bg-image {
    color: var(--color-white);
    --color-heading: var(--color-heading-inverse);
    --color-body: var(--color-body-inverse);
    --color-link: var(--color-secondary-inverse);
    --color-link-hover: var(--color-white);
}

.cta-section .sub-heading {
    color: var(--color-accent-green);
    justify-content: center;
}

.cta-section .sub-heading::after {
    display: block;
}

.cta-section.bg-gradient .cta-section__inner,
.cta-section.has-bg-image .cta-section__inner {
    color: var(--color-body-inverse);
    --color-body: var(--color-body-inverse);
}

/* Optional photo layer + gradient overlay. Stacking: image -> overlay -> content. */
.cta-section__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cta-section__backdrop-image {
    display: block;
    width: 100%;
    height: 100%;
}

.cta-section__backdrop-overlay {
    position: absolute;
    inset: 0;
    /*
     * Angle matches Figma "Gradient with Image BG" (node 10279:15164).
     * Stops use brand hover greens/blues at 85% mix for readability.
     */
    background: linear-gradient(
        244deg,
        color-mix(in srgb, var(--color-secondary-hover) 85%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-hover) 85%, transparent) 100%
    );
}

.cta-section__inner {
    position: relative;
    z-index: 1;
}