/**
 * Thơm — Layout
 * Containers, sections, and the 12-column grid.
 */

.container {
  /* The Figma frame is 1082px wide with 96px side padding, giving an 890px
     content column. Subtracting the gutter from the viewport (rather than
     padding inside a 890px box) keeps the column at a true 890px on wide
     screens instead of 890 minus padding. */
  width: min(100% - (2 * var(--gutter)), var(--container-max));
  margin-inline: auto;
}

.container--wide { width: min(100% - (2 * var(--gutter)), var(--container-wide)); }
.container--text { width: min(100% - (2 * var(--gutter)), var(--container-text)); }
.container--flush { width: 100%; }

.section {
  padding-block: var(--sp-section);
}
.section--sm   { padding-block: var(--sp-section-sm); }
.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--alt     { background-color: var(--c-bg-alt); }
.section--surface { background-color: var(--c-surface); }
.section--inverse {
  background-color: var(--c-bg-inverse);
  color: var(--c-text-inverse);
}
.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 { color: var(--c-text-inverse); }

/* Section heading block */
.section__head {
  max-width: 56ch;
  margin-bottom: var(--sp-12);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-action);
}
.section__title { margin-bottom: var(--sp-4); }
.section__intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 480px) {
  .grid--2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

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

/* Two-column split (media + text) */
.split {
  display: grid;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-block-start: var(--sp-4); }
.stack--lg > * + * { margin-block-start: var(--sp-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.cluster--center { justify-content: center; }