/* ============================================================
   Banafib · 03 LAYOUT
   Container, section rhythm, grid helpers.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.wide { max-width: var(--container-wide); }

/* --- Section vertical rhythm --- */
.section {
  padding-block: clamp(var(--space-12), 9vw, var(--section-y));
  position: relative;
}
.section.tight { padding-block: var(--space-10); }

/* Section surfaces - clean eco-friendly background variations (no gradients) */
.section--cream { background: var(--surface-page); }
.section--alt   { background: var(--surface-alt); }
.section--ink   { background: #f0fdf4; color: var(--text-strong); } /* Light Green 50 */
.section--clay  { background: #ecfdf5; color: var(--text-strong); } /* Light Green 50 */
.section--forest{ background: var(--surface-page); color: var(--text-strong); }

/* Section header block */
.section-head {
  max-width: 52ch;
  margin-bottom: var(--space-8);
}
.section-head .title {
  margin-top: var(--space-3);
}
.section-head .sub {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.section--ink .section-head .sub,
.section--clay .section-head .sub,
.section--forest .section-head .sub { color: var(--text-body); }

/* Grids */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

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