/* Layout: container, grid de 12 colunas, seções (brief §3.3). */

/* Container: até 1200 px de conteúdo, margem lateral 56 px (24 px < 640 px) */
.container {
  width: 100%;
  max-width: calc(var(--max-content) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* Grid de 12 colunas */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.grid > * { grid-column: 1 / -1; }

/* Medida de texto: no máximo 7 colunas (~68 caracteres) */
.measure { max-width: 68ch; }

@media (min-width: 1024px) {
  .grid > .span-7 { grid-column: 1 / span 7; }
  .grid > .span-5 { grid-column: span 5; }
  .grid > .span-6 { grid-column: span 6; }
  .grid > .span-4 { grid-column: span 4; }
  .grid > .span-3 { grid-column: span 3; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .grid > .span-md-6 { grid-column: span 6; }
}

/* Espaço do cabeçalho fixo */
main { padding-top: var(--header-h); }

/* Seções */
.section {
  padding-block: var(--s-18);
  background: var(--off-white);
  /* Recorta o que passar da largura (ex.: o "quique" da entrada dos vetores).
     clip, não hidden: não cria área de rolagem e não quebra o position: sticky. */
  overflow-x: clip;
}

@media (max-width: 1023px) {
  .section { padding-block: var(--s-12); }
}

@media (max-width: 639px) {
  .section { padding-block: var(--s-10); }
}

/* Fundos de seção (docs/decisoes.md): ritmo claro / escuro ao longo da página */
.section--areia { background: var(--areia); }
.section--salvia { background: var(--salvia); }

.section--forest,
.section--berry {
  color: var(--off-white);
}

.section--forest { background: var(--forest); }
.section--berry { background: var(--berry); }

.section--forest h2,
.section--berry h2 { color: var(--off-white); }

/* Em fundo escuro, o foco em berry vivo não teria contraste */
.section--forest :focus-visible,
.section--berry :focus-visible { outline-color: var(--off-white); }

/* Texto de apoio logo abaixo do título da seção */
.section-lede {
  max-width: 56ch;
  margin-top: var(--s-3);
  font-size: 20px;
}

/* Bloco de conteúdo abaixo do cabeçalho da seção */
.section-body { margin-top: var(--s-8); }

@media (max-width: 639px) {
  .section-body { margin-top: var(--s-6); }
}


/* Bloco grande arredondado (referência: "Our story") */
.bloco {
  padding: var(--s-10);
  border-radius: var(--radius-card);
}

@media (max-width: 1023px) {
  .bloco { padding: var(--s-6) var(--s-5); }
}

@media (max-width: 639px) {
  .bloco { padding: var(--s-5) var(--s-3); }
}

/* Títulos ocupam no máximo 7 das 12 colunas */
@media (min-width: 1024px) {
  .section-title { max-width: calc((100% - 11 * var(--gutter)) * 7 / 12 + 6 * var(--gutter)); }
}