/* ============================================================================
   HINT IT — v2 design system : LAYOUT PRIMITIVES
   ----------------------------------------------------------------------------
   Every-Layout-style composable primitives. They replace one-off inline styles:
   space pages with Stack/Cluster/Grid, center with Center, pad with Box. All
   gaps/paddings come from spacing tokens. Every selector is scoped under
   `.hint-v2`, so legacy `.container`/`.row`/etc. can't collide and these can't
   leak out. Tune per-instance via the local custom properties (e.g.
   `style="--stack-space: var(--space-6)"`).
   ============================================================================ */

/* Stack — vertical rhythm; space ONLY between children */
.hint-v2 .stack {
  display: flex;
  flex-direction: column;
}
.hint-v2 .stack > * + * {
  margin-top: var(--stack-space, var(--space-4));
}
.hint-v2 .stack-2 { --stack-space: var(--space-2); }
.hint-v2 .stack-3 { --stack-space: var(--space-3); }
.hint-v2 .stack-5 { --stack-space: var(--space-5); }
.hint-v2 .stack-6 { --stack-space: var(--space-6); }
.hint-v2 .stack-8 { --stack-space: var(--space-8); }

/* Cluster — horizontal group that wraps (nav items, button rows, tag lists) */
.hint-v2 .cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
  gap: var(--cluster-space, var(--space-3));
}

/* Center — horizontally center a column with a max measure + gutter */
.hint-v2 .center {
  box-sizing: content-box;
  margin-inline: auto;
  max-width: var(--center-max, var(--container-max));
  padding-inline: var(--center-gutter, var(--space-5));
}
.hint-v2 .center-narrow { --center-max: var(--container-narrow); }

/* Box — padded surface (no opinion on color/border; compose with .card etc.) */
.hint-v2 .box {
  padding: var(--box-space, var(--space-4));
}

/* Grid — responsive auto-fit grid */
.hint-v2 .grid {
  display: grid;
  gap: var(--grid-space, var(--space-4));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 250px), 100%), 1fr));
}

/* Cover — full-height region with a centered focal child (heroes) */
.hint-v2 .cover {
  display: flex;
  flex-direction: column;
  min-height: var(--cover-min, 60svh);
  padding: var(--cover-space, var(--space-8));
}
.hint-v2 .cover > * {
  margin-block: var(--space-4);
}
.hint-v2 .cover > .cover-center {
  margin-block: auto;
}

/* Sidebar — content + aside that collapses on narrow screens */
.hint-v2 .switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-space, var(--space-5));
}
.hint-v2 .switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* ---- small, well-scoped utilities ---- */
.hint-v2 .text-center { text-align: center; }
.hint-v2 .flow-grow { flex-grow: 1; }
.hint-v2 .full-bleed-brand {
  background-color: var(--bg-brand);
  color: var(--text-on-brand);
}
.hint-v2 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}