/*
 * carrossel.css — visual do carrossel acessível da home (#167), Padrão Priscila.
 * Usado com frontend/scripts/carrossel.js. Mobile first: a base é o celular.
 *
 * Sem JavaScript, a lista vira uma faixa que se arrasta (scroll-snap):
 * cada slide "encaixa" inteiro na tela, como as páginas de um livro.
 */

/* Caixa do carrossel: posição relativa para os botões ficarem por cima */
.carrossel { position: relative; }

/* A faixa que rola de lado. "scroll-snap" faz cada slide parar inteiro na tela */
.carrossel-trilho {
    display: flex;                       /* slides lado a lado */
    overflow-x: auto;                    /* rola na horizontal */
    scroll-snap-type: x mandatory;       /* sempre para encaixado num slide */
    scrollbar-width: none;               /* esconde a barra de rolagem (Firefox) */
    list-style: none;                    /* lista sem bolinhas */
    margin: 0;
    padding: 0;
    border-radius: 8px;
    overscroll-behavior-x: contain;      /* arrastar até o fim não arrasta a página junto */
}
.carrossel-trilho::-webkit-scrollbar { display: none; }  /* esconde a barra (Chrome/Edge/Safari) */

/* Cada slide ocupa a largura toda da faixa e encaixa pelo começo */
.carrossel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;                        /* deixa o texto quebrar em vez de alargar o slide */
}

/* Barra de controles: pausar, contador, anterior e próximo */
.carrossel-controles {
    display: flex;
    flex-wrap: wrap;                     /* no celular estreito, o link desce para a sua própria linha */
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
/* "hidden" vence o display:flex acima (os controles só aparecem com JavaScript) */
.carrossel-controles[hidden] { display: none; }

/* Botões redondos de 44 px: tamanho mínimo confortável para o dedo (acessibilidade) */
.carrossel-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #002776;           /* azul CBSA */
    border-radius: 50%;
    background: #fff;
    color: #002776;
    font-size: 15px;
    cursor: pointer;
}
.carrossel-botao:hover { background: #002776; color: #fff; }
/* Contorno amarelo bem visível para quem navega pelo teclado */
.carrossel-botao:focus-visible { outline: 3px solid #ffdf00; outline-offset: 2px; }

/* Contador "2 / 6" entre os botões */
.carrossel-contador {
    min-width: 44px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #002776;
}

/* ---------- Slider de notícias (#167): foto + título por cima ---------- */
.home-noticia-slide { position: relative; display: block; border-radius: 8px; overflow: hidden; text-decoration: none; background: #f8f9fa; }
/* Foto em proporção 3:2 (não "pula" o layout enquanto carrega) */
.home-noticia-slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 3px solid #DB2E20; }
/* Faixa escura com o título; o degradê garante contraste do texto branco sobre qualquer foto */
.home-noticia-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;                          /* encosta na borda vermelha */
    padding: 28px 14px 12px;
    background: linear-gradient(transparent, rgba(0, 20, 60, .92) 45%);
    color: #fff;
}
.home-noticia-data { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #ffdf00; text-transform: uppercase; }
.home-noticia-titulo { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(15px, 2.6vw, 19px); line-height: 1.3; margin-top: 2px; }
.home-noticia-slide:hover .home-noticia-titulo { text-decoration: underline; }
.home-noticia-slide:focus-visible { outline: 3px solid #ffdf00; outline-offset: -3px; }

/* Botão "Ver todas as notícias" embaixo do slider (substitui a seção que saiu) */
.home-slider-mais { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: auto; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #007a2e; }
.home-slider-mais:hover, .home-slider-mais:focus-visible { color: #002776; }
/* Celular: o link ocupa a linha toda e os 4 controles ficam juntos na linha de baixo */
.home-slider .home-slider-mais { flex-basis: 100%; }
/* A partir de 576 px cabe tudo numa linha: o link volta a ter só a largura do texto */
@media (min-width: 576px) {
    .home-slider .home-slider-mais { flex-basis: auto; }
}

/* Quem pediu menos movimento: a faixa rola sem animação */
@media (prefers-reduced-motion: reduce) {
    .carrossel-trilho { scroll-behavior: auto; }
}

/* ---------- Cartão do curso dentro do carrossel (#167) ---------- */
/* A faixa que rola corta a sombra que sai dela; dentro do carrossel o cartão usa uma borda fina */
/* max-width: none -> ocupa a largura toda, igual ao slider de notícias (simetria no celular) */
.carrossel .home-curso { box-shadow: none; border: 1px solid #e5e7eb; max-width: none; }

/* ---------- Simetria dos destaques no computador (#167) ----------
   A partir de 992 px, notícias e cursos ficam lado a lado. Os dois carrosséis
   ganham a MESMA altura fixa, então os cartões terminam juntos e as barras de
   botões ficam exatamente na mesma linha, qualquer que seja a foto. */
@media (min-width: 992px) {
    /* Altura igual para as duas faixas: entre 340 e 400 px, conforme a largura da tela */
    .home-destaques .carrossel-trilho { height: clamp(340px, 29vw, 400px); }
    /* Cada slide ocupa a altura toda da faixa */
    .home-destaques .carrossel-slide { height: 100%; }
    /* Notícia: a foto preenche a altura (corta as sobras, sem distorcer) */
    .home-noticia-slide { height: 100%; }
    .home-noticia-slide img { height: 100%; aspect-ratio: auto; }
    /* Curso: cartão em coluna, o cartaz ocupa o espaço que sobra e o título fica embaixo */
    .carrossel .home-curso { display: flex; flex-direction: column; height: 100%; max-width: none; }
    .carrossel .home-curso-img { flex: 1; min-height: 0; height: auto; aspect-ratio: auto; }
}