/* Blooming Prep — About page (post 194). 1.8.0 */

/* Why Families (3 Sep 2026, superseding the 29 Aug masonry/rail): a uniform card grid.
   The header (H2 + intro) is still the first child of #why-rail in the builder tree, but it
   now spans the full grid row instead of riding inside the swipe — on tablet and phone it was
   a slide, so the section headline scrolled away with the cards. Grid also drops the
   column-masonry ragged bottoms: equal-height cards, one gutter value at every breakpoint.
   The scroll-snap machinery and the arrow controls are gone from this section (team-rail is
   the only rail left on the page); the controls stay in the tree, hidden, pending removal. */
html body [data-id="why-rail"]{
  display:grid !important;grid-template-columns:1fr;gap:24px !important;
  overflow:visible;scroll-snap-type:none;
}
html body [data-id="why-rail"] > [data-id]{flex:none;width:auto;padding-bottom:24px;}
html body [data-id="why-rail-controls"]{display:none !important;} /* .elementor-194 .s-* wins otherwise */
/* Header block: full-row, left-aligned at every breakpoint so the section reads
   headline -> intro -> cards. Measure capped so the intro never runs the full bleed. */
html body [data-id="why-about-header"]{
  grid-column:1 / -1;align-items:flex-start !important;justify-content:flex-start;
  padding:0 0 8px;padding-inline:0 !important;
}
html body [data-id="why-about-h2"]{text-align:left !important;}
html body [data-id="why-about-intro"]{text-align:left !important;max-width:60ch !important;}
/* The cards use the card-no-padding variant so images bleed edge to edge; that left the
   h3/bullets at 0 inset too (29 Aug 2026). Inset every non-image child instead of the card.
   The header is excluded: it is not a card, it starts on the grid line flush with the card
   edges (its own 10px Elementor base inset is zeroed above for the same reason). */
html body [data-id="why-rail"] > [data-id]:not([data-id="why-about-header"]) > [data-id]:not([data-id$="-img"]){padding-inline:20px;}
@media (min-width: 768px){
  html body [data-id="why-rail"]{grid-template-columns:repeat(2,1fr);}
}
@media (min-width: 1025px){
  /* Client, 3 Sep 2026: 2 cards up top, 3 below, both rows filling the same full width so
     the outer edges align (the inner column lines can't, 2 against 3). A 6-column track is
     the common denominator - top cards span 3, bottom cards span 2. */
  html body [data-id="why-rail"]{grid-template-columns:repeat(6,1fr);gap:28px !important;}
  html body [data-id="why-environments"],
  html body [data-id="why-personalized"]{grid-column:span 3;}
  html body [data-id="why-enrichment"],
  html body [data-id="why-wellness"],
  html body [data-id="why-foundations"]{grid-column:span 2;}
  html body [data-id="why-about-header"]{padding-bottom:12px;}
  /* Client, 29 Aug 2026: this section escapes the 1330 container and runs full-bleed.
     Only the inner is released - the section keeps its own vertical rhythm. */
  html body [data-id="why-about-inner"]{max-width:none !important;padding-inline:40px;}
}
@media (min-width: 1200px){
  /* The two wide cards run horizontal - image left, copy right (client, 3 Sep 2026). Held
     back to 1200px: below that the 40% image column is a narrow strip and the copy wraps to
     five- and six-line bullets - the two cards stay image-on-top from 1025 to 1199. The
     card is a flex column of three siblings (img / h3 / list) with no wrapper around the
     copy, so a two-column grid does the split without touching the builder tree: the image
     spans every row in column 1, h3 and list stack in column 2. Padding is asymmetric per
     DESIGN.md - the image bleeds to the card edge, the copy is inset. !important because
     the shared card-inset rule below outranks these on specificity. */
  html body [data-id="why-environments"],
  html body [data-id="why-personalized"]{
    display:grid !important;grid-template-columns:40% 1fr;
    /* 1fr spacer rows top and bottom optically centre the copy when the card is stretched
       to its taller neighbour; align-content:center would shrink the image with it. */
    grid-template-rows:1fr auto auto 1fr;
    /* !important: the shared why-rail child rule sets the 24px card bottom, and the
       builder's own 16px gap would otherwise open a seam between image and copy, and
       multiply across the spacer rows. The h3's bottom padding carries that 16px instead. */
    gap:0 !important;padding-bottom:0 !important;
  }
  html body [data-id="why-environments-img"],
  html body [data-id="why-personalized-img"]{
    grid-row:1 / -1;width:100%;height:100%;aspect-ratio:auto;
  }
  html body [data-id="why-environments-h3"],
  html body [data-id="why-personalized-h3"]{grid-column:2;grid-row:2;padding:36px 36px 16px !important;}
  html body [data-id="why-environments-list"],
  html body [data-id="why-personalized-list"]{grid-column:2;grid-row:3;padding:0 36px 36px !important;}
}
@media (max-width: 767px){
  /* Card H3s only; the page H3 ramp stays 26px. At 26px these stack four lines on a 375
     phone and push the bullets below the fold of a one-up card. */
  html body [data-id="why-rail"] [data-id$="-h3"]{font-size:21px;line-height:1.3;}
}

/* Team rail (29 Aug 2026): the section reads headline → subtext → rail → CTA, and unlike
   Why Families it stays a rail at every breakpoint — 3 cards of 390px plus a peek inside
   1330, so one card is always off-screen and the arrows have something to do. Cards are
   horizontal (photo left, copy right); the atomic schema has no flex-shrink, so the split
   is held here. The atomic style schema has no overflow/scroll-snap props either, so the
   rail behavior lives here too. Fixed-basis cards make the next card peek at the container
   edge and signal more content; the page body never scrolls horizontally - only the rail
   does. Scrollbar hidden: the peek plus the arrow controls carry the affordance. */
html body [data-id="team-rail"]{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
html body [data-id="team-rail"]::-webkit-scrollbar{display:none;}
html body [data-id="team-rail"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
html body [data-id="team-rail"] > [data-id]{scroll-snap-align:start;flex:0 0 390px;}
/* Arrows sit in the CTA row (3 Sep 2026): controls moved under the rail and now wrap the
   'Meet our team' button, arrows first. Elementor's e-div-block base grows flex children, so
   the pair is pinned to its content width; centering comes from the element's own styles. */
html body [data-id="team-rail-controls"]{flex:0 0 auto;width:auto;}
html body [data-id$="-card-img"]{flex:0 0 auto;}
html body [data-id$="-card-body"]{flex:1 1 auto;min-width:0;}
@media (max-width: 1024px){
  html body [data-id="team-rail"] > [data-id]{flex-basis:380px;}
}
/* 14 Sep 2026, client: desktop shows all four cards at once — no carousel above 1024px.
   Two columns, not four: the cards are horizontal (photo left, copy right) and a quarter of
   1330 leaves the copy column too narrow to hold "Collaborative Partners" on one line.
   The arrow controls have nothing to scroll here, so they're hidden; the CTA row keeps the
   'Meet our team' button. The rail wiring in bp-about.js stays put and drives the carousel
   at 1024 and below unchanged. */
@media (min-width: 1025px){
  html body [data-id="team-rail"]{
    display:grid !important;grid-template-columns:repeat(2,1fr);gap:28px !important;
    overflow-x:visible;scroll-snap-type:none;
  }
  html body [data-id="team-rail"] > [data-id]{flex:none;scroll-snap-align:none;}
  html body [data-id="team-rail-prev"],
  html body [data-id="team-rail-next"]{display:none !important;}
}
@media (max-width: 767px){
  html body [data-id="team-rail"] > [data-id]{flex-basis:86%;}
  html body [data-id$="-card-img"]{flex:0 0 190px;}
}

/* Rail arrows: 44px circle chips in the accordion-toggle language — cream ground / ink
   chevron, sage ground / white chevron on hover, color swap only. The chevron is a masked
   SVG so it inherits currentColor; the button's text label stays for screen readers via
   font-size 0. */
html body [data-id$="-rail-prev"],
html body [data-id$="-rail-next"]{
  /* !important: Elementor's e-button-base padding/size wins the cascade otherwise
     (measured 29 Aug 2026 — computed padding stayed 12px 24px without it). */
  width:44px !important;height:44px !important;border-radius:var(--radius-full,100%) !important;border:0;
  padding:0 !important;cursor:pointer;
  background-color:var(--surface, #FAF5EB) !important;color:var(--ink, #52815F) !important;
  font-size:0 !important;line-height:0;position:relative;
  transition:background-color .3s,color .3s;
}
html body [data-id$="-rail-prev"]:hover,
html body [data-id$="-rail-next"]:hover{background-color:var(--accent, #52815F) !important;color:#FFFFFF !important;}
html body [data-id$="-rail-prev"]:focus-visible,
html body [data-id$="-rail-next"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
html body [data-id$="-rail-prev"]::before,
html body [data-id$="-rail-next"]::before{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.5 3 5.5 8l5 5' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.5 3 5.5 8l5 5' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body [data-id$="-rail-next"]::before{transform:scaleX(-1);}
html body [data-id$="-rail-prev"][data-disabled],
html body [data-id$="-rail-next"][data-disabled]{opacity:.35;pointer-events:none;}

/* Why-families bullet rows: sage dot, drawn not typed (no list markup in atomic). */
html body [data-id*="-bullet-"]{position:relative;}
html body [data-id*="-bullet-"]::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;width:7px;height:7px;border-radius:var(--radius-full,100%);background:var(--accent);}

/* Value accordion glyphs must not squash when a title wraps. */
html body [data-id^="value-accordion-glyph-"]{flex:0 0 auto;}

/* Vision & Mission band: the tree mark is decor sitting behind white copy — blend it
   into the sage so it can never compete with the statement. Same treatment Home's
   curriculum band uses on the identical mark. */
html body [data-id="mission"]{background-blend-mode:soft-light;}

/* Our Story photo stack (29 Aug 2026): two overlapping tilted photos. The atomic
   style schema has no `transform` prop (every rotation/scale on this site is either
   GSAP-driven or plain CSS like this) and `custom_css` on a variant doesn't survive
   Elementor's own save validation, so the rotation lives here instead. Desktop only
   (>=1025px) — story-lower-row stacks to one column at tablet and a tilted full-width
   photo would look like a mistake, not a treatment. */
@media (min-width: 1025px) {
  html body [data-id="story-frame"]{transform:rotate(-4deg);}
  html body [data-id="story-photo-2-wrap"]{transform:rotate(4deg);}
}

/* Tinted-card icon system (3 Sep 2026, client). Rule: a card sitting on a family Tint 5 band
   color carries its icon in that same family — glyph at the family's Shade 1, chip circle at
   Tint 4, i.e. one step either side of the card ground. Cards on white keep the sage icon,
   so the Values grid is untouched. The icons ship as <img> SVGs with #42674C baked into the
   fill, so the glyph is recolored by masking the image and painting the mask with the family
   color; the chip is the card's ::before because an <img> has no pseudo-element to hang a
   circle on and the widget renders as a bare <img>, no wrapper. --bp-icon must track the
   image chosen in the builder — it is the same file as the img's own src. */
html body .card[data-id^="philosophy-card-"]{position:relative;}
html body .card[data-id^="philosophy-card-"]::before{
  content:"";position:absolute;
  /* card padding 32px (global .card) minus half the 64-40 chip overhang */
  inset-block-start:20px;inset-inline-start:20px;
  width:64px;height:64px;border-radius:var(--radius-full,100%);
  background-color:var(--bp-icon-chip);
}
html body .card[data-id^="philosophy-card-"] > img{
  position:relative; /* over the chip */
  background-color:var(--bp-icon-ink);
  -webkit-mask:var(--bp-icon) center/contain no-repeat;
  mask:var(--bp-icon) center/contain no-repeat;
}
html body [data-id="philosophy-card-1"]{ /* Coral — band-coral ground */
  --bp-icon-chip:var(--fam-coral-chip);--bp-icon-ink:var(--fam-coral-ink);
  --bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-curiosity.svg");
}
html body [data-id="philosophy-card-2"]{ /* Warm Tan — band-tan ground */
  --bp-icon-chip:var(--fam-tan-chip);--bp-icon-ink:var(--fam-tan-ink);
  --bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-independence.svg");
}
html body [data-id="philosophy-card-3"]{ /* Sage — band-sage ground */
  --bp-icon-chip:var(--fam-sage-chip);--bp-icon-ink:var(--fam-sage-ink);
  --bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-empathy.svg");
}

/* 14 Sep 2026 audit #20: the Mission card is Card Sage on the Band Sage ground; the hairline
   every card carries restores its edge. Sample Menu meal labels were the only 12px text on
   the site; 13px is the floor. */
html body .elementor [data-id="mission-card"]{border:1px solid var(--border,#DFD9D4) !important;}
html body .elementor [data-id^="fc-menu-"][data-id$="-l"]{font-size:13px !important;}

/* Revision plan P2-04 (29 Sep 2026) — About restructured: stat tiles, Vision, the team teaser
   and Sample Menu (own pages now) removed; Commitment and Diversity lose their photos; core
   values run as the restored names-only marquee (template 420 anatomy, bp-home.css/js). */
html body .elementor [data-id="story-lower-row"]{grid-template-columns:minmax(0,1fr) !important;}
html body .elementor [data-id="story-prose-col"]{max-width:860px;margin:0 !important;padding:0 !important;justify-self:start;} /* was inset once the photo column left */
/* Philosophy is one unbroken block (client, PDF p.9) — a readable measure, not the lead size. */
html body .elementor [data-id="philosophy-header"]{max-width:860px !important;}
html body .elementor [data-id="philosophy-lead"]{font-size:19px !important;line-height:1.65 !important;}
/* Mission: one statement card, centred. */
html body .elementor [data-id="mission-cards"]{grid-template-columns:minmax(0,1fr) !important;max-width:900px;margin-inline:auto;}
html body .elementor [data-id="mission-card-text"]{font-family:Nunito, sans-serif;font-weight:500;font-size:26px;line-height:1.4;}
@media (max-width:767px){html body .elementor [data-id="mission-card-text"]{font-size:21px;}}
/* Values: header centred over the runner, which sits directly under it. */
html body .elementor [data-id="values"]{padding-bottom:40px !important;}
html body .elementor [data-id="values-inner"]{justify-content:center;}
html body .elementor [data-id="values-left"]{max-width:720px !important;align-items:center !important;text-align:center;}
html body .elementor [data-id="values-left"] :is(h2,p){text-align:center !important;}
html body .elementor [data-id="values-header"]{align-items:center !important;}
/* Diversity: text only. */
html body .elementor [data-id="diversity-inner"]{justify-content:center !important;}
html body .elementor [data-id="diversity-text"]{max-width:860px !important;}

/* Sample Menu page (P2-05, 29 Sep 2026) — the band moved here from About; "larger cards"
   (revision plan): three across, the last row centred, bigger type. Photos of the actual
   food are client material C2-02. */
html body .elementor [data-id="fc-menu-grid"]{display:flex !important;flex-wrap:wrap;justify-content:center;gap:24px !important;}
html body .elementor [data-id="fc-menu-grid"] > [data-id^="fc-menu-"]{flex:0 1 calc((100% - 48px) / 3);min-width:0;padding:36px !important;--card-pad:36px;}
html body .elementor [data-id^="fc-menu-"][data-id$="-h3"]{font-size:30px !important;}
html body .elementor [data-id^="fc-menu-"][data-id$="-v"]{font-size:18px !important;line-height:1.5 !important;}
@media (max-width:1024px){html body .elementor [data-id="fc-menu-grid"] > [data-id^="fc-menu-"]{flex-basis:calc((100% - 24px) / 2);}}
@media (max-width:767px){html body .elementor [data-id="fc-menu-grid"] > [data-id^="fc-menu-"]{flex-basis:100%;padding:24px !important;--card-pad:24px;}}

/* Hallmark audit fixes (6 Oct 2026, user "apply all"). */
/* Hero band: the e-flexbox base 10px inset left the tan band 10px short of each edge; the
   header keeps its x=35 axis through a transparent 10px border (its width is fixed, so a
   margin is ignored, and the border adds to whatever padding each breakpoint sets). */
html body .elementor [data-id="about-hero"]{padding:0 !important;}
html body .elementor [data-id="about-hero-header"]{border-inline:10px solid transparent;}
/* Reading measure: 60ch (Nunito's 0 is wide, so about 70 running characters; DESIGN 60-70). */
html body .elementor :is([data-id="story-p1"],[data-id="story-p2"],[data-id="story-p3"],[data-id="philosophy-lead"],[data-id="diversity-p1"]){max-width:60ch;}
/* Story and Commitment side by side instead of a second stacked text slab. */
@media (min-width:1025px){
  html body .elementor [data-id="story-inner"]{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:60px;align-items:start;}
  html body .elementor [data-id="story-prose-col"]{max-width:none;}
  /* Drop the Commitment column by the Our Story eyebrow (21px line + 16px column gap) so the
     two H2s share a top line. */
  html body .elementor [data-id="story-lower-row"]{padding-top:calc(10px + 21px + 16px) !important;align-items:start;}
}
/* Tinted cards stay flat (DESIGN components.cards): no surface wash over a tint. */
html body .elementor [data-id="why-rail"] > .card,
html body .elementor [data-id="mission-card"]{background-image:none !important;}
/* One left axis: the Mission card and Diversity copy start on the container edge. */
html body .elementor [data-id="mission-cards"]{margin-inline:0;}
html body .elementor [data-id="diversity-inner"]{justify-content:flex-start !important;max-width:1330px !important;}

/* Impeccable critique fixes (6 Oct 2026, user "run them all"). */
/* Hero, static states (phone, and reduced motion where widen-scrub never runs): the panel sits
   on the page's text axis instead of touching the viewport edge with its rounded corners. */
@media (max-width:767px), (prefers-reduced-motion:reduce){html body .elementor [data-id="about-hero-media"]{max-width:min(1260px, calc(100% - 70px));}}
/* Philosophy: copy and a client photo side by side, the golden intro-split (copy wide). */
@media (min-width:1025px){
  html body .elementor [data-id="philosophy-inner"]{display:grid !important;grid-template-columns:61.8fr 38.2fr;column-gap:60px;align-items:center;}
}
/* Copy and photo both on the 35px axis (section 15 + inner 20; the header drops its 10px). */
html body .elementor [data-id="philosophy-inner"]{padding-inline:20px !important;}
html body .elementor [data-id="philosophy-header"]{padding:0 !important;}
@media (max-width:1024px){
  html body .elementor [data-id="philosophy-inner"]{gap:40px;}
  html body .elementor [data-id="philosophy-image"]{aspect-ratio:4 / 3 !important;}
}
/* Mission: the card and a client photo (4:3) share the row; the card stretches to the photo. */
@media (min-width:1025px){
  html body .elementor [data-id="mission-cards"]{grid-template-columns:61.8fr 38.2fr !important;max-width:none;column-gap:60px;}
}
@media (max-width:1024px){html body .elementor [data-id="mission-image"]{aspect-ratio:16 / 10 !important;}}
/* The curriculum carries the difference (PRODUCT.md): its line leads the Environments card
   instead of sitting as the first bullet. Lead-paragraph step, 18px. */
html body .elementor [data-id="why-environments-bullet-1"]{padding-inline-start:0 !important;font-size:18px !important;line-height:1.5 !important;font-weight:600 !important;color:var(--ink,#211910) !important;}
html body .elementor [data-id="why-environments-bullet-1"]::before{content:none !important;}
/* Tablet: the hero header's 44px builder inset (+10px border) put the H1 at x=54 while every
   other section starts at 35; 25 + 10 brings it onto the page axis. */
@media (min-width:768px) and (max-width:1024px){html body .elementor [data-id="about-hero-header"]{padding-inline:25px !important;}}