/* ============================================================
   Layout primitives
   ============================================================ */

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Section spacing */
.section {
  padding-block: var(--space-6);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-7); }
}
.section--tight { padding-block: var(--space-5); }

.section + .section {
  border-top: var(--rule-width) solid var(--rule);
}

.section__header {
  margin-bottom: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.section__header .eyebrow + h2 { margin-top: var(--space-1); }
.section__header p { color: var(--bone-muted); max-width: 60ch; }

/* Grid helpers */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--space-5); }
}

/* Stack — vertical rhythm */
.stack > * + * { margin-top: var(--space-3); }
.stack--lg > * + * { margin-top: var(--space-5); }
.stack--sm > * + * { margin-top: var(--space-2); }

/* Cluster — horizontal wrap */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Hairline rule full-bleed within container */
.hr {
  border: 0;
  border-top: var(--rule-width) solid var(--rule);
}