/**
 * JOY-TEX — Shared Final CTA Component
 * P06.4-A1 v1.1
 * Dependencies: section.css, typography.css, link.css
 *
 * Page-level configuration:
 * --joy-final-cta-image: url("...");
 * --joy-final-cta-overlay: rgba(...);
 * --joy-final-cta-bg-color: ...;
 * --joy-final-cta-bg-position: ...;
 *
 * No page-specific image is bundled in this component.
 */

.joy-final-cta {
    min-height: 26.25rem;

    /* Fallback keeps light text legible while the image loads or if it fails. */
    background-color: var(--joy-final-cta-bg-color, #182345);
    background-image:
        linear-gradient(
            var(--joy-final-cta-overlay, rgba(10, 18, 43, 0.62)),
            var(--joy-final-cta-overlay, rgba(10, 18, 43, 0.62))
        ),
        var(--joy-final-cta-image, none);
    background-size: cover;
    background-position: var(--joy-final-cta-bg-position, center);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.joy-final-cta__content {
    max-width: 50rem;
    margin-inline: auto;
}

.joy-final-cta__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    align-items: start;
}

.joy-final-cta__heading,
.joy-final-cta__details {
    min-width: 0;
}

.joy-final-cta__details .joy-section__intro {
    margin-top: 0;
}

/* Final CTA — Actions Spacing */

.joy-final-cta .joy-section__actions {
    margin-top: 3rem; /* 48px */
}

@media (min-width: 768px) and (max-width: 999px) {
    .joy-final-cta {
        min-height: 23.75rem;
    }

    .joy-final-cta__layout {
        column-gap: 2rem;
    }

    .joy-final-cta .joy-section__actions {
        margin-top: 2.5rem; /* 40px */
    }
}

@media (max-width: 767px) {
    .joy-final-cta {
        min-height: 26.25rem;
    }

    .joy-final-cta__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
    }

    .joy-final-cta .joy-section__actions {
        margin-top: 2rem; /* 32px */
        width: 100%;
    }

    .joy-final-cta .joy-section__actions .joy-button {
        display: flex;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        justify-content: center;
    }
}

@media (min-width: 1000px) {
    .joy-final-cta {
        background-attachment: fixed;
    }
}

/* =========================================================
   Final CTA — Wide Variant
   ========================================================= */

.joy-final-cta--wide .joy-final-cta__content {
    max-width: none;
}

@media (min-width: 1000px) {

    .joy-final-cta--wide .joy-final-cta__layout {
        display: grid;

        grid-template-columns:
            minmax(0, 45fr)
            minmax(0, 55fr);

        column-gap: clamp(5rem, 8vw, 8rem);

        align-items: start;
    }

    .joy-final-cta--wide .joy-final-cta__heading,
    .joy-final-cta--wide .joy-final-cta__details {
        min-width: 0;
    }
}