/* ── Homepage hero: guaranteed clearance, top and bottom ───────────────────
   Two things overlap the hero by design. The fixed header sits over its top
   edge, and #home-why-it-matters rides 72px up over its bottom edge. Both
   overlaps are a fixed number of PIXELS.

   The hero's padding was viewport-relative — calc(3vh + 36px), cut to 20px on
   short desktops by rhythm.css — so the clearance moved with the window while
   the thing it had to clear did not. Measured across nineteen viewport sizes:

     · the CTA row finished UNDERNEATH the green section at ten of them,
       by as much as 52px (1024x768, 1100x800, 1440x900);
     · the eyebrow chips sat 4-11px BEHIND the header at every desktop size,
       because responsive.css lifts that block 34px to tighten the hero and
       the lift took it under a header it knew nothing about;
     · on a 390px phone the eyebrow block overlapped the headline by 70px,
       because it is positioned absolutely at a hardcoded top and its own
       height grows when the chips wrap.

   So: derive both paddings from the overlap each has to clear, and put the
   eyebrow block into normal flow, where it cannot be painted over anything.
   Nothing moves in the DOM — only the positioning — so no saved edit in
   content_overrides changes which element it belongs to.

   Its own file rather than design.css, which is generated from design-source/
   and would drop these rules on the next convert:design run. Loaded after
   responsive.css and rhythm.css so it settles over their repairs. */

:root{
  /* The fixed header's height, at the two breakpoints that change its padding
     (responsive.css: 1150px, then 640px). Measured in a browser, not guessed.
     If the header's padding or logo size changes, re-measure these three. */
  --wps-topbar-h:62px;
  /* Air under the header before the first chip, and under the CTA row before
     the green section. Floors, not exact values: the hero centres its columns
     inside min-height, so a tall window can give more — never less. */
  --wps-hero-gap-top:30px;
  --wps-hero-gap-bottom:64px;
  /* How far #home-why-it-matters rides up over the hero (its margin-top). */
  --wps-hero-rise:72px;
}
@media (max-width:1150px){:root{--wps-topbar-h:69px}}
@media (max-width:640px){:root{--wps-topbar-h:65px}}

#home-hero{
  padding-top:calc(var(--wps-topbar-h) + var(--wps-hero-gap-top)) !important;
  padding-bottom:calc(var(--wps-hero-rise) + var(--wps-hero-gap-bottom)) !important;
}

/* The eyebrow block becomes row 1 of the text column instead of floating at a
   hardcoded top:92px. The two blocks are told apart by the position in their
   own inline style, the same way responsive.css already addresses them. */
#home-hero > div[data-edit-ok][style*="position:absolute"]{
  position:static !important;
  grid-column:1;grid-row:1;
  align-self:start;
  z-index:4;
}
#home-hero > div[data-edit-ok][style*="position:relative"]{
  grid-column:1;grid-row:2;
}
/* The hero is two columns down to 720px, and one column with the photo lifted
   out of the flow (design.css, max-width:719px) below that. The photo has to
   span both rows of the two-column layout: left to auto-place it lands beside
   the eyebrow in row 1, and its 543px height then pushes the headline 541px
   down its own hero at 1024x768.

   Below 720px it gets no grid placement at all. A grid-area on an absolutely
   positioned child changes what its top:31vh is measured from, which dropped
   the photo 125px past the hero's bottom edge, behind the green section. */
@media (min-width:720px){
  #home-hero{grid-template-rows:auto minmax(0,1fr) !important}
  #home-hero > #heroPhotoCol{grid-column:2;grid-row:1 / span 2}
}

/* The 34px lift is what carried the chips under the header. In flow the block
   sits where the hero's own padding puts it, so the lift has nothing to do. */
#home-hero div[data-edit-ok] > div:first-child{
  margin-top:0 !important;
}

@media (max-width:719px){
  /* One column: the eyebrow and the text stack, and the row set is centred
     rather than stretched so the leftover min-height does not get shared out
     between them (which would open a gap under the eyebrow). */
  #home-hero{
    grid-template-rows:auto auto !important;
    align-content:center !important;
  }
}