/* Ajustes finais de responsividade — carregado por último. */

/* ---------- Aviso de preços iFood ---------- */
.price-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  color: #5a4130;
  font: 500 13px/1.4 'DM Sans', sans-serif;
}

.price-note span {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #8d1012;
  font: 700 12px/1 Georgia, serif;
  font-style: italic;
}

.menu-content > .price-note {
  margin: 6px 0 14px;
  padding: 11px 14px;
  border: 1px solid #e0cdb4;
  border-radius: 8px;
  background: #fbf3e6;
}

/* ---------- Header em telas médias (tablet / notebook pequeno) ---------- */
.header-cta { flex: none; white-space: nowrap; }

@media (min-width: 769px) and (max-width: 1100px) {
  .site-header { gap: 20px; padding-left: 4vw !important; padding-right: 4vw !important; }
  .desktop-nav { gap: 20px !important; }
  .desktop-nav a { font-size: 14px !important; }
  .header-cta { padding: 12px 20px !important; font-size: 14px !important; }
}

/* ---------- Transição hero → Nossa História no mobile/tablet ----------
   Mesmo sistema do desktop (hero recortado embaixo + história recortada em cima
   + linhas decorativas), mas com a onda em largura fixa e centralizada, para
   manter a proporção em vez de ser espremida na largura do celular. */
@media (max-width: 899px) {
  .home-hero {
    --seam-w: 1150px;
    z-index: 1;
    -webkit-mask-image: url('../img/mask-hero-bottom.svg');
    mask-image: url('../img/mask-hero-bottom.svg');
    -webkit-mask-size: var(--seam-w) 900px;
    mask-size: var(--seam-w) 900px;
  }

  .home-hero:after {
    background-size: 1150px 100% !important;
  }

  .history {
    z-index: 2;
    -webkit-mask-size: 1150px 900px;
    mask-size: 1150px 900px;
  }
}

@media (max-width: 768px) {
  /* Hero ocupa a tela, mas deixa a onda e o início da história visíveis na primeira dobra. */
  .home-hero {
    height: clamp(500px, calc(100svh - 150px), 600px) !important;
    min-height: 0;
  }

  .home-hero .hero-copy { padding-bottom: 64px !important; }
  .home-hero .hero-script { right: 16px; bottom: 58px !important; font-size: 42px; }

  /* Destaques: carrossel com encaixe e sem cortar a sombra dos cards. */
  .highlight-grid {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -17px;
    padding: 0 17px 8px !important;
    scroll-padding: 0 17px !important;
  }

  .highlight-grid::-webkit-scrollbar { display: none; }
  .highlight-grid .food-card { flex: 0 0 min(62vw, 230px); min-width: 0 !important; scroll-snap-align: start; }

  /* CTA final: contraste do texto sobre a foto. */
  .final-cta {
    min-height: 230px;
    background-image:
      linear-gradient(180deg, rgba(25, 8, 6, .86), rgba(25, 8, 6, .62)),
      url('../img/galeteria/hero-galeto.webp') !important;
    background-position: center, 60% center !important;
  }

  .final-cta h2 { line-height: 1; margin-bottom: 8px; }
  .final-cta p { line-height: 1.3; }

  /* Menu lateral: trava a rolagem da página enquanto está aberto. */
  body.nav-open { overflow: hidden; }
  .mobile-nav { inset: 0 0 0 max(30%, calc(100% - 340px)); }

  /* Cardápio: botão fixo do iFood não cobre o rodapé nem o conteúdo. */
  body.menu { padding-bottom: 80px; }
  .menu-content { padding-bottom: 28px !important; }
  .ifood { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .menu-categories { scrollbar-width: none; }
  .menu-categories::-webkit-scrollbar { display: none; }
  .menu-categories a { flex: none; }

  .price-note { font-size: 12px; }
}

/* ---------- Porções: pontilhado sem estourar a largura ---------- */
.portions dl div { gap: 0; }
.portions dt { display: flex; flex: 1; align-items: baseline; min-width: 0; white-space: normal; }
.portions dt:after { flex: 1; width: auto; min-width: 14px; margin: 0 6px; }
.portions dd { flex: none; }

/* ---------- Imagens nunca maiores que o contêiner ---------- */
img { max-width: 100%; }
.brand-logo img { height: 100%; }