/* ============================================================
   STEFZA — CSS da Home Page
   Arquivo: css/home.css
   Inclui: slideshow, botões de navegação
   ============================================================

   SLIDESHOW — COMO EDITAR IMAGENS:
   Cada slide tem sua classe de fundo (.slide-1-bg, .slide-2-bg, etc.)
   Para trocar a imagem de fundo de um slide, altere o valor de
   background-image na classe correspondente abaixo.
   Use: background-image: url('../assets/images/nome-da-sua-imagem.jpg');

   ADICIONAR NOVO SLIDE:
   1. Copie um bloco .slide-N-bg abaixo e incremente o número
   2. Adicione <input> e <label> correspondentes no HTML (index.html)
   3. Adicione os @keyframes e a regra de animação para N slides
   4. Atualize totalSlides em js/home.js
   ============================================================ */


/* ============================================================
   SLIDESHOW
   ============================================================ */

/* Oculta os radio buttons de controle */
.slide-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slideshow-wrapper {
  position: relative;
  width: 100%;
  /* ALTURA DO SLIDESHOW: ajuste aqui se necessário */
  height: 520px;
  overflow: hidden;
  background: #1a1a1a;
  /* Compensa o header fixo */
  margin-top: 70px;
}

.slides-container {
  display: flex;
  width: 300%; /* 100% × número de slides */
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

/* --- Controle de posição via radio ---
   Quando o radio N está checked, move o container para mostrar o slide N */
#slide1:checked ~ .slides-container { transform: translateX(0%); }
#slide2:checked ~ .slides-container { transform: translateX(-33.333%); }
#slide3:checked ~ .slides-container { transform: translateX(-66.666%); }

/* Dots ativos */
#slide1:checked ~ .slideshow-dots label:nth-child(1),
#slide2:checked ~ .slideshow-dots label:nth-child(2),
#slide3:checked ~ .slideshow-dots label:nth-child(3) {
  background: #ffffff;
  transform: scale(1.2);
}

/* --- Cada slide individual --- */
.slide {
  width: 33.333%; /* 100% / número de slides */
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* ---- IMAGENS DE FUNDO DOS SLIDES ----
   EDITAR: substitua a URL pelo caminho da sua imagem.
   Enquanto não houver imagem real, usa um gradiente como placeholder. */

.slide-1-bg {
  /* SLIDE 2: substitua pela imagem real */
  /* background-image: linear-gradient(135deg, #2c1a44 0%, #b43536 100%); */
  background-image: url('../assets/images/noticias/noticia-1.jpg');
}

.slide-2-bg {
  /* SLIDE 2: substitua pela imagem real */
  /* background-image: linear-gradient(135deg, #2c1a44 0%, #b43536 100%); */
  background-image: url('../assets/images/noticias/noticia-2.jpg');
}

.slide-3-bg {
  /* SLIDE 2: substitua pela imagem real */
  /* background-image: linear-gradient(135deg, #2c1a44 0%, #b43536 100%); */
  background-image: url('../assets/images/noticias/noticia-3.jpg');
}

/* Overlay escuro sobre a imagem para garantir legibilidade do texto */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 60%,
    rgba(0, 0, 0, 0.1) 100%
  );
  display: flex;
  align-items: center;
}

/* Conteúdo de texto do slide */
.slide-conteudo {
  max-width: var(--largura-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  color: #ffffff;
}

.slide-categoria {
  display: inline-block;
  background: var(--cor-primaria);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
}

.slide-titulo {
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 14px;
  max-width: 600px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.slide-resumo {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  line-height: 1.55;
  margin-bottom: 24px;
}

.slide-btn {
  /* Botão do slide herda .btn .btn-primario do style.css */
  font-size: 0.82rem;
}

/* --- Dots de navegação --- */
.slideshow-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  border: 2px solid rgba(255,255,255,0.6);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   BOTÕES DE NAVEGAÇÃO DA HOME
   Grid 3×2 (desktop) / 1 coluna (mobile)
   Estilo inspirado em sindpaulista.org.br/servicos/
   ============================================================ */

.botoes-nav-secao {
  padding: 50px 0 60px;
  background: var(--cor-fundo);
}

.botoes-nav-grid {
  display: grid;
  /* 3 colunas no desktop, conforme imagem 1 do briefing */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.btn-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px 28px;
  background: var(--cor-fundo);
  border: 1.5px solid var(--cor-borda);
  border-radius: 10px;
  text-decoration: none;
  color: var(--cor-texto);
  transition: all 0.25s ease;
  gap: 12px;
  box-shadow: 0 2px 8px var(--cor-sombra);
  position: relative;
  overflow: hidden;
}

/* Linha de destaque no topo do card (bordô) */
.btn-nav-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cor-primaria);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.btn-nav-card:hover::before {
  transform: scaleX(1);
}

.btn-nav-card:hover {
  border-color: var(--cor-primaria);
  box-shadow: 0 6px 24px rgba(180, 53, 54, 0.15);
  transform: translateY(-3px);
  color: var(--cor-primaria);
}

/* Círculo de ícone */
.btn-nav-icone {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cor-fundo-cinza);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s;
  flex-shrink: 0;
}

.btn-nav-icone svg {
  width: 34px;
  height: 34px;
  stroke: var(--cor-primaria);
  transition: stroke 0.25s;
}

.btn-nav-card:hover .btn-nav-icone {
  background: var(--cor-primaria);
}

.btn-nav-card:hover .btn-nav-icone svg {
  stroke: #ffffff;
}

.btn-nav-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cor-texto);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.25s;
}

.btn-nav-card:hover .btn-nav-titulo {
  color: var(--cor-primaria);
}

.btn-nav-desc {
  font-size: 0.78rem;
  color: var(--cor-texto-claro);
  line-height: 1.4;
}


/* ============================================================
   RESPONSIVIDADE HOME
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .slideshow-wrapper {
    height: 420px;
  }

  .slide-conteudo {
    padding: 0 28px;
  }

  .botoes-nav-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .btn-nav-card {
    padding: 24px 14px 20px;
  }

  .btn-nav-icone {
    width: 58px;
    height: 58px;
  }

  .btn-nav-icone svg {
    width: 28px;
    height: 28px;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .slideshow-wrapper {
    height: 380px;
    margin-top: 62px; /* altura do header mobile */
  }

  .slide-conteudo {
    padding: 0 20px;
  }

  .slide-overlay {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.45) 60%,
      rgba(0,0,0,0.1) 100%
    );
    align-items: flex-end;
    padding-bottom: 40px;
  }

  .slide-titulo {
    font-size: 1.1rem;
  }

  .slide-resumo {
    display: none; /* esconde resumo no mobile para economizar espaço */
  }

  /* Grid 3 colunas no mobile também (cards menores) */
  .botoes-nav-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .btn-nav-card {
    padding: 18px 10px 16px;
    gap: 8px;
    border-radius: 8px;
  }

  .btn-nav-icone {
    width: 48px;
    height: 48px;
  }

  .btn-nav-icone svg {
    width: 24px;
    height: 24px;
  }

  .btn-nav-titulo {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  .btn-nav-desc {
    display: none; /* esconde descrição no mobile */
  }
}

@media (max-width: 360px) {
  .btn-nav-titulo {
    font-size: 0.65rem;
  }

  .btn-nav-icone {
    width: 42px;
    height: 42px;
  }

  .btn-nav-icone svg {
    width: 20px;
    height: 20px;
  }
}