/* ==========================================================
   HERO SLIDER LEXVITA — 1:1 port of demo-3's bick/demo3 hero
   (web/demo-3/assets/css/custom.css). Keep values in sync.
   ========================================================== */

.lv-hero {
    position: relative;
    width: 100%;
    height: min(88vh, 820px);
    min-height: 650px;
    background: #0f2c33;
    overflow: hidden;
    line-height: 1.5;
}

/* demo-3's header is fixed on top of the hero; ours is sticky, so pull
   the hero up under it by the header's height. */
.lv-hero--under-header { margin-top: -93px; } /* 92px header + 1px border */

.lv-hero__slides { position: absolute; inset: 0; z-index: 0; }

.lv-hero__slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.018);
    transition:
        opacity .95s cubic-bezier(.16, 1, .3, 1),
        visibility .95s cubic-bezier(.16, 1, .3, 1),
        transform 1.15s cubic-bezier(.16, 1, .3, 1);
}

.lv-hero__slide.is-active {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.lv-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    filter: saturate(1.04) contrast(1.02) brightness(.98);
    transform: scale(1.02);
    transition: transform 8.5s cubic-bezier(.25, 1, .5, 1), filter .8s ease;
    will-change: transform;
}

.lv-hero__slide.is-active .lv-hero__bg { transform: scale(1.055); }

.lv-hero__overlay { position: absolute; inset: 0; }

.lv-hero__overlay--teal {
    background:
        linear-gradient(90deg, rgba(7, 20, 24, .34), rgba(7, 20, 24, .06) 42%, rgba(7, 20, 24, .18)),
        linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .28));
}

.lv-hero__overlay--ocean {
    background:
        linear-gradient(90deg, rgba(2, 10, 20, .48), rgba(2, 10, 20, .12) 46%, rgba(2, 10, 20, .28)),
        linear-gradient(180deg, rgba(2, 10, 20, .08), rgba(2, 10, 20, .34));
}

.lv-hero__overlay--plum {
    background:
        linear-gradient(90deg, rgba(32, 5, 15, .42), rgba(32, 5, 15, .08) 44%, rgba(32, 5, 15, .24)),
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .28));
}

.lv-hero__overlay--wolves {
    background:
        linear-gradient(90deg, rgba(5, 16, 26, .58), rgba(5, 16, 26, .18) 44%, rgba(5, 16, 26, .2)),
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .34));
}

.lv-hero__shell {
    position: relative;
    z-index: 20;
    display: block;
    width: 100%;
    height: 100%;
    padding: 6.8rem 1rem 8.6rem;
}

@media (min-width: 640px)  { .lv-hero__shell { padding-inline: 2rem; } }
@media (min-width: 1024px) { .lv-hero__shell { padding-inline: 3rem; } }

.lv-hero__copy {
    position: absolute;
    z-index: 3;
    width: min(92vw, 48rem);
    max-width: 48rem;
    color: #ffffff;
    text-align: left;
}

.lv-hero__copy--rhino    { left: 5%; top: 23%; max-width: 40rem; }
.lv-hero__copy--seal     { right: 5%; top: 22%; max-width: 38rem; }
.lv-hero__copy--elephant { left: 1.2%; top: 23%; width: min(96vw, 64rem); max-width: 64rem; }
.lv-hero__copy--wolves   { left: 5%; top: 19%; max-width: 42rem; }

/* Staggered entrance */
.lv-hero__title,
.lv-hero__description,
.lv-hero__actions {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.lv-hero__slide.is-active .lv-hero__title       { opacity: 1; transform: translateY(0); transition-delay: .4s; }
.lv-hero__slide.is-active .lv-hero__description { opacity: 1; transform: translateY(0); transition-delay: .55s; }
.lv-hero__slide.is-active .lv-hero__actions     { opacity: 1; transform: translateY(0); transition-delay: .7s; }

.lv-hero .lv-hero__title {
    max-width: 12.5em;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2rem, 4.1vw, 4rem);
    font-weight: 200;
    line-height: .98;
    letter-spacing: -.038em;
    color: #ffffff;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .65), 0 1px 4px rgba(0, 0, 0, .8);
}

.lv-hero .lv-hero__copy--elephant .lv-hero__title {
    max-width: 14.5em;
    font-size: clamp(2.55rem, 5.35vw, 5.2rem);
    line-height: .9;
    letter-spacing: -.05em;
}

.lv-hero__accent--teal { color: #bde86a; }
.lv-hero__accent--gold { color: #d8b35f; }

.lv-hero .lv-hero__description {
    max-width: 30rem;
    margin: 1.15rem 0 0;
    font-family: "Inter", sans-serif;
    font-size: .86rem;
    font-weight: 300;
    line-height: 1.48;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.lv-hero .lv-hero__copy--elephant .lv-hero__description { max-width: 33rem; font-size: .88rem; }

.lv-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.35rem;
}

.lv-hero .lv-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: .72rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, .35);
    font-family: "Montserrat", sans-serif;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .25s ease;
}

.lv-hero .lv-hero__btn:hover { transform: translateY(-1px); }

.lv-hero .lv-hero__btn--outline {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(36, 50, 58, .12);
    color: #31444b;
    backdrop-filter: blur(8px);
}

.lv-hero .lv-hero__btn--outline:hover {
    background: #ffffff;
    border-color: rgba(31, 133, 138, .2);
    color: #1c4d51;
}

.lv-hero .lv-hero__btn--solid {
    background: linear-gradient(135deg, #1f858a 0%, #17686d 100%);
    color: #ffffff;
    border-color: rgba(31, 133, 138, .36);
    box-shadow: 0 12px 28px rgba(31, 133, 138, .2);
}

.lv-hero .lv-hero__btn--solid:hover {
    background: linear-gradient(135deg, #28a0a6 0%, #1f858a 100%);
    box-shadow: 0 16px 34px rgba(31, 133, 138, .26);
}

.lv-hero .lv-hero__btn--gold {
    background: linear-gradient(135deg, #d6bc84 0%, #c5a566 100%);
    color: #fffdf8;
    border-color: rgba(197, 165, 102, .32);
    box-shadow: 0 12px 28px rgba(197, 165, 102, .18);
}

/* Counter + prev/next */
.lv-hero__meta {
    position: absolute;
    z-index: 30;
    bottom: 2rem;
    left: 1rem;
    right: 1rem;
    pointer-events: none;
}

@media (min-width: 640px)  { .lv-hero__meta { left: 2rem; right: 2rem; } }
@media (min-width: 1024px) { .lv-hero__meta { left: 3rem; right: 3rem; } }

.lv-hero__meta-inner {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.lv-hero__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #f4f0e8;
    pointer-events: auto;
}

.lv-hero__counter {
    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 300;
    letter-spacing: .2em;
    color: #ffffff;
}

.lv-hero__counter-total { color: rgba(255, 255, 255, .62); }

.lv-hero__nav { display: flex; align-items: center; gap: .5rem; }

.lv-hero .lv-hero__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #ffffff;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all .25s ease;
}

.lv-hero .lv-hero__nav-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .54); }

@media (max-width: 1023px) {
    .lv-hero { height: min(82vh, 720px); min-height: 600px; }
    .lv-hero .lv-hero__title { font-size: clamp(1.7rem, 3.7vw, 3rem); }
    .lv-hero .lv-hero__description { max-width: 24rem; font-size: .74rem; }
    .lv-hero__copy { width: min(88vw, 34rem); max-width: 34rem; }
    .lv-hero__copy--rhino, .lv-hero__copy--seal, .lv-hero__copy--wolves { left: 5%; right: auto; top: 20%; }
    .lv-hero__copy--elephant { left: 4%; top: 20%; width: min(90vw, 42rem); max-width: 42rem; }
    .lv-hero .lv-hero__copy--elephant .lv-hero__title { max-width: 12em; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: .94; }
    .lv-hero .lv-hero__copy--elephant .lv-hero__description { max-width: 26rem; font-size: .8rem; }
}

@media (max-width: 767px) {
    .lv-hero { height: 78vh; min-height: 540px; }
    .lv-hero__shell { padding-top: 6.2rem; padding-bottom: 6.8rem; }
    .lv-hero .lv-hero__title { max-width: 100%; font-size: clamp(1.45rem, 8vw, 2.25rem); line-height: 1.02; }
    .lv-hero .lv-hero__description { max-width: 100%; font-size: .7rem; }
    .lv-hero__copy,
    .lv-hero__copy--rhino,
    .lv-hero__copy--seal,
    .lv-hero__copy--elephant,
    .lv-hero__copy--wolves {
        left: 1rem; right: 1rem; top: auto; bottom: 7.4rem; width: auto; max-width: none;
    }
    .lv-hero .lv-hero__copy--elephant .lv-hero__title { max-width: 100%; font-size: clamp(1.6rem, 9vw, 2.45rem); line-height: .98; }
    .lv-hero .lv-hero__copy--elephant .lv-hero__description { max-width: 100%; font-size: .72rem; }
    .lv-hero__controls { gap: .7rem; }
    .lv-hero__counter { font-size: .76rem; letter-spacing: .16em; }
    .lv-hero .lv-hero__nav-btn { width: 2.35rem; height: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lv-hero__slide, .lv-hero__bg, .lv-hero__title, .lv-hero__description, .lv-hero__actions { transition: none !important; }
}

/* Widget wrapper fills its flex parent (avoid min-content collapse). */
.elementor-widget-lexvita_hero_slider { width: 100%; }
