/* ==========================================================================
   02 — Primeira fatia
   Figma "Call to action" 7057:164 (1440 × 441) · pt 80 · pb 48 · px 112
   Box amarelo 7057:165 (1216 × 313): p 56, flex items-center justify-between
   Fatias sobrepostas 7057:172 (311 × 403) vazam 45px acima e abaixo do box.

   Responsivo (o Figma só tem o frame 1440; mobile segue o banner amarelo
   "Fale agora com um consultor" do site de referência — _ref/mobile-ref):
   ≥ 1200   3 colunas do Figma (título | fatias | texto); título e fatias
            encolhem juntos com a viewport (clamp = 56px exatos em 1440).
   ≤ 1199   2 colunas: texto à esquerda (título → subtítulo → condições →
            botão) e o grupo de fatias do Figma à direita, em escala,
            vazando pela borda de baixo do box como no desktop.
   ≤ 1023   mesmo arranjo, banner amarelo full-bleed (borda a borda).
   ≤ 767    banner full-bleed em uma coluna, alinhado à esquerda:
            título → subtítulo → condições → botão → fatias (composição
            horizontal ~75% da largura, centralizada, vazando na borda de baixo).
   ========================================================================== */


.primeira-fatia {
  /* 1 "px do Figma": exatamente 1px em ≥ 1440; abaixo disso as fatias encolhem
     proporcionalmente para caber entre título e coluna (desktop fluido, sem breakpoint).
     O 1440 é o --frame-w sem unidade: calc() não divide um comprimento por outro. */
  --fatia-u: min(1px, calc(100vw / 1440));
  padding-top: var(--section-py);     /* pt-[80px] */
  padding-bottom: 48px;               /* pb-[48px] */
}

/* ---------- Box amarelo (7057:165) ---------- */
.primeira-fatia__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px;                      /* p-[56px] */
  background: var(--color-yellow-400);
}

/* Título (7057:166): Anton 56/1.2 uppercase, 518px, 3 linhas (.u-display).
   5vw − 16px = 56px em 1440 e 44px em 1200: a 1ª linha ("PRIMEIRA VEZ POR AQUI?")
   continua cabendo inteira enquanto a coluna encolhe entre 1200 e 1440. */
.primeira-fatia__title {
  flex: 0 1 518px;
  min-width: 0;
  font-size: clamp(40px, calc(5vw - 16px), 56px);
  /* O Figma arredonda cada linha para px inteiro (56 × 1.2 = 67.2 → 67; título
     201 = 3 × 67). Sem suporte a round(), fica o 1.2 do .u-display. */
  line-height: round(1.2em, 1px);
  color: var(--color-red-700);
  overflow-wrap: break-word;
}

/* ---------- Fatias (grupo 7057:172) ----------
   Figma: grupo centrado em calc(50% + 53.5px), bottom -45px → @1216: x 506 · y -45.
   Como título (518) e coluna (298) têm largura fixa, isso equivale a um slot entre os
   dois: começa 68px antes do fim do título (506 = 574 − 68) e termina 45px antes da
   coluna (817 = 862 − 45). 518 + (311 − 68) + 45 + 298 = 1104 = largura útil do box,
   então em 1440 a posição é idêntica; abaixo disso título/coluna encolhem em vez de
   ficarem por baixo das fotos.
   Quando falta pouco espaço (ex.: 1440 com barra de rolagem clássica = 1423 úteis,
   mas 100vw continua 1440), é o slot das fatias que cede primeiro (flex-shrink 20,
   até 24px — as fotos são absolutas e só avançam sobre a margem de 45px); assim o
   título não quebra em 4 linhas. */
.primeira-fatia__media {
  position: relative;
  flex: 0 20 calc(311 * var(--fatia-u));
  align-self: stretch;                /* altura = linha do flex (título) */
  min-width: calc(311 * var(--fatia-u) - 24px);
  margin-left: calc(-68 * var(--fatia-u));
  margin-right: calc(45 * var(--fatia-u));
  pointer-events: none;
}

.primeira-fatia__images {
  position: absolute;
  left: 0;
  bottom: calc(-56px - 45 * var(--fatia-u));   /* padding do box + vazamento de 45px */
  width: calc(311 * var(--fatia-u));
  height: calc(403 * var(--fatia-u));
}

.primeira-fatia__img {
  position: absolute;
  max-width: none;
  object-fit: contain;                /* asset já na proporção do slot (Figma estica: fill) */
  object-position: bottom;            /* object-bottom */
}

/* Foreground 7057:173: 206 × 191 em (611, -45) do box = (105, 0) do grupo.
   Figma: -scale-y-100 + rotate-180 = espelhamento horizontal. */
.primeira-fatia__img--foreground {
  top: 0;
  left: calc(105 * var(--fatia-u));
  width: calc(206 * var(--fatia-u));
  height: calc(191 * var(--fatia-u));
  transform: scaleX(-1);
}

/* Background 7057:174: 305 × 305 em (506, 53) do box = (0, 98) do grupo */
.primeira-fatia__img--background {
  left: 0;
  bottom: 0;
  width: calc(305 * var(--fatia-u));
  height: calc(305 * var(--fatia-u));
}

/* ---------- Coluna direita (7057:167): 298px, flex col gap 16 ---------- */
.primeira-fatia__content {
  display: flex;
  flex: 0 1 298px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

/* Textos ocupam a largura da coluna (min-w-full); o botão fica no tamanho do conteúdo */
.primeira-fatia__subtitle,
.primeira-fatia__text { align-self: stretch; }

/* 7057:168: Anton 20/1.4 uppercase */
.primeira-fatia__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh-body);        /* 1.4 */
  text-transform: uppercase;
  color: var(--color-red-700);
}

/* 7057:169: Archivo Regular 14/1.4 — o Figma arredonda cada linha para 20px
   (14 × 1.4 = 19.6 → 20), então o passo de linha é 20px literal. */
.primeira-fatia__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-red-700);
}


/* ==========================================================================
   Responsivo — escala compacta (tokens --fs-t-* / --fs-m-* de tokens.css)
   Uma media query por breakpoint; ≥ 1200 fica intocado (Figma).
   ========================================================================== */

/* ---------- ≤ 1199 — laptop pequeno / tablet grande (1024–1199) ----------
   Texto à esquerda (título em 3 linhas como no Figma → subtítulo → condições
   → botão) e o grupo de fatias do Figma à direita, em escala (--fatia-w,
   proporção 311 × 403), ancorado embaixo e vazando --fatia-leak pela borda
   do box — o mesmo gesto do desktop. As fatias são absolutas dentro da área
   "media" do grid (o box é o containing block), então nunca empurram nem
   cobrem o texto: a coluna delas tem largura fixa. */
@media (max-width: 1199.98px) {
  .primeira-fatia {
    --fatia-w: clamp(280px, 30vw, 340px);   /* 307 @1024 · 340 @1134+ */
    --fatia-pad: 48px;                      /* padding vertical do box */
    --fatia-leak: 40px;                     /* quanto as fatias passam da borda de baixo */
    --fatia-gap: 48px;                      /* texto ↔ fatias */
    --fatia-col: 440px;                     /* largura máx. das condições (~65 car./linha) */
    padding-bottom: calc(var(--fatia-leak) + 8px);
  }

  .primeira-fatia__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--fatia-w);
    grid-template-areas:
      "title   media"
      "content media";
    align-content: center;
    column-gap: var(--fatia-gap);
    row-gap: 24px;
    padding: var(--fatia-pad) 48px;
  }

  .primeira-fatia__title {
    grid-area: title;
    /* 9.5em ≈ a caixa de 518px do Figma (9.25em): reproduz as quebras do
       desktop em qualquer tamanho — PRIMEIRA VEZ POR AQUI? / PROVE UMA FATIA
       POR / CONTA DA CASA — sem órfã. (text-wrap: balance não age em blocos
       com <br>, então a medida é quem evita "DA CASA" / "CASA" sozinhos.) */
    max-width: 9.5em;
    font-size: clamp(var(--fs-t-h2), 3.6vw, 44px);   /* 40 → 43 (desktop começa em 44 no 1200) */
    text-wrap: balance;
  }

  .primeira-fatia__media {
    grid-area: media;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * (var(--fatia-pad) + var(--fatia-leak)));
    min-width: 0;
    margin: 0;
  }

  /* Grupo em fluxo e proporcional: posições do Figma em % de 311 × 403 */
  .primeira-fatia__images {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 311 / 403;
  }

  .primeira-fatia__img--foreground {
    left: 33.762%;                      /* 105 / 311 */
    width: 66.238%;                     /* 206 / 311 */
    height: 47.395%;                    /* 191 / 403 */
  }

  .primeira-fatia__img--background {
    width: 98.071%;                     /* 305 / 311 */
    height: 75.682%;                    /* 305 / 403 */
  }

  .primeira-fatia__content {
    grid-area: content;
    gap: 12px;
    max-width: var(--fatia-col);
  }

  .primeira-fatia__text {
    font-size: var(--fs-t-body);        /* 16 — os 14px do Figma ficam miúdos fora do desktop */
    line-height: 1.5;
    text-wrap: balance;                 /* linhas equilibradas: nada de "São Paulo." sozinho */
  }

  .primeira-fatia__content .btn { margin-top: 8px; }
}


/* ---------- ≤ 1023 — tablet (768–1023) ----------
   Mesmo arranjo texto | fatias, mas o banner vira faixa full-bleed (borda a
   borda), como o CTA amarelo da referência em 768; o texto fica alinhado à
   margem das outras seções (--section-px). */
@media (max-width: 1023.98px) {
  .primeira-fatia {
    --fatia-w: clamp(232px, 32vw, 280px);   /* 246 @768 · 267 @834 */
    --fatia-leak: 32px;
    --fatia-gap: 32px;
    /* a faixa amarela é full-bleed: o respiro acima dela é o padding de baixo
       do hero (--section-py); somar outro --section-py dobrava o vazio creme */
    padding-top: 0;
    /* embaixo, só o vazamento das fatias: da base da fatia ao título do
       cardápio fica exatamente --section-py (antes sobravam +8px de creme) */
    padding-bottom: var(--fatia-leak);
    /* botão compacto do mobile também no tablet: 16/22 + 14 = 50px */
    --fs-button: 16px;
    --lh-btn: 22px;
  }

  .primeira-fatia__content .btn { padding: 14px 28px; }

  .primeira-fatia__box {
    margin-inline: calc(-1 * var(--section-px));
    padding: var(--fatia-pad) var(--section-px);
  }

  .primeira-fatia__title { font-size: var(--fs-t-h2); }          /* 40px */

  .primeira-fatia__subtitle { font-size: var(--fs-t-lead); }     /* 18px */
}


/* ---------- ≤ 767 — mobile ----------
   Banner amarelo full-bleed de uma coluna, alinhado à esquerda como o
   "Fale agora com um consultor" da referência: título → subtítulo →
   condições → botão → fatias. As fatias viram uma composição horizontal
   baixa (morango na frente à esquerda, tradicional ao fundo à direita),
   centralizada, e vazam --fatia-leak pela borda de baixo — ecoando o
   vazamento do desktop, sem nunca cobrir texto (ficam depois do botão). */
@media (max-width: 767.98px) {
  .primeira-fatia {
    --fatia-leak: 24px;
    padding-bottom: var(--fatia-leak);  /* a seção 03 já abre com --section-py */
  }

  .primeira-fatia__box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "content"
      "media";
    row-gap: var(--gap-m-md);           /* 16 */
    padding: 48px var(--section-px) 0;
  }

  .primeira-fatia__title { font-size: var(--fs-m-h2); }          /* 28px */

  .primeira-fatia__media {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    justify-self: start;
    width: min(100%, 272px);            /* ~80% de 342 */
    margin-top: var(--gap-m-md);        /* 16 + 16 = 32 do botão */
    margin-bottom: calc(-1 * var(--fatia-leak));
    /* centralizada sob a coluna de texto (≤ --fatia-col), não sob a tela:
       em 390 dá no mesmo; em 600–767 as fatias não ficam soltas à direita. */
    margin-left: max(0px, (min(100%, var(--fatia-col)) - 272px) / 2);
  }

  /* 236 × 160: morango 160² em (0, 0) · tradicional 118 × 109 em (118, 0) */
  .primeira-fatia__images { aspect-ratio: 236 / 160; }

  .primeira-fatia__img--background {
    width: 67.797%;                     /* 160 / 236 */
    height: 100%;
  }

  .primeira-fatia__img--foreground {
    left: 50%;                          /* 118 / 236 */
    width: 50%;                         /* 118 / 236 */
    height: 68.313%;                    /* 118 × 191/206 = 109.3 / 160 */
    object-position: top;
  }

  .primeira-fatia__content { gap: 8px; }

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

  .primeira-fatia__content .btn {
    margin-top: var(--gap-m-md);        /* 8 + 16 = 24 */
    padding-inline: 24px;               /* pílula do mobile (components.css) */
  }
}


/* ---------- 1024–1199 (iPad deitado / laptop pequeno) ----------
   Mantém a composição do desktop, mas numa tela baixa os 80 + 80 de creme
   entre os botões do hero e o box amarelo pesavam (160px): 80 + 48 = 128,
   o mesmo respiro que fica entre o box e o cardápio (48 + 80). */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .primeira-fatia { padding-top: 48px; }
}


/* ---------- Motion (ver MOTION.md e assets/js/sections/02-primeira-fatia.js) ----------
   Ponto de partida das fatias na entrada "pop": cada uma sobe de um lado,
   girando para lados opostos, e assenta pela base. Só vale enquanto
   [data-reveal] existe — o estado final continua o layout acima. */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .primeira-fatia__img[data-reveal] { transform-origin: 50% 80%; }

  .js-motion .primeira-fatia__img--background[data-reveal="pop"]:not(.is-revealed) {
    translate: calc(-1.25 * var(--motion-distance)) calc(2.25 * var(--motion-distance));   /* 40 × 72 · 25 × 45 mobile */
    scale: .72;
    rotate: -14deg;
  }

  .js-motion .primeira-fatia__img--foreground[data-reveal="pop"]:not(.is-revealed) {
    translate: calc(1.25 * var(--motion-distance)) calc(2 * var(--motion-distance));       /* 40 × 64 · 25 × 40 mobile */
    scale: .72;
    rotate: 16deg;
  }
}


/* ---------- Repetição abaixo do cardápio (#primeira-fatia-03b) ----------
   Mesmo respiro que existe ACIMA dos cards (fundo do banner amarelo da
   seção 02 → primeiro texto do cardápio = pb desta seção + pt do cardápio),
   repetido nos dois lados desta cópia: fim dos cards → banner e
   banner → seção de sabores. 1440/1100 = 128 · 900 = 104 · 375 = 80. */
#primeira-fatia-03b {
  padding-top: 48px;                  /* + 80 de folga no fim do cardápio = 128 */
  padding-bottom: 128px;
}
@media (max-width: 1023.98px) {
  #primeira-fatia-03b { padding-top: 32px; padding-bottom: 104px; }
}
@media (max-width: 767.98px) {
  #primeira-fatia-03b { padding-top: 24px; padding-bottom: 80px; }
}

/* ---------- Banner do desconto (#primeira-fatia) ----------
   O título do desconto é mais longo que o da fatia: um degrau menor em cada
   faixa para não pesar no banner (56 → 44 · 40 → 32 · 28 → 24). */
#primeira-fatia .primeira-fatia__title { font-size: clamp(32px, calc(4vw - 13.6px), 44px); }
/* Banner na altura original do layout (313, igual ao banner de baixo) e as
   fatias no tamanho e na posição do Figma, flutuando para fora do amarelo em
   cima e embaixo, como no banner da fatia por conta da casa. */
@media (min-width: 1200px) {
  #primeira-fatia .primeira-fatia__box { min-height: calc(313 * var(--fatia-u)); }
  /* coluna do botão: a frase do cupom e o botão centrados um no outro */
  #primeira-fatia .primeira-fatia__content { align-items: center; }
  #primeira-fatia .primeira-fatia__content .primeira-fatia__text { align-self: auto; text-align: center; }
}
@media (max-width: 1199.98px) {
  #primeira-fatia .primeira-fatia__title { font-size: 32px; }
}
/* no celular o título usa o tamanho padrão dos títulos de seção (28px) */

/* Banner do desconto: a frase do cupom vai para baixo do botão, em 10px
   (todas as larguras). O HTML/tema mantém a ordem texto → botão; só o CSS inverte. */
#primeira-fatia .primeira-fatia__content .primeira-fatia__text {
  order: 1;
  font-size: 10px;
  line-height: 1.4;
}

/* Os dois banners amarelos no celular: título, fatias no meio, depois botão/
   texto. As fatias ficam centralizadas no topo do banner, inteiras dentro do
   amarelo (sem vazar pela borda de baixo como no layout padrão do mobile). */
@media (max-width: 767.98px) {
  :is(#primeira-fatia, #primeira-fatia-03b) .primeira-fatia__box {
    grid-template-areas:
      "title"
      "media"
      "content";
    padding: 40px var(--section-px) 48px;
  }
  :is(#primeira-fatia, #primeira-fatia-03b) .primeira-fatia__media {
    justify-self: center;
    width: min(100%, 300px);
    margin: 0;
  }
  /* tudo no mesmo eixo das fatias: título, botão e cupom centralizados */
  :is(#primeira-fatia, #primeira-fatia-03b) .primeira-fatia__title {
    justify-self: center;
    text-align: center;
    font-size: var(--fs-m-h2);         /* 28px, como os outros títulos no celular */
  }
  :is(#primeira-fatia, #primeira-fatia-03b) .primeira-fatia__content {
    justify-self: center;
    align-items: center;
    text-align: center;
  }
  :is(#primeira-fatia, #primeira-fatia-03b) .primeira-fatia__content .btn { margin-top: 8px; }
}

/* Banner do desconto no celular: título em 2 linhas — sem a medida de 9.5em e
   num tamanho que cabe ("20% DE DESCONTO NA SUA PRIMEIRA COMPRA, / SEM PEDIDO
   MÍNIMO"): 22px em 375, proporcional abaixo disso. */
@media (max-width: 767.98px) {
  #primeira-fatia .primeira-fatia__title {
    max-width: none;
    font-size: clamp(18px, 5.85vw, 22px);
    text-wrap: balance;
  }
}

/* Banner do desconto (chocolate) no celular: fatias um pouco maiores,
   ocupando também metade do respiro lateral do banner. */
@media (max-width: 767.98px) {
  #primeira-fatia .primeira-fatia__media {
    width: min(calc(100% + 32px), 360px);
    margin-bottom: -40px;              /* a foto com calda tem uma faixa vazia embaixo */
  }
}