/**
 * CTA Banner Component Styles
 *
 * Desktop: two-column grid — headline left, description + CTAs right.
 * Mobile:  single column, stacked in document order.
 *
 * Auto-loaded when component is used via ProjectComponentRegistry.
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.block-cta-banner {
    padding-block: var(--spacing-12);
    position: relative;
}

/* ── Background colour variants ──────────────────────────────────────────── */

.block-cta-banner.has-bg-white {
    background-color: var(--color-white);
}

.block-cta-banner.has-bg-gray {
    background-color: var(--color-gray-50);
}

.block-cta-banner.has-bg-black {
    background-color: var(--color-black);
    color: var(--color-white);
}

.block-cta-banner.has-bg-black .block-cta-banner__headline {
    color: var(--color-white);
}

.block-cta-banner.has-bg-black .block-cta-banner__description {
    color: var(--color-gray-300);
}

.block-cta-banner.has-bg-transparent {
    background: transparent;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.block-cta-banner__container {
    margin-inline: auto;
}

.block-cta-banner__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}


@media (width >= 768px) {
    .block-cta-banner__inner {
        grid-template-columns: 2fr 3fr;
        gap: 4rem;
    }
}

@media (width >= 1024px) {
    .block-cta-banner__inner {
        gap: 7.75rem;
    }
}

/* ── Headline column (left on desktop) ────────────────────────────────────── */

.block-cta-banner__headline-col {
    display: flex;
    align-items: flex-start;
}

@media (width >= 768px) {
    .block-cta-banner__headline-col {
        max-width: 31.25rem;
    }
}

.block-cta-banner__headline {
    color: var(--color-black);
    font-family: var(--font-heading-family);
    font-size: clamp(1.75rem, 4vw, 2.625rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.15;
    margin: 0;
}

/* ── Content column (right on desktop) ────────────────────────────────────── */

.block-cta-banner__content-col {
    display: flex;
    flex-direction: column;
    gap: 2.1875rem;
}

@media (width >= 768px) {
    .block-cta-banner__content-col {
        max-width: 48.75rem;        
    }

    .block-cta-banner {
        padding-block: var(--spacing-16);
    }

}
/* ── Description (rich text) ─────────────────────────────────────────────── */

.block-cta-banner__description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text, #666666);
    font-weight: var(--font-weight-regular, 400);
}

.block-cta-banner__description p {
    margin-block: 0 0.75em;
}

.block-cta-banner__description p:last-child {
    margin-block-end: 0;
}

.block-cta-banner__description a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.block-cta-banner__description a:hover,
.block-cta-banner__description a:focus {
    text-decoration-thickness: 2px;
}

/* ── CTA button row ───────────────────────────────────────────────────────── */

.block-cta-banner__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
}

/* Match Video Component secondary CTA treatment (text + arrow pill). */
.block-cta-banner__cta.button--secondary {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-black);
    text-decoration: none;
    padding: 0;
    gap: var(--spacing-3);
    justify-content: flex-start;
}

.has-bg-black .block-cta-banner__cta.button--secondary,
.has-bg-black .block-cta-banner__cta.button--secondary:hover,
.has-bg-black .block-cta-banner__cta.button--secondary:focus,
.has-bg-black .block-cta-banner__cta.button--secondary:active {
    color: var(--color-white);
}

.block-cta-banner__cta.button--secondary .button__arrow {
    inline-size: var(--arrow-pill-inline-size, 2.625rem);
    block-size: var(--arrow-pill-block-size, 1.9375rem);
}

.block-cta-banner__cta.button--secondary .button__arrow svg {
    inline-size: var(--arrow-pill-icon-size, 0.875rem);
    block-size: var(--arrow-pill-icon-size, 0.875rem);
}

/* ── Mobile tweaks ────────────────────────────────────────────────────────── */

@media (width < 768px) {

    .block-cta-banner__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 2.8125rem;
    }

    .block-cta-banner__cta {
        width: 100%;
        justify-content: center;
    }
}

.block-cta-banner--bg-primary .block-cta-banner__button {
    background-color: var(--color-sandstone, #deb887);
    border-color: var(--color-sandstone, #deb887);
    color: var(--color-slate, #334155);
}

.block-cta-banner--bg-secondary .block-cta-banner__button,
.block-cta-banner--bg-light .block-cta-banner__button {
    background-color: var(--color-evergreen, #2d5945);
    border-color: var(--color-evergreen, #2d5945);
    color: var(--color-snow, #fff);
}

.block-cta-banner__button:hover,
.block-cta-banner__button:focus {
    opacity: 0.9;
    transform: translateY(-2px);
}