/* Home page promo slider, structured like thetea.ua's: each slide is a
   link wrapping one banner picture (all text is baked into the image),
   desktop 1700x768 / mobile square. Slides sit side by side in
   .promo-track, which js/components/promo-slider.js moves with
   transform (loop, autoplay, drag/swipe). Markup in index.html. */

.promo { padding-top: 20px; position: relative; z-index: 0; overflow-x: clip; } /* own layer: the glow stays behind the page; no sideways scroll from it on phones */
.promo > .container { position: relative; }

/* the glow behind the banner, like YouTube's ambient mode: a blurred copy
   of the current slide (js/components/promo-slider.js places it exactly
   under the slider and swaps the picture); two layers crossfade */
.promo-glow { position: absolute; z-index: -1; pointer-events: none; }
.promo-glow span {
    position: absolute; inset: 0; background: center / cover no-repeat;
    filter: blur(60px) saturate(1.3); transform: scale(1.08);
    opacity: 0; transition: opacity 1.2s ease;
}
.promo-glow span.is-on { opacity: var(--glow, 0.4); } /* --glow: the admin's «Яскравість» */
/* what follows the banner covers the glow's lower edge, not the other way round */
.promo + .container { position: relative; z-index: 1; }
.promo-slider {
    position: relative; overflow: hidden; border-radius: 4px; background: #0b0806;
    touch-action: pan-y; /* vertical page scroll stays native, horizontal = swipe */
    user-select: none; -webkit-user-select: none;
}
.promo-track { display: flex; will-change: transform; }
.promo-track.is-animating { transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }

.promo-slide { flex: 0 0 100%; display: block; -webkit-user-drag: none; }
.promo-slide:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
.promo-slide img {
    display: block; width: 100%; height: auto; aspect-ratio: 1700 / 768; object-fit: cover;
    pointer-events: none; /* drags start on the link, never as a native image drag */
}
.promo-slider.is-dragging { cursor: grabbing; }

/* the category tiles no longer overlap a full-width hero */
.promo + .container .categories-grid { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
    .promo-track.is-animating { transition: none; }
    .promo-glow span { transition: none; }
}

/* same breakpoint as the <source media> in the markup: a slide with a
   phone image is square there (phones only; a tablet gets the wide banner);
   one without keeps its desktop shape */
@media (max-width: 599px) {
    .promo-slide:has(source) img { aspect-ratio: 1 / 1; }
}
.promo[hidden], .categories-grid[hidden] { display: none; } /* spot with no visible banners */
@media (max-width: 768px) {
    .promo { padding-top: 12px; }
    .promo + .container .categories-grid { margin-top: 12px; }
    /* phones: edge to edge like thetea.ua — no side gutters, square corners */
    .promo > .container { padding-left: 0; padding-right: 0; }
    .promo-slider { border-radius: 0; }
    .promo-glow span { filter: blur(40px) saturate(1.3); }
    .promo-glow span.is-on { opacity: calc(var(--glow, 0.4) * 0.875); }
}