/*
 * Layout for block-composed pages.
 *
 * In the hard-coded templates every section lived inside a single .spa-main
 * container (on the home page, everything but the full-bleed hero). As blocks
 * they are flat siblings in post_content, so each block emits its own
 * .pbj-section wrapper that reproduces that container.
 *
 * Three details keep the result pixel-identical to the old markup:
 *
 *  1. The container is a *wrapper element*, never a class on the section
 *     itself. Sections such as .team-cta set their own padding and background;
 *     a container class on the same element overrides them.
 *  2. The two hard-coded shapes had different vertical rhythm, so the container
 *     comes in two variants. An interior page put its sections directly in
 *     main#main.spa-main, and main#main is a flex column, so they were flex
 *     items: adjacent margins did not collapse. The home page nested a plain
 *     div.spa-main two levels down, so its sections were block-flow siblings
 *     and adjacent margins did collapse. Flex is the default here and
 *     .pbj-blocks--flow is the home page's block flow.
 *  3. flex:1 so the wrapper grows into main#main the way .spa-main did, which
 *     is what keeps the footer at the bottom of a short page.
 */

.pbj-blocks {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pbj-blocks--flow {
  display: block;
}

.pbj-blocks > .pbj-section {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/*
 * .spa-main's vertical padding, applied once at each end of the stack. The
 * .home-hero rule only ever matches the home page, where the hero sits outside
 * the container and the padding belongs to whatever follows it.
 */
.pbj-blocks > .home-hero + .pbj-section,
.pbj-blocks > .pbj-section:first-child {
  padding-top: clamp(1.75rem, 4vw, 3rem);
}

.pbj-blocks > .pbj-section:last-child {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/*
 * Editor-only footnote under a block that is showing an abridged preview. The
 * publication table is the only one so far: several hundred identical rows make
 * the canvas slow to work in, so the editor gets the first few and this line
 * says so.
 */
.pbj-block-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-style: italic;
}

/* Editor-only notice shown when a data-driven block has nothing to render. */
.pbj-block-empty {
  margin: 0;
  padding: 1.25rem var(--page-pad);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9375rem;
}