/* ===================================
   MASTERLIGHT — SLIDESHOW (HOME HERO)
   Fullscreen crossfade slideshow
   (JS vanilla em main.js + transições CSS;
    sem JS, a primeira imagem permanece visível)
   =================================== */

.hero--slideshow {
    position: relative;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Full-bleed: compensa o padding do .main-wrapper (space-8 / space-5) */
    margin: calc(var(--space-8, 2rem) * -1) calc(var(--space-5, 1.25rem) * -1) var(--space-12, 3rem);
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--space-8, 2rem);
    padding-bottom: var(--space-8, 2rem);
}

.hero--slideshow .reveal,
.hero--slideshow > *:not(.pl-slideshow):not(.pl-dots) {
    position: relative;
    z-index: 1;
}

/* Conteúdo centralizado com a largura tipográfica original do hero */
.hero--slideshow > .reveal {
    max-width: 800px;
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--space-5, 1.25rem);
}

/* Compensa o padding do wrapper nos breakpoints do layout */
@media (max-width: 768px) {
    .hero--slideshow {
        margin-inline: calc(var(--space-4, 1rem) * -1);
        /* Header mobile fixo de 60px fica acima do conteúdo */
        min-height: calc(100dvh - var(--mobile-header-height, 60px));
    }
}

@media (max-width: 480px) {
    .hero--slideshow {
        margin-inline: calc(var(--space-3, 0.75rem) * -1);
    }
}

/* ---------- Slideshow ---------- */

.pl-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.pl-slideshow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.pl-slideshow--empty {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255, 193, 7, 0.08), transparent 55%),
        var(--color-bg-primary, #121212);
}

.pl-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: opacity;
}

/* JS ativo: apenas o slide corrente (.pl-slide--active) fica visível */
.pl-slideshow--js .pl-slide--active {
    opacity: 1;
}

/* Fallback sem JS (ou JS quebrado): a primeira imagem permanece visível */
.pl-slideshow:not(.pl-slideshow--js) .pl-slide:first-child {
    opacity: 1;
}

/* Slideshow estático (0 ou 1 imagem): mostra apenas a primeira */
.pl-slideshow--static .pl-slide {
    transition: none;
    opacity: 0;
}

.pl-slideshow--static .pl-slide:first-child {
    opacity: 1;
}

/* Acessibilidade: sem animações para usuários com preferência reduzida */
@media (prefers-reduced-motion: reduce) {
    .pl-slide,
    .pl-dot {
        transition: none;
    }
}

/* ---------- Dots ----------
   Renderizados pelo template apenas com 2+ imagens; ficam visíveis
   somente quando o JS ativa o slideshow (classe .pl-slideshow--js). */

.pl-dots {
    display: none;
    position: absolute;
    left: 50%;
    bottom: var(--space-4, 1rem);
    transform: translateX(-50%);
    z-index: 2;
    gap: var(--space-2, 0.5rem);
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.45);
    backdrop-filter: blur(4px);
}

.pl-slideshow--js ~ .pl-dots {
    display: flex;
}

.pl-dot {
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pl-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.pl-dot--active {
    background: var(--color-accent, #FFC107);
    transform: scale(1.15);
}

.pl-dot:focus-visible {
    outline: 2px solid var(--color-accent, #FFC107);
    outline-offset: 2px;
}