/* Bezalel — Programmes page specific styles */
/* Page background overridden from the sitewide ivory (--cream) to plain white, scoped to
   this page only — programmes.css loads after style.css so this wins on source order. */
body{background:#FFFFFF;}

/* Hero background swapped from the sitewide navy gradient to the client's watercolour
   illustration, scoped to .prog-hero so other pages keep the navy. Shown at full clarity —
   no tint/scrim over the image itself — with dark text instead (the sitewide light
   cream/gold hero text was tuned for a dark background and would be unreadable here). */
.prog-hero{
  background:url('../assets/images/programmes-hero-watercolor.png') center 35% / cover no-repeat;
}
.prog-hero .eyebrow{color:var(--bark);}
.prog-hero h1{color:var(--navy-deeper);}
.prog-hero p{color:var(--navy);}

/* Desktop: solid banner instead of a floating transparent overlay, coloured to match this
   page's own white background (line 4 above) rather than the sitewide cream. No hero
   geometry change needed — .page-hero's own padding-top (style.css) already reserves
   calc(var(--nav-h) + 60px) of clearance. Mobile keeps the original fixed overlay untouched. */
.topnav:not(.solid) .brand{color:var(--navy);}
.topnav:not(.solid) .nav-links a{color:var(--navy);}
.topnav:not(.solid) .nav-links a.active{color:var(--gold);}
.topnav:not(.solid) .nav-toggle span{background:var(--navy);}
@media (min-width:861px){
  .topnav,.topnav.solid{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(23,59,98,.08);
  }
}
.prog-hero .hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:90px;z-index:1;}
@media (max-width:599px){
  .prog-hero .hero-wave{height:50px;}
}
.prog-list-section{padding-top:0;}

/* "Behind Every Programme" banner: full-bleed image, text printed straight onto its blank
   cream centre — same full-bleed technique as the programme frames, no scrim needed since
   the illustration already leaves the middle clear for text. */
.team-banner{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:url('../assets/images/multidisciplinary-team-bg.png') center / cover no-repeat;
}
/* ---------- Child Interventions: image + overlaid title/lead/tiles ---------- */
/* .frame-bg is a real <img> (not CSS background) so the illustration shows whole, never
   cropped — sized/positioned via absolute+object-fit instead of background-size:cover.
   .frame-content sits on top (z-index) with the title, lead and the six tiles, so text and
   boxes read as printed onto the image rather than a separate block below it. Full-bleed
   width on the outer wrapper (100vw + negative margin = half viewport minus half
   container) so the image touches both edges. Tile look matches the client's reference:
   near-white fill, a coloured left-ish border tint, solid-colour icon circle, bold navy
   heading, grey description — plus a staggered fade/rise-in on scroll (.reveal, same
   mechanism as the rest of the site) and a small hover lift for interactivity. */
.prog-feature-frame{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
/* .frame-visual bounds itself to the image's own height (img is its only in-flow content) —
   .frame-intro overlays THIS box, not the whole .prog-feature-frame, which matters once the
   tile grid becomes a separate sibling (mobile) instead of sharing the same overlay box:
   without this split, .prog-feature-frame grows tall enough to hold the grid too, and an
   inset:0 intro would stretch to fill that full height instead of just the image. */
/* overflow left as visible (not hidden) — .frame-intro sits inside this box anchored
   bottom-at-the-split-line and grows UPWARD from there, so if its text ever runs longer
   than the box's own top half, hidden would silently crop the title. Not a problem the
   waves need either, since they're sized to fit exactly, not overflowing this box. */
.frame-visual{position:relative;}
.prog-feature-frame .frame-bg{display:block;width:100%;height:auto;}
.frame-wave{position:absolute;left:0;width:100%;height:70px;z-index:2;}
.frame-wave-top{top:-1px;}
.frame-wave-bottom{bottom:-1px;}
@media (max-width:900px){.frame-wave{height:40px;}}
/* Intro and grid are siblings now (not one shared flex column) so the mobile split can pull
   the grid out from under .frame-visual's height without also dragging the intro's overlay
   box along with it. Both anchor to the same split line on .prog-feature-frame: intro sits
   bottom-edge-at-the-line (translateY(-100%)), grid sits top-edge-at-the-line — meeting
   without either needing to know the other's height. Split moved up to 38% (from a plain
   50/50) because the 6-tile grid needs more room than a one-line title+lead does — at 50%
   the grid was starting too low and running the bottom row past the image, off-screen. */
.frame-intro{position:absolute;left:0;right:0;top:38%;transform:translateY(-100%);z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 24px 6px;}
.prog-feature-frame .prog-tile-grid{position:absolute;left:0;right:0;top:38%;z-index:1;margin:0 auto;padding:6px 24px 0;}
.frame-title{font-size:clamp(22px,2.9vw,30px);font-family:'Times New Roman',Times,serif;color:var(--navy-deeper);text-align:center;margin:0 0 8px;}
.frame-lead{max-width:700px;text-align:center;color:var(--navy);font-family:'Times New Roman',Times,serif;font-size:clamp(15px,1.8vw,18px);line-height:1.55;margin:0 0 18px;}

.prog-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:860px;width:100%;}
.prog-tile{
  position:relative;overflow:hidden;
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 15px;border-radius:12px;
  border-left:4px solid var(--tile-icon-color,var(--border));
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(16,42,66,.08);
  transition:transform .3s ease,box-shadow .3s ease;
}
.prog-tile:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(16,42,66,.16);}
.prog-tile-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--tile-icon-bg);color:var(--tile-icon-color);
}
.prog-tile-icon svg{width:16px;height:16px;}
.prog-tile h4{margin:0 0 3px;font-size:14.5px;font-family:'Times New Roman',Times,serif;color:var(--navy-deeper);}
.prog-tile p{margin:0;font-size:13px;line-height:1.4;font-family:'Times New Roman',Times,serif;color:var(--ink-muted);}
.prog-tile.t-green{--tile-icon-bg:#1F4D33;--tile-icon-color:#1F4D33;}
.prog-tile.t-purple{--tile-icon-bg:#5B3A78;--tile-icon-color:#5B3A78;}
.prog-tile.t-yellow{--tile-icon-bg:#D9A404;--tile-icon-color:#D9A404;}
.prog-tile.t-coral{--tile-icon-bg:#B3382C;--tile-icon-color:#B3382C;}
.prog-tile.t-blue{--tile-icon-bg:#173B62;--tile-icon-color:#173B62;}
.prog-tile.t-green .prog-tile-icon,
.prog-tile.t-purple .prog-tile-icon,
.prog-tile.t-yellow .prog-tile-icon,
.prog-tile.t-coral .prog-tile-icon,
.prog-tile.t-blue .prog-tile-icon{background:color-mix(in srgb,var(--tile-icon-color) 16%,#FFFFFF);}

@media (max-width:900px){
  /* Title+lead stay overlaid on the image (unchanged from desktop) since .frame-intro lives
     inside .frame-visual, which is always sized to just the image. Only the grid — a sibling
     of .frame-visual, not a descendant — switches out of absolute positioning into normal
     flow, so it drops below the image onto plain white instead of overlaying it. */
  .frame-intro{top:0;bottom:0;transform:none;justify-content:center;padding:20px;}
  .prog-feature-frame .prog-tile-grid{position:static;background:#FFFFFF;padding:28px 20px 4px;grid-template-columns:1fr;max-width:none;}
}
/* The five programmes run in parallel, not in sequence, so the old 01–05 numbering was a
   generic device that didn't match the content. Instead each programme is tagged with the
   layer of the child's world it reaches (child / home / school / daily care / peer group),
   colour-coded to match the same three accents used for the orbit diagram badges on the
   home page — so the colour itself is a piece of continuity across the site, not decoration. */

/* Five distinct accents, one per programme — red / dark green / dark blue / purple / yellow —
   so every one of the five programmes gets its own colour, not a repeated one. Same five
   colours are used consistently for a given programme across each card's icon badge and
   corner glow. */

/* ---------- Background: colour drift ---------- */
/* A quiet layer of the five programme accent colours drifting very slowly behind
   everything, so the palette already used on the cards also lives in the page atmosphere.
   Respects prefers-reduced-motion. */
.reach-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle,#B3382C,transparent 58%),
    radial-gradient(circle,#1F4D33,transparent 60%),
    radial-gradient(circle,#5B3A78,transparent 60%),
    radial-gradient(circle,#D9A404,transparent 62%),
    radial-gradient(circle,#173B62,transparent 65%);
  background-size:50% 50%,46% 46%,44% 44%,42% 42%,55% 55%;
  background-position:8% 8%,85% 15%,15% 88%,88% 90%,50% 50%;
  opacity:.1;
  animation:glowDrift 40s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%{background-position:8% 8%,85% 15%,15% 88%,88% 90%,50% 50%;}
  100%{background-position:14% 16%,78% 23%,21% 80%,82% 96%,54% 46%;}
}

@media (prefers-reduced-motion:reduce){
  .reach-glow{animation:none;}
}

/* ---------- Layout: equal-weight connected list ---------- */
/* Every programme matters equally and connects to form one picture — five pieces at the
   SAME size/weight, not one bold "hero" plus four quiet followers (an earlier pass here).
   The jigsaw silhouette (clip-path) that used to carry the "connects to the next one" idea
   was dropped — it didn't read well — so the pieces are back to plain rounded cards; the
   "every piece matters and belongs to the same set" idea now comes from the shared border +
   inner glow treatment and identical sizing instead of an interlocking shape.
   The idle "breathing" motion lives on a separate wrapper (.puzzle-bob), not on .puzzle-piece
   itself, because CSS animations permanently own whatever property they animate — putting the
   bob's translateY and the hover "lift toward the viewer" transform on the SAME element would
   have the running animation silently fight and overwrite the hover effect every frame. */
.puzzle-chain{max-width:900px;margin:0 auto;}

.puzzle-bob{
  position:relative;
  animation:puzzleBob 7s ease-in-out infinite;animation-delay:calc(var(--d,0) * .35s);
  margin-bottom:24px;
}
.puzzle-bob:last-child{margin-bottom:0;}
@keyframes puzzleBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}
@media (prefers-reduced-motion:reduce){
  .puzzle-bob{animation:none;}
}

.puzzle-piece{
  position:relative;
  border-radius:22px;
  background:#FFFFFF;
  border:2px solid var(--piece-color,var(--border));
  padding:44px 48px;
  font-family:'Times New Roman',Times,serif;
  box-shadow:inset 0 0 34px var(--piece-glow,rgba(16,42,66,.12));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
}
/* Small scale-up while a card crosses the vertical centre of the viewport during scroll
   (toggled by the IntersectionObserver at the bottom of programmes.html) — kept modest
   and same-size-only (no width/shape/colour change, unlike an earlier, larger version of
   this that ran full-bleed and was reverted) so it reads as "a little more", not a redesign. */
.puzzle-piece.in-focus{
  transform:scale(1.035);
  box-shadow:
    0 14px 28px rgba(16,42,66,.14),
    inset 0 0 34px var(--piece-glow,rgba(16,42,66,.12));
  z-index:2;
}
/* "Bring it forward" on cursor reach — pauses nothing, since the bob animation lives on the
   wrapper, not here, so this transform is free to take over instantly and cleanly. */
.puzzle-piece:hover{
  transform:translateY(-12px) scale(1.025);
  box-shadow:
    0 22px 40px rgba(16,42,66,.22),
    inset 0 0 40px var(--piece-glow,rgba(16,42,66,.16));
  z-index:5;
}
.puzzle-piece.c-red{--piece-color:#B3382C;--piece-glow:rgba(179,56,44,.22);}
.puzzle-piece.c-green{--piece-color:#1F4D33;--piece-glow:rgba(31,77,51,.22);}
.puzzle-piece.c-blue{--piece-color:#173B62;--piece-glow:rgba(23,59,98,.22);}
.puzzle-piece.c-purple{--piece-color:#5B3A78;--piece-glow:rgba(91,58,120,.22);}
.puzzle-piece.c-yellow{--piece-color:#D9A404;--piece-glow:rgba(217,164,4,.24);}

.prog-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.prog-head h3{font-size:22px;margin:0;font-family:'Times New Roman',Times,serif;color:var(--navy);}
.puzzle-piece.c-red h3{color:#B3382C;}
.puzzle-piece.c-green h3{color:#1F4D33;}
.puzzle-piece.c-blue h3{color:#173B62;}
.puzzle-piece.c-purple h3{color:#5B3A78;}
.puzzle-piece.c-yellow h3{color:#D9A404;}

.lead{color:var(--ink-muted);font-size:15.5px;line-height:1.65;margin:0 0 18px;}

/* ---------- Shared: icon badge + bullet list ---------- */
.prog-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:52px;height:52px;border-radius:50%;
  box-shadow:
    inset -1.5px -1.5px 3px rgba(255,255,255,.8),
    inset 1.5px 1.5px 3px rgba(16,42,66,.15);
}
.prog-icon svg{width:24px;height:24px;}
.prog-icon.c-red{background:rgba(179,56,44,.14);color:#B3382C;}
.prog-icon.c-green{background:rgba(31,77,51,.14);color:#1F4D33;}
.prog-icon.c-blue{background:rgba(23,59,98,.1);color:#173B62;}
.prog-icon.c-purple{background:rgba(91,58,120,.14);color:#5B3A78;}
.prog-icon.c-yellow{background:rgba(217,164,4,.16);color:#D9A404;}

.prog-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
.prog-list li{display:flex;gap:10px;font-size:14px;color:var(--navy);line-height:1.5;}
.prog-list li svg{flex-shrink:0;width:16px;height:16px;margin-top:3px;color:var(--gold);}

@media (max-width:760px){
  .puzzle-piece{padding:30px 24px;}
  .puzzle-bob{margin-bottom:18px;}
  .prog-list{grid-template-columns:1fr;}
  .prog-icon{width:44px;height:44px;}
  .prog-icon svg{width:20px;height:20px;}
}