/* ══════════════════════════════════════════════════════════════════════
   NEON — Hero slider "peek"
   Slide ativo dominante no centro; anterior e próximo só como uma faixa
   estreita nas laterais; setas montadas na borda do ativo; pausa + dots
   abaixo do slider.

   Carregado pelo index.php só quando o tema ativo (ou ?theme_preview) é o
   NEON, DEPOIS do assets/css/slider.css global. Tudo escopado em
   .neon-slider--peek: as regras antigas (slider.css e o <style> do
   modules/home_slider.php) continuam lá e são sobrescritas por aqui.

   Cores: só variáveis do colors-styles (getThemeCSS), com as do tema NEON
   como reserva. Nenhuma cor literal.

   Proporção: o ativo cresce para 85% da tela e a altura cresce junto, na
   proporção que o slide tinha (largura do grid ou da tela ÷ altura do
   painel) — object-fit: cover corta a arte exatamente como antes.
   ══════════════════════════════════════════════════════════════════════ */

.neon-slider.neon-slider--peek {
    /* Geometria (desktop ≥ 1280px) */
    --peek-k: 0.85;                                   /* fração da faixa (= tela) ocupada pelo ativo */
    --peek-w: calc(var(--peek-k) * 100%);
    --peek-left: calc((100% - var(--peek-w)) / 2);    /* centralizado */
    --peek-gap: 36px;
    --peek-scale: 0.9;                                /* laterais com 90% da altura do ativo */
    --peek-radius: 16px;
    --peek-pad-top: 16px;
    --peek-pager-gap: 20px;                           /* do fim do slide até a paginação */
    --peek-pause: 36px;
    --peek-pad-bottom: calc(var(--peek-pager-gap) + var(--peek-pause) + 16px);
    --peek-arrow: 58px;
    --peek-ms: 500ms;
    --peek-ease: ease-in-out;
    /* Altura do ativo: a proporcional (k × max(altura do painel, largura da tela ×
       altura/grid); --neon-hero-ratio vem do PHP, 0 em Tela Cheia) LIMITADA ao
       espaço livre entre o header fixo e o player fixo, para o slider inteiro
       (com a paginação) caber na tela. O script mede header e player de verdade
       e grava --neon-fit-top/--neon-fit-bottom; aqui ficam estimativas próximas. */
    --neon-fit-top: 105px;
    --neon-fit-bottom: var(--player-height, 90px);
    --peek-fit: calc(100svh - var(--neon-fit-top) - var(--neon-fit-bottom) - 20px - var(--peek-pad-top) - var(--peek-pad-bottom));
    --peek-h: min(
        calc(var(--peek-k) * max(max(var(--neon-hero-h, 500px), 260px), 100cqw * var(--neon-hero-ratio, 0))),
        max(var(--peek-fit), 240px)
    );
    /* Vizinho a scale(.9) com a borda interna encostada no gap */
    --peek-shift: calc(100% - (1 - var(--peek-scale)) * 50% + var(--peek-gap));
    --peek-shift-far: calc(2 * var(--peek-shift));

    /* Cores (colors-styles → reserva do NEON) */
    --peek-bg: var(--bg-secondary, var(--neon-bg-deep));
    --peek-ink: var(--text-primary, var(--neon-text));
    --peek-muted: var(--text-muted, var(--neon-text-muted));
    --peek-primary: var(--color-primary, var(--neon-pink));
    --peek-surface: color-mix(in srgb, var(--bg-card, var(--neon-surface-strong)) 86%, transparent);
    --peek-pause-bg: var(--bg-tertiary, var(--neon-surface-bright));
    --peek-scrim: var(--bg-primary, var(--neon-bg-deep));   /* tom escuro do modo escuro */

    container-type: inline-size;                     /* 100cqw = largura da faixa */
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: var(--peek-bg);
    overflow: visible !important;
    overflow-x: clip !important;                     /* vizinhos e escondidos nunca geram scroll */
}

/* No modo claro o tom escuro do colors-styles é o do texto. */
body.theme-light .neon-slider.neon-slider--peek {
    --peek-scrim: var(--text-primary, var(--neon-text));
}

/* Dentro do Grid: a faixa vai de borda a borda (o ativo já é 85% da tela). */
.neon-slider.neon-slider--peek.neon-slider--contained {
    margin: 20px 0 0 !important;
    border-radius: 0 !important;
}

.neon-slider--peek:focus-visible {
    outline: 2px solid var(--peek-primary);
    outline-offset: -2px;
}

.neon-slider--peek .neon-slider__container {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent;
}

/* Altura reservada só por CSS (sem CLS). O seletor com o ID vence o
   #neon-hero-slider { height: auto !important } do slider.css (até 768px). */
.neon-slider--peek .neon-slider__track,
.neon-slider--peek #neon-hero-slider {
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(var(--peek-h) + var(--peek-pad-top) + var(--peek-pad-bottom)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible;
    overflow-x: clip;
}

.neon-slider--peek .neon-slider__carousel {
    position: absolute !important;
    inset: 0 !important;
    width: auto;
    height: auto;
}

/* ── Slides ── */
.neon-slider--peek .neon-slide {
    position: absolute;
    inset: auto;
    top: var(--peek-pad-top);
    left: var(--peek-left);
    width: var(--peek-w);
    height: var(--peek-h);
    border-radius: var(--peek-radius);
    overflow: hidden;
    background: var(--peek-pause-bg);
    opacity: 0;
    visibility: hidden;
    filter: none;
    box-shadow: none;
    transform: translateX(var(--peek-shift-far)) scale(var(--peek-scale));
    z-index: 1;
    transition:
        transform var(--peek-ms) var(--peek-ease),
        opacity var(--peek-ms) var(--peek-ease),
        visibility 0s linear var(--peek-ms);
}

/* Recuo das laterais: véu escuro leve por cima de tudo, sem filtro de cor. */
.neon-slider--peek .neon-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--peek-scrim);
    opacity: .2;
    pointer-events: none;
    z-index: 6;
    transition: opacity var(--peek-ms) var(--peek-ease);
}

.neon-slider--peek .neon-slide.is-hidden.is-left {
    transform: translateX(calc(-1 * var(--peek-shift-far))) scale(var(--peek-scale));
}

.neon-slider--peek .neon-slide.is-next,
.neon-slider--peek .neon-slide.is-prev {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    cursor: pointer;
    transition-delay: 0s, 0s, 0s;
}

.neon-slider--peek .neon-slide.is-next {
    transform: translateX(var(--peek-shift)) scale(var(--peek-scale));
}

.neon-slider--peek .neon-slide.is-prev {
    transform: translateX(calc(-1 * var(--peek-shift))) scale(var(--peek-scale));
}

.neon-slider--peek .neon-slide.is-next:hover::after,
.neon-slider--peek .neon-slide.is-prev:hover::after {
    opacity: .1;
}

.neon-slider--peek .neon-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 3;
    transition-delay: 0s, 0s, 0s;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--peek-scrim) 8%, transparent);
}

/* O ativo não recebe escurecimento: o véu some junto com o deslize. */
.neon-slider--peek .neon-slide.is-active::after {
    opacity: 0;
}

.neon-slider--peek .neon-slide.is-active:not([data-slide-link]) {
    cursor: auto;
}

/* Posicionamento sem animação (JS) — o slide que reaparece entra pela borda certa. */
.neon-slider--peek .neon-slide.is-instant,
.neon-slider--peek .neon-slide.is-instant::after {
    transition: none !important;
}

/* Laterais mostram só a imagem: texto e overlay do painel ficam no ativo. */
.neon-slider--peek .neon-slide .neon-slide__content,
.neon-slider--peek .neon-slide .neon-slide__overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.neon-slider--peek .neon-slide.is-active .neon-slide__content,
.neon-slider--peek .neon-slide.is-active .neon-slide__overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease 250ms, visibility 0s linear 0s;
}

/* Arte pronta (sem título nem descrição) não é escurecida: o overlay do painel
   existe para dar leitura a texto, e aqui não há texto — só o botão, que é sólido. */
.neon-slider--peek .neon-slide.is-art .neon-slide__overlay {
    display: none;
}

@media (min-width: 769px) {
    .neon-slider--peek .neon-slide__content {
        padding: 2.5rem 4.5rem 3rem !important;      /* folga para a seta montada na borda */
        max-width: 62%;
    }
    .neon-slider--peek .slider-align-center .neon-slide__content {
        max-width: 78%;
    }
    .neon-slider--peek .slider-align-right .neon-slide__content {
        padding-right: 4.5rem !important;
    }
}

/* ── Setas: centro exatamente na borda esquerda/direita do ativo ── */
.neon-slider--peek .neon-slider__arrows {
    position: absolute;
    top: var(--peek-pad-top);
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--peek-h);
    padding: 0;
    transform: none;
    display: block;
    pointer-events: none;
    z-index: 7;
}

.neon-slider--peek .neon-slider__arrow {
    position: absolute;
    top: 50%;
    width: var(--peek-arrow);
    height: var(--peek-arrow);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--peek-surface);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--peek-ink) 10%, transparent);
    color: var(--peek-ink);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--peek-scrim) 16%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}

.neon-slider--peek .neon-slider__arrow svg {
    width: 24px;
    height: 24px;
}

.neon-slider--peek .neon-slider__arrow--prev {
    left: var(--peek-left);
}

.neon-slider--peek .neon-slider__arrow--next {
    left: calc(var(--peek-left) + var(--peek-w));
}

.neon-slider--peek .neon-slider__arrow:hover {
    background: var(--peek-surface);
    border-color: color-mix(in srgb, var(--peek-ink) 10%, transparent);
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--peek-scrim) 24%, transparent);
}

.neon-slider--peek .neon-slider__arrow:focus-visible {
    outline: 2px solid var(--peek-primary);
    outline-offset: 3px;
}

/* ── Paginação: pausa/play + dots, centralizada ~20px abaixo do slide ── */
.neon-slider--peek .neon-slider__pager {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--peek-pad-top) + var(--peek-h) + var(--peek-pager-gap));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    z-index: 7;
}

.neon-slider--peek .neon-slider__pause {
    width: var(--peek-pause);
    height: var(--peek-pause);
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--peek-pause-bg);
    color: var(--peek-ink);
    cursor: pointer;
    transition: background .2s ease;
}

.neon-slider--peek .neon-slider__pause:hover {
    background: color-mix(in srgb, var(--peek-pause-bg) 85%, var(--peek-ink));
}

.neon-slider--peek .neon-slider__pause:focus-visible {
    outline: 2px solid var(--peek-primary);
    outline-offset: 2px;
}

.neon-slider--peek .neon-slider__pause svg {
    width: 14px;
    height: 14px;
}

.neon-slider--peek .neon-slider__pause .neon-slider__play-icon,
.neon-slider--peek.is-user-paused .neon-slider__pause .neon-slider__pause-icon {
    display: none;
}

.neon-slider--peek.is-user-paused .neon-slider__pause .neon-slider__play-icon {
    display: block;
}

.neon-slider--peek .neon-slider__dots {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Dot visível de 10px numa área de clique de 20px. */
.neon-slider--peek .neon-slider__dot,
.neon-slider--peek .neon-slider__dot.active {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neon-slider--peek .neon-slider__dot::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--peek-muted) 55%, transparent);
    transition: background .2s ease;
}

.neon-slider--peek .neon-slider__dot:hover::before {
    background: var(--peek-muted);
}

.neon-slider--peek .neon-slider__dot.active::before {
    background: var(--peek-primary);
}

.neon-slider--peek .neon-slider__dot:focus-visible {
    outline: 2px solid var(--peek-primary);
    outline-offset: 0;
}

/* ── Tablet (768–1279px) ── */
@media (max-width: 1279px) {
    .neon-slider.neon-slider--peek {
        --peek-k: 0.88;
        --peek-gap: 6px;        /* peek de 40px em 768 e 55px em 1024 */
        --peek-arrow: 48px;
        /* Até 1024px o player flutua acima da barra de navegação inferior. */
        --neon-fit-top: 104px;
        --neon-fit-bottom: calc(var(--player-height, 90px) + 59px);
    }
}

/* ── Mobile (< 768px): ativo ~90% alinhado à esquerda, só o próximo aparece ── */
@media (max-width: 767px) {
    .neon-slider.neon-slider--peek,
    .neon-slider.neon-slider--peek.neon-slider--contained {
        --peek-k: 0.90;
        --peek-left: 4%;
        --peek-gap: 6px;
        --peek-pad-top: 10px;
        --peek-pager-gap: 14px;
        --peek-pause: 32px;
        --peek-pad-bottom: calc(var(--peek-pager-gap) + var(--peek-pause) + 12px);
        /* No celular o slide era 2:1 na largura toda; o ativo mantém 2:1 — limitado
           ao espaço livre (celular deitado), como no desktop. */
        --neon-fit-top: 96px;
        --peek-h: min(calc(var(--peek-k) * 100cqw / 2), max(var(--peek-fit), 160px));
        margin: 20px 0 10px !important;
    }

    /* Anterior fora de vista: à esquerda fica só a margem. */
    .neon-slider--peek .neon-slide.is-prev {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .neon-slider--peek .neon-slider__arrows {
        display: none;
    }
}

/* ── 1 slide: sem peek, sem navegação ── */
.neon-slider--single .neon-slide.is-active {
    cursor: auto;
}
.neon-slider--single .neon-slide.is-active[data-slide-link] {
    cursor: pointer;
}

/* Sem animação de deslize e sem autoplay (o script não agenda; a pausa some). */
@media (prefers-reduced-motion: reduce) {
    .neon-slider--peek .neon-slide,
    .neon-slider--peek .neon-slide::after,
    .neon-slider--peek .neon-slide .neon-slide__content,
    .neon-slider--peek .neon-slide .neon-slide__overlay {
        transition: none !important;
    }
    .neon-slider--peek .neon-slider__pause {
        display: none;
    }
}