/* =====================================================================
   Viva a Vida — camada de adaptação para celular e tablet
   Criada em agosto/2026.

   IMPORTANTE: tudo aqui está dentro de @media. Nenhuma regra deste
   arquivo tem efeito em telas de computador — a versão desktop
   continua exatamente como estava.

   Breakpoints:
     ≤ 900px  → tablets e celulares na horizontal
     ≤ 600px  → celulares
   ===================================================================== */


/* =========================  ≤ 900px  ========================= */
@media (max-width: 900px){

  /* Escala tipográfica e de espaçamento reduzida.
     Como os componentes usam var(--token), redefinir aqui já
     ajusta títulos, textos e respiros do site inteiro. */
  :root{
    --text-cover:46px;
    --text-display:34px;
    --text-h1:27px;
    --text-h2:24px;
    --text-h3:20px;
    --text-lead:16px;
    --text-quote:18px;

    --space-16:48px;
    --pad-section-y:48px;
    --gap-grid:20px;
    --gap-columns:16px;
    --pad-card-y:20px;
    --pad-card-x:20px;
  }

  /* Margens laterais da página: 56px é margem de monitor, não de celular */
  .vv-shell{
    padding-left:var(--pad-page-x-mobile) !important;
    padding-right:var(--pad-page-x-mobile) !important;
  }

  /* Toda grade de duas ou mais colunas vira coluna única */
  .vv-grid{ grid-template-columns:1fr !important; }
  .vv-grid > *{ grid-column:auto !important; }

  /* A vitrine do auto-serviço (6 colunas com vãos) vira 2 colunas */
  .vv-grid-cards{ grid-template-columns:1fr 1fr !important; gap:16px !important; }
  .vv-grid-cards > *{ grid-column:auto !important; }

  /* Respiro vertical entre seções */
  .vv-section{ padding-top:48px !important; margin-top:48px !important; }
  .vv-hero{ padding:52px 0 56px !important; }

  /* Bloco de abertura */
  .vv-h1{ font-size:36px !important; line-height:1.1 !important; margin-top:20px !important; }
  .vv-kicker{
    white-space:normal !important;
    font-size:11px !important;
    letter-spacing:.16em !important;
    line-height:1.5 !important;
  }
  .vv-hero-quote{ font-size:20px !important; margin-top:24px !important; }

  /* Cabeçalho: deixa de ser fixo (economiza tela) e empilha em duas linhas */
  .vv-header{ position:static !important; }
  .vv-header-inner{
    flex-direction:column !important;
    gap:12px !important;
    padding:14px var(--pad-page-x-mobile) !important;
  }
  .vv-nav{
    width:100%;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:16px !important;
  }

  /* Rodapé */
  .vv-footer{ padding:44px 0 36px !important; margin-top:48px !important; }

  /* Foto do cardápio do dia: 9/16 numa coluna só ficaria altíssima */
  .vv-cardapio-img{ aspect-ratio:3 / 4 !important; }
}


/* =========================  ≤ 600px  ========================= */
@media (max-width: 600px){

  :root{
    --pad-page-x-mobile:20px;
    --text-h1:24px;
    --text-h3:19px;
  }

  .vv-h1{ font-size:30px !important; }
  .vv-hero-quote{ font-size:18px !important; }

  /* Uma coluna também na vitrine do auto-serviço */
  .vv-grid-cards{ grid-template-columns:1fr !important; }

  /* Fotos verticais 2/3 ficam altas demais ocupando a largura toda */
  .vv-photo-tall > div{ aspect-ratio:4 / 3 !important; }

  /* Botões em coluna, largura cheia: alvo de toque confortável.
     A recomendação de acessibilidade é no mínimo 44px de altura. */
  .vv-btn-row{ flex-direction:column !important; align-items:stretch !important; }
  .vv-btn-row > a,
  .vv-btn-row > button{ justify-content:center !important; width:100% !important; }

  /* Abas das unidades: rolam lateralmente em vez de espremer */
  .vv-tabs{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .vv-tabs::-webkit-scrollbar{ display:none; }
  .vv-tabs > button{ flex:0 0 auto; white-space:nowrap; }
}