/*
 * Block: CTA Section
 * Full-section button with slide-up text swap and background change on hover
 */

.cta-section {
    position: relative;
    overflow: hidden;
    padding-block: 0;
}

section.bg--dark + .cta-section .cta-section__link {
    border-top: 1px solid var(--border-color-dark);
}

/* The entire section is one big clickable link */
.cta-section__link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding-block: var(--section-padding-block);
}

/* Slider: clips the two text blocks, shows one at a time */
.cta-section__slider {
    position: relative;
    overflow: hidden;
    display: grid;
    z-index: 1;
}

.cta-section__text {
    grid-area: 1 / 1;
    font-size: var(--h1);
    font-family: 'DrukCond';
    text-transform: uppercase;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default text: visible, slides up on hover */
.cta-section__text--default {
    transform: translateY(0);
}

/* Hover text: below, slides up into view on hover */
.cta-section__text--hover {
    transform: translateY(100%);
}

/* Hover background overlay: slides up from bottom */
.cta-section__hover-bg {
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

/* =============================================
   TEXT COLOR BY BACKGROUND
   ============================================= */

.cta-section__link.bg--dark .cta-section__text {
    color: var(--base-ultra-light);
}

.cta-section__link.bg--dark .cta-section__text--hover {
    color: var(--base);
}

.bg--primary .cta-section__text.cta-section__text--default {
    color: var(--base);
}

.bg--primary .cta-section__text--hover {
    color: var(--bg-light);
}

/* =============================================
   HOVER STATE (Desktop)
   ============================================= */

.cta-section__link:hover {
    color: var(--base);
}

.cta-section__link:hover .cta-section__text--default {
    transform: translateY(-100%);
}

.cta-section__link:hover .cta-section__text--hover {
    transform: translateY(0);
}

.cta-section__link:hover .cta-section__hover-bg {
    transform: translateY(0);
}

/* =============================================
   MOBILE: show only hover text, animate bg
   ============================================= */

@media (max-width: 768px) {
    .cta-section__text--default {
        display: none;
    }

    .cta-section__text--hover {
        transform: translateY(0);
    }

    /* Start with initial bg text color, transition to hover color */
    .cta-section__link.bg--dark .cta-section__text--hover {
        color: var(--base-ultra-light);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cta-section__link.bg--dark:hover .cta-section__text--hover {
        color: var(--base);
    }

    .cta-section__link:hover .cta-section__hover-bg {
        transform: translateY(0);
    }

    .bg--primary .cta-section__text--hover {
        color: var(--base);
    }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    .cta-section__text,
    .cta-section__hover-bg {
        transition: none !important;
    }
}