/* Shared chrome for the per-block sub-pages.
 *
 * The blocks arrive fully styled, so this only covers what sits around them:
 * the intro that names the block.
 *
 * Sized in rem so it follows the theme scale set in base.css, the same way
 * the blocks do. Mirrors the mockup's intro section — centred, Outfit for
 * the heading, generous space before the first block.
 */

.page-intro {
  max-width: 78rem;
  margin: 0 auto;
  padding: 2rem 2rem 5.6rem;
  text-align: center;
  background: var(--eez-paper);
}

/* 50px at the theme's root, matching the heading size the mockup renders. */
.page-intro__title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 4.55rem;
  line-height: 1.15;
  margin: 0 0 1.6rem;
}

.page-intro__body {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* Most intros are a single paragraph, so the margin above stays at 0 and this
   never applies. Kinetic Headline's mockup copy runs to two. */
.page-intro__body + .page-intro__body { margin-top: 1.2rem; }

/* Stencil Hero's mockup breaks its run of heroes with a second block of copy.
   Sitting between two blocks rather than under the nav, it needs the leading
   space back that .page-intro drops for being first on the page. */
.page-intro--mid { padding-top: 5.6rem; }

@media (max-width: 749px) {
  .page-intro { padding-bottom: 4rem; }
  .page-intro__title { font-size: 3.4rem; }
}