/* Layout primitives used inside the content area. */

/* Vertical rhythm: children separated by --sv-stack-gap. */
.sv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sv-stack-gap, var(--sv-space-4));
}
.sv-stack > * { margin-block: 0; }
.sv-stack--xs { --sv-stack-gap: var(--sv-space-1); }
.sv-stack--sm { --sv-stack-gap: var(--sv-space-2); }
.sv-stack--lg { --sv-stack-gap: var(--sv-space-6); }
.sv-stack--xl { --sv-stack-gap: var(--sv-space-8); }

/* Horizontal group that wraps (buttons, chips, meta items). */
.sv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-cluster-gap, var(--sv-space-2));
}
.sv-cluster--end { justify-content: flex-end; }
.sv-cluster--between { justify-content: space-between; }
.sv-cluster--lg { --sv-cluster-gap: var(--sv-space-4); }

/* Responsive card grid. */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sv-grid-min, 16rem)), 1fr));
  gap: var(--sv-grid-gap, var(--sv-space-4));
}
.sv-grid--sm { --sv-grid-min: 12rem; }
.sv-grid--lg { --sv-grid-min: 22rem; }

/* Main column + aside (site workbench, program page). */
.sv-split {
  display: grid;
  gap: var(--sv-space-6);
  align-items: start;
}
@media (min-width: 64em) {
  .sv-split {
    grid-template-columns: minmax(0, 1fr) var(--sv-split-aside, 20rem);
  }
  .sv-split--aside-start {
    grid-template-columns: var(--sv-split-aside, 20rem) minmax(0, 1fr);
  }
  .sv-split__aside--sticky {
    position: sticky;
    top: calc(var(--sv-sticky-top) + var(--sv-space-4));
  }
}
.sv-split__main,
.sv-split__aside { min-width: 0; }

/* Narrow column for single-column forms. */
.sv-measure { max-width: var(--sv-form-max); }
.sv-measure--text { max-width: 70ch; }

/* Sections inside a page. */
.sv-section + .sv-section { margin-top: var(--sv-space-8); }
.sv-section__title {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin-bottom: var(--sv-space-4);
  font-size: var(--sv-text-xl);
}

/* A Turbo Frame that holds several blocks of a page (UX-23: the filter bar
   and everything that depends on the query): a block with the page spacing. */
turbo-frame.sv-frame-stack { display: block; }
.sv-frame-stack > * + * { margin-top: var(--sv-space-4); }
/* An empty, hidden slot (e.g. #site-list-progress without targets) adds no gap. */
.sv-frame-stack > [hidden] + * { margin-top: 0; }

/* Regions printed by page.html.twig. */
.sv-region--content > * + * { margin-top: var(--sv-space-6); }
.sv-region--page-header:empty,
.sv-region--breadcrumb:empty { display: none; }