/* =========================================================================
   layout.css — Container, seções e grades
   Estrutura da página. Componentes visuais ficam em components.css.
   ========================================================================= */

/* ---- Container ---------------------------------------------------------
   Largura fluida com recuo lateral garantido. Substitui o antigo
   `max-width + padding` fixo, que desperdiçava 40px de cada lado no celular.
   ----------------------------------------------------------------------- */

.container {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.container--narrow {
  --maxw: var(--maxw-narrow);
}

/* ---- Seções ------------------------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section--surface {
  background: var(--c-surface);
}

.section--alt {
  background: var(--c-surface-alt);
}

.section--sunken {
  background: var(--c-surface-sunken);
}

.section--page {
  background: var(--c-page);
}

.section--dark {
  background: var(--c-dark);
  color: var(--c-on-dark-muted);
}

.section--dark h2,
.section--dark h3 {
  color: var(--c-on-dark);
}

.section--bordered {
  border-block: 1px solid var(--c-line-soft);
}

.section--border-top {
  border-top: 1px solid var(--c-line-soft);
}

.section--border-bottom {
  border-bottom: 1px solid var(--c-line-soft);
}

/* ---- Cabeçalho de seção (eyebrow + título + apoio) --------------------- */

.section-head {
  max-width: var(--maxw-prose);
}

.section-head > * + * {
  margin-top: var(--sp-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-brand-700);
}

.section--dark .eyebrow {
  color: var(--c-brand-accent);
}

.section-lead {
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
  line-height: var(--lh-normal);
}

.section--dark .section-lead {
  color: var(--c-on-dark-muted);
}

/* ---- Grades ------------------------------------------------------------
   `auto-fit` + `minmax` faz as colunas se reorganizarem sozinhas.
   O `min()` impede o estouro horizontal quando a viewport é menor que o
   mínimo declarado — a causa mais comum de scroll lateral em celulares.
   ----------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.grid--checklist {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-5);
}

/* Em telas grandes, 8 benefícios ficam melhor em 4 colunas do que em 3+2+3 */
@media (min-width: 1100px) {
  .grid--quarters {
    grid-template-columns: repeat(4, 1fr);
  }
}