/* ============================================================================
   responsive.css — ajustes por breakpoint (mobile-first).
   Base = mobile (nas outras camadas). Aqui: 768 (tablet), 1024 (nav inline),
   1440 (amplo). DESIGN §4/§9. Motion respeita prefers-reduced-motion via tokens.
   ============================================================================ */

/* O enquadramento do hero no celular, que o gestor aprovou, é este 40ch e mais
   nada. Fica num `max-width: 767px` para não brigar com o `.container` do bloco
   de desktop, onde quem limita a linha passou a ser o próprio título. */
@media (max-width: 767px) {
  .hero__content { max-width: 40ch; }
}

/* ── 768px — tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .site-header .btn--whatsapp span { display: inline; }

  .grid--2 { grid-template-columns: 1fr 1fr; }

  /* O título do hero passa a ter largura PRÓPRIA, medida na fonte dele
     (2026-07-27). Antes quem limitava era `.hero__content` em `48ch`, e `ch` ali
     resolve contra os 16px do container, não contra os 46 a 80px do título.
     Resultado medido: a coluna ficava CONGELADA em 427px de 768 a 1366 enquanto
     a fonte crescia, ou seja, quanto maior a tela, mais linhas: 2 em 768, 3 em
     1024, 4 em 1280 e até 5 em 1366. E em 1440 virava UMA linha de 1175px, por
     colisão de cascata: `.hero__content` e `.container` estão na mesma folha com
     a mesma especificidade, e o `.container { max-width: 1280px }` do bloco de
     1440 vem depois e ganha. Nenhum dos dois extremos foi escolha de ninguém.

     Com `30ch` no próprio título, o limite acompanha a fonte e o resultado é
     estável: **2 linhas em 768, 900, 1024, 1180, 1280, 1366, 1440, 1600 e 1920**,
     nos três slides, medido. De 26ch para cima o comportamento já é esse; 30
     deixa margem para um título um pouco mais longo sem cair para 3 linhas.
     O `text-wrap: balance` (base.css) reparte as duas linhas em tamanhos
     parecidos, que é o que dá o acabamento.

     O celular NÃO entra aqui de propósito: abaixo de 768 vale o `40ch` do
     `.hero__content`, que é o enquadramento que o gestor aprovou. */
  .hero__title { max-width: 30ch; }
  /* `text` está null nos três slides hoje, mas se voltar precisa de medida de
     leitura própria, senão herda a largura do título e vira linha longa demais. */
  .hero__text { max-width: 46ch; }

  /* PDP: carrossel mostra 2 cards + peek */
  .carousel__item { width: 44%; }

  .site-footer__inner { grid-template-columns: 1.6fr 1fr; grid-template-areas: "brand contact" "nav contact"; }
  .site-footer__brand { grid-area: brand; }
  .site-footer__nav { grid-area: nav; }
  .site-footer__contact { grid-area: contact; }
}

/* ── 1024px — nav inline, sem drawer ──────────────────────────────────────── */
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__toggle { display: none; }
  .mobile-drawer { display: none; }

  .cta-band { flex-wrap: nowrap; }

  .product-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
  /* hero banner: packshot faz a "ponte" subindo para dentro da foto (só 2-col) */
  .product-hero--banner .product-hero__media { margin-top: calc(var(--hero-photo-h) * -0.5); }

  /* PDP: carrossel 3 cards + peek (benefícios já em 2 col desde 768) */
  .carousel__item { width: 31.5%; }

  .contact-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }

  .site-footer__inner {
    grid-template-columns: 1.6fr 1fr 1.4fr;
    grid-template-areas: "brand nav contact";
    gap: var(--space-2xl);
  }
}

/* ── 1440px — amplo ───────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}