/* ============================================================================
   EMMA CAFÉ BISTROT — css/page-home.css
   Reconstrução (Fase 2, 2026-07-15) fiel à estrutura do mockup
   referencia-nova/referencia-rapha.pdf: hero de 3 fotos full-bleed, menus
   Dia/Noite, "Por que nascemos?" com galeria horizontal, faixa full-bleed
   da xícara, galeria de fotos em grade e "Venha nos visitar" com logo
   empilhada. Usa full-bleed/emma-container/emma-section/titulo-secao já
   definidos em css/design-system.css — nada duplicado.
   Correção do bug de overflow horizontal no mobile (≤390px): toda foto
   lado a lado usa flex-basis percentual OU altura fixa + largura auto
   (nunca width:auto sem limite dos dois lados ao mesmo tempo), e a
   galeria de "Por que nascemos" roda em scroll horizontal contido
   (overflow-x:auto) em vez de tentar caber tudo na largura da tela.
   Feito por Frame Tecnologia.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────
   TÍTULOS DE SEÇÃO DA HOME — mesma cor/uppercase do design system,
   porém maiores e com tracking mais fechado que .titulo-secao (que é
   pensado pra rótulos pequenos tipo "ENTRADAS" no cardápio). Aplicado
   via seletor de contexto: nenhuma classe nova precisa ser adicionada
   no HTML, só a .titulo-secao que cada <h2> já usa.
────────────────────────────────────────────────────────────── */
.home-menus .titulo-secao,
.home-origem .titulo-secao,
.home-galeria .titulo-secao,
.home-reserva .titulo-secao{
  font-weight:var(--peso-regular);
  letter-spacing:.06em;
  line-height:1.15;
  font-size:clamp(1.85rem,3.8vw,3.625rem);
}

/* ─────────────────────────────────────────────────────────────
   1. HERO — 3 fotos full-bleed, larguras desiguais (igual ao mockup),
   sem gap, sem legenda. Altura em clamp pra nunca ficar gigante em
   telas largas nem espremida no mobile.
────────────────────────────────────────────────────────────── */
.home-hero{ background:var(--fundo); }
.home-hero__faixa{
  display:flex;
  height:clamp(224px,34.6vw,616px);
}
/* Inset (BUG-06): no mockup só o rodapé é full-bleed — o hero tem respiro
   de ~5% em cada lado. Sobrescreve o .full-bleed (largura 100vw + hack de
   margem negativa) usando o par de classes no mesmo elemento, que tem
   especificidade maior que .full-bleed sozinho. */
.home-hero__faixa.full-bleed{
  width:90%; max-width:90%; margin-left:auto; margin-right:auto;
  transform:none; padding-inline:0;
}
.home-hero__foto{
  display:block; height:100%; min-width:0; overflow:hidden;
}
.home-hero__foto--1{ flex:0 0 30%; }
.home-hero__foto--2{ flex:0 0 26%; }
.home-hero__foto--3{ flex:0 0 44%; }
.home-hero__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ─────────────────────────────────────────────────────────────
   2. ALMOÇO AO JANTAR — dois cards Dia/Noite lado a lado.
────────────────────────────────────────────────────────────── */
.home-menus__topo{ text-align:center; margin-bottom:clamp(2rem,5vw,3.25rem); }
.home-menus__sub{
  margin:.6rem 0 0; color:var(--texto-muted); font-size:var(--tam-pequeno);
}

.home-menus__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12.2%;
  max-width:73%;
  margin-inline:auto;
}

@media (min-width:641px) and (max-width:900px){
  /* respiro de 19% fica apertado demais em tablet — relaxa sem perder a
     proporção do mockup no desktop alvo (1440px). */
  .home-menus__grid{ max-width:85%; gap:5%; }
}

.home-menu-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3 / 4; min-width:0; /* grid item: sem isso, a largura minima
  vira a intrinseca da <img> (468px) e o card nao encolhe no mobile */
  color:var(--branco);
}
.home-menu-card picture,
.home-menu-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.home-menu-card img{
  transition:transform 420ms cubic-bezier(.22,1,.36,1);
}
.home-menu-card:hover img{ transform:scale(1.035); }

.home-menu-card__label{
  position:absolute; z-index:2;
  font-weight:var(--peso-negrito); font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--branco);
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 14px rgba(0,0,0,.25);
}
.home-menu-card--dia .home-menu-card__label{ left:1.25rem; bottom:1.1rem; }
.home-menu-card--noite .home-menu-card__label{ right:1.25rem; top:1.1rem; }

@media (max-width:640px){
  .home-menus__grid{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; }
}

/* ─────────────────────────────────────────────────────────────
   3. POR QUE NASCEMOS? — título+texto à esquerda; embaixo, galeria
   horizontal full-bleed com fotos de larguras variadas. Altura fixa,
   largura calculada pela proporção natural de cada foto — nunca
   estoura o container porque roda em scroll horizontal contido.
────────────────────────────────────────────────────────────── */
/* BUG-05: título+parágrafo alinhados à mesma margem esquerda da galeria
   full-bleed (~2,4%), em vez do padding padrão do .emma-container. O
   seletor composto (duas classes) tem mais especificidade que
   .emma-container sozinho, então sobrescreve max-width/padding sem
   depender da ordem no arquivo. */
.home-origem__topo.emma-container{
  max-width:none; width:100%; margin-inline:0;
  padding-inline:2.4%;
}
.home-origem__topo{ max-width:56ch; }
.home-origem__titulo{ margin:0 0 1rem; }
.home-origem__texto{ margin:0; max-width:52ch; }
.home-origem__cta{ margin-top:1.5rem; }

/* BUG-03: pirâmide simétrica de 5 fotos alinhadas pela base — a central
   maior, decrescendo simétrico pras pontas. Larguras em % (flex-basis) +
   aspect-ratio por foto (em vez de altura fixa + largura intrínseca da
   imagem) garante a proporção exata do mockup em qualquer largura de
   tela, com object-fit:cover cortando cada foto pro enquadramento certo. */
.home-origem__galeria{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:flex; align-items:flex-end;
  gap:1.4%;
  padding-inline:2.4%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.home-origem__foto{
  /* flex-basis% resolve contra o content-box do próprio .home-origem__galeria
     (já descontado o padding-inline de 2,4%) — por isso o valor é maior que
     o alvo final (14,8% da página): 14,8% / (1 - 2×2,4%) ≈ 15,5%. */
  flex:0 0 15.5%; min-width:0; scroll-snap-align:start; overflow:hidden;
}
.home-origem__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.home-origem__foto--2,
.home-origem__foto--4{ flex-basis:18.8%; aspect-ratio:13/20; }
.home-origem__foto--3{ flex-basis:25.7%; aspect-ratio:.756; }
.home-origem__foto--1,
.home-origem__foto--5{ aspect-ratio:16/25; }

/* ─────────────────────────────────────────────────────────────
   4. FAIXA FULL-BLEED — xícara Emma sobre a mesa bordô.
────────────────────────────────────────────────────────────── */
.home-xicara{ background:var(--footer-bg); line-height:0; }
/* BUG-06: faixa da xícara é inset (~4,6% de cada lado) no mockup, só o
   rodapé é full-bleed. Sobrescreve .full-bleed via seletor descendente,
   que vence por especificidade independente da ordem no arquivo. */
.home-xicara .full-bleed{
  width:91%; max-width:91%; margin-left:auto; margin-right:auto;
  transform:none; padding-inline:0;
}
.home-xicara img{
  width:100%; height:clamp(260px,42vw,560px);
  object-fit:cover; object-position:50% 42%;
  display:block;
}

/* ─────────────────────────────────────────────────────────────
   5. GALERIA DE FOTOS — só o título (decisão do cliente: sem grid
   de fotos aqui, minimalista igual ao mockup do PDF).
────────────────────────────────────────────────────────────── */
.home-galeria__titulo{ text-align:center; margin-bottom:clamp(2rem,5vw,3.25rem); }
.home-galeria__titulo--solo{ margin-bottom:0; }

/* ─────────────────────────────────────────────────────────────
   6. VENHA NOS VISITAR — texto+CTA à esquerda, logo empilhada à
   direita (assets/emma-logo-empilhada).
────────────────────────────────────────────────────────────── */
.home-reserva__grid{
  display:grid; grid-template-columns:1.2fr 1fr;
  align-items:center; gap:clamp(24px,5vw,56px);
}
.home-reserva__texto,
.home-reserva__logo{ min-width:0; }
.home-reserva__texto .corpo{ margin:1rem 0 1.75rem; }
.home-reserva__logo{ display:flex; justify-content:center; }
.home-reserva__logo img{ width:100%; max-width:130px; height:auto; }
/* Título "Venha nos visitar" — significativamente menor que os demais
   títulos de seção da home. */
.home-reserva .titulo-secao{ font-size:clamp(1.2rem,2.4vw,1.75rem); }

@media (max-width:760px){
  .home-reserva__grid{ grid-template-columns:1fr; text-align:center; }
  .home-reserva__texto{ order:2; }
  .home-reserva__texto .corpo{ margin-inline:auto; }
  .home-reserva__logo{ order:1; }
  .home-reserva__logo img{ max-width:100px; }
}