/* _page-cta-band.css — scoped to .hp-cta-band — public CTA band partial */

.hp-cta-band {
    /* Local token block — inherit from canon palette per mvc-ui-ux-design §2 */
    --ink:        #0b1b34;
    --ink-soft:   #2d3a52;
    --muted:      #6b7487;
    --hair:       #e5e7ef;
    --paper:      #fbfbfd;
    --wash:       #f3f5fb;
    --brand:      var(--zf-primary,   #1870d1);
    --brand-deep: var(--zf-secondary, #0f4ea3);

    margin-top: 40px;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    background: transparent;
}

/* Inset panel (no background image variant) — flat lavender wash with rounded corners.
   Swap the --hp-cta-bg value for a different tone:
       #f5f5ff   = picked default (very light lavender, matches reference)
       #f3f5fb   = canon --wash token (cool gray-blue, slightly darker)
       #f0f3ff   = soft periwinkle
       #eef0fa   = a touch more saturated cool gray
       #e9ecff   = noticeably bluer
       #f7f8ff   = even softer than #f5f5ff
*/
.hp-cta-band__panel {
    --hp-cta-bg: #f5f5ff;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    /* Fills the parent .container so the panel aligns with FAQ width on the same page. */
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    background: var(--hp-cta-bg);
}

/* Background-image variant — full-bleed with brand overlay (no inset panel) */
.hp-cta-band--has-bg {
    padding: 0;
}
.hp-cta-band--has-bg .hp-cta-band__panel {
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    border-radius: 28px;
}
.hp-cta-band--has-bg .hp-cta-band__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 27, 52, 0.78), rgba(15, 78, 163, 0.78));
    z-index: -1;
}
.hp-cta-band--has-bg .hp-cta-band__eyebrow,
.hp-cta-band--has-bg .hp-cta-band__heading,
.hp-cta-band--has-bg .hp-cta-band__heading-rest,
.hp-cta-band--has-bg .hp-cta-band__subtitle {
    color: #fff;
}
.hp-cta-band--has-bg .hp-cta-band__heading-accent {
    color: #ffd86b;
}

.hp-cta-band--has-bg .hp-cta-band__panel {
    background-image: var(--zf-cta-bg-image, none);
}

.hp-cta-band__illustration {
    text-align: center;
}

.hp-cta-band__illustration img {
    max-width: 100%;
    height: auto;
}

/* Gradient panel — admin-managed two-stop gradient via --hp-cta-bg.
   The Razor partial emits `--hp-cta-bg: linear-gradient(135deg, primary 0%, secondary 100%)`
   on the panel's inline style and adds the modifier class below so we can adjust the
   foreground tones. */
.hp-cta-band__panel--gradient {
    color: #fff;
}
.hp-cta-band__panel--gradient .hp-cta-band__heading,
.hp-cta-band__panel--gradient .hp-cta-band__heading-rest,
.hp-cta-band__panel--gradient .hp-cta-band__heading-accent,
.hp-cta-band__panel--gradient .hp-cta-band__subtitle {
    color: #fff;
}
.hp-cta-band__panel--gradient .hp-cta-band__eyebrow {
    color: #fff;
}
.hp-cta-band__panel--gradient .hp-cta-band__eyebrow::before {
    background: rgba(255, 255, 255, 0.85);
}
.hp-cta-band__panel--gradient .hp-cta-band__btn--secondary {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.95);
}
.hp-cta-band__panel--gradient .hp-cta-band__btn--secondary:hover,
.hp-cta-band__panel--gradient .hp-cta-band__btn--secondary:focus {
    background: #fff;
    color: var(--brand-deep);
}
/* Tone the decorative dots so they read against a saturated gradient */
.hp-cta-band__panel--gradient .hp-cta-band__dot--purple,
.hp-cta-band__panel--gradient .hp-cta-band__dot--purple-sm {
    background: rgba(255, 255, 255, 0.55);
}
.hp-cta-band__panel--gradient .hp-cta-band__dot--ring {
    border-color: rgba(255, 255, 255, 0.45);
}

/* Overlap-top — admin-managed toggle. Lets the illustration spill above the
   rounded card so a portrait subject's head breaks out of the box. The image
   is pinned to the bottom of its column and grown taller than the panel, so
   its top spills into the negative space above the panel's rounded edge. */
.hp-cta-band__panel--overlap-top {
    overflow: visible;
    /* Trim the top padding for a dramatic upward spill, kill the bottom
       padding so the illustration column reaches the panel's actual rounded
       bottom edge — without this the bottom padding (~32-56px) leaves the
       laptop floating above the rounded curve. */
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-bottom: 0;
    /* Modest height bump (~20% above the content-driven default) so the
       gradient card has presence without dwarfing the text. Lands around
       384px on a 1600px desktop. */
    min-height: clamp(336px, 24vw, 432px);
    /* The panel is itself a flex column so the inner Bootstrap row stretches
       to the panel's content height. Without this, the row sizes to its
       intrinsic content (~290px) and `align-self: flex-end` on the image
       column anchors to the row's bottom — which sits in the upper half of
       the panel, leaving a dead band of ~134px below the illustration. */
    display: flex;
    flex-direction: column;
}
.hp-cta-band__panel--overlap-top > .row {
    flex: 1 1 auto;
}
/* The .row inside the panel keeps Bootstrap's `align-items-center` !important;
   the illustration column overrides it per-item below via `align-self`. */
.hp-cta-band__illustration--overlap-top {
    align-self: flex-end;
    display: flex;
    justify-content: center;
}
.hp-cta-band__illustration--overlap-top img {
    display: block;
    /* Pin the image's bottom to the panel's bottom edge, then grow it tall
       enough that its top extends well above the panel.

       margin-bottom cancels the panel's bottom padding so the bottom of the
       illustration sits flush with the rounded panel edge instead of floating
       above it. margin-top is the upward spill above the panel.

       NOTE: CSS does not support `-clamp(...)` (unary minus on a function),
       so all negatives are built via calc(). */
    margin-top: calc(-1 * clamp(110px, 16vw, 200px));
    margin-left: auto;
    margin-right: auto;
    /* Panel min-height now matches the image height range, so the image's
       bottom can sit flush with the rounded card edge — just a 1px nudge
       to avoid sub-pixel rounding leaving a visible seam. */
    margin-bottom: -1px;
    max-height: clamp(420px, 46vw, 600px);
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 24px 38px rgba(11, 27, 52, 0.22));
}

/* Decorative floating dots (right column) — purely cosmetic */
.hp-cta-band__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.hp-cta-band__dot {
    position: absolute;
    border-radius: 999px;
    display: block;
}
.hp-cta-band__dot--red {
    width: 9px; height: 9px;
    background: #ff5b6e;
    top: 12%; right: 42%;
}
.hp-cta-band__dot--purple {
    width: 12px; height: 12px;
    background: var(--brand-deep);
    top: 36%; right: 6%;
}
.hp-cta-band__dot--ring {
    width: 26px; height: 26px;
    border: 2px solid color-mix(in srgb, var(--brand-deep) 25%, var(--hair));
    background: transparent;
    top: 28%; right: 50%;
}
.hp-cta-band__dot--purple-sm {
    width: 8px; height: 8px;
    background: var(--brand-deep);
    bottom: 20%; right: 48%;
}
.hp-cta-band__dot--red-sm {
    width: 6px; height: 6px;
    background: #ff5b6e;
    bottom: 12%; right: 14%;
}

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

/* Eyebrow with leading dash — matches reference's `— MOBILE FIRST` */
.hp-cta-band__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 0.85rem;
}
.hp-cta-band__eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.hp-cta-band__heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 0.85rem;
}

.hp-cta-band__heading-accent {
    color: var(--brand);
    font-weight: 700;
}

.hp-cta-band__subtitle {
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 48ch;
    margin-bottom: 1.75rem;
}

.hp-cta-band__buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.hp-cta-band__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
    border: 2px solid transparent;
}

.hp-cta-band__btn--primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 80%, transparent);
}
.hp-cta-band__btn--primary:hover,
.hp-cta-band__btn--primary:focus {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #fff;
    transform: translateY(-1px);
}

.hp-cta-band__btn--secondary {
    background: #fff;
    color: var(--ink);
    border-color: var(--brand);
}
.hp-cta-band__btn--secondary:hover,
.hp-cta-band__btn--secondary:focus {
    background: color-mix(in srgb, var(--brand) 8%, #fff);
    color: var(--brand-deep);
    transform: translateY(-1px);
}

.hp-cta-band__btn i {
    font-size: 0.95em;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .hp-cta-band__panel {
        padding: 2rem 1.5rem;
        border-radius: 22px;
    }
    .hp-cta-band__illustration {
        margin-top: 1.5rem;
    }
    .hp-cta-band__panel--overlap-top {
        /* Below the lg breakpoint the row stacks, so the panel doesn't
           need to match the image height — let it size to its content. */
        min-height: 0;
    }
    .hp-cta-band__illustration--overlap-top img {
        margin-top: 0;
        margin-bottom: 0;
        max-height: 320px;
    }
    .hp-cta-band__buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .hp-cta-band__btn {
        justify-content: center;
    }
    /* Hide some decorative dots on small screens to reduce noise */
    .hp-cta-band__dot--ring,
    .hp-cta-band__dot--red {
        display: none;
    }
}

/* Dark theme — per mvc-ui-ux-design §2 */
html[data-theme="dark"] .hp-cta-band {
    --ink:      #e8ecf5;
    --ink-soft: #c6cbd8;
    --muted:    #8d95a8;
    --hair:     #2a3142;
    --paper:    #161a25;
    --wash:     #1c2231;
}
/* Dark mode default panel background. Sets the same --hp-cta-bg variable the
   panel reads, so the admin's inline style (solid colour or gradient) still
   wins via cascade specificity. */
html[data-theme="dark"] .hp-cta-band__panel {
    --hp-cta-bg: linear-gradient(135deg,
        rgba(24, 112, 209, 0.18),
        rgba(15, 78, 163, 0.12));
}
/* Soften the saturated admin gradient slightly in dark mode so it doesn't burn */
html[data-theme="dark"] .hp-cta-band__panel--gradient {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .hp-cta-band__btn--secondary {
    background: #1c2231;
    color: var(--ink);
}