/* ==========================================================================
   Layout — containers, seções e ritmo vertical
   Depende de: tokens.css
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

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

/* "Folha" branca com topo arredondado sobre o fundo creme (padrão das refs) */
.section--sheet {
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.section__header {
  max-width: 48rem;
  margin-bottom: var(--space-7);
}

.section__header > * + * {
  margin-top: var(--space-4);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__header--center p {
  margin-inline: auto;
}

.section__lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}

/* Grades de cards: 1 coluna → 2 (tablet) → 3 (desktop) */
.card-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .card-grid--2,
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--3 > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

main:focus {
  outline: none;
}