/* ==========================================================================
   04 · Sabores — Figma instância 7057:329 (component set "Sabores" 7057:518)
   Variantes: Frutas vermelhas 7057:519 · Doce de leite 7057:566 ·
              Morangos 7057:613 · Blue Berry 7057:660
   O que muda entre variantes: cor de fundo, cor do texto/decoração
   (cream no fundo vermelho, vermelho nos fundos claros), foto da fatia e
   aba sublinhada. Anotação Figma: "Ao clicar, mudar a fatia".
   ========================================================================== */


/* Sabores 7057:329 — flex col, gap 80, px 112, py 80 */
.sabores {
  --sabores-bg: var(--color-red-700);
  --sabores-fg: var(--color-cream-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: var(--section-py) var(--section-px);
  background-color: var(--sabores-bg);
  color: var(--sabores-fg);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* Variantes de fundo claro: texto e decoração em vermelho */
.sabores--claro { --sabores-fg: var(--color-red-700); }

.sabores :focus-visible { outline-color: currentColor; }

/* ---------- Selo "Desde 2004" (7057:520) ----------------------------------
   inline-grid com 3 itens sobrepostos na mesma célula (col-1 row-1)       */
.sabores__selo {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  flex-shrink: 0;
}
.sabores__selo > * { grid-area: 1 / 1; }

/* Decoration 7057:521 (41.243×68.154, mt 20) · 7057:540 (41.102×68.077, ml 81.24, mt 20) */
.sabores__decoracao {
  position: relative;
  display: block;
  margin-top: 20px;
}
.sabores__decoracao--esq { width: 41.243px; height: 68.154px; }
.sabores__decoracao--dir { width: 41.102px; height: 68.077px; margin-left: 81.24px; }

.sabores__decoracao-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.sabores__decoracao-img--claro { display: none; }
.sabores--claro .sabores__decoracao-img--escuro { display: none; }
.sabores--claro .sabores__decoracao-img--claro { display: block; }

/* Since Badge 7057:537 — flex col, items center, Anton, lh 1.4, ml 35.24 */
.sabores__selo-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 35.24px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-body);          /* 1.4 */
  text-align: center;
  text-transform: uppercase;
}
.sabores__selo-rotulo {                 /* 7057:538 — 18px */
  display: block;
  min-width: 100%;
  width: min-content;
  font-size: 18px;
}
.sabores__selo-ano {                    /* 7057:539 — 26px */
  display: block;
  font-size: 26px;
  white-space: nowrap;
}

/* ---------- Título + fatia (Container 7057:556 — 849.5×370) -------------- */
.sabores__palco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 849.5px;
  max-width: 100%;
  height: 370px;
}

/* Hero text 7057:557 — Anton 168/1.1, center, uppercase */
.sabores__titulo {
  width: 849.5px;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 168px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

/* Slice image 7086:582 — 273×258, centrada (+0.5 / −0.15), sobre o texto */
.sabores__fatia {
  position: absolute;
  left: calc(50% + 0.5px);
  top: calc(50% - 0.15px);
  width: 273px;
  height: 258px;
  transform: translate(-50%, -50%);
}
.sabores__painel { width: 100%; height: 100%; }
.sabores__painel[hidden] { display: none; }
.sabores__painel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Abas (Badge Container 7057:560 — flex, gap 56) ---------------
   Instâncias do Button Tertiary: Dark (7079:421) no fundo vermelho e
   Light (7073:185) nos fundos claros → .btn-link(.btn-link--dark).
   Variação real do Figma: 20px (o componente base usa 18px).            */
.sabores__nav,
.sabores__abas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.sabores__nav { flex-shrink: 0; }

.sabores__aba { font-size: 20px; }      /* Anton 20/1.2, uppercase (via .btn-link) */

/* Aba ativa: sublinhado na mesma cor do texto (Figma: underline from-font) */
.sabores__aba[aria-selected="true"] {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

@media (prefers-reduced-motion: reduce) {
  .sabores { transition: none; }
}


/* ==========================================================================
   Responsivo — o Figma só tem o frame desktop 1440 (adaptação inferida,
   padrão mobile do site de referência: uma coluna, lateral 24, tipografia
   contida). >= 1200px: layout do Figma intacto (nada abaixo se aplica).

   Título + fatia escalam juntos a partir de um único corpo, --sabores-fs:
   a fatia mede 1.625 × corpo (273 / 168, como no Figma), então a sobreposição
   "WE" / "CHEESECAKE" se mantém em qualquer largura. O palco é container e o
   título nunca passa de 19.6cqi (168 / 849.5 com ~2% de folga), para não
   quebrar em 3 linhas nas telas mais estreitas (320).
   ========================================================================== */

/* ---------- Laptop / tablet grande (<= 1199) ------------------------------
   Mesma composição do desktop; título 168 → 140 (1199) → 119 (1024).
   Abas e "Ver todas as opções" com alvo de toque de 44px (texto centrado na
   caixa); a margem negativa da barra devolve os 20px invisíveis, então o
   respiro ótico título → abas → fim da seção fica igual ao de antes.      */
@media (max-width: 1199.98px) {
  .sabores { gap: 64px; }

  .sabores__nav { margin-block: -10px; }
  .sabores__aba {
    align-items: center;
    min-height: 44px;                   /* alvo de toque */
  }

  .sabores__palco {
    --sabores-fs: clamp(var(--fs-t-giant), 11.667vw, 168px);
    container-type: inline-size;
    width: 100%;
    max-width: 849.5px;
    height: auto;
  }
  .sabores__titulo {
    width: 100%;
    font-size: min(var(--sabores-fs), 19.6cqi);
    text-wrap: balance;
    hyphens: manual;
  }
  .sabores__fatia {
    width: min(calc(var(--sabores-fs) * 1.625), 32.14cqi);   /* 273 / 168 · 273 / 849.5 */
    height: auto;
    aspect-ratio: 273 / 258;
  }
}

/* ---------- Tablet (<= 1023) ----------------------------------------------
   · Título 96px (--fs-t-giant), fatia 156px, selo a 85%.
   · Abas (Tertiary, 18px) numa faixa própria — centrada quando cabe,
     rolável (swipe + snap) quando não — e "Ver todas as opções" abaixo.   */
@media (max-width: 1023.98px) {
  .sabores { gap: var(--content-gap); }          /* 48 */

  .sabores__palco { --sabores-fs: var(--fs-t-giant); }

  /* Selo: de 3 camadas sobrepostas para uma linha flex (louro · texto · louro),
     mantendo a geometria do Figma em escala --selo-s (texto invade 6px
     de cada louro; louros descem 20px). Centraliza sozinho com qualquer ano. */
  .sabores__selo {
    --selo-s: .85;
    display: inline-flex;
    align-items: flex-start;
  }
  .sabores__decoracao { margin-top: calc(20px * var(--selo-s)); }
  .sabores__decoracao--esq {
    width: calc(41.243px * var(--selo-s));
    height: calc(68.154px * var(--selo-s));
  }
  .sabores__decoracao--dir {
    width: calc(41.102px * var(--selo-s));
    height: calc(68.077px * var(--selo-s));
    margin-left: 0;
  }
  .sabores__selo-texto { margin-inline: calc(-6px * var(--selo-s)); }
  .sabores__selo-rotulo { font-size: 16px; }
  .sabores__selo-ano { font-size: 22px; }

  .sabores__nav {
    flex-direction: column;
    align-self: stretch;
    gap: 4px;
    /* abas só-texto com alvo de 44px (+6px do anel de foco): sobram ~11–17px
       invisíveis em volta do texto. Devolve esse vazio para o respiro ótico
       título → abas igualar selo → título, e o fim da seção igualar o topo. */
    margin-block: -16px -10px;
  }

  /* Faixa de abas full-bleed: rola na horizontal quando não cabe; quando
     cabe, as margens auto das pontas centralizam sem cortar o início.     */
  .sabores__abas {
    align-self: stretch;
    justify-content: flex-start;
    gap: 32px;
    margin-inline: calc(-1 * var(--section-px));
    padding: 6px var(--section-px);     /* 6px: espaço para o anel de foco */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--section-px);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--section-px), #000 calc(100% - var(--section-px)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--section-px), #000 calc(100% - var(--section-px)), transparent);
  }
  .sabores__abas::-webkit-scrollbar { display: none; }
  .sabores__abas > :first-child { margin-left: auto; }
  .sabores__abas > :last-child { margin-right: auto; }

  .sabores__aba {
    flex-shrink: 0;
    font-size: 18px;
    scroll-snap-align: center;
  }
  .sabores__nav > .sabores__aba { align-self: center; }
}

/* ---------- Mobile (<= 767) -----------------------------------------------
   Coluna única centrada: selo → título (56px, cai para 19.6cqi em 320) com
   a fatia proporcional (~91px) → faixa de sabores → "Ver todas as opções".
   · Selo a 75% (14 / 20px).
   · Palco de no máximo 540px: o título fica sempre em 2 linhas ("YES, WE
     HAVE / CHEESECAKE.") como no desktop — em 620–767 ele cabia em uma linha
     e a fatia cobria o meio da frase.
   · Sabores (Willy): faixa de chips em pílula que rola na horizontal
     (arraste), em vez de grade. Ativa preenchida na cor do texto (contraste
     ≥ 6:1 nos 4 temas; o sublinhado de 1px não se lê num chip de 14px).
   · "Ver todas as opções": link sublinhado de 16px, centrado, alvo 44px. */
@media (max-width: 767.98px) {
  .sabores { gap: var(--gap-m-lg); }             /* 32 */

  .sabores__palco {
    --sabores-fs: var(--fs-m-giant);
    max-width: 540px;
  }

  .sabores__selo { --selo-s: .75; }
  .sabores__selo-rotulo { font-size: var(--fs-m-label); }
  .sabores__selo-ano { font-size: 20px; }

  .sabores__nav {
    gap: var(--gap-m-md);                        /* 16 */
    margin-top: 0;                               /* chips com borda: a caixa é visível */
  }

  /* Faixa (Willy) full-bleed, herdada do tablet (rolagem, snap, pontas com
     margem auto: centraliza quando todos cabem, sem cortar o início quando
     não cabem). Aqui: gap 8, 4px em cima/embaixo para o anel de foco não ser
     recortado e degradê curto na esquerda (só aparece depois de rolar). */
  .sabores__abas {
    gap: 8px;
    margin: -4px calc(-1 * var(--section-px));
    padding: 4px var(--section-px);
    scroll-padding-inline: var(--section-px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gap-m-md), #000 calc(100% - var(--section-px)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--gap-m-md), #000 calc(100% - var(--section-px)), transparent);
  }

  /* Chips de largura igual, proporcional à tela — 2,2 chips por largura útil
     (320–539: 2 inteiros + parte do 3º, que some no degradê da direita: a
     faixa sempre "avisa" que rola), no máximo 168px. Nunca mais estreito que
     o próprio rótulo (rótulo longo vindo do WP alarga o chip). */
  .sabores__abas > .sabores__aba {
    flex: 0 0 min(calc((100% - 2 * 8px) / 2.2), 168px);
    justify-content: center;
    min-width: max-content;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    border-radius: var(--radius-pill);
    font-size: var(--fs-m-label);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .sabores__abas > .sabores__aba:hover { text-decoration: none; }
  .sabores__abas > .sabores__aba:focus-visible { outline-color: var(--sabores-fg); }

  .sabores .sabores__abas > .sabores__aba[aria-selected="true"] {
    border-color: var(--sabores-fg);
    background-color: var(--sabores-fg);
    color: var(--color-red-700);
    text-decoration: none;
  }
  .sabores--claro .sabores__abas > .sabores__aba[aria-selected="true"] { color: var(--color-cream-50); }

  .sabores__nav > .sabores__aba {
    font-size: var(--fs-button);        /* 16px no mobile */
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 4px;
  }
}

/* Celular grande deitado / dobrável (540–599): com o teto de 168px a regra
   dos 2,2 mostraria 3 chips exatos (nada "vazando") perto de 560. Aqui a
   largura segue a tela para mostrar sempre ~3,4 chips (3 + parte do 4º). */
@media (min-width: 540px) and (max-width: 599.98px) {
  .sabores__abas > .sabores__aba {
    flex-basis: calc((100% + var(--section-px)) / 3.4 - 8px);
  }
}

/* Tablet pequeno (600–767): os 4 sabores cabem — chips iguais de até 168px,
   que encolhem juntos até o rótulo, e a faixa fica centrada (sem rolagem). */
@media (min-width: 600px) and (max-width: 767.98px) {
  .sabores__abas > .sabores__aba { flex: 0 1 168px; }
}

@media (max-width: 767.98px) and (hover: hover) {
  .sabores__abas > .sabores__aba[aria-selected="false"]:hover { border-color: currentColor; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .sabores__abas > .sabores__aba { transition: none; }
}


/* ==========================================================================
   Motion (ver MOTION.md · coreografia em assets/js/sections/04-sabores.js)
   Nada aqui muda layout: só cor, opacity, translate/scale/rotate e origens
   de transformação; as classes .is-* só existem durante a troca de sabor.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Troca de sabor: fundo e texto passam de uma cor à outra em 500ms */
  .sabores {
    transition:
      background-color 500ms var(--motion-ease-inout),
      color 500ms var(--motion-ease-inout);
  }

  /* Fatia: float sutil no wrapper (cdcMotion.ambient), proporcional ao tamanho */
  .sabores__fatia { --float-amp: 6px; --float-dur: 6s; }

  /* Louros abrem como coroa: giram a partir do cabo (entrada pop) */
  .js-motion .sabores__decoracao--esq { transform-origin: 100% 100%; }
  .js-motion .sabores__decoracao--dir { transform-origin: 0 100%; }

  /* ---------- Troca de fatia: crossfade + escala + giro ----------
     A anterior continua desenhada, fora do fluxo e por baixo, enquanto some;
     a nova entra por cima girando no sentido da navegação (--sabores-dir). */
  .js-motion .sabores__painel.is-leaving {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: sabores-fatia-sai 420ms cubic-bezier(.5, 0, .75, 0) both;
  }
  .js-motion .sabores__painel.is-entering {
    position: relative;
    z-index: 1;
    animation: sabores-fatia-entra 850ms var(--motion-ease) both;
  }

  /* Abas e louros acompanham a cor do fundo durante a troca */
  .js-motion .sabores.is-trocando .sabores__aba {
    transition:
      color 500ms var(--motion-ease-inout),
      background-color 500ms var(--motion-ease-inout),
      border-color 500ms var(--motion-ease-inout);
  }
  .js-motion .sabores.is-trocando-tema .sabores__decoracao-img {
    display: block;
    animation: sabores-louro-entra 500ms var(--motion-ease-inout) both;
  }
  .js-motion .sabores.is-trocando-tema:not(.sabores--claro) .sabores__decoracao-img--claro,
  .js-motion .sabores.is-trocando-tema.sabores--claro .sabores__decoracao-img--escuro {
    animation-name: sabores-louro-sai;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1199.98px) {
  .sabores__fatia { --float-amp: 5px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
  .sabores__fatia { --float-amp: 3px; }
}

@keyframes sabores-fatia-sai {
  to { opacity: 0; scale: .82; rotate: calc(var(--sabores-dir, 1) * 10deg); }
}
@keyframes sabores-fatia-entra {
  from { opacity: 0; scale: .78; rotate: calc(var(--sabores-dir, 1) * -12deg); }
}
@keyframes sabores-louro-entra { from { opacity: 0; } }
@keyframes sabores-louro-sai { to { opacity: 0; } }

/* A fatia cai de cima da seção conforme a rolagem (04-sabores.js): a seção
   recorta o que está acima da borda (overflow: clip não cria rolagem nem muda o layout). */
.sabores { overflow: clip; }