/* =========================================================================
   Al Quadrato — Camada responsiva compartilhada
   Fonte única de verdade para o colapso dos grids em tablet/telefone.
   Carregada DEPOIS do <style> inline de cada página (e de mobile-nav.css),
   por isso vence sem precisar de !important.

   Contexto: cada página tinha seus próprios breakpoints (860 / 900 / 1040)
   enquanto o menu hambúrguer troca a 960px (mobile-nav.css). Isso deixava a
   faixa 861–960px (tablet retrato) com o menu já em hambúrguer mas o conteúdo
   ainda em layout desktop. Aqui unificamos tudo em 960px e adicionamos um
   nível ~560px para os grids de 4 colunas caírem para 1 no telefone.
   ========================================================================= */

/* ---- Tablet e abaixo: alinhar com a troca do menu (960px) ---------------- */
@media (max-width: 960px) {
  /* grids de 2 colunas → 1 coluna */
  .storia-grid,
  .info-grid,
  .dishes,
  .wines,
  .ct-grid,
  .pk-grid,
  .feat-grid,
  .two-grid {
    grid-template-columns: 1fr;
  }

  /* grids de 4 colunas → 2 colunas (passo intermediário) */
  .terr-grid,
  .gal-grid,
  .plat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* mosaico da galeria: tiles menores + neutraliza o span do destaque
     para não estourar em 2 colunas */
  .gal-grid { grid-auto-rows: 170px; }
  .gal-grid .g1 { grid-column: span 2; grid-row: span 1; }
}

/* ---- Telefone: grids de 4 colunas caem para 1 --------------------------- */
@media (max-width: 560px) {
  .terr-grid,
  .gal-grid,
  .plat-grid {
    grid-template-columns: 1fr;
  }
  .gal-grid { grid-auto-rows: 210px; }
  .gal-grid .g1 { grid-row: span 1; }

  /* polimento de leitura no telefone */
  .kmarquee .track { font-size: 1.15rem; }
  .hero-inner { padding: 108px 0 60px; }
}