/* =================================================================== HERO section css =================================================================== */
.hero {
    position: relative;
    background: var(--ink);

    & .hero__swiper { height: 100%; }

    /* Fade stacks the slides; height:auto lets the flex wrapper stretch
       every slide to the tallest one, so no bare band shows under a short slide. */
    & .hero__slide {
        position: relative;
        display: flex; align-items: center;
        height: auto;
        min-height: 920px;
        padding-block: 200px 160px;
        background: var(--ink);
    }

    & .hero__media {
        position: absolute; inset: 0;
        overflow: hidden;

        &::after { position: absolute; inset: 0; background: var(--hero-shade); content: ''; }
    }

    & .hero__img { width: 100%; height: 100%; object-fit: cover; }

    & .hero__content {
        position: relative;
        max-width: 940px;
    }

    & .hero__eyebrow {
        display: flex; align-items: center;
        gap: var(--sp10);
        margin-bottom: var(--sp20);
        font-size: var(--f16);
        font-weight: 500;
        color: var(--white);
    }

    & .hero__badge {
        padding: 0 var(--sp5);
        background: var(--primary);
        border-radius: var(--r-sm);
        font-size: var(--f12);
        line-height: 1.8;
        text-transform: uppercase;
        white-space: nowrap;
    }

    & .hero__title {
        margin-bottom: var(--sp25);
        font-size: var(--f70);
        font-weight: 600;
        letter-spacing: var(--lsTight);
        color: var(--white);
    }

    & .hero__text {
        max-width: 560px;
        margin-bottom: var(--sp40);
        font-size: var(--f18);
        color: var(--white-muted);
    }

    & .hero__actions {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp20);
    }

    & .hero__controls {
        position: absolute; right: var(--gutter); bottom: var(--sp80);
        z-index: 2;
        display: flex;
        gap: var(--sp10);
    }

    & .hero__controls-wrap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; height: 100%; pointer-events: none; }
    & .hero__controls-wrap .container { position: relative; height: 100%; }
    & .hero__controls { pointer-events: auto; }
}

/* =================================================================== HERO responsive =================================================================== */
@media (max-width: 1199.98px) {
    .hero {
        & .hero__slide { min-height: 760px; padding-block: 170px 140px; }
    }
}

@media (max-width: 767.98px) {
    .hero {
        & .hero__slide { min-height: 0; padding-block: 140px 120px; }
        & .hero__controls { bottom: var(--sp40); }
    }
}