/* ==========================================================================
   01 — Hero
   Figma: Hero 7057:81 (1440 × 959) · Container 7057:82
     Hero Container 7057:83 → título 7057:84 (Anton 89/1.2)
     Image 7057:85 (1440 × 454) → Background 7057:86 · Png 7057:87 (vaza 122px p/ cima)
       Desde 7057:90 (selo + louros) · Info Container 7057:126 (3 badges)
     Container 7057:157 → botões 7073:331 / 7073:335 · texto 7057:163 (Archivo 20/1.4)
   ========================================================================== */

.hero {
  background: var(--color-cream-50);
  /* borda esquerda do conteúdo: acompanha o .container em qualquer largura */
  --hero-inset: max(var(--section-px), calc((100% - var(--content-w)) / 2));
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---- Hero Container 7057:83: pt 80 · pb 32 · px 112 (.container) ---- */
.hero__head {
  padding-top: var(--section-py);
  padding-bottom: 32px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 89px;
  line-height: var(--lh-display);     /* 1.2 → 106.8px */
  text-transform: uppercase;
  color: var(--color-red-700);
}

/* ---- Image 7057:85: faixa full-bleed 1440 × 454 --------------------------
   Escala uniforme (aspect-ratio do frame) para a foto e o PNG recortado
   continuarem alinhados em qualquer largura de viewport. */
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 454;
}

/* Background 7057:86 — foto recortada (percentuais do design_context) */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__bg-img {
  position: absolute;
  left: -0.03%;
  top: -109.52%;
  width: 132.46%;
  height: 235.94%;
  max-width: none;
  object-fit: cover;
}

/* Png 7057:87 — recorte com transparência: top -122px, 1440 × 575.527 */
.hero__cutout {
  position: absolute;
  left: 0;
  top: calc(-122 / 454 * 100%);
  width: 100%;
  height: calc(575.527 / 454 * 100%);
  pointer-events: none;
}
.hero__cutout-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---- Desde 7057:90 (grupo 122.345 × 88.154 em 112, 32) ---------------- */
.hero__since {
  position: absolute;
  top: 32px;
  left: var(--hero-inset);
  width: 122.345px;
  height: 88.154px;
}
.hero__laurel {
  position: absolute;
  top: 20px;
  width: auto;                         /* tamanho intrínseco da raiz do SVG */
  height: auto;
  max-width: none;
}
.hero__laurel--left { left: 0; }          /* 7057:91 */
.hero__laurel--right { left: 81.243px; }  /* 7057:110 */

/* Since Badge 7057:107: coluna centrada, Anton, branco, lh 1.4 */
.hero__since-badge {
  position: absolute;
  top: 0;
  left: 35.243px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-button);      /* 1.4 */
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
}
.hero__since-label { align-self: stretch; font-size: 18px; }     /* 7057:108 (min-w-full) */
.hero__since-year { font-size: 26px; white-space: nowrap; }      /* 7057:109 */

/* ---- Info Container 7057:126: bottom 32 · gap 40 ----------------------- */
.hero__info {
  position: absolute;
  left: var(--hero-inset);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero__info-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-pill);
}
.hero__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
}
.hero__info-icon img {
  width: auto;                         /* tamanho intrínseco da raiz do SVG */
  height: auto;
  max-width: none;
}
.hero__info-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: var(--lh-button);       /* 1.4 */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

/* ---- Container 7057:157: pt 32 · pb 80 · px 112, space-between ----------
   pt 48 (Figma: 32) — pedido do cliente: mais respiro entre a foto e os
   botões/texto. Tablet/mobile mantêm os próprios valores abaixo. */
.hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;                           /* só atua abaixo de 1440 (no Figma sobram 67px) */
  padding-top: 48px;
  padding-bottom: var(--section-py);
  /* O parallax (01-hero.js, ≥1024) desce a foto e o recorte da fatia/colher
     até 40px; o recorte não é cortado pela faixa da foto e vazava sobre esta
     área. A faixa dos botões fica por cima, com fundo creme de ponta a ponta
     (box-shadow + clip-path: sangra na horizontal sem gerar rolagem lateral). */
  position: relative;
  z-index: 2;
  background: var(--color-cream-50);
  box-shadow: 0 0 0 100vmax var(--color-cream-50);
  clip-path: inset(0 -100vmax);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.hero__text {
  flex: 0 1 710px;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh-body);         /* 1.4 → 28px */
  font-variation-settings: "wdth" 100;
  color: var(--color-red-700);
}
.hero__text strong { font-weight: 700; }

/* ==========================================================================
   Responsivo — o Figma só tem desktop 1440. Abaixo de 1024 segue o padrão
   mobile do site de referência do cliente: título → texto → botões → foto
   em largura total → faixa escura com os 3 selos (lista ícone + texto).
   A composição foto + recorte PNG que vaza sobre o título só existe no
   desktop; no tablet/mobile a foto inteira (caixa, frutas, fatia, calda)
   aparece com object-fit: cover, sem sobreposição.
   ========================================================================== */
/* Título acompanha a largura útil na proporção do Figma (89px para 1216px):
   "O autêntico New York Cheesecake," / "entregue em São Paulo" sempre em 2
   linhas, sem "São Paulo" sozinho — 89px em 1440, menor em 1200–1439 */
@media (max-width: 1439.98px) {
  .hero__title { font-size: min(89px, calc((100vw - 2 * var(--section-px)) * 89 / 1216)); }
}
@media (max-width: 1199.98px) {
  .hero__title { font-size: clamp(var(--fs-t-h1), 6.1806vw, 89px); }  /* 89px em 1440 */
  .hero__text { font-size: clamp(var(--fs-t-lead), 1.389vw, 20px); }
  .hero__text strong { white-space: nowrap; }   /* "5 milhões" nunca se separa */
}

/* 1024–1199: mesma composição do desktop, mas a foto é menor e os 3 selos
   passam por cima da fatia (creme claro) — um degradê escuro na base da
   foto devolve o contraste do texto branco. ≥1200 não muda. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero__media { isolation: isolate; }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .32) 55%, rgb(0 0 0 / 0));
    pointer-events: none;
  }
  .hero__since,
  .hero__info { z-index: 1; }
}

@media (max-width: 1023.98px) {
  .hero__head {
    padding-top: 48px;
    padding-bottom: 24px;
  }
  .hero__title {
    font-size: var(--fs-t-h1);
    text-wrap: balance;
  }

  /* texto + botões depois da foto: o parágrafo explica e os botões fecham
     o hero (a ação fica por último, logo antes da próxima seção) */
  .hero__footer {
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: var(--section-py);
  }
  .hero__text {
    order: -1;
    flex: none;
    max-width: 600px;
    font-size: var(--fs-t-lead);
    line-height: 1.5;
  }
  .hero__actions { gap: 16px; flex-wrap: wrap; }

  /* foto em largura total + faixa de selos abaixo */
  .hero__media {
    order: 2;
    display: grid;
    aspect-ratio: auto;
  }
  .hero__bg {
    position: relative;
    inset: auto;
    aspect-ratio: 2 / 1;
  }
  .hero__bg-img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 62%;
  }
  .hero__cutout { display: none; }

  .hero__since {
    top: calc(50vw - 87px);             /* foto 2:1 → altura 50vw; selo 88×.85 + 12 */
    left: var(--section-px);
    transform: scale(.85);
    transform-origin: top left;
  }

  /* 3 selos distribuídos na faixa (1º na margem esquerda, último na
     direita) e todos em 2 linhas — medida de 7em: "ENTREGA EM TODA / SÃO
     PAULO", "+5 MILHÕES DE / FATIAS SERVIDAS", "+355 AVALIAÇÕES / NO GOOGLE"
     (antes, entre 768 e 1023, um quebrava e os outros não) */
  .hero .hero__info {                 /* .hero vence ul[role="list"] do base.css */
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
    padding: 24px var(--section-px);
    background: var(--color-red-950);
  }
  .hero__info-item { justify-content: flex-start; }
  .hero__info-badge { width: 40px; height: 40px; }
  .hero__info-icon { width: 20px; height: 20px; }
  .hero__info-icon img { width: 20px; height: auto; }
  .hero__info-text {
    max-width: 7em;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  .hero__head {
    padding-top: 32px;
    padding-bottom: 24px;
  }
  /* Título proporcional à largura útil: 33px em 360 · 37 em 390 · 38 (teto)
     de 414 em diante. A medida de 8.85em (fica entre "O AUTÊNTICO NEW YORK",
     8.54em, e "ENTREGUE EM SÃO PAULO", 9.16em) fixa as 3 linhas em
     O AUTÊNTICO NEW YORK / CHEESECAKE, ENTREGUE / EM SÃO PAULO — "New York"
     nunca se separa e o título não vira 4 linhas em tela nenhuma. */
  .hero__title {
    max-width: 8.85em;
    font-size: min(38px, calc((100vw - 2 * var(--section-px)) / 8.85));
    line-height: 1.15;
  }

  .hero__footer { gap: 24px; padding-top: 32px; }
  .hero__text {
    font-size: var(--fs-m-lead);
    line-height: var(--lh-m-body);
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .hero__actions .btn { width: 100%; }

  .hero__bg { aspect-ratio: 3 / 2; }
  .hero__bg-img { object-position: 58% 60%; }
  .hero__since {
    top: calc(66.667vw - 78px);         /* foto 3:2 → altura 66.667vw; selo 88×.75 + 12 */
    transform: scale(.75);
  }

  .hero .hero__info {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-m-md);
    padding: 24px var(--section-px);
  }
  .hero__info-text {
    max-width: none;                    /* no celular cada selo é 1 linha */
    font-size: var(--fs-m-label);
  }
}

/* Celular deitado / tablet 7" (560–767): sobra largura para o título em 2
   linhas como no tablet (13.6em ≈ "O AUTÊNTICO NEW YORK CHEESECAKE,") e para
   os dois botões lado a lado no tamanho do texto — antes, em 600–740, o
   título de 38px ocupava metade da tela e os botões esticavam a 600px+.
   Tamanho contínuo: 36.5 em 560 → 48 (--fs-t-h1) em 768. */
@media (min-width: 560px) and (max-width: 767.98px) {
  .hero__title {
    max-width: none;
    font-size: min(var(--fs-t-h1), calc((100vw - 2 * var(--section-px)) / 13.6));
  }
  .hero__actions {
    flex-direction: row;
    width: auto;
  }
  .hero__actions .btn { width: auto; }

  /* foto 2:1 como no tablet (em 3:2 passava de 500px de altura) */
  .hero__bg { aspect-ratio: 2 / 1; }
  .hero__bg-img { object-position: 55% 62%; }
  .hero__since { top: calc(50vw - 78px); }   /* foto 2:1 → 50vw; selo 88×.75 + 12 */
}

/* ---- Botões abaixo do desktop ---------------------------------------------
   Tablet (768–1023) usa o botão compacto do mobile — Anton 16/22 + 14 = 50px
   (o de 65px do Figma pesava sob o título de 48px); pílula um pouco mais
   larga (28) que no celular (24, regra global de components.css).
   O secundário tem borda de 1px somada por fora do padding: 1px a menos no
   padding-block deixa os dois botões com a mesma altura (50 / 65 no
   1024–1199). ≥1200 mantém os 65 × 67 do Figma. */
@media (max-width: 1023.98px) {
  .hero {
    --fs-button: 16px;
    --lh-btn: 22px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero .btn { padding: 14px 28px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero .btn--secondary { padding-block: 19px; }
}
@media (max-width: 1023.98px) {
  .hero .btn--secondary { padding-block: 13px; }
}

/* ==========================================================================
   Motion (ver MOTION.md · coreografia em assets/js/sections/01-hero.js)
   Só estados de ENTRADA e pontos de origem — nenhuma regra de layout acima
   muda; sem animação (reduced motion / sem JS) nada disto tem efeito.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Louros "abraçam" o selo: giram a partir do talo (base, lado de dentro) */
  .js-motion .hero__laurel--left  { transform-origin: 85% 100%; }
  .js-motion .hero__laurel--right { transform-origin: 15% 100%; }
  .js-motion .hero__laurel[data-reveal]:not(.is-revealed) { scale: .8; }
  .js-motion .hero__laurel--left[data-reveal]:not(.is-revealed)  { rotate: -28deg; }
  .js-motion .hero__laurel--right[data-reveal]:not(.is-revealed) { rotate: 28deg; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  /* Zoom de entrada da foto "respira" a partir do ponto em que a fatia
     recortada encontra a borda da moldura: a emenda foto × recorte não abre */
  .js-motion .hero__bg-img { transform-origin: 52% 46.4%; }
}