/* ============================================================================
   page-cardapio.css - Emma Café Bistrot

   Estrutura ORGANIZACIONAL importada do menu do ZEFY (referência de UX, não
   de identidade): barra de chips de categoria + seção > subseção > item,
   com nome do prato e preço na mesma linha, descrição abaixo e badges de
   alérgeno/dieta condicionais. Identidade 100% Emma: fundo bege chapado,
   títulos em vinho, corpo em preto suave, tipografia Noto Sans. Chips e
   tags usam pílula (já previsto pro filtro do cardápio desde o design
   system: .emma-btn já é pill; aqui os chips seguem o mesmo padrão).

   ITEM SEM FOTO (hoje, todo o cardápio): .cardapio__item é um CARD só de
   texto — fundo levemente mais claro que o bege da página, cantos
   arredondados e sombra suave (padrão ZEFY, sem a foto — nenhum item do
   Emma tem foto hoje). Nome+preço na linha, descrição abaixo, tags abaixo.
   ITEM COM FOTO (quando 'img' existir): .cardapio__item--com-foto vira
   linha horizontal com a imagem à esquerda, dentro do mesmo card —
   suportado desde já, mesmo sem uso atual.

   LAYOUT (2026-07-15, feedback da cliente): LISTA DE UMA COLUNA em todos os
   breakpoints — igual ao ZEFY (referência de estrutura). O antigo layout em
   2 colunas (CSS multi-column, "menu impresso aberto") ficava confuso pra
   ela, itens quebravam entre as colunas. Agora cada item ocupa a largura
   total do container de leitura, empilhado verticalmente, um embaixo do
   outro, como card.

   LARGURA (2026-07-15, pedido do Alisson): container ampliado de ~760px
   pra até 1200px em telas grandes — o antigo max-width deixava muito
   espaço vazio nas laterais em desktop. Padding lateral responsivo vem de
   .emma-container (clamp em design-system.css), aplicado no mesmo elemento.

   Consome tokens de design-system.css. Feito por Frame Tecnologia.
   ============================================================================ */

.cardapio{
  max-width:920px;
  padding-block:clamp(2.5rem,7vw,4rem) clamp(4rem,10vw,7rem);
  display:flex;
  flex-direction:column;
  align-items:center;
}

@media (min-width:700px){
  .cardapio{ max-width:1040px; }
}

@media (min-width:1100px){
  .cardapio{ max-width:1200px; }
}

/* ─── Título da página ─── */
.cardapio__topo{
  text-align:center;
  max-width:52ch;
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.cardapio__titulo{
  margin:0;
  font-weight:var(--peso-negrito);
  font-size:clamp(2rem,6vw,3rem);
  line-height:1;
  letter-spacing:var(--tracking-logo);
  color:var(--vinho);
}
.cardapio__intro{
  margin:.9rem 0 0;
  color:var(--texto);
  font-size:var(--tam-pequeno);
  line-height:var(--altura-linha);
}

/* ─────────────────────────────────────────────────────────────
   BARRA DE CHIPS — filtro de categoria. Sticky (fica visível ao
   rolar, como uma "barra de pills" fixa no topo da viewport assim
   que o header sai de vista). Rola na horizontal em telas estreitas
   sem nunca estourar a largura da página (overflow-x só AQUI dentro,
   nunca no body).
────────────────────────────────────────────────────────────── */
.cardapio__chips{
  position:sticky;
  top:0;
  z-index:40;
  width:100%;
  background:var(--fundo);
  padding-block:.65rem;
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.cardapio__chips-trilho{
  display:flex;
  align-items:center;
  gap:.6rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* trilho de filtro, não conteúdo — some sem perder o toque/teclado */
  padding-block:2px; /* espaço pro anel de foco não cortar */
}
.cardapio__chips-trilho::-webkit-scrollbar{ display:none; }

@media (min-width:700px){
  .cardapio__chips-trilho{
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:visible;
  }
}

.chip{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px; /* toque confortável */
  padding:.55rem 1.2rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--vinho) 35%, transparent);
  background:transparent;
  color:var(--vinho);
  font-family:var(--fonte-base);
  font-weight:var(--peso-medio);
  font-size:var(--tam-rotulo);
  letter-spacing:var(--tracking-rotulo);
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background 160ms cubic-bezier(.22,1,.36,1), color 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1);
}
.chip:hover{ background:color-mix(in srgb, var(--vinho) 10%, var(--fundo)); }
.chip:focus-visible{ outline:2px solid var(--vinho); outline-offset:2px; }
.chip.is-active{ background:var(--vinho); color:var(--fundo); border-color:var(--vinho); }

/* ─── Categoria (bloco de página do menu) ─── */
.cardapio__categoria{
  width:100%;
  text-align:center;
  margin-bottom:clamp(3.5rem,6.2vw,6.5rem);
  scroll-margin-top:calc(64px + 1rem); /* compensa a barra de chips sticky */
}
.cardapio__categoria:last-of-type{
  margin-bottom:clamp(3rem,7vw,5rem);
}

.cardapio__categoria-topo{
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
}

/* ─── Título de seção: ALMOÇO, BRUNCH ALL DAY... ─── */
.cardapio__secao-titulo{
  margin:0;
  font-weight:var(--peso-regular);
  font-size:var(--tam-titulo-secao);
  line-height:1.3;
  letter-spacing:var(--tracking-largo);
  text-transform:uppercase;
  color:var(--vinho);
}
.cardapio__categoria-sub{
  margin:.6rem auto 0;
  max-width:48ch;
  font-family:var(--fonte-italica);
  font-style:italic;
  font-size:var(--tam-pequeno);
  color:var(--texto-muted);
}

/* ─── Subseção: Proteínas, Toasts, Entradas... ─── */
.cardapio__subsecao{ width:100%; }
.cardapio__subsecao + .cardapio__subsecao{ margin-top:clamp(2rem,5vw,3rem); }

.cardapio__subsecao-titulo{
  margin:0 0 clamp(1.5rem,3.5vw,2rem);
  font-weight:var(--peso-medio);
  font-size:.8rem;
  line-height:1.3;
  letter-spacing:var(--tracking-rotulo);
  text-transform:uppercase;
  color:var(--vinho);
}

/* ─── Lista de pratos — uma coluna, empilhada ─── */
.cardapio__lista{
  display:flex;
  flex-direction:column;
  gap:clamp(1.4rem,3vw,1.75rem);
  width:100%;
}

/* ─── Item = card (padrão ZEFY, sem foto) ───
   Fundo levemente mais claro que o bege da página (--fundo misturado com
   branco), radius suave, sombra discreta. Padding responsivo via clamp
   pra não sobrar aperto no mobile nem folga demais no desktop. */
.cardapio__item{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  text-align:left;
  width:100%;
  background:color-mix(in srgb, var(--fundo) 35%, white 65%);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(60,36,20,.08);
  padding:clamp(1rem,3vw,1.4rem) clamp(1.15rem,3.5vw,1.75rem);
  transition:box-shadow 200ms cubic-bezier(.22,1,.36,1);
}

@media (hover:hover){
  .cardapio__item:hover{ box-shadow:0 4px 14px rgba(60,36,20,.12); }
}

.cardapio__item-linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}

.cardapio__item-nome{
  margin:0;
  flex:1;
  font-family:var(--fonte-base);
  font-weight:var(--peso-medio);
  font-size:1.02rem;
  line-height:1.35;
  color:var(--texto);
}

.cardapio__item-preco{
  flex-shrink:0;
  font-family:var(--fonte-base);
  font-weight:var(--peso-medio);
  font-size:.92rem;
  color:var(--vinho);
  white-space:nowrap;
}

.cardapio__item-desc{
  margin:0;
  max-width:62ch; /* linha de leitura confortável, mesmo com o item em largura total */
  font-family:var(--fonte-italica);
  font-style:italic;
  font-weight:var(--peso-regular);
  font-size:.85rem;
  line-height:1.5;
  color:var(--texto-muted);
}

/* ─── Badges de alérgeno/dieta — condicionais (só quando 'tags' existir) ─── */
.cardapio__item-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.15rem 0 0;
  padding:0;
  list-style:none;
}
.cardapio__tag{
  padding:.2rem .6rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--texto-muted) 45%, transparent);
  font-size:.66rem;
  font-weight:var(--peso-medio);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--texto-muted);
  white-space:nowrap;
}

/* ─── Item COM foto — suporte condicional (nenhum item usa hoje) ─── */
.cardapio__item--com-foto{
  flex-direction:row;
  align-items:flex-start;
  max-width:none;
}
.cardapio__item-foto{
  flex-shrink:0;
  width:88px;
  height:88px;
  overflow:hidden;
}
.cardapio__item-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cardapio__item--com-foto .cardapio__item-conteudo{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

/* ─── Falar com a gente pelo WhatsApp (CTA funcional, discreto) ─── */
.cardapio__cta{
  text-align:center;
  padding-top:clamp(1rem,3vw,2rem);
  width:100%;
  max-width:420px;
}
.cardapio__cta-texto{
  margin:0 0 1.25rem;
  color:var(--texto);
}
.cardapio__cta-link{
  display:inline-block;
  font-weight:var(--peso-medio);
  color:var(--vinho);
  text-underline-offset:3px;
}