/* ==========================================================================
   Lumen Vault homepage banners  (hero slider + three promotional cards)
   Markup: resources/views/partials/home-banners.blade.php
   Behaviour: public/assets/lv-home-banners.js
   Everything is prefixed lvb- so it cannot collide with existing storefront CSS.

   Rules this file follows:
   - Box sizes come from aspect-ratio, never from the image, so nothing shifts when images load (CLS 0).
   - Entrance animations run from CSS the moment a slide is .is-active, so slide 1 animates with no JS.
   - Hover uses the individual `translate` / `scale` properties, because the entrance animations use
     `transform` with fill-mode "both" and would otherwise win over a hover transform forever.
   - Hover effects live inside (hover:hover); touch devices never depend on them.
   - Motion is restrained: no bounce, spin, flash or 3D. prefers-reduced-motion removes it.
   ========================================================================== */

.lvb {
    --lvb-radius: 10px;
    --lvb-gap: 10px;
    --lvb-ease: cubic-bezier(.4, 0, .2, 1);
    --lvb-ease-out: cubic-bezier(.22, 1, .36, 1);
    --lvb-ink: #212529;
    --lvb-accent: #0b6e97;      /* darkened Lumen blue, 5.69:1 on white (the brand blue itself fails as text) */
    --lvb-price: #b02a37;
    width: min(calc(100% - 30px), var(--container, 1140px));
    margin: 10px auto 0;
}

.lvb *, .lvb *::before, .lvb *::after { box-sizing: border-box; }

.lvb-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.lvb__grid { display: grid; gap: var(--lvb-gap); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 992px) {
    .lvb--split .lvb__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.lvb__main {
    position: relative;
    overflow: hidden;
    border-radius: var(--lvb-radius);
    background: #eef2f5;
    aspect-ratio: 4 / 5;                /* phone: pairs with the 800 x 1000 mobile image; tall enough for a product photo above the text */
    container-type: inline-size;
    isolation: isolate;
}
@media (min-width: 640px) { .lvb__main { aspect-ratio: 16 / 7; } }   /* pairs with the 1600 x 700 desktop image */

.lvb__slides { position: absolute; inset: 0; touch-action: pan-y; }

/* ── Slides and transitions ─────────────────────────────────────────────── */

.lvb-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    color: var(--lvb-ink);
    transition:
        opacity var(--lvb-td, 700ms) var(--lvb-ease),
        transform var(--lvb-td, 700ms) var(--lvb-ease),
        visibility 0s linear var(--lvb-td, 700ms);
}
.lvb-slide[data-theme="light"] { color: #fff; }
.lvb-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s, 0s, 0s; }
.lvb-slide.is-leaving { visibility: visible; z-index: 1; transition-delay: 0s, 0s, var(--lvb-td, 700ms); }
.lvb-slide.is-pre,
.lvb-slide.lvb-notrans { transition: none !important; }

/* crossfade: the new slide fades in over the old one, which stays solid underneath (no dip to grey) */
.lvb__main[data-mode="crossfade"] .lvb-slide.is-leaving { opacity: 1; }

/* slide */
.lvb__main[data-mode="slide"] .lvb-slide { opacity: 1; transform: translateX(100%); }
.lvb__main[data-mode="slide"] .lvb-slide.is-active { transform: none; }
.lvb__main[data-mode="slide"] .lvb-slide.is-leaving { transform: translateX(-100%); }
.lvb__main[data-mode="slide"][data-dir="prev"] .lvb-slide { transform: translateX(-100%); }
.lvb__main[data-mode="slide"][data-dir="prev"] .lvb-slide.is-active { transform: none; }
.lvb__main[data-mode="slide"][data-dir="prev"] .lvb-slide.is-leaving { transform: translateX(100%); }

/* zoom */
.lvb__main[data-mode="zoom"] .lvb-slide { transform: scale(1.05); }
.lvb__main[data-mode="zoom"] .lvb-slide.is-active { transform: none; }
.lvb__main[data-mode="zoom"] .lvb-slide.is-leaving { transform: scale(.98); opacity: 0; }

/* ── Background image + slow motion ─────────────────────────────────────── */

.lvb-slide__bg { position: absolute; inset: 0; overflow: hidden; }
.lvb-slide__bg picture { display: block; width: 100%; height: 100%; }
.lvb-slide__img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    object-fit: cover; transform-origin: 50% 50%;
}
.lvb-slide__scrim { position: absolute; inset: 0; z-index: 1; background: var(--lvb-scrim, transparent); pointer-events: none; }

.lvb-slide.is-active[data-bg="zoom"] .lvb-slide__img { animation: lvb-zoom var(--lvb-bg-ms, 7000ms) ease-in-out infinite; }
.lvb-slide.is-active[data-bg="pan_zoom"] .lvb-slide__img { animation: lvb-panzoom var(--lvb-bg-ms, 7000ms) ease-in-out infinite; }

@keyframes lvb-zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(var(--lvb-zoom, 1.03)); }
}
@keyframes lvb-panzoom {
    0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
    50% { transform: scale(var(--lvb-zoom, 1.03)) translate3d(-1.2%, -.8%, 0); }
}

/* ── Product photo layer ────────────────────────────────────────────────── */

.lvb-layer {
    position: absolute; z-index: 2; top: 6%; bottom: 6%; width: 40%;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.lvb-layer[data-side="right"] { right: 3%; }
.lvb-layer[data-side="left"] { left: 3%; }
.lvb-layer[data-side="center"] { left: 30%; }
.lvb-layer img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* A white photo background disappears into the artwork. The blend is on the layer itself, not its <img>: the layer has a
   z-index and an animation, so it is its own stacking context, and an <img> inside it could only blend with the layer's
   own empty backdrop (that is why the white box stayed visible). */
.lvb-layer.is-blend { mix-blend-mode: multiply; }
/* blending off = an ordinary photo (lifestyle shot, packshot on a coloured surface): show it as a neat framed picture */
.lvb-layer:not(.is-blend) img { border-radius: 10px; box-shadow: 0 12px 32px rgba(33, 37, 41, .22); }

/* ── Content ────────────────────────────────────────────────────────────── */

.lvb-slide__inner {
    position: absolute; inset: 0; z-index: 3;
    display: flex;
    padding: clamp(16px, 4.4cqw, 48px);
    align-items: center; justify-content: flex-start;
}
.lvb__main--multi .lvb-slide__inner { padding-bottom: max(clamp(16px, 4.4cqw, 48px), 46px); }

.lvb-slide[data-h="center"] .lvb-slide__inner { justify-content: center; }
.lvb-slide[data-h="right"] .lvb-slide__inner { justify-content: flex-end; }
.lvb-slide[data-v="top"] .lvb-slide__inner { align-items: flex-start; }
.lvb-slide[data-v="bottom"] .lvb-slide__inner { align-items: flex-end; }

.lvb-content {
    display: flex; flex-direction: column; align-items: flex-start;
    max-width: 62%; text-align: left;
    translate: var(--lvb-ox-d, 0%) var(--lvb-oy-d, 0%);
}
.lvb-content.has-layer { max-width: 52%; }
.lvb-slide[data-align="center"] .lvb-content { align-items: center; text-align: center; }
.lvb-slide[data-align="right"] .lvb-content { align-items: flex-end; text-align: right; }

.lvb-eyebrow {
    margin: 0 0 8px; font-size: clamp(11px, 1.55cqw, 13px); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--lvb-accent);
}
.lvb-slide[data-theme="light"] .lvb-eyebrow { color: #fff; }

.lvb-heading {
    margin: 0 0 8px; font-size: clamp(22px, 4.6cqw, 40px); font-weight: 700;
    line-height: 1.15; letter-spacing: -.01em; color: inherit; text-wrap: balance;
}
.lvb-sub { margin: 0 0 6px; font-size: clamp(14px, 2.3cqw, 19px); font-weight: 600; line-height: 1.3; }
.lvb-desc { margin: 0 0 10px; max-width: 44ch; font-size: clamp(13px, 1.95cqw, 16px); line-height: 1.5; }
.lvb-price { margin: 0 0 14px; font-size: clamp(18px, 3.1cqw, 28px); font-weight: 700; line-height: 1.15; color: var(--lvb-price); }
.lvb-slide[data-theme="light"] .lvb-price { color: #fff; }

.lvb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

.lvb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 22px; border-radius: 8px;
    font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
    border: 1.5px solid transparent; cursor: pointer;
    transition: translate .2s var(--lvb-ease), box-shadow .2s var(--lvb-ease), background-color .2s, color .2s;
}
.lvb-btn__icon { flex: 0 0 auto; transition: translate .2s var(--lvb-ease); }
.lvb-btn--primary { background: var(--lvb-ink); color: #fff; }
.lvb-slide[data-theme="light"] .lvb-btn--primary { background: #fff; color: var(--lvb-ink); }
.lvb-btn--ghost { position: relative; z-index: 1; background: transparent; color: inherit; border-color: currentColor; }

/* the primary button's link covers the whole slide, so the banner is clickable anywhere */
.lvb-stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.lvb-btn:focus-visible, .lvb-card:focus-visible, .lvb-arrow:focus-visible, .lvb-dot:focus-visible, .lvb-pause:focus-visible {
    outline: 3px solid #24a8df; outline-offset: 3px;
}

/* ── Entrance animations (run when a slide becomes .is-active) ──────────── */

.lvb-slide.is-active .lvb-anim,
.lvb-slide.is-active .lvb-layer {
    animation-duration: var(--lvb-dur, 600ms);
    animation-timing-function: var(--lvb-ease-out);
    animation-fill-mode: both;
    animation-delay: var(--lvb-delay, 0ms);
}
.lvb-slide.is-active[data-text="fade-up"] .lvb-anim { animation-name: lvb-fade-up; }
.lvb-slide.is-active[data-text="fade"] .lvb-anim { animation-name: lvb-fade; }
.lvb-slide.is-active[data-text="slide-left"] .lvb-anim { animation-name: lvb-slide-left; }
.lvb-slide.is-active[data-cta="pop"] .lvb-anim--cta { animation-name: lvb-pop; }
.lvb-slide.is-active[data-cta="fade"] .lvb-anim--cta { animation-name: lvb-fade; }
.lvb-slide.is-active[data-cta="none"] .lvb-anim--cta { animation: none; }
.lvb-slide.is-active[data-text="none"] .lvb-anim { animation: none; }

.lvb-slide.is-active[data-layer="slide-in"] .lvb-layer { animation-name: lvb-layer-in; animation-duration: calc(var(--lvb-dur, 600ms) * 1.3); }
.lvb-slide.is-active[data-layer="rise"] .lvb-layer { animation-name: lvb-rise; animation-duration: calc(var(--lvb-dur, 600ms) * 1.3); }
.lvb-slide.is-active[data-layer="fade"] .lvb-layer { animation-name: lvb-fade; }
.lvb-slide.is-active[data-layer="none"] .lvb-layer { animation: none; }

@keyframes lvb-fade-up { from { opacity: 0; transform: translateY(var(--lvb-dist, 20px)); } to { opacity: 1; transform: none; } }
@keyframes lvb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lvb-slide-left { from { opacity: 0; transform: translateX(calc(var(--lvb-dist, 20px) * -1.6)); } to { opacity: 1; transform: none; } }
@keyframes lvb-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lvb-layer-in { from { opacity: 0; transform: translateX(var(--lvb-layer-x, 50px)) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lvb-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ── Controls ───────────────────────────────────────────────────────────── */

.lvb-arrow {
    position: absolute; top: 50%; z-index: 6; width: 40px; height: 40px; margin-top: -20px; padding: 0;
    display: none; place-items: center; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--lvb-ink); cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    opacity: 0; transition: opacity .2s var(--lvb-ease), background-color .2s;
}
.lvb-arrow--prev { left: 12px; }
.lvb-arrow--next { right: 12px; }
@media (hover: hover) and (min-width: 992px) {
    .lvb-arrow { display: grid; }
    .lvb__main:hover .lvb-arrow, .lvb__main:focus-within .lvb-arrow { opacity: 1; }
    .lvb-arrow:hover { background: #fff; }
}

.lvb-bar {
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 6;
    display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
}
.lvb-dots, .lvb-pause { pointer-events: auto; background: rgba(255, 255, 255, .88); border-radius: 14px; }
.lvb-dots { display: flex; align-items: center; height: 28px; padding: 0 6px; }
.lvb-dot {
    position: relative; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
}
.lvb-dot::after { content: ""; position: absolute; inset: -8px -1px; }            /* 44px tall hit area, invisible */
.lvb-dot span { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(33, 37, 41, .38); transition: width .25s var(--lvb-ease), background-color .25s; }
.lvb-dot.is-active span { width: 20px; background: var(--lvb-ink); }
.lvb-pause {
    position: relative; width: 28px; height: 28px; padding: 0; border: 0; color: var(--lvb-ink); cursor: pointer;
    display: grid; place-items: center;
}
.lvb-pause::after { content: ""; position: absolute; inset: -8px; }
.lvb-pause__play { display: none; }
.lvb-pause.is-paused .lvb-pause__pause { display: none; }
.lvb-pause.is-paused .lvb-pause__play { display: block; }

/* ── Side cards ─────────────────────────────────────────────────────────── */

.lvb__side { min-width: 0; }

.lvb-card {
    position: relative; display: block; overflow: hidden; min-width: 0;
    border-radius: var(--lvb-radius); background: #e6ebef; color: var(--lvb-ink);
    text-decoration: none; container-type: inline-size; isolation: isolate;
    animation: lvb-fade-up 500ms var(--lvb-ease-out) both;
    animation-delay: calc(150ms + var(--i, 0) * 100ms);
    --lvb-dist: 15px;
}
.lvb-card[data-theme="light"] { color: #fff; }
.lvb-card__bg { position: absolute; inset: 0; z-index: 0; }
.lvb-card__bg picture { display: block; width: 100%; height: 100%; }
.lvb-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--lvb-ease); }
.lvb-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--lvb-scrim, transparent); pointer-events: none; }
.lvb-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: .04; transition: opacity .3s var(--lvb-ease); pointer-events: none; }

.lvb-card__body {
    position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%;
    padding: clamp(12px, 4.4cqw, 20px); justify-content: center; align-items: flex-start; text-align: left;
    transition: translate .3s var(--lvb-ease);
}
.lvb-card[data-v="top"] .lvb-card__body { justify-content: flex-start; }
.lvb-card[data-v="bottom"] .lvb-card__body { justify-content: flex-end; }
.lvb-card[data-h="center"] .lvb-card__body { align-items: center; text-align: center; }
.lvb-card[data-h="right"] .lvb-card__body { align-items: flex-end; text-align: right; }

.lvb-card__eyebrow { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lvb-accent); }
.lvb-card[data-theme="light"] .lvb-card__eyebrow { color: #fff; }
.lvb-card__title { font-size: clamp(15px, 5.4cqw, 21px); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.lvb-card__desc { margin-top: 3px; font-size: 12.5px; line-height: 1.4; }
.lvb-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.lvb-card__cta .lvb-btn__icon { width: 14px; height: 14px; }

/* wide screens: main slider on the left, three cards stacked on the right, same overall height */
@media (min-width: 992px) {
    .lvb--split .lvb__side { display: flex; flex-direction: column; gap: var(--lvb-gap); }
    .lvb--split .lvb-card { flex: 1 1 0; min-height: 0; }
    .lvb--only-side .lvb__side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lvb-gap); }
    .lvb--only-side .lvb-card { aspect-ratio: 16 / 7; }
}

/* narrower screens: cards sit under the slider, as a compact swipe strip (or stacked, if chosen in settings) */
@media (max-width: 991.98px) {
    .lvb__side--swipe {
        display: flex; gap: var(--lvb-gap); overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .lvb__side--swipe::-webkit-scrollbar { display: none; }
    .lvb__side--swipe .lvb-card { flex: 0 0 calc((100% - 2 * var(--lvb-gap)) / 3); scroll-snap-align: start; aspect-ratio: 16 / 7; }
    .lvb__side--stack { display: grid; gap: var(--lvb-gap); }
    .lvb__side--stack .lvb-card { aspect-ratio: 16 / 6; }
}
@media (max-width: 639.98px) {
    .lvb__side--swipe .lvb-card { flex-basis: min(78%, 320px); }
    .lvb__side--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lvb__side--stack .lvb-card { aspect-ratio: 4 / 3; }
}

/* ── Tablet and phone tuning for the hero ───────────────────────────────── */

@media (max-width: 991.98px) {
    .lvb-content { translate: var(--lvb-ox-t, 0%) var(--lvb-oy-t, 0%); }
    .lvb-content.has-layer { max-width: 54%; }
}

@media (max-width: 639.98px) {
    .lvb-slide__inner { padding: 18px; }
    .lvb__main--multi .lvb-slide__inner { padding-bottom: 50px; }
    .lvb-content, .lvb-content.has-layer { max-width: 100%; translate: var(--lvb-ox-m, 0%) var(--lvb-oy-m, 0%); }

    /* phone placement uses its own settings (data-m-*), falling back to the desktop ones in the markup */
    .lvb-slide .lvb-slide__inner { justify-content: flex-start; align-items: center; }
    .lvb-slide[data-m-h="center"] .lvb-slide__inner { justify-content: center; }
    .lvb-slide[data-m-h="right"] .lvb-slide__inner { justify-content: flex-end; }
    .lvb-slide[data-m-v="top"] .lvb-slide__inner { align-items: flex-start; }
    .lvb-slide[data-m-v="bottom"] .lvb-slide__inner { align-items: flex-end; }
    .lvb-slide .lvb-content { align-items: flex-start; text-align: left; }
    .lvb-slide[data-m-align="center"] .lvb-content { align-items: center; text-align: center; }
    .lvb-slide[data-m-align="right"] .lvb-content { align-items: flex-end; text-align: right; }

    .lvb-heading { font-size: clamp(22px, 6.8cqw, 30px); }
    .lvb-sub { font-size: 15px; }
    .lvb-desc { font-size: 14px; margin-bottom: 8px; }
    .lvb-price { font-size: 22px; margin-bottom: 12px; }

    /* product photo goes to the top of the phone banner, text under it */
    .lvb-layer, .lvb-layer[data-side] { top: 3%; bottom: auto; left: 11%; right: auto; width: 78%; height: 34%; }
}

/* ── Hover (pointer devices only) ───────────────────────────────────────── */

@media (hover: hover) {
    .lvb-slide__img { transition: scale .9s var(--lvb-ease); }
    .lvb__main:hover .lvb-slide.is-active .lvb-slide__img { scale: 1.03; }
    .lvb-layer { transition: translate .5s var(--lvb-ease); }
    .lvb__main:hover .lvb-slide.is-active .lvb-layer { translate: 0 -3px; }
    .lvb-btn:hover { translate: 0 -2px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
    .lvb-btn--ghost:hover { background: rgba(255, 255, 255, .22); }
    .lvb-btn:hover .lvb-btn__icon { translate: 4px 0; }
    .lvb-stretch:hover ~ .lvb-btn--ghost { box-shadow: none; }

    .lvb-card:is(a):hover .lvb-card__img { scale: 1.04; }
    .lvb-card:is(a):hover::after { opacity: .1; }
    .lvb-card:is(a):hover .lvb-card__body { translate: 0 -2px; }
    .lvb-card:is(a):hover .lvb-btn__icon { translate: 4px 0; }
}
.lvb-slide .lvb-stretch:focus-visible { outline-offset: -3px; }

/* ── Reduced motion: keep every word and button, drop the movement ──────── */

@media (prefers-reduced-motion: reduce) {
    .lvb *, .lvb *::before, .lvb *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}