/* ==========================================================================
   HOME — composição do corpo da página inicial

   TERRITÓRIO 2 — o corpo vende e facilita a compra.
   Manifesto, história da marca e vitrine de blog NÃO entram aqui.
   Ver seção 5 de specs/site.md.

   A newsletter mudou de território na revisão 3: os estilos dela
   agora vivem em componentes.css, dentro do rodapé.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   O fundo é imagem: o campo já reserva a área inteira e o véu já existe.
   Quando a fotografia entrar, o texto continua legível e o layout não
   desloca — é só trocar o conteúdo de .hero-fundo por <img>.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(82vh, 760px);
  display: grid;
  place-items: center;
  background: var(--off);
  overflow: hidden;
}
.hero-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-fundo .midia,
.hero-fundo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-fundo .midia[data-vazio]::after { align-self: start; margin-top: var(--e8); }

/* --- MODO FOTOGRAFIA ------------------------------------------------------
   O modo liga SOZINHO assim que existir uma tag img dentro de .hero-fundo.
   Basta trocar o div .midia pela imagem — não precisa mexer em classe:

       <div class="hero-fundo" aria-hidden="true">
         <img src="..." alt="" width="1920" height="1080" fetchpriority="high">
       </div>

   A classe .hero-foto continua funcionando para forçar o modo à mão, e é
   ela que o painel vai usar quando a imagem vier do banco.

   Véu e inversão do texto vêm juntos: sem eles, texto preto sobre foto
   perde contraste. Não aplicar sobre o campo vazio — ali o fundo já é
   claro e o véu derrubaria a legibilidade do rótulo de pendência.
   -------------------------------------------------------------------------- */
/* Fundo escuro sob a foto. Existe por segurança: se a imagem falhar em
   carregar, o texto branco continua legível sobre preto em vez de ficar
   branco sobre claro. */
.hero-foto .hero-fundo,
.hero:has(.hero-fundo img) .hero-fundo { background: var(--preto-puro); }

.hero-foto .hero-fundo::after,
.hero:has(.hero-fundo img) .hero-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.hero-foto,
.hero:has(.hero-fundo img) { color: var(--branco); }

.hero-foto .rotulo,
.hero:has(.hero-fundo img) .rotulo { color: rgba(255, 255, 255, .72); }

.hero-foto .texto,
.hero:has(.hero-fundo img) .texto { color: rgba(255, 255, 255, .78); }

.hero-foto .filete,
.hero:has(.hero-fundo img) .filete { background: rgba(255, 255, 255, .35); }

/* sobre foto, o contorno preto some: vira o botão claro */
.hero-foto .btn-contorno,
.hero:has(.hero-fundo img) .btn-contorno { border-color: var(--branco); color: var(--branco); }

.hero-foto .btn-contorno:hover,
.hero:has(.hero-fundo img) .btn-contorno:hover { background: var(--branco); color: var(--preto); }

.hero-foto :where(a, button):focus-visible,
.hero:has(.hero-fundo img) :where(a, button):focus-visible { outline-color: var(--branco); }

.hero-conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
  text-align: center;
  max-width: 780px;
  padding: var(--secao-mini) var(--gutter);
}
.hero-conteudo .texto { max-width: 46ch; }
.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e4);
  margin-top: var(--e3);
}

/* filete de assinatura sob o rótulo */
.filete {
  flex: none;
  width: 1px;
  height: var(--e7);
  background: var(--linha-forte);
}
.sobre-escuro .filete { background: rgba(255,255,255,.35); }

/* --------------------------------------------------------------------------
   GRADES
   -------------------------------------------------------------------------- */
/* Tiles de categoria: SEM USO na Home desde a revisão 4 (D33) — o corpo
   ficou só com produto, e o acesso às categorias vive no menu e no rodapé.
   O componente segue aqui porque é o layout da página de Categoria. */
.grade-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
/* UMA coluna de 320 a 479px, duas a partir de 480 — é a tabela da seção 13
   do specs/site.md. A base estava em duas colunas desde 320px, o que
   contrariava a spec E estourava a largura: o card não conseguia encolher
   abaixo da largura mínima do próprio botão. Ver P21. */
.grade-cards { display: grid; grid-template-columns: 1fr; gap: var(--e7) var(--e5); }

/* Rede de segurança: sem isto, um item de grade não encolhe abaixo do seu
   conteúdo mínimo, e um nome de produto comprido reabre o mesmo defeito. */
.grade-cards > * { min-width: 0; }
.grade-tres  { display: grid; grid-template-columns: 1fr; gap: var(--e7); }

/* --------------------------------------------------------------------------
   BLOCO EDITORIAL
   Componente mantido, mas SEM USO no corpo das páginas de venda.
   Reservado para Sobre e Blog, que são o território 4.
   -------------------------------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e7);
  align-items: center;
}
.editorial-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  max-width: 46ch;
}
.editorial-texto .titulo-bloco { max-width: 16ch; }

/* --------------------------------------------------------------------------
   SOB ENCOMENDA — único bloco escuro do corpo.
   É serviço à venda, não texto institucional: por isso fica.
   -------------------------------------------------------------------------- */
.encomenda { text-align: center; }
.encomenda .env {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
}
.encomenda .texto { max-width: 48ch; }

/* --------------------------------------------------------------------------
   PENDÊNCIA — marcador honesto de dado que ainda não existe
   -------------------------------------------------------------------------- */
.pendencia {
  border: 1px dashed var(--linha-forte);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  text-align: left;
  color: var(--cinza-texto);
  font-size: var(--fs-peq);
}
.pendencia strong {
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--vinho);
}

.avaliacao {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--linha);
}
.avaliacao-pe { display: flex; align-items: center; gap: var(--e3); margin-top: auto; }
.avaliacao-foto {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--off);
  border: 1px dashed var(--linha-forte);
}

/* ==========================================================================
   RESPONSIVO — mobile-first
   ========================================================================== */

@media (min-width: 480px) {
  .grade-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
  .grade-tres { grid-template-columns: repeat(3, 1fr); }
  .news-form { flex-wrap: nowrap; }
}

@media (min-width: 768px) {
  /* duas colunas: a marca ocupa a linha inteira acima dos links */
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .grade-tiles { grid-template-columns: repeat(4, 1fr); }
  .grade-cards { grid-template-columns: repeat(4, 1fr); gap: var(--e8) var(--e6); }

  .editorial { grid-template-columns: 1fr 1fr; gap: var(--e9); }
  .editorial-texto { padding-inline: var(--e5); }
  .editorial.invertido .editorial-midia { order: 2; }

  /* cinco colunas: marca · categorias · a loja · ajuda · contato (D36) */
  .rodape-grade {
    grid-template-columns: 1.2fr .9fr .9fr .9fr 1.1fr;
    gap: var(--e7);
  }
  .rodape-marca { grid-column: auto; }
  .rodape-fim { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1280px) {
  .rodape-grade { gap: var(--e8); }
  .editorial { gap: var(--e10); }
}

/* --------------------------------------------------------------------------
   PÁGINAS DE AVISO — 404 e 500
   Composição centralizada, como o resto do site. Sem cabeçalho nem rodapé:
   quem caiu aqui precisa de uma saída, não de navegação.
   -------------------------------------------------------------------------- */
.pagina-aviso {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e5);
  text-align: center;
  padding: var(--secao-mini) var(--gutter);
}
.logo-aviso { --logo-altura: 72px; margin-bottom: var(--e5); }
.pagina-aviso .texto { max-width: 46ch; }

.detalhe-erro {
  max-width: 100%;
  margin-top: var(--e7);
  padding: var(--e5);
  border: 1px dashed var(--linha-forte);
  background: var(--off);
  color: var(--cinza-texto);
  font-size: var(--fs-peq);
  line-height: 1.6;
  text-align: left;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}