/* ==========================================================================
   Responsividade
   ========================================================================== */

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }

  .hero__eyebrow-list { gap: var(--space-4) var(--space-6); }

  .form-row { grid-template-columns: 1fr 1fr; }

  .article-card--featured {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

/* ---------- ≥ 860px ---------- */
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); }

  .lawyer-card { grid-template-columns: repeat(2, 1fr); }

  /* Proporção equivalente ao antigo "grid-template-columns: 0.9fr 1.1fr",
     mas em flexbox (ver .contact-grid em pages.css) — se o card do
     formulário some (display:none), a coluna de informações ocupa a
     largura toda sozinha, sem depender de :has() aninhado (que os
     navegadores rejeitam como seletor inválido). */
  .contact-grid { flex-direction: row; }
  .contact-grid > .card { flex: 1.1 1 0%; }
  .contact-grid > :not(.card) { flex: 0.9 1 0%; }

  .related-services { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≥ 960px : tipografia e grids (independente da navegação) ---------- */
@media (min-width: 960px) {
  /* h1/h2 já escalam via clamp() em layout.css — nada a fazer aqui.
     h3 continua no salto único (a diferença é pequena, 22px→24px). */
  h3 { font-size: var(--fs-h3); }

  .hero { padding: var(--space-7) 0 var(--space-8); }

  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }

  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col--wide-text { grid-template-columns: 1.2fr 0.8fr; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .lawyer-bio-grid { grid-template-columns: 0.85fr 1.15fr; }

  /* Cabeçalho da seção de identificação em duas colunas — H2 mais estreito,
     texto de apoio mais largo, alinhados pela base (rodada de
     frontend-design, 31/08/2026). Numeração 01–10 removida: .area-row não
     precisa mais de override de largura de coluna aqui. */
  .section-head--split {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: baseline;
    gap: var(--space-6);
  }

  .section { padding: var(--space-9) 0; }
}

/* ---------- ≥ 1280px : navegação desktop ----------
   Movido de 960px: com 6 itens de menu + CTA + logo, o conteúdo do
   cabeçalho só cabe de verdade a partir de ~1280px — abaixo disso (mesmo
   ≥960px) o menu e o CTA estouravam a largura disponível. O painel mobile
   (off-canvas) já funciona bem em qualquer largura, então usá-lo até 1279px
   resolve o estouro sem remover nenhum item de menu. */
@media (min-width: 1280px) {
  .main-nav { display: block; }

  .menu-toggle { display: none; }

  /* O CTA de WhatsApp do cabeçalho permanece no formato compacto
     somente-ícone aqui (comportamento padrão, definido sem media query
     em components.css) — não porque o menu esteja "competindo" no
     sentido comum, mas porque a medição real mostra que o cabeçalho de
     1240px (max-width fixo, não cresce com a viewport) não sobra espaço
     nenhum para o texto do CTA ao lado dos 7 itens do menu principal,
     em NENHUMA largura — testado até 1920px. Ver nota completa em
     components.css, acima de .header-actions .button--primary. */
}

/* ---------- ≥ 640px e ≤ 1279px : CTA do cabeçalho com espaço confirmado ----------
   Correção de regressão (03/09/2026): esta é a ÚNICA faixa em que o
   cabeçalho tem espaço medido de sobra (≥28px em todas as larguras
   testadas, com o rótulo configurável atual) para mostrar o CTA completo
   — ícone + texto — porque o menu principal ainda está escondido atrás
   do hamburger aqui (só reaparece em @media (min-width: 1280px) acima,
   faixa em que na verdade NÃO sobra espaço — ver nota lá). Fora deste
   intervalo (≤639px e ≥1280px) o botão permanece no formato compacto
   somente-ícone, que é o estado padrão definido sem media query em
   components.css — troca por breakpoint explícito, nunca por
   encolhimento progressivo do texto até ficar ilegível (era isso que
   causava o retângulo vazio antes desta correção). max-width + ellipsis
   aqui é só um teto defensivo contra um rótulo bem mais longo que o
   padrão ("WhatsApp do escritório") — não é o mecanismo que resolve o
   cabeçalho apertado, que é o breakpoint em si. */
@media (min-width: 640px) and (max-width: 1279px) {
  .header-actions .button--primary {
    width: auto;
    height: auto;
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-button);
  }

  .header-actions .button--primary .button__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------- ≤ 1279px : ajustes mobile/tablet finos ----------
   Estendido de 959px para acompanhar o limiar de navegação acima. */
@media (max-width: 1279px) {
  .site-header__inner { height: 72px; }
  .site-header.is-scrolled .site-header__inner { height: 64px; }
}

/* ---------- ≤ 639px : hero mais compacto, botões em coluna ---------- */
@media (max-width: 639px) {
  /* O CTA de WhatsApp do cabeçalho já está no formato compacto
     somente-ícone aqui — é o estado padrão, definido sem media query em
     components.css. Não precisa de regra própria nesta faixa. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__eyebrow-list {
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
  }
}