/* Blooming Prep — Programs (243) / Admissions (245) / Locations (247) + the 29 Aug batch (255-295). 1.1.0
   Only what the atomic style schema can't express, keyed by data-id like the
   other bp-* page sheets. Everything else is global classes + local variants. */

/* Accent bands: the eyebrow kicker glyph is dark (bp-home.css) and the tree
   decor prints over the copy — same two substitutions Home's hero, About's
   mission band and Approach's environment band already make. */
html body [data-id="fc-bpc-eyebrow"]::before,
html body [data-id="founding-loc-eyebrow"]::before{background-image:url(/wp-content/uploads/bp/brand/mark-tree-light.avif);}
html body [data-id="fc-bpc"],
html body [data-id="mont-quote"],
html body [data-id="reg-quote"],
html body [data-id="founding-loc"]{background-blend-mode:soft-light;}

/* link-index rows: btn-secondary wraps "Read more" inside the row's flex
   track — same nowrap fix bp-approach.css applies to its deeper rows. Made
   generic 29 Aug: every index_row button id ends "-link" inside a "-row-" or
   "-res-" id (learn/hta/st/extday/camp-pg rows, mont/reg resources). */
html body [data-id*="-row-"][data-id$="-link"],
html body [data-id*="-res-"][data-id$="-link"]{white-space:nowrap;}

/* Admissions Rolling split: the park photo's subject sits left of center —
   bias the 3:4 portrait crop toward the child. */
html body [data-id="rolling-img"]{object-position:32% center;}

/* Locations at mobile: the flipped Brooklyn Heights block stacks panel-first;
   keep photo-above-panel on both blocks so the rhythm matches. */
@media (max-width:767px){
  html body [data-id="heights-frame"]{order:-1;}
}

/* intro-split is a golden split (61.8fr / 38.2fr, 14 Sep 2026): copy always takes the
   wide column. Zigzag rows that put the image first in the DOM (Enrichment even rows)
   mirror the ratio so the photo stays in the 38.2 column. */
@media (min-width:1025px){
  html body .intro-split:has(> .intro-split-img:first-child, > .intro-split-media:first-child){grid-template-columns:38.2fr 61.8fr;}
}

/* ---- 14 Sep 2026 site audit, P2/P3 (audit-2026-09-14/AUDIT.md) ---- */
@media (min-width:1025px){
  /* #14 hero-stacked on image-less pages: the header's own 48px bottom plus the next band's
     150px read as a 230px hole under the H1. 80px is the space-xl step. */
  html body .elementor [data-id$="-hero"]:not(:has([data-id$="-hero-media-wrap"])) + [data-id]{padding-block-start:var(--space-xl,80px) !important;}
  /* P3: the interior H1 sat on a 70px inset nothing else uses; 20px puts it on the body's x=35 axis. */
  html body .elementor [data-id$="-hero-header"]{padding-inline:25px !important;}
  /* #15 intro-split bands ran 150px above and below a four-line paragraph; 110px is the
     statement-band step (About mission). The copy column moves from x=15 to the x=35 axis. */
  html body .elementor .section-band:has(> .intro-split){padding-block:110px !important;}
  html body .elementor .intro-split{padding-inline:20px;}
  /* #13 (photo beside a variable-height accordion) is now the `accordion-photo` global class: the
     frame keeps its own 3/4 ratio and the wrapper is sticky. The old stretch-to-column rule is gone
     because a growing frame re-scaled the cover photo every time an item opened (9 Oct 2026). */
  /* #22 Admissions Rolling: heading level with the photo top, not centred 250px down the band. */
  html body .elementor [data-id="rolling-inner"]{align-items:start;}
  /* #22 Enrollment Documents: seven short rows between two tinted bands take the 110px step. */
  html body .elementor [data-id="docs"]{padding-block:110px !important;}
  /* #19 Founding Families: the copy column follows the 1400px form instead of leaving 800px white. */
  html body .elementor [data-id="ffp-copy"]{position:sticky;top:120px;}
  /* #25 Enrichment rows: 900px of copy beside a centred photo; top-align and let the photo follow. */
  html body .elementor [data-id^="enr-row-"]{align-items:start;}
  html body .elementor [data-id^="enr-row-"] > .intro-split-img, html body .elementor [data-id^="enr-row-"] > .intro-split-media{position:sticky;top:120px;}
}
@media (max-width:767px){
  /* #14 at phone width the H1 on eyebrow-less heroes sat 30px under the logo. */
  html body .elementor [data-id$="-hero-header"]:not(:has(> .eyebrow)){padding-block-start:140px !important;}
  /* P3 How to Apply: photo above the steps, like every other split at phone width. */
  html body .elementor [data-id="hta-media"]{order:-1;}
}
/* #22 card 03 (Band Coral) on the tan band: the hairline every white card carries. */
html body .elementor [data-id^="founding-perk-"]{border:1px solid var(--border,#DFD9D4) !important;}
/* #19 checkbox rows: Elementor's 10px default inset wrapped "Young Toddlers (12–24 months)";
   24px boxes meet WCAG 2.5.8 without a padded label trick. */
html body .elementor .s-cb-row{padding:0 !important;}
html body .elementor .s-cb-box{width:24px !important;height:24px !important;min-width:24px !important;}
/* #23 Family Connection: two white sections in a row after the only strong band; Diversity
   takes the tan return. Builder value stays white; this is the page's rhythm, not its card. */
html body .elementor [data-id="diversity"]{background-color:var(--band-tan,#FAF5EB) !important;}
/* P3 Reggio H1 wrapped at 550px where Montessori's longer title fits on one line. */
html body .elementor [data-id="reg-hero-h1"]{max-width:none !important;}

/* Welcome from the Founder (476) - the letter column was centred (margin-inline:auto) while the
   H1 sat on the page gutter, so the two disagreed by 240px. Put the prose on the H1's own axis
   (user, 17 Sep 2026). The H1 lands at x=35: hero box 0 + the band's 10px + hero-header's own
   25px inset. Mirroring that split here keeps the two in step at every width rather than
   hard-coding 35px: the band takes 10px, the column takes the 25px inset.
   Keyed on data-id so it cannot leak to any other page. */
html body .elementor [data-id="founder-prose"] { padding-inline: 10px; }
html body .elementor [data-id="founder-prose-inner"] { margin-inline: 0 auto; padding-inline-start: 25px; }
@media (max-width: 767px) {
  /* The hero-header's own inset steps 25px -> 24px at this breakpoint, putting the H1 at 34px.
     Match it rather than dropping to the 16px page gutter: on this page the H1 IS the left axis,
     and a letter that starts 18px left of its own title reads as a mistake. */
  html body .elementor [data-id="founder-prose-inner"] { padding-inline: 24px; } /* both sides: below ~800px the column reaches the right edge, so a start-only inset reads lopsided */
}

/* Assessment & Progress (289) — client: "please make this section more compact" (revisions.pdf
   p.39). Photo out; the intro tucks under the hero and the bands run at half the site rhythm. */
@media (min-width:768px){
  html body .elementor [data-id="asm-intro"]{padding-top:0 !important;padding-bottom:56px !important;}
  html body .elementor [data-id="asm-methods"],html body .elementor [data-id="asm-reporting"]{padding-top:72px !important;padding-bottom:72px !important;}
}

/* 30 Sep 2026: Programs age cards — the age range is its own line under the name; one step smaller on phones where the name is 26px */
@media (max-width:767px){html body .elementor [data-id^="age-"][data-id$="-range"]{font-size:22px;}}

/* 6 Oct 2026 (N-62): tablet hero H1 onto the page axis. Every interior hero header carries a 44px
   builder inset inside the band's 10px base padding, so the H1 sat at x=54 while every section
   below starts at 35. Same fix About got in bp-about.css, for all `*-hero-header` pages. */
@media (min-width:768px) and (max-width:1024px){html body .elementor [data-id$="-hero-header"].hero-content-reveal{padding-inline:25px !important;}}

/* 6 Oct 2026: interior hero band to the screen edges. The e-flexbox base 10px inset on each
   `*-hero` wrapper left the tan photo band 10px short of both edges at every width; the header
   keeps its x=35 axis through a transparent 10px border. Same fix About got in bp-about.css. */
html body .elementor [data-id$="-hero"]:has(> [data-id$="-hero-header"].hero-content-reveal){padding:0 !important;}
html body .elementor [data-id$="-hero-header"].hero-content-reveal{border-inline:10px solid transparent;}