/*
 * 806ai.ai — Layout Primitives (Slice 0: Foundation & Baseline)
 * ────────────────────────────────────────────────────────────
 * Reusable container/rhythm/grid utilities for Slice 1+. None of these
 * class names exist in current production markup (verified against
 * index.html), so linking this file changes nothing today.
 *
 * The current page container is `.wrap` (max-width 1280px, defined
 * inline in index.html) — it is untouched. `.container` below is the
 * future replacement, sized to the spec's 1440px editorial ceiling; the
 * two can run side by side until a page is deliberately migrated.
 */

.container{
  width: 100%;
  max-width: var(--layout-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--layout-gutter, clamp(20px, 4vw, 48px));
}

/* Reading column: article body copy. Target 680–760px. */
.container--narrow{
  width: 100%;
  max-width: var(--layout-reading-column, 720px);
  margin-inline: auto;
  padding-inline: var(--layout-gutter, clamp(20px, 4vw, 48px));
}

/* Standard content container: cards, forms, most sections. */
.container--standard{
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--layout-gutter, clamp(20px, 4vw, 48px));
}

/* Wide editorial container: hero grids, feature layouts. */
.container--wide{
  width: 100%;
  max-width: var(--layout-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--layout-gutter, clamp(20px, 4vw, 48px));
}

/* Section wrapper: major vertical rhythm between page sections (96–128px). */
.section{
  padding-block: var(--layout-section-gap, clamp(64px, 9vw, 128px));
}
.section--tight{
  padding-block: clamp(32px, 5vw, 64px);
}

/* Stack: vertical flex rhythm. --stack-gap defaults to the standard content gap. */
.stack{
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--layout-content-gap, 20px));
}
.stack--sm{ --stack-gap: var(--space-2, 8px); }
.stack--md{ --stack-gap: var(--space-4, 16px); }
.stack--lg{ --stack-gap: var(--space-8, 32px); }

/* Cluster: horizontal flex group that wraps, for chips/tags/actions rows. */
.cluster{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3, 12px));
}
.cluster--sm{ --cluster-gap: var(--space-2, 8px); }
.cluster--lg{ --cluster-gap: var(--space-6, 24px); }

/* 12-column desktop grid. Named grid-12 (not .grid) to avoid colliding
   with the existing production `.grid` card-grid component. */
.grid-12{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--layout-content-gap, 20px);
}
@media (max-width: 900px){
  .grid-12{ grid-template-columns: repeat(4, 1fr); }
}
.grid-12 > [class*="span-"]{ grid-column: span var(--span, 12); }
.span-3  { --span: 3; }
.span-4  { --span: 4; }
.span-6  { --span: 6; }
.span-8  { --span: 8; }
.span-12 { --span: 12; }
@media (max-width: 900px){
  .grid-12 > [class*="span-"]{ --span: 4; }
}