/* ==========================================================================
   03 — Cardápio ("Nossos cheesecakes")
   Figma: frame "Cardápio" 7057:175 (1440 × 1150.5) · y 1524 no Desktop 7057:68
   - Seção: flex col, gap 80, px 112, py 80
   - Cabeçalho 7057:176: título Anton 56 (w 425) + texto Archivo 20 (w 592),
     justify-between, items-end
   - 7057:179: grid 7057:180 (4 cards × 286, gap 24) + botão central 7073:393,
     flex col, gap 48, items-center
   - Card 7057:181: bg #fdfaf2, radius 24, overflow clip
       · imagem 7057:182: aspect 286/214.5, bg por sabor (CPT cor_fundo),
         radius 24, foto 204 × 116 alinhada embaixo com pb 40
       · tag 7057:186 (só no 1º): absoluta left/top 12, bg #150506, radius 14
       · conteúdo 7057:196: pt 24, px 20, pb 32, gap 24
       · preços 7057:200: gap 16; linhas com pb 16 + borda inferior 15%
         (exceto a última); botão "Pedir" 76 × 48 (Button 7073:166 em tamanho
         menor: px 20, py 12, Anton 16, borda 1px) → modificador .cardapio__btn
   Nós "Sabor" (7095:236/241/244/247) estão hidden no Figma → não renderizados.

   Line-heights em px: o Figma arredonda a entrelinha percentual para pixel
   inteiro (1.2 × 56 = 67.2 → 67; 1.4 × 14 = 19.6 → 20; 1.4 × 16 = 22.4 → 22).
   Confirmado pelas alturas do metadata (título 134 = 2 × 67, descrição 40 =
   2 × 20, "Price and Size" 50 = 28 + 22, botão 48 = 12 + 22 + 12 + 2).
   ========================================================================== */


.cardapio {
  /* 20px em ≥1440 · linear até 14px em 1200 (só age entre 1200 e 1439) */
  --cardapio-fluid-px: clamp(14px, calc(20px - (1440px - 100vw) * .025), 20px);
  background: var(--color-cream-50);
  padding-block: var(--section-py);                 /* py-[80px] */
  color: var(--color-red-700);
}

.cardapio__inner {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);                          /* gap-[80px] */
}

/* ---- Cabeçalho (7057:176) ---- */
.cardapio__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;                                        /* só atua abaixo de 1440 (em 1440 sobra 199px) */
  overflow-wrap: break-word;
}

.cardapio__title {
  flex: 0 1 425px;                                  /* w-[425px] */
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 3.8889vw, 56px);           /* 56 @ 1440 */
  line-height: clamp(48px, 4.6528vw, 67px);         /* 67 @ 1440 (1.2 → 67 no Figma) · 1.2 abaixo */
  text-transform: uppercase;
  text-wrap: balance;
}

.cardapio__lead {
  flex: 0 1 592px;                                  /* w-[592px] */
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;                                /* 1.4 */
}

/* ---- Cards + botão (7057:179) ---- */
.cardapio__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;                                        /* gap-[48px] */
}

.cardapio__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 × 286 @ 1216 */
  gap: 24px;                                        /* gap-[24px] */
  align-items: stretch;                             /* Figma items-start; cards têm a mesma altura em 1440 — stretch mantém a base alinhada se o texto variar (WP) */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cardapio__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-cream-25);
}

/* Imagem colorida (7057:182) — cor via --cardapio-bg (meta cor_fundo no WP) */
.cardapio__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  aspect-ratio: 286 / 214.5;
  padding-bottom: calc(100% * 40 / 286);            /* pb-[40px] @ card 286 (proporcional abaixo de 1440) */
  border-radius: 24px;
  background: var(--cardapio-bg, var(--color-red-700));
}

/* Foto 204 × 116 (7057:183) — escala com o card fora de 1440 */
.cardapio__photo {
  position: relative;
  flex-shrink: 0;
  width: calc(100% * 204 / 286);                    /* 204px @ card 286 */
  aspect-ratio: 204 / 116;
  overflow: hidden;
}

/* Recorte do Figma: w 133.72% · h 234.21% · left -16.53% · top -71.93% */
.cardapio__img {
  position: absolute;
  left: -16.53%;
  top: -71.93%;
  width: 133.72%;
  height: 234.21%;
  max-width: none;
  pointer-events: none;
}

/* Tag "Mais pedido" (7057:186) */
.cardapio__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;                        /* pl 8 · pr 12 · py 6 */
  border-radius: 14px;
  background: var(--color-red-950);
  color: var(--color-cream-50);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;                                /* 1.4 → 20 no Figma */
  text-transform: uppercase;
  white-space: nowrap;
}

.cardapio__tag-icon {
  flex-shrink: 0;
}

/* Conteúdo (7057:196)
   flex-grow + preços com margin-top: auto: quando a descrição de um card quebra
   em mais linhas (1280, textos do WP), as linhas de preço continuam alinhadas
   entre os cards. Em 1440 os 4 cards têm a mesma altura → nada muda. */
.cardapio__content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  /* pt 24 · px 20 · pb 32 — px exato em 1440; de 1439 a 1200 cai até 14px
     (junto com o botão e o tamanho) para "600 g · 6 mini fatias" caber em 1 linha */
  padding: 24px var(--cardapio-fluid-px) 32px;
}

.cardapio__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: break-word;
}

.cardapio__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;                                /* 1.4 */
  text-transform: uppercase;
}

.cardapio__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;                                /* 1.4 → 20 no Figma */
}

/* Preços (7057:200) */
.cardapio__prices {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: auto 0 0;                                 /* margin-top: auto → alinha as linhas entre cards */
  padding: 0;
  list-style: none;
}

.cardapio__row {
  display: flex;
  align-items: center;
  padding-bottom: 16px;                             /* pb-[16px] */
  border-bottom: 1px solid color-mix(in srgb, var(--color-red-700) 15%, transparent); /* rgba(176,40,46,.15) */
}

.cardapio__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cardapio__option {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
  overflow-wrap: break-word;
}

.cardapio__price,
.cardapio__size {
  padding-right: 8px;                               /* respiro antes do botão abaixo de 1440 (em 1440 o texto mais longo tem 147 de 170) */
}

.cardapio__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;                                /* 1.4 */
  text-transform: uppercase;
}

.cardapio__size {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, calc(16px - (1440px - 100vw) / 120), 16px); /* 16 em 1440 · 14 em 1200 */
  line-height: 22px;                                /* 1.4 → 22 no Figma */
  text-wrap: balance;                               /* 1 linha em 1440; evita órfão em larguras menores */
}

/* Botão "Pedir": instância Button (7073:166) em tamanho menor — 76 × 48.
   Primary: bg + borda #b0282e, texto cream · Secondary: só borda.
   Variação real do Figma: px 20, py 12, Anton 16/22, borda 1px nos dois tipos. */
.cardapio__btn {
  flex-shrink: 0;
  padding: 12px var(--cardapio-fluid-px);           /* px 20 em 1440 */
  border: 1px solid var(--color-red-700);
  font-size: 16px;
  line-height: 22px;                                /* 1.4 → 22 no Figma */
}

.cardapio__btn.btn--primary:hover,
.cardapio__btn.btn--primary:focus-visible {
  border-color: var(--color-red-600);
}

/* Controles do carrossel: só existem no mobile (≤767). O JS tira o [hidden]. */
.cardapio__controls,
.cardapio__controls[hidden] {
  display: none;
}


/* ==========================================================================
   Responsivo — o Figma só tem o frame 1440 (≥1200 = layout do Figma, nada
   abaixo mexe nele). Escala de tokens.css (--fs-t-* / --fs-m-* / --gap-m-*),
   padrão mobile do site de referência do cliente + pedido explícito dele.
   ≤1199  grade 2×2. A faixa colorida tem altura contida (200–240) para o card
          largo não virar um bloco de cor enorme; a foto acompanha a altura.
   ≤1023  cabeçalho empilhado (título 40 → texto 18).
   ≤767   CARROSSEL DE UM SABOR POR VEZ (pedido do cliente): trilho de borda a
          borda com scroll-snap; o card ocupa a largura útil (342 em 390) e o
          gap é igual à margem lateral, então o vizinho começa exatamente na
          borda da tela (sem "peek"). scroll-snap-stop: um swipe = um sabor.
          Controles abaixo: dots à esquerda + setas 44 à direita (mesma
          família da seção 07 e da referência); "Ver cardápio completo"
          centralizado no fim.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .cardapio__head {
    gap: 48px;
  }

  .cardapio__lead {
    font-size: var(--fs-t-lead);                    /* 18 */
    line-height: 1.5;
    text-wrap: pretty;
  }

  .cardapio__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cardapio__media {
    --cardapio-media-h: clamp(200px, 22vw, 240px);  /* 200 @ 768 · 225 @ 1024 · 240 @ 1100+ */
    aspect-ratio: auto;
    height: var(--cardapio-media-h);
    padding-bottom: 28px;
  }

  .cardapio__photo {
    width: auto;                                    /* largura pela proporção 204:116 */
    height: calc(var(--cardapio-media-h) * .6);
  }

  .cardapio__content {
    gap: 20px;
    padding: 24px 24px 32px;
  }

  .cardapio__info {
    gap: 4px;
  }

  .cardapio__name {
    font-size: var(--fs-t-h3);                      /* 24 */
    line-height: 1.25;
  }

  .cardapio__desc {
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
  }

  .cardapio__size {
    font-size: 16px;                                /* literal do Figma (card largo) */
  }

  .cardapio__btn {
    padding-inline: 20px;                           /* px do Figma (o fluido de 1200–1439 cairia a 14) */
  }
}

@media (max-width: 1023.98px) {
  .cardapio__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cardapio__title,
  .cardapio__lead {
    flex: none;
    width: 100%;
  }

  .cardapio__title {
    font-size: var(--fs-t-h2);                      /* 40 */
    line-height: 1.2;
  }

  .cardapio__lead {
    max-width: 640px;
  }

  .cardapio__body {
    gap: 40px;
  }

  .cardapio__grid {
    gap: 24px;
  }

  /* "Ver cardápio completo": botão compacto do mobile também no tablet
     (16/22 + 14 = 50px), na mesma família dos "Pedir" de 48 dos cards —
     antes eram 65px lado a lado com 48. Os "Pedir" têm tamanho próprio. */
  .cardapio {
    --fs-button: 16px;
    --lh-btn: 22px;
  }

  .cardapio__body > .btn {
    padding: 14px 28px;
  }
}

@media (max-width: 767.98px) {
  .cardapio {
    overflow-x: clip;                               /* trilho do carrossel é de borda a borda */
  }

  .cardapio__head {
    gap: var(--gap-m-sm);                           /* 12 */
  }

  .cardapio__title {
    font-size: var(--fs-m-h2);                      /* 28 */
    line-height: 1.15;
  }

  /* medida de 20.5em (~328px): as mesmas 4 linhas de 360 a 767 —
     "…na nossa fábrica / em São Paulo e entregues gelados, / …" —
     sem "São / Paulo" partido (acontecia em 414) */
  .cardapio__lead {
    max-width: 20.5em;
    font-size: var(--fs-m-lead);                    /* 16 */
  }

  .cardapio__body {
    gap: var(--gap-m-md);                           /* card → controles 16 */
  }

  /* Trilho: sangra até a borda da tela; padding e scroll-padding = margem
     lateral mantêm o card atual alinhado ao conteúdo (x = 24).
     [role="list"]: vence o ul[role="list"] { padding: 0 } do base.css. */
  .cardapio__grid,
  .cardapio__grid[role="list"] {
    display: flex;
    gap: var(--section-px);
    align-self: stretch;
    width: auto;
    margin-inline: calc(-1 * var(--section-px));
    padding-inline: var(--section-px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--section-px);
    scrollbar-width: none;
  }

  .cardapio__grid::-webkit-scrollbar {
    display: none;
  }

  .cardapio__card {
    flex: 0 0 100%;                                 /* largura útil: 342 em 390 */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: var(--radius-m-card);
  }

  .cardapio__media {
    --cardapio-media-h: 192px;
    padding-bottom: 24px;
    border-radius: var(--radius-m-card);
  }

  .cardapio__photo {
    height: calc(var(--cardapio-media-h) * .64);    /* 123 × 216 */
  }

  .cardapio__content {
    gap: var(--gap-m-md);                           /* 16 */
    padding: 20px var(--pad-m-card) var(--pad-m-card);
  }

  .cardapio__name {
    font-size: var(--fs-m-h3);                      /* 20 */
    line-height: 28px;
  }

  .cardapio__desc {
    font-size: var(--fs-m-body);                    /* 15 */
    line-height: var(--lh-m-body);
  }

  .cardapio__prices {
    gap: var(--gap-m-sm);                           /* 12 */
  }

  .cardapio__row {
    padding-bottom: var(--gap-m-sm);
  }

  .cardapio__price {
    line-height: 24px;
  }

  .cardapio__size {
    font-size: var(--fs-m-small);                   /* 14 */
    line-height: 20px;
  }

  .cardapio__btn {
    padding: 10px 20px;                             /* 44 de altura */
  }

  /* dots à esquerda (alvos 44 × 44, ponto visível 8) + setas à direita */
  .cardapio__controls:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    align-self: stretch;
  }

  /* Ajuste do cliente: bolinhas próximas (8px com 8px entre elas); a área
     de toque continua com 44px de altura */
  .cardapio__dots {
    display: flex;
    margin-left: -4px;                              /* 1º ponto alinhado à margem do conteúdo */
  }

  .cardapio__dot {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 44px;
    border-radius: 8px;
  }

  .cardapio__dot::before {
    content: "";
    position: absolute;
    inset: 18px 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-red-700) 20%, transparent);
    transition: background-color var(--dur) var(--ease);
  }

  .cardapio__dot[aria-current="true"]::before {
    background: var(--color-red-700);
  }

  .cardapio__dot:focus-visible {
    outline-offset: -8px;
  }

  .cardapio__arrows {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
  }

  .cardapio__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-red-700);
    box-shadow: 0 4px 6px color-mix(in srgb, var(--color-ink-900) 6%, transparent);
    transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }

  .cardapio__nav:hover:not([aria-disabled="true"]) {
    background: var(--color-cream-25);
  }

  .cardapio__nav[aria-disabled="true"] {
    opacity: .4;
    box-shadow: none;
    cursor: default;
  }

  .cardapio__nav svg {
    width: 20px;
    height: 20px;
  }

  .cardapio__body > .btn:last-child {
    margin-top: var(--gap-m-md);                    /* controles → CTA: 16 + 16 = 32 */
    padding-inline: 24px;                           /* pílula do mobile (components.css) */
  }
}

@media (prefers-reduced-motion: reduce) {
  .cardapio__nav,
  .cardapio__dot::before {
    transition: none;
  }
}

/* ==========================================================================
   Motion (ver MOTION.md · coreografia em assets/js/sections/03-cardapio.js)
   O bolo é um recorte que ocupa a moldura inteira (.cardapio__photo tem
   overflow hidden no tamanho exato do bolo): a escala vai na MOLDURA, não na
   <img>, para o bolo nunca ser cortado. Origem na base → ele "cresce" do
   próprio apoio na entrada e no hover. Sem escala = layout idêntico.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .cardapio__photo {
    transform-origin: 50% 100%;
  }
}

/* Hover (só com cursor): zoom suave no bolo ao passar sobre o card */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cardapio__photo {
    transition: scale 600ms var(--motion-ease, cubic-bezier(.16, 1, .3, 1));
  }

  .cardapio__card:hover .cardapio__photo {
    scale: 1.05;
  }
}

/* Mobile: título e descrição em cima, foto embaixo, preços por último (Willy).
   Só a ordem visual muda (display: contents + order); HTML/PHP iguais. */
@media (max-width: 767.98px) {
  .cardapio__content { display: contents; }
  .cardapio__info {
    order: -1;
    align-self: stretch;
    padding: 20px var(--pad-m-card) 16px;
  }
  .cardapio__media { order: 0; }
  .cardapio .cardapio__prices {                     /* vence ul[role="list"] do base.css */
    order: 1;
    align-self: stretch;
    padding: 16px var(--pad-m-card) var(--pad-m-card);
  }
}

/* Fotos do cliente: bolo recortado justo (uma por sabor). Ocupa a moldura
   inteira, sem o recorte percentual da foto quadrada do Figma, apoiado na base. */
.cardapio__img.cardapio__img--recorte {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}