/* Design System Template — layout primitives
   ---------------------------------------------------------------------------
   Composable primitives instead of a breakpoint for every block. The
   approach follows the intrinsic-layout ideas in Every Layout (Pickering &
   Bell): suggest sizes, compose with `gap`, let content decide when to wrap.

   WordPress block styles use the same names as `is-style-cds-*`. Keep the
   kit classes so HTML specimens and forks do not rename.

   Prefer composing these over writing one-off margin stacks.
   --------------------------------------------------------------------------- */

/* —— Stack: vertical rhythm owned by gap ——————————————————————————— */
/* One gap. Use this when every child is the same kind of thing (stats,
   demo boxes, a list of cards). Mixed copy (eyebrow + title + lede +
   action) belongs in `.cds-copy`. */
.cds-stack {
  --cds-stack-space: var(--cds-stack);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--cds-stack-space);
}

.cds-stack > * {
  margin-block: 0;
}

.cds-stack--sm {
  --cds-stack-space: var(--cds-space-3);
}

.cds-stack--md {
  --cds-stack-space: var(--cds-stack);
}

.cds-stack--lg {
  --cds-stack-space: var(--cds-split);
}

/* —— Copy: proximity, not one gap ————————————————————————————————— */
/* Mixed marketing column: eyebrow, title, lede, action, optional meta.
   Related bits sit closer. A new job (the button) gets more air.
   That is Gestalt proximity — not vertical justification. */
:is(.cds-copy, .is-style-cds-copy) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

:is(.cds-copy, .is-style-cds-copy) > * {
  margin-block: 0;
}

:is(.cds-copy, .is-style-cds-copy) > * + * {
  margin-block-start: var(--cds-space-5);
}

:is(.cds-copy, .is-style-cds-copy) > :is(.cds-pill, .is-style-cds-pill, .cds-meta) + :is(h1, h2, h3, h4, .wp-block-heading) {
  margin-block-start: var(--cds-space-3);
}

:is(.cds-copy, .is-style-cds-copy) > :is(h1, h2, h3, h4, .wp-block-heading) + :is(.cds-lede, p, .wp-block-paragraph) {
  margin-block-start: var(--cds-space-3);
}

:is(.cds-copy, .is-style-cds-copy) > :is(.cds-lede, p, .wp-block-paragraph, h1, h2, h3, h4, .wp-block-heading) + :is(.cds-cluster, .is-style-cds-cluster, .cds-btn, .wp-block-buttons) {
  margin-block-start: var(--cds-space-6);
}

:is(.cds-copy, .is-style-cds-copy) > :is(.cds-cluster, .is-style-cds-cluster, .cds-btn, .wp-block-buttons) + :is(.cds-cluster, .is-style-cds-cluster, .cds-meta, .wp-block-group) {
  margin-block-start: var(--cds-space-4);
}

:is(.cds-copy, .is-style-cds-copy) > :is(h1, h2, h3, h4, .wp-block-heading) + .cds-byline {
  margin-block-start: var(--cds-space-2);
}

:is(.cds-copy, .is-style-cds-copy) > :is(.cds-lede, p, .wp-block-paragraph) + .cds-display {
  margin-block-start: var(--cds-space-6);
}

:is(.cds-copy, .is-style-cds-copy) > .cds-display + .cds-meta {
  margin-block-start: var(--cds-space-2);
}

:is(.cds-copy, .is-style-cds-copy) > .cds-byline + :is(.cds-lede, p, .wp-block-paragraph) {
  margin-block-start: var(--cds-space-6);
}

.cds-byline {
  margin: 0;
  font-size: var(--cds-text-sm);
  color: var(--cds-ink-muted);
}

/* —— Box: even inset, or none —————————————————————————————————————— */
/* Padding reaches into the box. Asymmetrical padding is sibling spacing
   (use Stack gap). Paint (surface, tint, panel, dark) sits on a Box. */
:is(.cds-box, .is-style-cds-box) {
  box-sizing: border-box;
  padding: var(--cds-inset);
}

/* —— Center: measured reading column ——————————————————————————————— */
/* content-box so the `ch` measure describes text, not text + padding. */
:is(.cds-center, .is-style-cds-center) {
  box-sizing: content-box;
  max-inline-size: var(--cds-measure);
  margin-inline: auto;
  padding-inline: var(--cds-center-gutter, 0);
}

.cds-center--gutter {
  --cds-center-gutter: var(--cds-space-5);
}

/* —— Cluster: wrapping horizontal group ————————————————————————————— */
:is(.cds-cluster, .is-style-cds-cluster) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-cluster-space, var(--cds-cluster));
}

.cds-cluster--center,
.is-style-cds-cluster.cds-cluster--center {
  justify-content: center;
}

.cds-cluster--between,
.is-style-cds-cluster.cds-cluster--between {
  justify-content: space-between;
}

/* —— Grid: responsive tiles with no media queries —————————————————— */
/* Tiles grow to fill the row and wrap when they cannot hold --cds-grid-min. */
.cds-grid {
  display: grid;
  gap: var(--cds-grid-space, var(--cds-grid));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cds-grid-min, 16rem), 100%), 1fr));
}

.cds-grid--tight {
  --cds-grid-min: 11rem;
  --cds-grid-space: var(--cds-space-3);
}

/* Center each tile's content in its track. Proof stats, not cards. */
.cds-grid--center {
  justify-items: center;
  text-align: center;
}

.cds-grid--center > * {
  text-align: center;
}

/* Five even tracks on wide. Named exception: auto-fit five into
   four-plus-one is a leftover tile. One breakpoint is the override. */
.cds-grid--five {
  display: grid;
  gap: var(--cds-grid-space, var(--cds-space-3));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  text-align: center;
}

.cds-grid--five > * {
  text-align: center;
}

@media (max-width: 40rem) {
  .cds-grid--five {
    grid-template-columns: 1fr;
  }
}

/* —— Split / Switcher: two equal tracks that wrap —————————————————— */
/* Each child grows. When a track cannot hold --cds-split-min, it wraps.
   This is Every Layout's Switcher. The kit class stays `.cds-split`. */
:is(.cds-split, .cds-switcher, .is-style-cds-switcher) {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--cds-split-space, var(--cds-split));
}

:is(.cds-split, .cds-switcher, .is-style-cds-switcher) > * {
  flex-grow: 1;
  flex-basis: var(--cds-split-min, 18rem);
  min-inline-size: min(100%, var(--cds-split-min, 18rem));
}

:is(.cds-split, .cds-switcher, .is-style-cds-switcher) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cds-radius-lg);
}

/* —— Sidebar: one fixed track plus a fluid one ————————————————————— */
/* Side stays --cds-sidebar-side while adjacent. Both wrap to full width
   when the content track cannot hold --cds-sidebar-min. */
:is(.cds-sidebar, .is-style-cds-sidebar) {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--cds-sidebar-space, var(--cds-split));
}

:is(.cds-sidebar, .is-style-cds-sidebar) > :first-child {
  flex-grow: 1;
  flex-basis: var(--cds-sidebar-side, 16rem);
}

:is(.cds-sidebar, .is-style-cds-sidebar) > :last-child {
  flex-grow: 999;
  flex-basis: 0;
  min-inline-size: min(100%, var(--cds-sidebar-min, 50%));
}

/* —— Frame: media holds a ratio without prescribed px —————————————— */
:is(.cds-frame, .is-style-cds-frame) img,
img.cds-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cds-frame, 4 / 3);
  object-fit: cover;
  border-radius: var(--cds-radius-lg);
}

img.cds-frame.cds-frame--square,
.cds-frame--square {
  aspect-ratio: 1;
  object-fit: cover;
}

img.cds-frame.cds-frame--wide,
.cds-frame--wide {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

img.cds-frame.cds-frame--round,
:is(.cds-frame, .is-style-cds-frame).cds-frame--round img {
  width: min(100%, 18rem);
  max-inline-size: 18rem;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

img.cds-frame.cds-frame--fit,
.cds-frame--fit {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--cds-panel-soft);
  border: 1px solid var(--cds-rule);
}

.cds-figure {
  margin: 0;
}

.cds-caption {
  margin-block-start: var(--cds-space-3);
}

.cds-caption__name {
  margin: 0;
  font-family: var(--cds-font-display);
  font-weight: var(--cds-weight-bold);
  color: var(--cds-ink-deep);
}

.cds-caption__role {
  margin: 0;
  font-size: var(--cds-text-sm);
  color: var(--cds-ink-muted);
}

.cds-figure--compact .cds-caption__name {
  font-size: var(--cds-text-md);
}

.cds-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cds-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cds-grid--sym {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cds-grid--sym > * {
  flex: 1 1 calc(33.333% - var(--cds-grid, var(--cds-space-5)));
  max-inline-size: calc(33.333% - var(--cds-space-3));
  min-inline-size: min(100%, 14rem);
}

.cds-split--shot > .cds-copy {
  flex-basis: 28rem;
  flex-grow: 0;
  max-inline-size: min(28rem, var(--cds-measure));
}

.cds-split--shot > :not(.cds-copy) {
  flex-basis: 0;
  flex-grow: 1;
  min-inline-size: 12rem;
}

.cds-wash {
  background: var(--cds-paper-deep);
  padding-block: var(--cds-space-6);
}

.cds-wash--panel {
  background: var(--cds-panel);
}

.cds-wash--dark {
  background: var(--cds-surface-dark);
  color: var(--cds-on-dark);
}

.cds-wash--dark :is(h1, h2, h3, h4) {
  color: var(--cds-on-dark);
}

.cds-wash--dark :is(p, .cds-meta) {
  color: var(--cds-on-dark-muted);
}

.cds-wash__inner {
  max-inline-size: var(--cds-max);
  margin-inline: auto;
  padding-inline: var(--cds-gutter);
}

@media (max-width: 40rem) {
  .cds-grid--two,
  .cds-grid--three {
    grid-template-columns: 1fr;
  }
}