/* ============================================================
   OliverDeck — BASE · LAYOUT
   Containers + grid/stack primitives. .container references the
   --container token (was hardcoded 1280px in kit.css).
   ============================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-sm {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Generic responsive grid — set --cols, falls back per breakpoint */
.od-grid { display: grid; gap: var(--s-6); }
.od-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.od-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.od-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .od-grid[data-cols="3"], .od-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .od-grid[data-cols="2"] { grid-template-columns: 1fr; }
}

/* Vertical rhythm helper */
.od-stack { display: flex; flex-direction: column; }
.od-stack[data-gap="2"] { gap: var(--s-2); }
.od-stack[data-gap="3"] { gap: var(--s-3); }
.od-stack[data-gap="4"] { gap: var(--s-4); }
.od-stack[data-gap="6"] { gap: var(--s-6); }
.od-stack[data-gap="8"] { gap: var(--s-8); }

/* Horizontal cluster */
.od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* Section padding scale */
.od-section { padding: var(--s-20) 0; }
.od-section[data-bg="alt"] { background: var(--od-color-bg-subtle); }
.od-section[data-bg="dark"] { background: var(--od-color-surface-dark); color: var(--neutral-50); }