/* ==========================================================================
   Page Hero — spacing and flow corrections for the stage layout.

   Loaded only on pages using this element. Scoped to .ph-lay so the home hero
   and course heroes, which share the theme's .hero-lay grid, are untouched.
   ========================================================================== */

/* The theme's .hero-lay centres its columns vertically. That works when the
   two columns are similar heights, but here the image stage is much taller
   than the copy, so the copy was being pushed down and left a large empty
   band under the breadcrumb. Start-aligning puts the copy directly beneath it. */
.fm-el--page-hero .ph-lay {
  align-items: start;
}

/* .eyebrow is inline-flex in the theme, so it sat on the same line as the
   badge instead of below it. flex makes it block-level and keeps the rule +
   text alignment the eyebrow relies on. */
.fm-el--page-hero .hero-copy .eyebrow {
  display: flex;
  margin-top: 0;
}

/* Spacing is owned by the badge rather than the eyebrow's own margin: the
   badge's margin was collapsing against it and the two boxes overlapped by a
   few pixels. An explicit gap below the badge can't collapse away. */
.fm-el--page-hero .hero-copy .hero-badge {
  margin-bottom: 1.15rem;
}

/* With a badge present the section no longer needs the theme's full top pad —
   the badge itself provides the visual breathing room. */
.fm-el--page-hero.phero--stage {
  padding-block: clamp(2rem, 3.6vw, 3.2rem) clamp(2.4rem, 4.6vw, 4rem);
}

/* Tighten the breadcrumb-to-content gap; 1.3rem read as a gap rather than a
   relationship once the badge sits under it. */
.fm-el--page-hero .crumbs {
  margin-bottom: clamp(.9rem, 1.8vw, 1.3rem);
}

/* The copy column carries its own rhythm, so the first element inside it
   should not add another top margin on top of the grid gap. */
.fm-el--page-hero .hero-copy > :first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  /* Stacked on small screens the stage no longer needs to align with the
     copy, and the copy should not be pinned to the very top of the section. */
  .fm-el--page-hero.phero--stage {
    padding-block: clamp(1.6rem, 4vw, 2.4rem) clamp(2rem, 5vw, 3rem);
  }
}