/* ==========================================================================
   09 — Restaurantes (B2B)
   Figma "Delivery" 7057:508 (1440 × 419) · py 80 · px 112
   Banner amarelo 7057:509 (1216 × 259): p 56, flex items-center justify-between
     ├ Título 7057:510 — Anton 56/1.2 uppercase, 478px, 2 linhas
     ├ Imagem 7099:227 → moto 7057:515 (357 × 305) ancorada 0.15px acima da base
     │   do banner; vaza 46.15px acima dele. Selo 7099:240 (text-paths "Desde 2004"
     │   + "• Yes, we have cheesecake •" + ícone) em mix-blend multiply sobre a caixa.
     │   Nó "Logo" 7099:228 é hidden → não renderizado.
     └ Coluna 7057:511 (282px): flex column, gap 16, items-end
         ├ Texto 7057:512 — Archivo 16/1.4, text-right (trecho final em bold)
         └ Button 7079:401 — Primary/Light (.btn.btn--primary), 165 × 65
   Layout: grid [título | vão da moto | coluna 282]. Em 1440 as trilhas dão
   478 | 344 | 282 = 1104 (= 1216 − 2×56), idêntico ao justify-between do Figma.
   Abaixo de 1440 título e moto escalam em vw (mesma proporção do frame) para a
   moto continuar cabendo no vão entre o título e a coluna de texto.
   ========================================================================== */


.restaurantes {
  padding-block: var(--section-py);            /* py-[80px] */
  background: var(--color-cream-50);           /* bg cream (Figma fbf5e7) */
}

/* ---------- Banner amarelo (7057:509) ---------- */
.restaurantes__banner {
  position: relative;
  display: grid;
  grid-template-columns: min(478px, 33.19445vw) minmax(0, 1fr) 282px;
  align-items: center;
  padding: 56px;                               /* p-[56px] */
  background: var(--color-yellow-400);
}

/* ---------- Título (7057:510) ---------- */
.restaurantes__title {
  position: relative;
  z-index: 1;                                  /* na entrada, a moto passa por trás do título */
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(56px, 3.88889vw);             /* text-[56px] @1440 */
  line-height: var(--lh-display);              /* 1.2 */
  text-transform: uppercase;
  color: var(--color-red-700);
}

/* ---------- Moto + selo (7099:227) ----------
   Absoluta com containing block = trilha 2 do grid na horizontal (vão entre
   título e coluna) e o padding box do banner na vertical (grid-row auto):
   left 22px (556 − 534), bottom 0.15px, 357 × 305 — ou a largura do vão + 13px
   quando ele encolhe (em 1440: 344 + 13 = 357). */
.restaurantes__media {
  position: absolute;
  grid-column: 2 / 3;
  left: 22px;
  bottom: 0.15px;                              /* bottom-[0.15px] */
  width: min(357px, calc(100% + 13px));
  aspect-ratio: 357 / 305;
  pointer-events: none;
}

/* Entrada da moto — adição deliberada, sem motion no Figma. O repouso (sem
   classes, sem JS) é o layout do Figma. 09-restaurantes.js só arma
   .has-moto-anim com a seção TOTALMENTE fora da tela e adiciona .is-inview na
   chegada: a moto sai recuada, menor e transparente POR TRÁS do título (título
   com z-index 1, acima desta camada absoluta) e freia (ease-out forte) até
   transform: none = posição exata do Figma. Origem na base: as rodas ficam no
   chão enquanto ela "cresce" para frente. */
.restaurantes.has-moto-anim .restaurantes__media {
  opacity: 0;
  transform: translateX(-70%) scale(.85);
  transform-origin: 50% 100%;
  transition:
    transform 1.4s cubic-bezier(.16, .84, .3, 1),
    opacity .6s ease-out;
}
.restaurantes.has-moto-anim.is-inview .restaurantes__media {
  opacity: 1;
  transform: none;
}
/* rearme fora da tela: volta ao ponto de partida sem animar */
.restaurantes.is-resetting .restaurantes__media { transition: none; }

/* 7057:515 — object-bottom (imagem-padrão já exportada em 357:305) */
.restaurantes__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

/* 7099:240 — caixa do export Figma 53 × 63 em (565.909, 23.113) do banner,
   i.e. (9.909, 69.267) relativo à moto; escala junto com ela. */
.restaurantes__selo {
  position: absolute;
  left: calc(100% * 9.909 / 357);
  top: calc(100% * 69.267 / 305);
  width: calc(100% * 53 / 357);
  height: calc(100% * 63 / 305);
  max-width: none;
  mix-blend-mode: multiply;
}

/* ---------- Coluna de texto + botão (7057:511) ---------- */
.restaurantes__content {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;                                   /* gap-[16px] */
}

/* 7057:512 — Archivo 16/1.4, text-right.
   No Figma a caixa do texto tem 66px (3 linhas × 22.4 = 67.2 transbordam 1.2px)
   e o botão começa em y 82 (66 + gap 16): a margem negativa reproduz isso. */
.restaurantes__text {
  width: 100%;
  margin-bottom: -1.2px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh-body);                 /* 1.4 */
  text-align: right;
  color: var(--color-red-700);
}
.restaurantes__text strong { font-weight: 700; }


/* ==========================================================================
   Responsivo — o Figma só tem o frame 1440; de 1200 para cima vale só o
   layout acima. Referência de linguagem mobile: _ref/mobile-ref/SPEC.md
   (banner de CTA "Fale agora com um consultor").

   ≤1199 (laptop/tablet) — 2 colunas, como o banner de CTA da referência:
       ┌──────────────────────────────┬──── moto ────┐ ← vaza acima quando cabe
       │ TÍTULO (2 linhas)            │              │
       │ texto                        │     🛵       │
       │ [VER CONDIÇÕES]              │              │
       └──────────────────────────────┴──────────────┘ ← rodas na borda (Figma)
     A moto continua "pousada" na base do banner (bottom 0, como no Figma).
     O min-height do banner = altura da moto − vazamento, então o vazamento
     só acontece quando o texto cabe nessa altura; ela nunca cobre o texto.
   ≤767 (mobile) — tipografia do mobile; até 576 ainda em 2 colunas.
   ≤575 (celular em pé) — banner amarelo full-bleed, alinhado à esquerda:
     título → texto → botão → moto (pousada na base do banner, proporcional,
     com o selo na caixa).
   ========================================================================== */
@media (max-width: 1199.98px) {
  .restaurantes {
    --rest-p: 48px;                                /* padding do banner (= banner amarelo da seção 02) */
    --rest-moto-w: 436px;                          /* 436 × 372.5 */
    --rest-moto-r: 16px;                           /* recuo da moto até a borda direita */
    --rest-bleed: 32px;                            /* quanto a moto passa do topo */
    overflow-x: clip;                              /* a entrada da moto parte da esquerda */
  }

  /* Trilha 2 = parte da moto dentro da área de conteúdo (o resto ocupa o
     padding direito), então o texto nunca passa por baixo dela. */
  .restaurantes__banner {
    grid-template-columns: minmax(0, 1fr) calc(var(--rest-moto-w) - var(--rest-p) + var(--rest-moto-r));
    grid-template-areas:
      "title   ."
      "content .";
    align-content: center;
    align-items: start;
    column-gap: 32px;
    row-gap: 16px;
    min-height: calc(var(--rest-moto-w) * 305 / 357 - var(--rest-bleed));
    padding: var(--rest-p);
  }

  .restaurantes__title {
    grid-area: title;
    font-size: clamp(var(--fs-t-h2), 3.889vw, 56px); /* 40 em 1024 → 46.6 em 1199 */
    text-wrap: balance;
  }

  /* grid-column auto → containing block = padding box do banner:
     rodas na borda de baixo, recuada --rest-moto-r da borda direita. */
  .restaurantes__media {
    grid-column: auto;
    left: auto;
    right: var(--rest-moto-r);
    bottom: 0;
    width: var(--rest-moto-w);
  }

  .restaurantes__content {
    grid-area: content;
    align-items: flex-start;
    gap: 24px;
  }

  .restaurantes__text {
    max-width: 440px;
    margin-bottom: 0;
    line-height: 1.5;                              /* corpo 16/1.5 do tablet (como 02, 07, 08) */
    text-align: left;
    text-wrap: pretty;
  }

  /* o destaque "pedido mínimo de R$500." nunca parte ao meio */
  .restaurantes__text strong { white-space: nowrap; }
}

/* Tablet: faixa amarela de borda a borda, como o banner amarelo da seção 02
   nesta faixa — texto na margem das outras seções (--section-px) e a seção
   sem respiro próprio (as vizinhas creme já abrem/fecham com --section-py).
   A coluna de texto precisa de ~340px para o título de 40px caber em 2
   linhas; a moto fica com o resto, pousada na base e sem vazar, com a roda
   da frente na margem direita (a arte tem 26/714 de respiro transparente). */
@media (max-width: 1023.98px) {
  .restaurantes {
    --rest-p: var(--section-px);
    /* 311 em 768 · 338 em 834 · 360 ≥ 889 — em 768 a coluna de texto fica com
       380px e a frase fecha em 2 linhas ("…porcionar, entrega" / "semanal
       programada e pedido mínimo de R$500."), sem a 2ª linha curta em "e".
       240 no piso: celular deitado (576–767), ver abaixo. */
    --rest-moto-w: clamp(240px, 40.5vw, 360px);
    --rest-moto-r: calc(var(--section-px) - var(--rest-moto-w) * 26 / 714);
    --rest-bleed: 0px;
    padding-block: 0;
  }

  .restaurantes > .container { padding-inline: 0; }

  .restaurantes__banner {
    column-gap: 24px;
    min-height: 0;
    padding: 48px var(--rest-p);
  }

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

/* Mobile: tipografia compacta. De 576 a 767 (celular deitado / tablet
   pequeno) continua a composição de 2 colunas do tablet — texto à esquerda,
   moto de 240–310px pousada à direita —; numa coluna só a moto de 320px
   deixava ~250px de amarelo vazio ao lado dela e a faixa ficava alta. */
@media (max-width: 767.98px) {
  .restaurantes__title {
    max-width: 10em;                               /* quebra do Figma: "TEM RESTAURANTE," / "PIZZARIA OU DELIVERY?" */
    font-size: var(--fs-m-h2);                     /* 28px */
  }

  .restaurantes__content { gap: 24px; }

  .restaurantes__text {
    max-width: 30em;
    font-size: var(--fs-m-body);                   /* 15px */
    line-height: var(--lh-m-body);                 /* 1.5 */
  }
}

@media (max-width: 575.98px) {
  /* Bloco amarelo de borda a borda, uma coluna, no mesmo padrão dos banners
     amarelos 02/03b no celular: título → moto → texto → botão, tudo
     centralizado, e a moto inteira dentro do amarelo. */
  .restaurantes__banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "media"
      "content";
    justify-items: center;
    row-gap: var(--gap-m-md);                      /* 16 */
    padding: 40px var(--section-px) 48px;
    text-align: center;
  }

  .restaurantes__title { text-align: center; }

  .restaurantes__media {
    position: relative;
    grid-area: media;
    right: auto;
    bottom: auto;
    justify-self: center;
    width: min(100%, 300px);
    /* a arte da moto vem cortada na base das rodas: no celular ela fica no
       meio do banner, então a base some num degradê para o amarelo em vez de
       mostrar o corte reto */
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }

  .restaurantes__content { align-items: center; }
  .restaurantes__text { text-align: center; }
}


/* ==========================================================================
   Motion — selo acompanha a chegada da moto (ver MOTION.md e
   assets/js/sections/09-restaurantes.js). Só com a moto armada: quando ela
   freia (~700ms dos 1.4s), o selo "pula" na caixa — pop do motor (scale .6,
   rotate −8°, expo-out). No repouso (.is-inview) nenhuma propriedade fica
   sobrescrita → estado final = layout do Figma. Rearme sem transição.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .restaurantes.has-moto-anim .restaurantes__selo {
    transition:
      opacity 300ms linear 700ms,
      scale 600ms var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) 700ms,
      rotate 600ms var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) 700ms;
  }
  .restaurantes.has-moto-anim:not(.is-inview) .restaurantes__selo {
    opacity: 0;
    scale: .6;
    rotate: -8deg;
  }
  .restaurantes.is-resetting .restaurantes__selo { transition: none; }
}