/* ==========================================================================
   LAYOUT — container, grid e espaçamento de seções
   ========================================================================== */

.container {
  width: min(var(--container-max), calc(100% - var(--container-gutter)));
  margin-inline: auto;
}

.section-grid {
  display: grid;
  grid-template-columns: var(--grid-desktop);
  gap: var(--space-lg);
}

/* Colunas utilitárias do grid de 12 */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Espaçamento vertical generoso entre seções */
.section {
  padding-block: clamp(var(--space-lg), 8vw, var(--space-xxl));
}

/* Header de seção (suporte para título + fonte) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 70ch;
  margin-bottom: var(--space-xl);
}

.section-head .eyebrow {
  color: var(--color-teal);
}

/* Linha divisória editorial */
.divider {
  height: var(--line-ink);
  border: none;
  background: var(--color-ink);
  margin-block: var(--space-xxl);
}

/* Composição assimétrica reutilizável */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.split-copy {
  grid-column: 1 / span 7;
}

.split-visual {
  grid-column: 8 / span 5;
}