/* §01 HERO — Responsive */

@media (max-width: 1024px) {
  .hero-headline { max-width: 54%; }
  .hero-headline__line { font-size: clamp(36px, 5.4vw, 68px); }
  .hero-headline--compact { max-width: 48%; }
  .hero-headline--compact .hero-headline__line { font-size: clamp(30px, 4.2vw, 52px); }
  .hero-secondary__text { font-size: 0.8rem; }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 100px var(--space-lg) var(--space-3xl);
    flex-direction: column;
    align-items: center;
  }

  .hero-headline {
    max-width: 340px; text-align: center;
    align-self: center; padding-bottom: var(--space-xl);
  }
  /* Teto reduzido de 72px para 52px: em 390px de largura, 72px cabia só
     3-4 letras maiúsculas por linha e qualquer título com mais de 2
     palavras por linha estourava em 4-5 linhas (medido: "Feito por inteiro,
     do primeiro dia até hoje" virava 5 linhas, ver relatório da rodada). */
  .hero-headline__line { font-size: clamp(32px, 9.5vw, 52px); text-align: center; }
  .hero-headline--compact { max-width: 300px; }
  .hero-headline--compact .hero-headline__line { font-size: clamp(26px, 7.5vw, 40px); }

  /* flex-basis:260px do CSS base (assets/css/hero.css) é largura no layout
     em linha do desktop, mas vira ALTURA aqui porque .hero-content passa a
     flex-direction:column. Sem este reset o cartão fica fixo em 260px de
     altura mesmo quando o conteúdo (rótulo + texto + botão) ocupa bem
     menos, sobrando ~155px vazios abaixo do botão (medido em
     .playwright-cli/1-ABERTURA-390x844-antes-slide2.png). Com flex-basis:
     auto o cartão passa a acompanhar a altura do próprio conteúdo. */
  .hero-secondary {
    max-width: 100%; text-align: center; padding-top: 0;
    flex-basis: auto; min-width: 0;
  }

  /* Evita salto com a barra de URL do mobile */
  .hero-section { min-height: 100dvh; }
  .hero-content { min-height: 100dvh; }

  /* Dots centralizados no rodapé; setas menores */
  .hero-carousel .ta-carousel__dots {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: var(--space-md);
  }
  .hero-carousel .ta-carousel__arrow { width: 40px; height: 40px; }

  /* Legibilidade: o H1 fica centralizado no miolo da tela, então o overlay NÃO pode
     abrir em transparent ali. Motivo histórico: os antigos slides 3 e 4 (removidos,
     ver hero.html) eram fotos quase brancas, sem cobertura nessa faixa o texto
     off-white ficava ilegível. Mínimo de 0.55 onde o texto cai. Recheck 09/09/2026
     com as 3 fotos novas do acervo (Diamante Negro, Lei Seca, Leite Ninho, todas
     com fundo mais escuro/saturado que os slides antigos): contraste segue acima
     do mínimo, confirmado por captura em .playwright-cli/1-ABERTURA-390x844-*. */
  .hero-slide__overlay {
    background: linear-gradient(180deg,
      rgba(26,10,8,0.45) 0%,
      rgba(26,10,8,0.55) 25%,
      rgba(26,10,8,0.60) 60%,
      rgba(26,10,8,0.86) 100%);
  }

  .hero-scroll { display: none; }

}

@media (max-width: 768px) {
  .hero-section .hero-carousel .hero-slide--full-photo .hero-slide__img { object-fit: cover; object-position: center; }
  .hero-slide--full-photo .hero-slide__overlay {
    background: linear-gradient(180deg, rgba(26,10,8,.6), rgba(26,10,8,.18) 26%, transparent 42%, transparent 68%, rgba(26,10,8,.8));
  }
}