/* Blooming Prep Highlights — revision plan P2-03 (29 Sep 2026), replaces the 10 Sep split rail.
   Client mark-up (revisions.pdf p.3): "section is too busy — stack the highlights under the
   header and replace the images with a bulleted list or icons", styled after The Goddard
   School of Greenpoint. Layout follows the revised-palette mock: centred header, then two icon
   lists flanking the portrait photo. No CTA here: Home already runs the sticky conversion bar.
   Icons are the shared bp-icon- line-art set painted as the thumb's background on the sage
   chip (DESIGN components.icons: family band -> Tint-4 chip); the palette pass retints them.
   30 Sep 2026 critique (all P1s): the 14 rows cluster 3 + 4 per column with a sparse hairline,
   source order kept (the curriculum now has its own statement band above, so its row is an
   ordinary list row again); list labels step down to 18/500 so they no longer outweigh the lede; labels and the
   callout are divs (no empty H3s) and bp-highlights.js gives the columns list semantics.
   Same day, P2 round: both lists now read icon-first and left-aligned (no mirroring), the chip is the
   Tint-4 #DCE6DF circle DESIGN.md asks for, and the gym takes the swing (the stopwatch left the set).
   30 Sep 2026 (client p.3, applied): the flanking photo is gone. Header, then the two lists stacked
   under it as a 2-column icon list, with the client's IMG_9582 as a full-bleed background at low
   opacity (::before) — "image in the background with transparency". The photo is decor behind
   ink copy on the light band ground; opacity is capped so text keeps its contrast.
   6 Oct 2026 (impeccable audit, user "apply all"): the 16% photo read as busy texture under the
   copy and broke NN6. The head and lists now sit on one Cream Tint 1 @65% scrim panel (NN6, flat:
   tinted grounds take no shadow) and the photo steps up to read as a photo around it. On the cream
   panel the icons drop their chips (DESIGN components.icons: on Cream, sage glyph, no chip).
   Targets data-id: the section carries no per-element Elementor styles. */

html body .elementor [data-id="school-highlights"] { position: relative; overflow: hidden; isolation: isolate; }
html body .elementor [data-id="school-highlights"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/wp-content/uploads/2026/09/bp-home-highlights-photo.avif) center 35% / cover no-repeat;
  opacity: .32;
  pointer-events: none;
}
html body .elementor [data-id="school-highlights-inner"] { padding: 0; margin-inline: auto; }
html body .elementor [data-id="hl-split"] {
  padding: 56px 64px;
  width: 100%;
  max-width: 1128px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: #FFFFFF; /* white panel over the photo, user 6 Oct 2026 (was NN6 cream scrim) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Header — title, lede, then the enrolment line in the accent, all centred. */
html body .elementor [data-id="hl-rail"],
html body .elementor [data-id="hl-head-left"],
html body .elementor [data-id="hl-head-right"] {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html body .elementor [data-id="hl-rail"] { gap: 20px; }
/* 30 Sep (client request): the Highlights head is centred again (title, lede, enrolment line). */
html body .elementor [data-id="hl-rail"] { width: 100%; }
html body .elementor [data-id="hl-head-left"] { gap: 12px; }
html body .elementor [data-id="hl-rail"] :is(h2, h3, p, div) { text-align: center !important; }
html body .elementor [data-id="highlights-h0-car-join-h2"] {
  margin: 0;
  font-family: Nunito, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy, #2E4359); /* revised palette: navy callout — plain text, not a link */
}

/* Body — two icon lists stacked under the header; the photo is the section background. */
html body .elementor [data-id="hl-grid"] {
  padding: 0;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 72px;
  align-items: start;
}
html body .elementor [data-id="hl-col-a"],
html body .elementor [data-id="hl-col-b"] {
  padding: 0;
  --hl-gap: 20px;
  --hl-xtra: 24px; /* extra air before a cluster's first row */
  display: grid;
  grid-auto-rows: auto;
  gap: var(--hl-gap);
}
html body .elementor [data-id="hl-rail-frame"] { display: none; } /* photo now lives on the section's ::before */
html body .elementor [data-id="hl-rail-photo"] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Row — icon chip then label, both lists read the same way (30 Sep: un-mirrored, left-aligned). */
html body .elementor [data-id^="hl-tile-"] {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 50px;
  position: relative;
  background: none;
  border: 0;
}
/* Clusters: 3 + 4 in each column, one sparse hairline before row 4 (A) and row 10 (B), so the two
   columns stay level row for row. Source order untouched, no labels. */
html body .elementor :is([data-id="hl-tile-4"], [data-id="hl-tile-10"]) { margin-top: var(--hl-xtra); }
html body .elementor :is([data-id="hl-tile-4"], [data-id="hl-tile-10"])::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc((var(--hl-gap) + var(--hl-xtra)) / -2);
  height: 1px;
  background: color-mix(in srgb, var(--label-green, #4B5F4F) 22%, transparent);
}
html body .elementor [data-id^="hl-plate-"] { padding: 0; min-width: 0; flex: 1 1 auto; }
html body .elementor [data-id^="hl-label-"] {
  margin: 0;
  font-family: Nunito, sans-serif;
  font-weight: 500;
  font-size: 18px !important;
  line-height: 1.3;
  color: var(--ink, #211910);
  text-wrap: balance;
}
html body .elementor [data-id^="hl-thumb-"] {
  padding: 0;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background: var(--hl-icon) center / 28px no-repeat; /* sage glyph, no chip: the row sits on the cream scrim */
  border: 0;
}
html body .elementor [data-id="hl-thumb-1"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-baby.svg); }
html body .elementor [data-id="hl-thumb-2"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-clock.svg); }
html body .elementor [data-id="hl-thumb-3"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-calendar.svg); }
html body .elementor [data-id="hl-thumb-4"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-school.svg); }
html body .elementor [data-id="hl-thumb-5"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-schedule.svg); }
html body .elementor [data-id="hl-thumb-6"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-curiosity.svg); }
html body .elementor [data-id="hl-thumb-7"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-community.svg); }
html body .elementor [data-id="hl-thumb-8"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-coaching.svg); }
html body .elementor [data-id="hl-thumb-14"] { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-language.svg); }
html body .elementor [data-id="hl-thumb-9"]  { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-meal.svg); }
html body .elementor [data-id="hl-thumb-10"] { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-swing.svg); }
html body .elementor [data-id="hl-thumb-11"] { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-shield.svg); }
html body .elementor [data-id="hl-thumb-12"] { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-creativity.svg); }
html body .elementor [data-id="hl-thumb-13"] { --hl-icon: url(/wp-content/uploads/bp/icons/bp-icon-independence.svg); }

/* Tablet — the two lists stay side by side, tighter. */
@media (max-width: 1024px) {
  html body .elementor [data-id="hl-split"] { gap: 40px; padding: 40px 32px; }
  html body .elementor [data-id="hl-grid"] { gap: 32px 40px; }
  html body .elementor [data-id^="hl-label-"] { font-size: 17px !important; }
}

/* Phone — one list, in the source doc's order (col A then col B). */
@media (max-width: 767px) {
  html body .elementor [data-id="hl-split"] { gap: 28px; padding: 28px 20px; }
  html body .elementor [data-id="hl-grid"] { grid-template-columns: 1fr; gap: 16px; }
  html body .elementor [data-id="hl-col-a"],
  html body .elementor [data-id="hl-col-b"] { --hl-gap: 14px; --hl-xtra: 20px; }
  html body .elementor [data-id="school-highlights"]::before { opacity: .28; background-position: center top; }
  html body .elementor [data-id^="hl-thumb-"] { flex-basis: 28px; width: 28px; height: 28px; background-size: 26px; }
  html body .elementor [data-id="highlights-h0-car-join-h2"] { font-size: 20px; }
}

/* Curriculum statement band (30 Sep 2026 critique) — Home's one differentiator told in the client's
   own words (curriculum page lead, verbatim): intro-split family, copy left, photo right, on the
   Cream Tint 1 ground between the white Welcome and the sage Highlights. Global classes carry the
   layout; only ground, inset and type live here, targeted by data-id. */
html body .elementor [data-id="curriculum-band"] { background: #F4F5EF; }
html body .elementor [data-id="curriculum-band-inner"] { padding: 0 20px; margin-inline: auto; }
html body .elementor [data-id="curriculum-band-h2"] {
  margin: 0;
  padding: 0;
  font-family: Nunito, sans-serif;
  font-weight: 600;
  font-size: 32px !important; /* the site's H2 step; bp-base's (0,1,3) heading rule outranks a bare data-id selector */
  line-height: 1.15;
  color: var(--ink, #211910);
  text-wrap: balance;
}
html body .elementor [data-id="curriculum-band-p"] {
  margin: 0;
  padding: 0;
  max-width: 62ch;
  font-family: Nunito, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body, #32281E);
}
html body .elementor [data-id="curriculum-band-link"] { margin-top: 12px; }
@media (max-width: 1024px) {
  html body .elementor [data-id="curriculum-band-h2"] { font-size: 30px !important; }
}
@media (max-width: 767px) {
  html body .elementor [data-id="curriculum-band-inner"] { padding: 0; }
  html body .elementor [data-id="curriculum-band-h2"] { font-size: 26px !important; }
  html body .elementor [data-id="curriculum-band-p"] { font-size: 17px; }
}