/* ======================================================
   KASARÃO — CARDÁPIO (Premium • Fluido • Responsivo)
   Compatível com global.css:
   - Tema via body.light-mode
   - Tokens: --bg-dark/--bg-light/--text-dark/--text-light/--primary
   Ajustes:
   1) Legendas SEMPRE visíveis no modo escuro (overlay com contraste)
   2) Hover mais fluido nas imagens (zoom suave + glow discreto + lift)
===================================================== */

/* ---------- Tokens locais do Cardápio (derivados do global) ---------- */
:root {
  /* superfícies e bordas */
  --cp-surface-dark: rgba(255, 255, 255, .06);
  --cp-surface-light: rgba(0, 0, 0, .035);
  --cp-line-dark: rgba(255, 255, 255, .10);
  --cp-line-light: rgba(0, 0, 0, .08);

  /* sombras */
  --cp-shadow-dark: 0 18px 46px rgba(0, 0, 0, .50);
  --cp-shadow-light: 0 18px 46px rgba(0, 0, 0, .18);

  /* overlay da legenda */
  --cp-cap-dark-1: rgba(6, 8, 10, .92);
  --cp-cap-dark-2: rgba(6, 8, 10, .18);

  --cp-cap-light-1: rgba(16, 18, 20, .82);
  --cp-cap-light-2: rgba(16, 18, 20, .12);

  /* animações */
  --cp-ease: cubic-bezier(.2, .9, .2, 1);
}

.cardapio-page {
  padding: 48px 8% 90px;
  text-align: center;
}

.cardapio-hero{
  /* Abertura centralizada para explicar valor e levar direto ao pedido/reserva. */
  position: relative;
  max-width: 920px;
  margin: 0 auto 40px;
}

.cardapio-hero::before{
  /* Textura orgânica sutil (árvore do logo), discreta, sem competir com o texto. */
  content: "";
  position: absolute;
  top: -18px;
  right: -6%;
  width: min(46vw, 380px);
  aspect-ratio: 65 / 46;
  background: url("../img/logo-arvore-textura-escura.png") no-repeat center / contain;
  opacity: .12;
  pointer-events: none;
  z-index: -1;
}

.cardapio-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--primary);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
}

.cardapio-actions{
  /* CTAs quebram linha naturalmente quando o espaço horizontal reduz. */
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Aviso curto de transparência: deixa claro que o link abre uma plataforma externa. */
.cardapio-hint{
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--text-dark) 70%, transparent);
}

body.light-mode .cardapio-hint{
  color: color-mix(in srgb, var(--text-light) 70%, transparent);
}

/* ---------- Tipografia / Título (usando tokens do global) ---------- */
/* Cor e display já vêm de .titulo-secao em global.css; aqui só o que é específico do Cardápio. */
.titulo-secao {
  letter-spacing: .2px;
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid color-mix(in srgb, var(--primary) 72%, transparent);
  text-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

/* ---------- Introdução do cardápio ---------- */
.intro {
  max-width: 720px;
  margin: 0 auto 2.4rem auto;
  /* centraliza corretamente */

  text-align: center;

  /* tipografia mais elegante */
  font-family: "Lexend Deca", sans-serif;
  font-size: var(--fs-lead);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: .25px;

  /* cor segura para tema escuro */
  color: color-mix(in srgb, var(--text-dark) 85%, transparent);

  opacity: .92;
}

/* modo claro */
body.light-mode .intro {
  color: color-mix(in srgb, var(--text-light) 85%, transparent);
}

.intro::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 1rem auto 0;
  background: var(--primary);
  border-radius: 2px;
  opacity: .7;
}

/* ---------- Grid ---------- */
.cardapio-destaque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 0 0 3rem;
}

/* ---------- Card (figure) ---------- */
.cardapio-destaque figure,
.cardapio-destaque .card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  /* garante camadas/blur certos */

  /* fundo adaptável ao tema */
  background: var(--cp-surface-dark);
  border: 1px solid var(--cp-line-dark);

  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  transform: translateZ(0);

  transition:
    transform 520ms var(--cp-ease),
    box-shadow 520ms var(--cp-ease),
    border-color 520ms var(--cp-ease),
    background 520ms var(--cp-ease);
}

/* Light mode (via global.css) */
body.light-mode .cardapio-destaque figure,
body.light-mode .cardapio-destaque .card {
  background: rgba(255, 255, 255, .78);
  border-color: var(--cp-line-light);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

body[data-theme="dark"] .cardapio-destaque figcaption {
  /* Usa o token definido pelo script.js para garantir legenda legível no tema ativo. */
  background: linear-gradient(to top, rgba(6, 8, 10, .92), rgba(6, 8, 10, .18));
  color: rgba(255, 255, 255, .95);
}

body[data-theme="light"] .cardapio-destaque figcaption {
  background: linear-gradient(to top, rgba(16, 18, 20, .82), rgba(16, 18, 20, .12));
  color: rgba(255, 255, 255, .95);
}

/* Lift premium ao hover */
.cardapio-destaque figure:hover,
.cardapio-destaque .card:hover {
  transform: translateY(-7px);
  box-shadow: var(--cp-shadow-dark);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--cp-line-dark));
}

body.light-mode .cardapio-destaque figure:hover,
body.light-mode .cardapio-destaque .card:hover {
  box-shadow: var(--cp-shadow-light);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--cp-line-light));
}

/* ---------- Imagem (hover mais fluido) ---------- */
.cardapio-destaque img {
  display: block;
  width: 100%;
  height: auto;

  /* sensação premium */
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.02);

  transition:
    transform 900ms var(--cp-ease),
    filter 900ms var(--cp-ease);
  will-change: transform, filter;
}

/* Hover: zoom suave + mais “vida” sem exagero */
.cardapio-destaque figure:hover img,
.cardapio-destaque .card:hover img {
  transform: scale(1.12);
  filter: saturate(1.10) contrast(1.06);
}

/* Glow discreto (camada por cima) */
.cardapio-destaque figure::after,
.cardapio-destaque .card::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(circle at 50% 55%,
      color-mix(in srgb, var(--primary) 22%, transparent),
      transparent 60%);

  transform: rotate(10deg);
  transition: opacity 900ms var(--cp-ease);
}

.cardapio-destaque figure:hover::after,
.cardapio-destaque .card:hover::after {
  opacity: 1;
}

/* ---------- Legenda (SEMPRE visível no dark e no light) ---------- */
.cardapio-destaque figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1rem 1.1rem;
  text-align: left;

  font-weight: 800;
  letter-spacing: .2px;

  /* Texto sempre legível sobre fotos claras ou escuras. */
  color: rgba(255, 255, 255, .95);

  /* Overlay escuro por padrão para preservar contraste da legenda. */
  background: linear-gradient(to top,
      var(--cp-cap-dark-1),
      var(--cp-cap-dark-2));

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transform: translateY(0);
  transition:
    transform 520ms var(--cp-ease),
    background 520ms var(--cp-ease);
}

/* Light mode: mantém contraste (continua escuro, só um pouco mais leve) */
body.light-mode .cardapio-destaque figcaption {
  background: linear-gradient(to top,
      var(--cp-cap-light-1),
      var(--cp-cap-light-2));
}

/* Microinteração: legenda “respira” */
.cardapio-destaque figure:hover figcaption,
.cardapio-destaque .card:hover figcaption {
  transform: translateY(-2px);
}

/* ---------- CTA ---------- */
.btn-container {
  margin-top: 1rem;
}

/* .btn-cardapio usa o estilo único definido em global.css (pílula com gradiente dourado). */

.cardapio-actions .btn-cardapio{
  margin-top: 0;
}

.cardapio-actions .btn-ghost,
.cardapio-note .btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,.12);
}

body.light-mode .cardapio-actions .btn-ghost,
body.light-mode .cardapio-note .btn-ghost{
  background: rgba(255,255,255,.78);
  color: var(--text-light);
  border-color: rgba(0,0,0,.08);
}

.cardapio-note{
  /* Bloco de apoio para quem prefere falar com a equipe antes de pedir. */
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: 24px;
  align-items: center;
  margin-top: 42px;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
    rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 48px rgba(0,0,0,.24);
  text-align: left;
}

.cardapio-note h2{
  margin-bottom: 8px;
  color: var(--primary);
}

body.light-mode .cardapio-note{
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, transparent), transparent 36%),
    rgba(255,255,255,.76);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 22px 42px rgba(0,0,0,.10);
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {

  .cardapio-destaque figure,
  .cardapio-destaque img,
  .cardapio-destaque figcaption {
    transition: none !important;
  }

  .cardapio-destaque figure:hover {
    transform: none;
  }

  .cardapio-destaque figure:hover img {
    transform: none;
  }
}

@media (max-width: 768px) {
  /* Mobile: ações empilhadas e bloco final centralizado para melhorar toque/leitura. */
  .cardapio-page{
    padding: 32px 6% 72px;
  }

  .cardapio-actions{
    flex-direction: column;
    width: min(100%, 360px);
    margin-inline: auto;
    margin-top: 24px;
  }

  .cardapio-actions .btn-cardapio{
    width: 100%;
  }

  .cardapio-note{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px;
  }
}

@media (max-width: 420px) {
  .cardapio-destaque {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  .cardapio-destaque figcaption {
    padding: .85rem .95rem;
    font-size: .95rem;
  }
}