/* ======================================================
   CLASSES & STAFF — Full Page CSS (final)
   • Static “lava lamp” background
   • Centered hero with split-text + rainbow underline
   • Grid classroom cards with rounded “blob” backgrounds
   • Diagonal teacher/assistant layout
   • Principal card matches other cards (rounded, blob sheen)
====================================================== */

/* ---------- Tokens ---------- */
:root{
  --surface:#f5f7fb;
  --card:#fff;

  --purple:#97448c;
  --red:#fd2f18;
  --blue:#1888de;
  --yellow:#fece00;
  --green:#0abe67;
  --blue-light:#4aa9ff;

  --radius-xl:22px;
  --shadow-soft:0 16px 40px rgba(0,0,0,.08);

  --gap-xs:.5rem;
  --gap-sm:.8rem;
  --gap:1.1rem;
  --gap-lg:1.6rem;
  --gap-xl:2.3rem;

  --nav-h:96px; /* match global header height */
}
@media (max-width: 991.98px){ :root{ --nav-h:72px; } }

/* ---------- Base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{ margin:0; background:var(--surface); color:#111; padding-top:var(--nav-h); }
img{ display:block; max-width:100%; height:auto; }

/* ======================================================
   PAGE-WIDE STATIC BACKGROUND (lava-lamp look)
====================================================== */
main::before{
  content:"";
  position:fixed;
  inset:-25vmax;
  z-index:-1;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow)0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple)0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28;
  background-color:#fff;
  pointer-events:none;
}

/* ======================================================
   HERO — centered + split-text + rainbow underline
====================================================== */
.page-hero{
  padding: calc(var(--nav-h) + clamp(22px, 5.5vh, 64px)) 0 clamp(20px, 4.5vh, 44px);
  background:transparent;
}
.page-hero .container{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

/* Title with split reveal + multi-stripe underline */
.title.split{
  position:relative; display:inline-block;
  margin:0; line-height:1.1; font-weight:900;
  --underline-w: 160px;
  --underline-h: 6px;
}
.title.split::before{
  content: attr(data-text);
  position:absolute; inset:0;
  background: linear-gradient(90deg, currentColor 0 100%) 0 0 / 0% 100% no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  animation: splitReveal 700ms cubic-bezier(.2,.7,.2,1) .05s forwards;
}
.title.split::after{
  content:"";
  position:absolute; left:50%; bottom:-12px;
  width: var(--underline-w); height: var(--underline-h);
  transform: translateX(-50%) scaleX(0);
  transform-origin:center; border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--green) 0 20%,
      var(--red) 20% 40%,
      var(--yellow) 40% 60%,
      var(--purple) 60% 80%,
      var(--blue) 80% 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  animation: underlineGrow 700ms cubic-bezier(.2,.7,.2,1) .18s forwards;
}
@keyframes splitReveal{ to{ background-size:100% 100%; } }
@keyframes underlineGrow{ to{ transform:translateX(-50%) scaleX(1); } }

.sub{ color:#334155; max-width:780px; margin:.65rem 0 var(--gap); }

/* Staff hero image block (centered) */
.hero-media{
  margin-top: clamp(14px, 3vh, 28px);
  margin-inline:auto;
  padding: clamp(8px, 1.8vw, 16px);
  width:min(1120px, 92vw);
  background:#fff;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.10);
}
.hero-media img{ width:100%; height:auto; object-fit:contain; border-radius:10px; }

@media (max-width: 575.98px){
  .page-hero{ padding-top: calc(var(--nav-h) + 32px); }
}

/* ======================================================
   CLASSROOM CARDS (blob style + diagonal layout)
====================================================== */
.classrooms{ padding: 0 0 calc(var(--gap-xl) + 12px); }
.class-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 991.98px){ .class-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 575.98px){ .class-grid{ grid-template-columns: 1fr; } }

.class-card{
  grid-column: span 6;
  color:#fff; background:var(--card);
  border-radius: var(--radius-xl);
  position:relative; overflow:hidden; isolation:isolate;
  padding: clamp(1rem, 1.2vw, 1.4rem);
  box-shadow: var(--shadow-soft);
}

/* blob sheen */
.card-blob::before{
  content:""; position:absolute; inset:-12% -8% auto -8%; height:140%;
  background-repeat:no-repeat; background-size:cover; opacity:.16; filter:blur(2px);
  z-index:0; pointer-events:none;
}
.card-blob::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,.0) 60%);
  mix-blend-mode: screen; pointer-events:none; opacity:.55;
}
.card-blob > *{ position:relative; z-index:1; }

/* colors (card backgrounds) */
.blob-purple{ background:var(--purple); }
.blob-red{ background:var(--red); }
.blob-blue{ background:var(--blue); }
.blob-yellow{ background:var(--yellow); }
.blob-green{ background:var(--green); }
.blob-blue-light{ background:var(--blue-light); }

/* SVG blobby highlights per card */
.blob-purple::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M140 200c70-120 260-180 390-130s230 200 210 300-130 170-290 170-300-70-350-150-30-70 40-190z'/></svg>"); }
.blob-red::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M120 180c80-110 260-140 390-90s220 180 230 290c10 110-70 200-210 220S210 560 130 470 40 290 120 180z'/></svg>"); }
.blob-blue::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M80 260c40-130 220-220 360-190s250 170 290 300-20 230-160 250-300-30-390-120S40 390 80 260z'/></svg>"); }
.blob-yellow::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M60 240c50-120 240-210 380-180s250 160 300 280-10 220-140 250-310-10-410-100S10 360 60 240z'/></svg>"); }
.blob-green::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/200/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M100 220c70-120 260-200 400-160s250 170 280 290-30 210-170 240-310-20-410-110S30 340 100 220z'/></svg>"); }
.blob-blue-light::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/200/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M70 250c50-120 240-210 380-180s250 160 300 280-10 220-140 250-310-10-410-100S20 370 70 250z'/></svg>"); }

/* headings / badge */
.badge-age{
  display:inline-block; font-size:.82rem; padding:.25rem .65rem;
  border-radius:999px; margin-bottom:.5rem; color:#fff;
  background: rgba(255,255,255,.18);
}
.class-card h3{
  margin:.1rem 0 .55rem; font-weight:900;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.95rem);
}
.class-card h3::after{
  content:""; display:block; height:4px; width:64px; margin-top:.45rem;
  border-radius:999px; background:rgba(255,255,255,.75);
}

/* ===== Diagonal STAFF layout =====
   Row1: text | teacher
   Row2: assistant | features
*/
.room{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-areas:
    "text teacher"
    "assistant features";
  gap: var(--gap) var(--gap-lg);
  align-items:start;
}
.room .text{ grid-area:text; }
.room .staff.teacher{ grid-area:teacher; }
.room .staff.assistant{ grid-area:assistant; }
.room .features{ grid-area:features; }
.text p{ color:#fff; margin:0; line-height:1.7; }

/* staff cards — no crop, bigger */
.staff{ color:#fff; }
.staff .label{ font-weight:800; margin:.25rem 0 .45rem; text-align:center; }
.staff .frame{
  border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:10px; background:rgba(255,255,255,.08);
}
.staff img{
  width:100%;
  max-height: 420px;
  object-fit: contain;      /* never crop */
  background:transparent;   /* keep transparent PNGs clean */
  border-radius:10px;
}

/* key features block */
.features{
  align-self:start;
  background: rgba(255,255,255,.18);
  border-radius:16px;
  padding: .9rem 1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.features h4{
  margin:0 0 .45rem; font-size:1.1rem; font-weight:800; color:#fff;
}
.features ul{ margin:0; padding-left:1.1rem; color:#fff; }
.features li{ margin:.2rem 0; line-height:1.45; }

/* Little Lambs — teacher top-right, no assistant/features */
.card--lambs .room{
  grid-template-areas:
    "text teacher"
    "text teacher";
}
.card--lambs .room .features,
.card--lambs .room .staff.assistant{ display:none; }

/* Fix Little Lambs mobile layout: text on top, teacher below */
@media (max-width: 991.98px){
  .card--lambs .room{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "text"
      "teacher" !important;
    gap: 1rem;
  }
  .card--lambs .staff.teacher{ margin-top: .5rem; }
}

/* Keep assistant/features hidden on Little Lambs (all sizes) */
.card--lambs .room .features,
.card--lambs .room .staff.assistant{
  display: none !important;
}


/* Clever Bugs — hide features if needed */
.card--no-features .features{ display:none; }

/* ======================================================
   PRINCIPAL (Fay) — matches other cards (rounded + blob)
   - Spans all 12 columns on desktop, full width on mobile
====================================================== */
.principal--span12{ grid-column: 1 / -1; }

.principal-card{
  color:#fff;
  background: var(--purple);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1rem, 1.2vw, 1.4rem); /* exactly like .class-card */
  box-shadow: var(--shadow-soft);
}

/* Blob sheen like other .card-blob variants */
.principal-card.card-blob::before{
  content:""; position:absolute; inset:-12% -8% auto -8%; height:140%;
  background-repeat:no-repeat; background-size:cover; opacity:.16; filter:blur(2px);
  z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'><path fill='%23ffffff' d='M140 200c70-120 260-180 390-130s230 200 210 300-130 170-290 170-300-70-350-150-30-70 40-190z'/></svg>");
}
.principal-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,.0) 60%);
  mix-blend-mode: screen; pointer-events:none; opacity:.55;
}
.principal-card > *{ position: relative; z-index: 1; }

.principal-inner{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--gap-lg);
  align-items:center;
}
.principal-photo{ margin:0; }
.principal-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  background:transparent;
}
.principal-text h3{
  margin:0 0 .5rem;
  font-weight:900; letter-spacing:.2px; color:#fff;
}
.principal-text h3::after{
  content:""; display:block; height:4px; width:64px; margin-top:.45rem;
  border-radius:999px; background:rgba(255,255,255,.75);
}
.principal-text p{
  color:#fff; line-height:1.8; margin:.75rem 0 0; font-size:1.05rem;
}

/* ======================================================
   Responsive
====================================================== */
@media (max-width: 991.98px){
  .class-card{ grid-column: span 12; }
  .room{
    grid-template-columns:1fr;
    grid-template-areas:
      "text"
      "teacher"
      "assistant"
      "features";
    gap: 1rem;
  }
  .staff img{ max-height: 380px; }

  .principal-inner{ grid-template-columns:1fr; }
  .principal-photo img{ aspect-ratio:auto; }
}
@media (max-width: 575.98px){
  .class-card{ padding:1rem; }
  .staff img{ max-height: 340px; }
}

/* ======================================================
   Reveal helper (optional)
====================================================== */
@keyframes fadeUpIn{ to{ opacity:1; transform: translateY(0); } }
.class-card h3, .class-card .badge-age { opacity:0; transform:translateY(10px); }
.class-card.in-view h3 { animation: fadeUpIn .55s ease-out .05s forwards; }
.class-card.in-view .badge-age { animation: fadeUpIn .55s ease-out .12s forwards; }