/*
==========================================================
CTA BANNER BLOCK — cta_banner.css
==========================================================
WHAT IT IS:
A full width call-to-action banner strip designed to
sit between page sections as a conversion nudge.

WHAT IT DOES:
Renders a compact full width banner pulling from ACF
fields. Supports optional background image with overlay,
eyebrow text, heading, subheading, and two CTA buttons.
Lighter weight than the Hero block — no minimum height,
designed as a section divider rather than a page opener.

HOW TO USE:
1. In the WordPress block editor add the "CTA Banner"
   block to any page or post.
2. Fill in the Heading field (required).
3. Optionally add Eyebrow text, Subheading, and buttons.
4. Set alignment — left or center.
5. Upload a background photo (focus, darkening, optional
   phone photo) or choose a background color.
6. Layout: width, arrangement (stacked / words left /
   buttons left), text alignment, space above / below.
7. Save and preview the page.
Editor organization: BATCH_8_PLAN.md §32.

TO SIMPLIFY TO OPTION A (color, heading, one button):
- Remove cta_bg_image and overlay ACF fields
- Remove cta_eyebrow and cta_subheading ACF fields
- Remove cta_btn_2 ACF fields
- Remove .cta_overlay, .cta_eyebrow, .cta_subheading styles

TO SIMPLIFY TO OPTION B (image, heading, subheading, one button):
- Remove cta_btn_2 ACF fields
- Remove cta_eyebrow ACF field
- Remove .cta_eyebrow styles below

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

/* Banner wrapper */
.cta_banner {
    position: relative;
    width: 100%;
    background-color: var(--color-bg-dark);
    background-size: cover;
    background-position: var(--cta-pos, center);
    background-repeat: no-repeat;
    padding: var(--space-16) 0;
    margin: var(--space-12) 0;
}

/* CTA Banner Style — Full Width */
.cta_style_full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* CTA Banner Style — Contained */
.cta_style_contained {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Overlay */
.cta_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Inner content */
.cta_inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Alignment variants */
.cta_align_center .cta_inner {
    text-align: center;
}

.cta_align_center .cta_btn_row {
    justify-content: center;
}

.cta_align_left .cta_inner {
    text-align: left;
}

/* Eyebrow — structural base in style.css §10c.
   Dark background context: text-inverse color + reduced opacity.
   BOILERPLATE NOTE: Full rule kept here so this block is self-contained
   when copied to a new project. On a live project, keep only the context-
   specific overrides (color, opacity) and rely on §10c for shared structure. */
.cta_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-inverse);
    opacity: 0.7;
    margin: 0 0 var(--space-3) 0;
}

/* Heading */
.cta_heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverse);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4) 0;
    max-width: 780px;
}

.cta_align_center .cta_heading {
    max-width: 100%;
}

/* Subheading */
.cta_subheading {
    font-size: var(--text-md);
    color: var(--color-text-inverse-soft);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-8) 0;
    max-width: 620px;
}

.cta_align_center .cta_subheading {
    margin-left: auto;
    margin-right: auto;
}

/* ── Section Background Mode (Batch 8F Round 1) ──────────────
   .cta_banner's base rule already defaults to a dark background
   (--color-bg-dark) with inverse heading/eyebrow/subheading text, above
   — that is "Theme Default" and needs no class at all. "Background" and
   "Alternate" resolve to light tokens (--color-bg / --color-bg-alt), so
   their classes flip text back to normal (dark) colors for legibility.
   "Dark" and "Accent" need no override. Custom mode's explicit Light/Dark
   text-treatment field drives .cta_text_light/.cta_text_dark the same
   way; .cta_text_light needs no rule since it matches the existing
   default exactly. */
.cta_bg_background .cta_heading,
.cta_bg_alt_background .cta_heading,
.cta_text_dark .cta_heading {
    color: var(--color-primary);
}

.cta_bg_background .cta_eyebrow,
.cta_bg_alt_background .cta_eyebrow,
.cta_text_dark .cta_eyebrow,
.cta_bg_background .cta_subheading,
.cta_bg_alt_background .cta_subheading,
.cta_text_dark .cta_subheading {
    color: var(--color-text-muted);
}

/* CTA button styles — defined in style.css §10b.
   BOILERPLATE NOTE: Full rules kept here so this block is self-contained
   when copied to a new project. On a live project, remove these and rely
   on the shared definitions in §10b. */

/* Button row */
.cta_btn_row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-8);
}

/* Primary button */
.cta_btn_primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.cta_btn_primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}

/* Secondary button — outline on dark */
.cta_btn_secondary {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.cta_btn_secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
}

/* ── Section Background Mode — button contrast (Codex defect 3) ─────
   Same reasoning as hero.css's matching section: the two buttons above
   are tuned for the Theme Default/Dark background this block originally
   always had. On a light background (Background, Alternate, Custom +
   Dark Text), the secondary button's white border/text is nearly
   invisible; on an Accent background, the primary button's own accent
   fill blends into its parent section. Dark and Custom + Light Text are
   deliberately left untouched. */

.cta_bg_background .cta_btn_secondary,
.cta_bg_alt_background .cta_btn_secondary,
.cta_text_dark .cta_btn_secondary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.cta_bg_background .cta_btn_secondary:hover,
.cta_bg_alt_background .cta_btn_secondary:hover,
.cta_text_dark .cta_btn_secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.cta_bg_accent .cta_btn_primary {
    background-color: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.cta_bg_accent .cta_btn_primary:hover {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .cta_banner {
        padding: var(--space-12) 0;
    }

    .cta_heading {
        font-size: var(--text-2xl);
    }

    .cta_subheading {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    .cta_banner {
        padding: var(--space-10) 0;
        margin: var(--space-8) 0;
    }

    .cta_heading {
        font-size: var(--text-xl);
    }

    .cta_btn_row {
        flex-direction: column;
        align-items: stretch;
    }

    .cta_align_center .cta_btn_row {
        align-items: center;
    }

    .cta_btn_primary,
    .cta_btn_secondary {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================
   Batch 8H — CTA Banner (BATCH_8_PLAN.md §32)
   Everything below needs a class or value that only appears when the
   editor changes a setting, so saved banners (and the footer-bookend
   pattern, which keys off .cta_banner_variant_*) look as before.
   ========================================================== */

/* ── Arrangement, by the banner's own width ───────────────
   .cta_inner is a size container, so the side-by-side arrangements
   follow the room the banner actually has: a phone or a narrow Column
   gets today's stacked layout (words first, then buttons). Without
   container-query support everything stays stacked. Words stay first in
   the page code; "Buttons left" only changes the visual side. */
.cta_inner {
    container: cta / inline-size;
}

@container cta (min-width: 720px) {
    .cta_arrange_words_left .cta_content,
    .cta_arrange_buttons_left .cta_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
    }

    .cta_arrange_buttons_left .cta_content {
        flex-direction: row-reverse;
    }

    .cta_arrange_words_left .cta_words,
    .cta_arrange_buttons_left .cta_words {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cta_arrange_words_left .cta_actions,
    .cta_arrange_buttons_left .cta_actions {
        flex: 0 1 auto;
        max-width: 50%;
    }

    /* Side by side, the gaps between the words and the buttons come from
       the row gap instead of stacked margins. */
    .cta_arrange_words_left .cta_words > :last-child,
    .cta_arrange_buttons_left .cta_words > :last-child {
        margin-bottom: 0;
    }

    .cta_arrange_words_left .cta_btn_row,
    .cta_arrange_buttons_left .cta_btn_row {
        margin-top: 0;
    }
}

/* ── Short note under the buttons ─────────────────────── */
.cta_note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-inverse-soft);
    line-height: var(--leading-normal);
}

.cta_bg_background .cta_note,
.cta_bg_alt_background .cta_note,
.cta_text_dark .cta_note {
    color: var(--color-text-muted);
}

/* ── Buttons ───────────────────────────────────────────────
   An "Open contact form" button with no backup link is printed hidden
   and only revealed by the contact drawer script; .btn's display rule
   would otherwise override the hidden attribute. */
.cta_btn_row [hidden] {
    display: none;
}

/* Screen-reader-only words (new-tab notice). */
.cta_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Background photo: focus and phone photo ─────────────
   cta_banner.php sets --cta-pos / --cta-pos-phone only for a choice other
   than Middle / Same as above. A phone photo is passed as --cta-photo /
   --cta-photo-phone so this rule can swap it at the phone step. */
.cta_has_phone_photo {
    background-image: var(--cta-photo);
}

@media (max-width: 480px) {
    .cta_has_photo {
        background-position: var(--cta-pos-phone, var(--cta-pos, center));
    }

    .cta_has_phone_photo {
        background-image: var(--cta-photo-phone);
    }
}

/* ── Space above / below the content (shared standard, §25) ─
   Normal = the padding above (64 / 48 / 40px). Two-class selectors so the
   choice beats the breakpoint rules. */
.cta_banner.cta_banner_space_top_none      { padding-top: 0; }
.cta_banner.cta_banner_space_top_small     { padding-top: var(--space-10); }
.cta_banner.cta_banner_space_top_large     { padding-top: calc(var(--space-16) * 2); }
.cta_banner.cta_banner_space_bottom_none   { padding-bottom: 0; }
.cta_banner.cta_banner_space_bottom_small  { padding-bottom: var(--space-10); }
.cta_banner.cta_banner_space_bottom_large  { padding-bottom: calc(var(--space-16) * 2); }

@media (max-width: 768px) {
    .cta_banner.cta_banner_space_top_small    { padding-top: var(--space-8); }
    .cta_banner.cta_banner_space_top_large    { padding-top: var(--space-20); }
    .cta_banner.cta_banner_space_bottom_small { padding-bottom: var(--space-8); }
    .cta_banner.cta_banner_space_bottom_large { padding-bottom: var(--space-20); }
}

@media (max-width: 480px) {
    .cta_banner.cta_banner_space_top_small    { padding-top: var(--space-6); }
    .cta_banner.cta_banner_space_top_large    { padding-top: var(--space-16); }
    .cta_banner.cta_banner_space_bottom_small { padding-bottom: var(--space-6); }
    .cta_banner.cta_banner_space_bottom_large { padding-bottom: var(--space-16); }
}

/* ── Label look: Rounded tag (Batch 8H §28 / §32) ──────────
   Added only when the editor picks Rounded tag; Plain text (the default)
   adds nothing. Uses the label's own color (currentColor). The first
   border line is the fallback for browsers without color-mix().
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.cta_eyebrow.cta_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Editor-only messages ──────────────────────────────────
   Printed by cta_banner.php in the editor preview only. */
.cta_preview_empty,
.cta_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: center;
}

.cta_preview_empty {
    margin: var(--space-4) auto;
}