/* ==========================================================================
   HERO-CAROUSEL.CSS — Fundação Fênix 193
   Hero em carrossel: slide 1 = apresentação; demais = últimas notícias.
   Troca automática (pausa com o mouse em cima) e guia de pontos, centralizado
   embaixo, que também serve de navegação.
   Carregar DEPOIS de style.css (e do CSS crítico inline), como link normal.

   Os slides ficam empilhados na MESMA célula de uma grade (grid-area 1/1),
   então a altura do hero é a do maior slide — sem position:absolute e sem
   cortar conteúdo em telas pequenas.
   ========================================================================== */

#hero.hero-carousel {
    display: block;
    position: relative;
    /* Preenche a primeira tela (viewport − header) para os controles do carrossel
       ficarem sempre visíveis, sem precisar rolar. Piso de 560px em telas baixas. */
    min-height: 94vh;
    min-height: max(560px, calc(100svh - var(--header-top-h, 76px) - var(--header-main-h, 48px) - 3px));
    padding: 0;
    overflow: hidden;
    /* Degradê (e não cor sólida) de propósito: o painel de acessibilidade trata
       "fundo com imagem/degradê" como área a PRESERVAR (texto claro sobre fundo
       escuro) e não recolore o hero nos modos Fundo claro / Alto contraste. */
    background: linear-gradient(#1f2120, #1f2120);
}

#hero.hero-carousel::before {
    /* o brilho radial agora é do slide 1 */
    display: none;
}

/* Linhas finas sobre todos os slides (mesmo efeito do hero antigo) */
#hero.hero-carousel .hero-overlay {
    z-index: 2;
}

/* ── Pilha de slides ── */
.hero-slides {
    position: relative;
    display: grid;
    min-height: inherit;
}

.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    min-height: inherit;
    padding: 64px 0;
    /* simétrico: o conteúdo fica centralizado; os pontos ficam na faixa de baixo */
    opacity: 0;
    visibility: hidden;
    /* fora da ordem de tabulação e dos leitores de tela */
    transition: opacity .7s ease, visibility 0s linear .7s;
    touch-action: pan-y;
    /* rolagem vertical continua livre; o arrasto horizontal vira troca de slide */
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 1;
}

.hero-slide>.container {
    position: relative;
    z-index: 1;
    /* a largura e a margem lateral vêm do .container padrão do site */
}

/* ── Slide 1 · apresentação ── */
.hero-slide--intro {
    background:
        linear-gradient(135deg, rgba(49, 51, 50, 0.55) 0%, rgba(225, 34, 23, 0.33) 100%),
        url('../img/bomb_02.webp') center/cover no-repeat;
}

.hero-slide--intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(242, 118, 19, .12) 0%, transparent 70%);
    pointer-events: none;
}

/* Escurece levemente a foto atrás do texto para ele ganhar destaque */
.hero-slide--intro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 58% 72% at 62% 50%, rgba(0, 0, 0, .46) 0%, transparent 72%);
    pointer-events: none;
}

/* Logo + texto formam um conjunto centralizado na tela */
.hero-slide--intro .hero-grid {
    grid-template-columns: auto minmax(0, 680px);
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    padding: 0 !important;
}

.hero-slide--intro .hero-img img {
    width: clamp(220px, 27vw, 400px);
    height: auto;
}

.hero-slide--intro .hero-text {
    max-width: 680px;
    text-align: center;
}

/* Detalhe âmbar acima do título */
.hero-slide--intro .hero-text h1::before {
    content: '';
    display: block;
    width: 64px;
    height: 5px;
    margin: 0 auto 22px;
    border-radius: 3px;
    background: var(--amber);
}

.hero-slide--intro .hero-text h1 {
    margin-bottom: 22px;
    font-size: clamp(2.1rem, 4.2vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: .01em;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .6);
}

.hero-slide--intro .hero-text p {
    max-width: 600px;
    margin: 0 auto;
    font-size: clamp(1.02rem, 1.45vw, 1.22rem);
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

/* ── Slides de notícia ── */
.hero-slide--news {
    background: linear-gradient(#1f2120, #1f2120);
    /* degradê: ver nota em #hero.hero-carousel */
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 8s ease-out;
}

.hero-slide.is-active .hero-slide-bg img {
    transform: scale(1);
    /* leve zoom-out enquanto o slide está ativo */
}

.hero-slide-bg--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red-dark) 0%, var(--navy-mid) 100%);
    color: rgba(255, 255, 255, .1);
    font-size: 9rem;
}

/* Escurece a foto para o texto ficar legível */
.hero-slide--news::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .55) 48%, rgba(0, 0, 0, .12) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 42%);
    pointer-events: none;
}

.hero-news-content {
    max-width: 700px;
}

.hero-news-kicker {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 16px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}

.hero-news-kicker time {
    color: rgba(255, 255, 255, .8);
    letter-spacing: .08em;
}

.hero-news-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 18px;
    font-size: clamp(1.8rem, 3.8vw, 3.1rem);
    line-height: 1.1;
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.hero-news-title a {
    color: inherit;
}

.hero-news-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 580px;
    margin-bottom: 28px;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.hero-news-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: background var(--transition), border-color var(--transition), gap var(--transition);
}

.hero-btn--primary {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.hero-btn--primary:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    gap: 13px;
}

.hero-btn--ghost {
    border-color: rgba(255, 255, 255, .6);
    color: var(--white);
}

.hero-btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--white);
}

/* ── Guia de slides (pontos): centralizado embaixo e navegável ── */
.hero-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 3;
    pointer-events: none;
    /* só os pontos recebem clique */
}

.hero-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
    padding: 9px 14px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.hero-dot {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    background: rgba(255, 255, 255, .5);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.hero-dot::before {
    /* área de toque maior que o ponto visível */
    content: '';
    position: absolute;
    inset: -12px -5px;
}

.hero-dot[aria-current="true"] {
    width: 34px;
    background: var(--amber);
}

.hero-dot:hover {
    background: var(--white);
}

/* Existe carrossel de verdade: o chevron central do hero some para não disputar espaço */
#hero.has-controls .hero-scroll-hint {
    display: none;
}

/* ── Telas pequenas ── */
@media (max-width: 768px) {
    #hero.hero-carousel {
        min-height: max(560px, calc(100svh - 70px));
        /* no mobile o header tem só a barra de 70px */
    }

    .hero-slide {
        padding: 56px 0 72px;
    }

    /* Slide 1 empilhado: logo em cima, texto embaixo, tudo centralizado */
    .hero-slide--intro .hero-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
    }

    .hero-slide--intro .hero-img img {
        width: min(210px, 54vw);
        margin: 0 auto;
    }

    .hero-slide--intro .hero-text h1 {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
        margin-bottom: 16px;
    }

    .hero-slide--intro .hero-text h1::before {
        width: 52px;
        margin-bottom: 16px;
    }

    .hero-slide--news::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .4) 100%);
    }

    .hero-news-content {
        margin: 0 auto;
        text-align: center;
    }

    .hero-news-kicker,
    .hero-news-actions {
        justify-content: center;
    }

    .hero-news-excerpt {
        margin-left: auto;
        margin-right: auto;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: .95rem;
    }
}

@media (max-width: 480px) {
    .hero-news-title {
        font-size: 1.6rem;
    }

    .hero-btn {
        padding: 12px 20px;
        font-size: .8rem;
    }
}

/* ── Menos movimento ── */
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }

    .hero-slide-bg img,
    .hero-slide.is-active .hero-slide-bg img {
        transition: none;
        transform: none;
    }
}