/* Layout primitives — reused across every page type, not per-page CSS */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: var(--space-section-tight);
}

/* Vertical rhythm inside a content block — differentiated by relationship,
   not one flat value for everything. This is the permanent, site-wide
   content-rhythm system — see PROJECT.md, "Site-Wide Spacing / Vertical
   Rhythm," for the full relationship table and the standing rule that ALL
   future content (new sections, provider pages, cards, lists, CTAs, FAQ,
   blog posts, edits to existing pages) must go through this system rather
   than a page-specific margin. Every page type already shares it: homepage
   sections, hub pages, provider-page body copy, and guide/policy/blog
   article copy (the article layouts previously had no rhythm class at
   all — see PROJECT.md). Extending this system for a new relationship
   means adding a rule here, not adding a margin where the new content lives. */

.stack > * + * {
  /* --space-md (default): paragraph → paragraph, paragraph → grid/list,
     heading → grid/list — general content-group transitions. */
  margin-top: var(--space-md);
}

.stack > :first-child {
  margin-top: 0;
}

/* --space-sm: a heading (or eyebrow) stays close to the text it directly
   introduces — read as one unit, not two separate blocks. Deliberately
   narrow (p/ul/ol only, not grids or cards) — see the --space-md default
   above for heading → grid. .section--accent's own gap to whatever
   follows it is handled by its own margin-bottom (components.css) —
   it's generated content (::before), not a real sibling, so it can't be
   targeted by a sibling combinator here the way the rest of this list is. */
.stack > h1 + p, .stack > h1 + ul, .stack > h1 + ol,
.stack > h2 + p, .stack > h2 + ul, .stack > h2 + ol,
.stack > h3 + p, .stack > h3 + ul, .stack > h3 + ol,
.stack > h4 + p, .stack > h4 + ul, .stack > h4 + ol,
.stack > .eyebrow + * {
  margin-top: var(--space-sm);
}

/* A large-tier refinement, not one of the four aliases: a subsection
   heading starting mid-article gets real room before it (bigger than
   --space-lg, since --space-lg closes a section and this opens one;
   smaller than --space-xl, since it's still inside one article/section,
   not a full section boundary) — so it reads as a new grouping rather
   than another line in the last one. Reference --space-6 directly here,
   not a semantic alias — it's a deliberate one-off step between LARGE
   and EXTRA LARGE, not a fifth general-purpose tier. A no-op when the
   heading is the block's first child (:first-child above wins on
   specificity, not source order, so this is safe either way). */
.stack > h2,
.stack > h3 {
  margin-top: var(--space-6);
}

/* --space-lg: the closing CTA of a section (a provider grid's "View all
   X", a feature list's "Learn more", a panel's action button) gets more
   room than a plain content-to-content gap — it's a distinct step, not
   just the next line. One rule instead of fixing each section individually. */
.stack > .card__link,
.stack > .btn {
  margin-top: var(--space-lg);
}

.stack--loose > * + * {
  margin-top: var(--space-lg);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Compact square cards (provider previews) read fine at 2-up well below
   the general 640px breakpoint — keeps long provider grids shorter on
   phones instead of stacking one per row. 360px still leaves 320px
   (the narrowest required width) at a single column, where a ~130px
   card would be too tight. */
@media (min-width: 360px) {
  .grid--provider {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hidden below/above a breakpoint — used sparingly, never for primary content */
.show-md {
  display: none;
}

@media (min-width: 960px) {
  .show-md {
    display: block;
  }

  .hide-md {
    display: none;
  }
}