/* layout.css — Grid, containers e estrutura */

/* Container principal */
.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-lg); }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--space-lg); }
}

/* Container estreito para texto */
.container--narrow {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Container extra largo */
.container--wide {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 640px) {
  .container--wide { padding-inline: var(--space-lg); }
}

/* Seção base */
section {
  padding-block: var(--space-xl);
}

@media (max-width: 768px) {
  section { padding-block: var(--space-lg); }
}

/* Grid utilitários */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

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

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

/* Flex utilitários */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* Espaçamento vertical entre elementos de texto */
.stack > * + * {
  margin-top: var(--space-sm);
}

.stack--lg > * + * {
  margin-top: var(--space-md);
}

/* Alternância de fundo por seção */
.section--alt {
  background-color: var(--cream-warm);
}

.section--dark {
  background-color: var(--forest-deep);
  color: var(--cream);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--cream);
}

.section--dark p {
  color: rgba(247, 244, 237, 0.7);
}

.section--dark .label {
  color: var(--sage);
}