/* ==========================================================================
   01-layout.css — Container system, grid, vertical rhythm utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container system — three widths
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--space-80);
}

.container--narrow {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-80);
}

.container--wide {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}

@media (max-width: 1024px) {
  .container        { padding-inline: var(--space-48); }
  .container--narrow{ padding-inline: var(--space-48); }
  .container--wide  { padding-inline: var(--space-32); }
}

@media (max-width: 640px) {
  .container        { padding-inline: var(--space-24); }
  .container--narrow{ padding-inline: var(--space-24); }
  .container--wide  { padding-inline: var(--space-16); }
}

/* --------------------------------------------------------------------------
   Section wrapper — standard padding rhythm
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
}

.section--paper { background-color: var(--color-paper); }
.section--bone  { background-color: var(--color-bone); }
.section--dusk  {
  background-color: var(--color-dusk-bg);
  color: var(--color-dusk-text);
}
.section--dusk h1,
.section--dusk h2,
.section--dusk h3,
.section--dusk h4,
.section--dusk p,
.section--dusk li {
  color: var(--color-dusk-text);
}
.section--dusk .caps-label {
  color: var(--color-dusk-dust);
}

/* --------------------------------------------------------------------------
   Grid utilities
   -------------------------------------------------------------------------- */

/* Two-column grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}

/* Three-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

/* Four-column grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

/* Two-column values grid */
.grid-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48) var(--space-64);
}

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

@media (max-width: 768px) {
  .grid-2      { grid-template-columns: 1fr; }
  .grid-3      { grid-template-columns: 1fr; gap: var(--space-24); }
  .grid-values { grid-template-columns: 1fr; gap: var(--space-32); }
}

@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Flex row utility
   -------------------------------------------------------------------------- */
.flex-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Section intro block — centred eyebrow + heading + lead paragraph
   -------------------------------------------------------------------------- */
.section-intro {
  text-align: center;
  margin-bottom: var(--space-64);
}

.section-intro .caps-label {
  margin-bottom: var(--space-16);
  display: block;
}

.section-intro h2 {
  margin-bottom: var(--space-24);
}

.section-intro .body-lg {
  max-width: 640px;
  margin-inline: auto;
  color: var(--color-ink-60);
}

/* Left-aligned intro variant */
.section-intro--left {
  text-align: left;
}
.section-intro--left .body-lg {
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */
.divider {
  border: none;
  border-top: 1px solid var(--color-green-muted);
  margin-block: var(--space-48);
}

/* Botanical sprig SVG divider — used once in heritage section */
.divider-sprig {
  display: flex;
  justify-content: center;
  margin-block: var(--space-48);
  color: var(--color-green);
}