/* _primitives.css — Every Layout primitives (opt-in only)
 * Apply by adding a class (e.g. <div class="stack">).
 * Does NOT restyle any existing markup. Safe to load globally.
 */

/* Stack — vertical rhythm. Direct children get top margin. */
.stack > * { margin-block: 0; }
.stack > * + * { margin-block-start: var(--space, var(--size-5, 24px)); }

/* Cluster — horizontal grouping that wraps. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--size-4, 16px));
  align-items: center;
}

/* Center — constrained, horizontally centered. */
.center {
  box-sizing: content-box;
  max-inline-size: var(--measure, 70ch);
  margin-inline: auto;
  padding-inline: var(--gutter, var(--size-5, 24px));
}

/* Sidebar — narrow side + flexible content that wraps under at threshold. */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--size-6, 32px));
}
.sidebar > :first-child {
  flex-basis: var(--side-width, 320px);
  flex-grow: 1;
}
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--content-min, 60%);
}

/* Switcher — equal-width row that switches to stack at threshold. */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--size-5, 24px));
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
}

/* Cover — hero-style full-viewport centerpiece. */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min, 100vh);
  padding: var(--gutter, var(--size-6, 32px));
}
.cover > * { margin-block: var(--space, var(--size-5, 24px)); }
.cover > :first-child:not(.cover-centered) { margin-block-start: 0; }
.cover > :last-child:not(.cover-centered) { margin-block-end: 0; }
.cover > .cover-centered { margin-block: auto; }

/* Frame — fixed aspect ratio media container. */
.frame {
  aspect-ratio: var(--n, 16) / var(--d, 9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame > img, .frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}