/* ============================================================
 * SHARED HERO — the standard GroupEd page hero (Rebecca, 23 Jul 2026)
 * Navy band + bold pale-blue GroupEd mark bleeding off the
 * bottom-right corner + a pupil cutout cropped at the frame's
 * bottom edge, headline on two lines.
 *
 * Applied with class `hero2 hero2--cutout`. MUST be linked AFTER
 * home-v2.css so these win over the faint default .hero2--cutout
 * treatment defined there. Home page and Martyn's Law keep their
 * own heroes and do NOT use this file.
 *
 * Markup contract (see about-us.html):
 *   <section class="hero2 hero2--cutout" aria-labelledby="…">
 *     <div class="hero2__frame">
 *       <span class="hero2__mark" aria-hidden="true"><img src="assets/images/grouped-symbol-blue3.svg" alt=""></span>
 *       <img class="hero2__cutout" src="assets/images/girl-smiling-cutout.webp" alt="…" fetchpriority="high">
 *       <div class="hero2__copy">
 *         <span class="hero2__eyebrow">EYEBROW</span>
 *         <h1 id="…">Line one<br>to <span class="mark">line two.</span></h1>
 *         <p class="hero2__lede">…</p>
 *       </div>
 *     </div>
 *   </section>
 * ============================================================ */

.hero2--cutout .hero2__frame {
  min-height: var(--hero-h);
  background: var(--ge-navy, #0F1438);
  /* Wide-screen content cap, mirroring .pv3g__frame--photo on the product
     pages: above ~1360px the hero's contents stop spreading and stay centred.
     It MUST sit on the frame, not on .hero2__copy — the copy carries a
     max-width, and a viewport-growing padding on the same element collapsed the
     text box to nothing on a monitor (Rebecca, 28 Jul). 100% here resolves
     against .hero2, i.e. the viewport, exactly as it does on a product page. */
  padding-inline: var(--hero-inset);
}
/* --photo-only override: raise the floor to match .hero2__copy's own former
   horizontal padding value (Rebecca, 28 Jul: "the margin used for the text on
   left isnt the same as the content on the right"). Scoped to --photo only —
   the plain cutout/collage variants position their figure with a
   viewport-relative clamp() (via .hero2__cutout/.hero2__mark), which already
   scales with width, so they don't have this bug and must keep the 0px floor
   above to avoid doubling their inset.
   Measured root cause on --photo: .hero2__photoframe is absolutely positioned
   with a fixed height-derived `right` offset (~72px, unrelated to viewport
   width), while .hero2__copy's left inset was this frame padding PLUS its own
   clamp(20px,3.4vw,56px) — so the photo's inset stayed pinned at ~72px while
   the text's inset grew unbounded with viewport width (44px at 1301px, 336px
   at 1920px). Giving this padding a floor and making it the ONLY source of
   inset for both (see below) fixes that at every width instead of by
   coincidence at a few. */
.hero2--photo .hero2__frame {
  padding-inline: max(clamp(20px, 3.4vw, 56px), var(--hero-inset));
}
.hero2--photo .hero2__copy { padding-inline: 0; }

/* wide enough that the headline sits on two lines, never squished */
.hero2--cutout .hero2__copy {
  max-width: 58rem;
  /* Vertical padding trimmed so a cutout hero finishes the SAME height as a
     product-page hero (Rebecca, 27 Jul: "the secondary school page doesnt seem
     to have the same size hero as the product pages"). The min-height above was
     already identical to .pv3g__frame's — max(480px, 66svh) — but this copy
     column was TALLER than that minimum, so the frame grew past it: 60px top
     (from .hero2__copy's shorthand) + 90px bottom, against the product hero's
     34px, made these pages 73px taller on a ~800px-tall laptop window. The old
     90px was reserved for hanging proof cards these pages do not have. */
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(32px, 3.6vw, 48px);
}

/* ============================================================
 * SITE RULE — the hero brand mark is always the product-page ghost.
 * Rebecca, 28 Jul: "change any page that still has the full colour icon
 * logo in the hero to the way the icon looks like on the product pages.
 * keep this as a rule."
 *
 * So: a large, faint WHITE mark bleeding off the TOP-right, never a solid
 * full-opacity pale-blue one off the bottom-right. Values are copied from
 * .pv3g__wm (product heroes) and .hero2__wm (plain-colour heroes) so all
 * three stay identical — if one changes, change all three.
 * The markup must point at grouped-symbol-white.svg, not -blue3.svg.
 *
 * This is the BASE rule now, not a per-page override: it was previously
 * scoped to .st (school types) while About/Careers/Blog/Book a Demo/
 * Founders Club kept the old solid mark. Those five are now covered here,
 * and the duplicate .st and .hero2--mission overrides have been deleted.
 * ============================================================ */
.hero2--cutout .hero2__mark {
  top: clamp(-200px, -14vw, -90px);
  bottom: auto;
  right: clamp(-220px, -14vw, -110px);
  width: clamp(500px, 70vw, 1120px);
  opacity: 0.11;
}

/* larger pupil, cropped at the frame's bottom edge (shorts/legs cut off) —
   contain keeps her proportions; the taller-than-frame box is anchored to
   the top so the frame's overflow clips her lower body */
.hero2--cutout .hero2__cutout {
  top: 0;
  bottom: auto;
  height: 148%;
  right: clamp(16px, 4vw, 80px);
  width: auto;
  /* px ceiling as well as the percentage: on a 2560px monitor 46% alone made
     the pupil over 1000px wide and she swamped the hero (Rebecca, 28 Jul) */
  max-width: min(46%, 520px);
  object-fit: contain;
  object-position: top center;
}

/* signature pale-blue headline highlight — force it on every cutout hero,
   overriding any page-specific tint (e.g. school-types' audience colour).
   Extra class in the selector keeps specificity above `.st .hero2__copy h1 .mark`. */
.hero2.hero2--cutout .hero2__copy h1 .mark {
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--ge-blue, #1B367E);
}

/* eyebrow pill — sky, uppercase */
.hero2__eyebrow {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ge-sky, #2FB7F1);
  color: var(--ge-navy, #0F1438);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* mobile: keep the figure to the right but smaller; headline reflows */
@media (max-width: 700px) {
  .hero2--cutout .hero2__cutout {
    max-width: 54%;
    height: 128%;
    right: -4%;
  }
  /* the mark stays top-right at phone size too — dropping it to the bottom
     here would reintroduce the old placement the rule above replaced */
  .hero2--cutout .hero2__mark {
    top: clamp(-200px, -14vw, -90px);
    bottom: auto;
    width: clamp(500px, 70vw, 1120px);
  }
  .hero2--cutout .hero2__copy { max-width: 100%; }
}

/* ------------------------------------------------------------
 * COLLAGE VARIANT — a cluster of white-framed school photos in
 * place of the pupil cutout (Rebecca, 27 Jul: "small collage of
 * schools for the hero image", used on Founders Club and LAs &
 * MATs). Unlike .hero2__cutout this is NOT clipped at the bottom
 * edge — the whole cluster should read, so it is vertically
 * centred and sized to sit inside the frame.
 * ------------------------------------------------------------ */
.hero2--cutout .hero2__collage {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(12px, 3vw, 64px);
  height: 90%;
  width: auto;
  max-width: min(44%, 470px);   /* px ceiling for wide monitors */
  object-fit: contain;
  object-position: center;
}
@media (max-width: 700px) {
  /* the cluster loses its detail at phone size — keep it, but smaller and
     tucked to the edge so the headline still owns the frame */
  .hero2--cutout .hero2__collage { max-width: 46%; height: 78%; right: -4%; }
}

/* ------------------------------------------------------------
 * PHOTO VARIANT — a real photo in a rounded frame on the right,
 * exactly as the product-page hero does it (Rebecca, 28 Jul:
 * "i want the hero to have a image just like we have on the
 * product pages"). Used on Primary and Secondary Schools.
 * Mirrors .pv3g__photowrap / .pv3g__photo: the same
 * max(340px, 50svh) height, the same 1.1/1 box, the same radius
 * and shadow, and the same equal top/bottom/right margin.
 * ------------------------------------------------------------ */
/* The copy has to come down from 58rem to the product's 40rem or there is no
   room for the photo — measured 388px of space at 58rem against the 567px the
   photo plus its margin needs. The headline takes an extra line at this width,
   which costs only a few px of hero height because the frame's min-height was
   already taller than the copy. */
/* max-width includes the padding, and that padding GROWS with the viewport
   (clamp(20px,3.4vw,56px)), so a flat 40rem quietly shrank the text box as the
   screen widened — 542px at 1440 but 528px at 1920, which tipped Secondary's
   longer headline onto a fourth line and pushed its hero to 668px. Adding the
   padding back keeps the text column itself at a constant 40rem. */
.hero2--photo .hero2__copy { max-width: calc(40rem + 2 * clamp(20px, 3.4vw, 56px)); }
/* ...and the headline takes the product hero's scale too. At hero2's 82px in a
   640px column the copy grew tall enough to push the frame past the shared
   594px height (Primary 644, Secondary 724). Matching .pv3g h1 exactly brings
   both back in line, and is what "the same layout as the product pages" means. */
.hero2--photo .hero2__copy h1 {
  font-size: clamp(36px, 4.4vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* .hero2__photowrap carries the position/size that .hero2__photoframe used to
   carry alone — split out (28 Jul) so floating tiles can sit inside it and be
   positioned relative to the photo itself, the same split product pages use
   between .pv3g__photowrap and .pv3g__photo. */
.hero2--photo .hero2__photowrap {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  /* was calc((max(480px,66svh) - max(340px,50svh))/2) — a fixed, height-only
     value that stayed constant while the text's inset grew with viewport
     width (Rebecca, 28 Jul: "the margin used for the text on left isnt the
     same as the content on the right"). Needs to equal .hero2__frame's own
     padding-inline exactly, but a plain CSS var() can't carry that: this
     element's containing block for a %-based calc is .hero2__frame's PADDING
     box, not the box .hero2__frame's own padding-inline resolves against, so
     the same formula re-evaluated here gave a different pixel answer (258px
     vs 280px measured at 1920px). school-types.js measures the frame's real
     computed padding-left in JS and sets this inline in px instead — the
     same fix pattern .pv3g__photowrap already uses for --pv3g-gap. This
     value is just the no-JS fallback (matches the floor in the CSS above). */
  right: clamp(20px, 3.4vw, 56px);
  height: max(340px, 50svh);
  aspect-ratio: 1.1 / 1;
  width: auto;
}
.hero2--photo .hero2__photoframe {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 40px 90px rgba(0, 16, 20, 0.38);
}
/* Same cutoff as the product hero: below this the copy and the photo collide,
   so the photo goes and the copy takes the full width back. */
@media (max-width: 1300px) {
  .hero2--photo .hero2__photowrap,
  .hero2--photo .hero2__phtile,
  .hero2--photo .hero2__collage { display: none; }
  .hero2--photo .hero2__copy { max-width: 58rem; }
}

/* ------------------------------------------------------------
 * PHOTO PLACEHOLDER SLOT in the hero (Rebecca, 29 Jul: "just
 * remove the images in the founders hero - add one image tile
 * placeholder instead"). Used on Founders' Club.
 *
 * It takes the position the .hero2__collage had, but a div cannot
 * borrow its height from an intrinsic image ratio the way that
 * <img> did — so the size is stated: a share of the frame width,
 * with aspect-ratio giving it the height. `min-height: 0` cancels
 * the .ph component's 160px floor, which would otherwise fight
 * the ratio at narrow widths.
 *
 * The .ph fill is a light sky tint, which on the navy hero reads
 * unmistakably as "artwork still to come" — the point of the
 * component. Swap the div for an <img> carrying the same class
 * when the real photo lands; object-fit is already set for it.
 * ------------------------------------------------------------ */
.hero2--cutout .hero2__phtile {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(12px, 3vw, 64px);
  width: min(42%, 460px);
  aspect-ratio: 4 / 3.4;
  min-height: 0;
  object-fit: cover;    /* only bites once this becomes an <img> */
}

/* ------------------------------------------------------------
 * PHOTO HERO — floating tiles (Rebecca, 28 Jul: "lets add pills/tiles to
 * these too like you have done for product pages... make sure they are
 * animated and it repeats"). Mirrors .pv3g__card on the product pages —
 * same corner-bleed positions, same icon-breathe and underline-sweep
 * loops — kept self-contained here rather than borrowed from
 * product-v3.css, since this hero variant is shared by non-product pages.
 * ------------------------------------------------------------ */
.hero2__card {
  position: absolute;
  z-index: 2;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 20, 56, 0.22);
}
.hero2__card--tl { top: clamp(-30px, -2vw, -16px); left:  clamp(-30px, -2vw, -16px); }
.hero2__card--tr { top: clamp(-30px, -2vw, -16px); right: clamp(-30px, -2vw, -16px); }
.hero2__card--bl { bottom: clamp(70px, 7vw, 96px);   left:  clamp(-30px, -2vw, -16px); }
.hero2__card--br { bottom: clamp(-26px, -1.8vw, -14px); right: clamp(-30px, -2vw, -16px); }

.hero2__cardpill {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 22px 11px 11px;
  border-radius: 999px;
}
.hero2__pillico {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #E7F4FD;
  color: var(--ge-blue, #1B367E);
  animation: hero2-ico-loop 4.4s var(--hv2-ease) infinite;
}
.hero2__pillico--green { animation-delay: 1.1s; }
.hero2__pillico svg { width: 21px; height: 21px; }
@keyframes hero2-ico-loop {
  0%, 100% { background: #E7F4FD; color: var(--ge-blue, #1B367E); transform: scale(1); }
  45%      { background: #E6F3D9; color: #4F7D2C; transform: scale(1.07); }
}
.hero2__cardpill strong { display: block; font-size: 16px; color: var(--ge-navy, #0F1438); }
.hero2__cardpill small { display: block; font-size: 13.5px; color: #7C88A6; }

.hero2__cardbig { padding: 14px 20px; overflow: hidden; }
.hero2__biglabel { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ge-navy, #0F1438); }
.hero2__bignum { margin-top: 4px; font-size: 38px; font-weight: 800; line-height: 1.05; color: var(--ge-navy, #0F1438); }
.hero2__livedot {
  flex: none; width: 9px; height: 9px; border-radius: 999px;
  background: var(--ge-green-4, #76A74F);
  box-shadow: 0 0 0 0 rgba(118, 167, 79, 0.5);
  animation: hero2-livedot-pulse 1.8s ease-out infinite;
}
@keyframes hero2-livedot-pulse { to { box-shadow: 0 0 0 8px rgba(118, 167, 79, 0); } }
.hero2__cardbig::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--ge-sky, #2FB7F1);
  transform-origin: left center;
  animation: hero2-underline-loop 5.2s var(--hv2-ease) infinite;
}
@keyframes hero2-underline-loop {
  0%       { transform: scaleX(0); opacity: 0.35; }
  40%, 78% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(0); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2__pillico { animation: none; }
  .hero2__livedot { animation: none; }
  .hero2__cardbig::after { animation: none; transform: none; opacity: 1; }
}