/* Homepage hero: 6 collection banners (resources/views/home/partials/hero.blade.php) */
.va-hero {
    --hero-h: clamp(30rem, 78vh, 44rem);
    padding: clamp(.6rem, 1.2vw, 1.1rem) clamp(.75rem, 2vw, 2.5rem) 0;
}

.va-hero-slider {
    border-radius: 1.1rem;
    height: var(--hero-h);
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.va-hero-slide {
    background: #201c17;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.va-hero-slide picture,
.va-hero-img {
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.va-hero-img {
    object-fit: cover;
    object-position: 62% center;
    transform: scale(1.06);
    transition: transform 7s ease-out;
}

.va-hero-slide.swiper-slide-active .va-hero-img {
    transform: scale(1);
}

.va-hero-shade {
    background:
        linear-gradient(90deg, rgba(20, 16, 12, .86) 0%, rgba(20, 16, 12, .62) 34%, rgba(20, 16, 12, .1) 62%, transparent 75%),
        linear-gradient(0deg, rgba(20, 16, 12, .55) 0%, transparent 32%);
    inset: 0;
    position: absolute;
    z-index: 1;
}

.va-hero-copy {
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    max-width: 40rem;
    padding: 0 clamp(1.5rem, 5vw, 5rem) 5.5rem;
    position: absolute;
    top: 0;
    z-index: 2;
}

.va-hero-kicker {
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 2rem;
    color: #f1d9b4;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 1.1rem;
    padding: .4rem .85rem;
    text-transform: uppercase;
}

.va-hero-title {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4.3vw, 3.9rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.04;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.va-hero-text {
    color: rgba(255, 255, 255, .86);
    font-size: clamp(.92rem, 1.15vw, 1.08rem);
    line-height: 1.65;
    margin: 0 0 1.8rem;
    max-width: 31rem;
}

.va-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.va-hero-actions .btn {
    font-size: .82rem;
    padding: .95rem 1.45rem;
}

/* text slides up as its banner comes in */
.va-hero-copy > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}

.va-hero-slide.swiper-slide-active .va-hero-copy > * {
    opacity: 1;
    transform: none;
}

.va-hero-slide.swiper-slide-active .va-hero-copy > :nth-child(2) { transition-delay: .08s; }
.va-hero-slide.swiper-slide-active .va-hero-copy > :nth-child(3) { transition-delay: .16s; }
.va-hero-slide.swiper-slide-active .va-hero-copy > :nth-child(4) { transition-delay: .24s; }

/* bottom bar: collection tabs, counter, arrows, progress */
.va-hero-bar {
    align-items: center;
    bottom: 0;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    left: 0;
    padding: 0 clamp(1.5rem, 5vw, 5rem) 1.6rem;
    position: absolute;
    right: 0;
    z-index: 5;
}

.va-hero-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.va-hero-tab {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 2rem;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .5rem 1rem;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.va-hero-tab:hover,
.va-hero-tab:focus-visible {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.va-hero-tab.is-active {
    background: #fff;
    border-color: #fff;
    color: #201c17;
}

.va-hero-controls {
    align-items: center;
    color: #fff;
    display: flex;
    gap: .5rem;
    margin-right: 3.5rem; /* room for the floating chat button */
}

.va-hero-count {
    font-size: .8rem;
    letter-spacing: .08em;
    margin-right: .4rem;
    opacity: .85;
}

.va-hero-count strong {
    font-size: 1rem;
}

.va-hero-arrow {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    transition: background .25s ease, color .25s ease;
    width: 2.75rem;
}

.va-hero-arrow:hover,
.va-hero-arrow:focus-visible {
    background: #fff;
    color: #201c17;
}

.va-hero-progress {
    background: rgba(255, 255, 255, .2);
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
}

.va-hero-progress span {
    background: #d2a86e;
    display: block;
    height: 100%;
    width: 0;
}

.va-hero .swiper-slide:not(.swiper-slide-active) .btn {
    pointer-events: none;
}

/* tablets */
@media (max-width: 991.98px) {
    .va-hero { --hero-h: clamp(30rem, 72vh, 40rem); }
    .va-hero-copy { max-width: 34rem; }
}

/* phones: image on top, text over a bottom fade */
@media (max-width: 767.98px) {
    .va-hero {
        --hero-h: min(38rem, calc(100svh - 13rem));
        padding: .5rem .75rem 0;
    }

    .va-hero-slider { border-radius: .9rem; min-height: 32rem; }

    /* photo on top (whole table visible), text right below it; the banner is as tall as its content */
    .va-hero-slider { height: auto; min-height: 0; }
    .va-hero-slide { display: flex; flex-direction: column; height: auto; }

    .va-hero-slide picture {
        aspect-ratio: 4 / 3;
        height: auto;
        position: relative;
    }

    .va-hero-img { object-position: 62% center; }

    .va-hero-shade {
        aspect-ratio: 4 / 3;
        background:
            linear-gradient(0deg, #201c17 0%, rgba(32, 28, 23, .6) 14%, transparent 34%),
            linear-gradient(180deg, rgba(20, 16, 12, .5) 0%, transparent 26%);
        bottom: auto;
        height: auto;
        width: 100%;
    }

    .va-hero-copy {
        margin-top: -1.6rem;
        max-width: none;
        padding: 0 1.25rem 1.4rem;
        position: relative;
    }

    .va-hero-kicker { font-size: .6rem; margin-bottom: .75rem; }
    .va-hero-title { font-size: clamp(1.75rem, 7.6vw, 2.3rem); margin-bottom: .6rem; }
    .va-hero-text { font-size: .9rem; line-height: 1.55; margin-bottom: 1.1rem; }

    .va-hero-actions { gap: .5rem; }
    .va-hero-actions .btn { flex: 1 1 auto; font-size: .78rem; padding: .75rem 1rem; text-align: center; }

    /* tabs at the top on phones: the WhatsApp / chat buttons float over the bottom of the screen */
    .va-hero-bar {
        bottom: auto;
        gap: .6rem;
        padding: 1rem 1rem 0;
        top: 0;
    }

    .va-hero-progress { bottom: auto; top: 0; }

    .va-hero-tabs {
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .va-hero-tabs::-webkit-scrollbar { display: none; }
    .va-hero-tab { flex: 0 0 auto; font-size: .68rem; padding: .45rem .8rem; }

    /* phones swipe; arrows only take space */
    .va-hero-arrow { display: none; }
    .va-hero-controls { margin-right: 0; }
    .va-hero-count { flex: 0 0 auto; font-size: .72rem; margin: 0; }
    .va-hero-count strong { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .va-hero-img,
    .va-hero-copy > * { transition: none; transform: none; }
}