/* =========================
   INDEX — Page-specific CSS (FULL FILE)
   - Lava-lamp page background
   - Split underline headings
   - HERO + Enrol badge anchored to carousel (top-right)
   - Carousel (image fill fix incl. iOS)
   - “Where Little Minds Blossom” blob card
   - Our Classrooms grid (unchanged positioning) + blob backgrounds
   - Book a Visit
   - Blog styles
   - Mobile polish
========================= */

/* ---------- Page-wide lava-lamp background ---------- */
body::before{
  content:"";
  position:fixed;
  inset:-25vmax;
  z-index:-1;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green, #0abe67) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red, #fd2f18)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow,#fece00) 0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple,#97448c) 0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue, #1888de)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28;
  background-color:#fff;
  pointer-events:none;
}

/* ---------- HERO ---------- */
.hero-edge{
  position:relative;
  padding-top: 3rem;
  background: transparent;
  overflow:hidden;
}
.hero-edge > .container{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  padding-bottom: .5rem;
}
.hero-edge > .container::before{
  content:""; position:absolute; inset:0 -10% -15% -10%;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' opacity='0.18'>\
  <defs><pattern id='d' width='20' height='20' patternUnits='userSpaceOnUse'>\
  <circle cx='2.5' cy='2.5' r='2' fill='%23000000'/></pattern></defs>\
  <rect width='100%' height='100%' fill='url(%23d)'/></svg>");
  background-size:520px 260px; mix-blend-mode:soft-light;
  animation: drift 40s linear infinite; pointer-events:none; z-index:0;
}

/* ---------- Split headings + underline (H1/H2) ---------- */
.split-text--hero,
.split-text--section{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
  text-align:center;
  z-index:1;
  padding-bottom:14px;
}
.split-text--section{ padding-bottom:18px; }
.split-text--hero span,
.split-text--section span{
  display:inline-block;
  opacity:0;
  transform:translateY(100%);
  animation:splitIn .6s ease forwards;
}
.split-text--hero span:nth-child(2),
.split-text--section span:nth-child(2){ animation-delay:.15s; }
.split-text--hero span:nth-child(3),
.split-text--section span:nth-child(3){ animation-delay:.3s; }
.split-text--hero span:nth-child(4),
.split-text--section span:nth-child(4){ animation-delay:.45s; }
.split-text--hero::after,
.split-text--section::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:140px; height:6px; border-radius:999px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  background:
    linear-gradient(90deg,
      var(--green, #0abe67) 0 20%,
      var(--red, #fd2f18)   20% 40%,
      var(--yellow,#fece00) 40% 60%,
      var(--purple,#97448c) 60% 80%,
      var(--blue, #1888de)  80% 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  animation: growLine .7s cubic-bezier(.2,.65,.2,1) .2s forwards;
}

/* ==========================================
   ENROL BADGE — anchored to carousel (top-right)
========================================== */

/* The carousel wrapper is the positioning context */
.hero-carousel-wrap{
  width:100%;
  position:relative;
  z-index:1;
  margin-bottom: .75rem;
}

/* Badge lives inside .hero-carousel-wrap */
.enrol-burst{
  position:absolute;
  top: 10px;
  right: 10px;
  width: clamp(120px, 18vw, 220px);
  z-index: 5;
  display:block;
  text-decoration:none;
  user-select:none;
}
.enrol-burst img{
  width:100%;
  height:auto;
  display:block;
  transform-origin: 100% 0%;
  backface-visibility:hidden;
  will-change: transform, filter;
  animation:
    enrolScaleSine32 2.6s linear infinite,
    enrolFilterSine32 2.6s linear infinite;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.18));
}
.enrol-burst::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode: screen;
  background:
    radial-gradient(160% 140% at 90% 10%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,0)   52%);
  opacity: 0;
  animation: sheenOpacitySine32 2.6s linear infinite;
}

/* ---------- Carousel ---------- */
#heroCarousel .carousel-inner{ height:clamp(360px,65vh,720px); }
#heroCarousel{
  border-radius:16px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  margin:0 auto; width:min(1200px,94vw);
}
.carousel-control-prev-icon,.carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

/* ==========================================
   HERO CAROUSEL — force images to fully fill
   (handles iOS Safari + Bootstrap quirks)
========================================== */
#heroCarousel{ overflow:hidden; }

#heroCarousel .carousel-inner{
  height: clamp(220px, 48vh, 340px);
  position: relative;
}
#heroCarousel .carousel-item{
  height: 100%;
  position: relative;
}
#heroCarousel .carousel-item > img,
#heroCarousel .carousel-item > picture,
#heroCarousel .carousel-item > picture > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (min-width: 576px){
  #heroCarousel .carousel-inner{ height: clamp(240px, 52vh, 360px); }
}
@media (min-width: 768px){
  #heroCarousel .carousel-inner{ height: clamp(360px, 65vh, 720px); }
}
@supports (-webkit-touch-callout: none) {
  #heroCarousel .carousel-item > img{
    min-width: 100%;
    min-height: 100%;
  }
}

/* ---------- Optional divider above Our Classrooms ---------- */
.section-divider{
  background:transparent;
  padding:1.25rem 0 .75rem;
  text-align:center;
}

/* ==========================================================
   “Where Little Minds Blossom” (blob card) — match carousel width
========================================================== */
.classroom{
  color:#fff; padding:3rem 2rem; border-radius:22px;
  position:relative; overflow:hidden; text-align:center;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  width:min(1200px,94vw); margin-inline:auto;
}
.card-blob::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:140%;
  background-repeat:no-repeat; background-size:cover; opacity:.16; filter:blur(2px);
  z-index:0; pointer-events:none;
}
.card-blob > *{ position:relative; z-index:1; }
.blob-green{ background:var(--green,#0abe67)!important; color:#fff!important; }
.blob-green.card-blob::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='M100 220c70-120 260-200 400-160s250 170 280 290-30 210-170 240-310-20-410-110S30 340 100 220z'/></svg>");
}

/* Remove side padding so edges align with carousel */
section.py-5 > .container:has(> .content-narrow > .classroom){
  padding-left: 0; padding-right: 0;
}
section.py-5 > .container > .content-narrow:has(> .classroom){
  width: auto;
}

/* ==========================================================
   OUR CLASSROOMS — grid (keep existing positioning) + blob bg
========================================================== */
.classrooms { background: transparent; }

.classes-grid{
  width: min(880px, 100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(8px, 0.9vw, 14px);
}

.tile{
  position: relative;
  height: clamp(150px, 18vw, 210px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  display: block;
  isolation: isolate; /* keeps overlays inside rounded corners */
}

/* Brand colors (base) */
.color-purple{     background:#97448c; }
.color-red{        background:#fd2f18; }
.color-blue{       background:#1888de; }
.color-yellow{     background:#fece00; }
.color-green{      background:#0abe67; }
.color-blue-light{ background:#4aa9ff; }

/* ---- NEW: Blob highlight + sheen layers (do not affect layout) ---- */
.tile::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;
}
.tile::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg,
              rgba(255,255,255,.00) 0%,
              rgba(255,255,255,.20) 40%,
              rgba(255,255,255,.00) 60%);
  mix-blend-mode: screen;
  opacity:.55;
  z-index:0;
  pointer-events:none;
}

/* Blob SVG per color */
.color-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>");
}
.color-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>");
}
.color-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>");
}
.color-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>");
}
.color-green::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='M100 220c70-120 260-200 400-160s250 170 280 290-30 210-170 240-310-20-410-110S30 340 100 220z'/></svg>");
}
.color-blue-light::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='M70 250c50-120 240-210 380-180s250 160 300 280-10 220-140 250-310-10-410-100S20 370 70 250z'/></svg>");
}

/* Keep copy and mascots above overlays — POSITION UNCHANGED */
.tile-copy, .tile .sticker{ position:relative; z-index:1; }

/* Copy area (unchanged) */
.tile-copy{
  position:absolute; left:12px; right:12px; top:12px;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.25);
  text-align: justify; text-justify: inter-word; hyphens:auto;
}
.tile-copy h3{
  margin:0 0 4px; font-weight:800; line-height:1.1;
  font-size: clamp(1rem, 0.65rem + 1.1vw, 1.35rem);
}
.tile-copy .age{
  margin:0; font-weight:700;
  font-size: clamp(.85rem, .55rem + .8vw, 1.05rem);
}
/* Slight emphasis for Lambs heading */
.tile--lambs .tile-copy h3{ font-size: clamp(1.15rem, .8rem + 1.4vw, 1.55rem); }
.tile--lambs .tile-copy .age{ font-size: clamp(.95rem, .65rem + .9vw, 1.15rem); }

/* Mascots — bottom-right (unchanged) */
.tile .sticker{
  position:absolute;
  bottom:10px;
  right:12px;
  left:auto !important;
  width:min(46%, 200px);
  height:auto;
  pointer-events:none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
  opacity:.95;
}
/* Stingray a bit wider but still bottom-right */
.tile--ray .sticker{
  width:min(52%, 210px);
  right:12px; bottom:10px; left:auto !important; top:auto;
}

/* Tablet */
@media (max-width: 991.98px){
  .classes-grid{ width:min(640px, 100%); grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile{ height: clamp(150px, 24vw, 220px); }
}

/* ==========================================================
   BOOK A VISIT — centered art + anchored button
========================================================== */
.visit-cta{ padding: clamp(1.25rem, 2vw, 1.75rem) 0; text-align:center; }
.visit-cta .content-narrow{ width: min(980px, 96%); margin-inline:auto; }
.visit-cta-row{ position: relative; display: inline-block; margin-inline:auto; }
.visit-logo{
  width: clamp(260px, 38vw, 460px);
  height: auto; display:block; margin: 0 auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.12));
}
.visit-cta-row .btn.btn-visit{
  position: absolute; z-index: 1;
  top: 60%; left: 76%;
  transform: translate(-50%, -10%);
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .9rem 1.25rem; border-radius: 12px;
  background-color: var(--green, #0abe67) !important; color:#fff !important; border:0 !important;
  box-shadow: 0 12px 28px rgba(10,190,103,.30);
  font-weight: 800; letter-spacing: .2px; white-space: nowrap; text-decoration: none;
}
.visit-cta-row .btn.btn-visit:hover,
.visit-cta-row .btn.btn-visit:focus{
  background-color: #089a55 !important; color:#fff !important;
  box-shadow: 0 16px 36px rgba(10,190,103,.38);
}
.visit-cta-row .btn.btn-visit:focus-visible{
  outline: 3px solid rgba(10,190,103,.35); outline-offset: 2px;
}

/* =========================
   BLOG — index only
========================= */
.blog-wrap{ padding-top: 2rem; padding-bottom: 3rem; }
.blog-card{
  width: min(980px, 96%); margin: 0 auto; background:#fff;
  border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.10);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem);
}
.blog-title{
  margin: 0 0 .25rem; font-weight: 900; letter-spacing: .2px;
  position: relative; display: inline-block; padding-bottom: 10px;
}
.blog-title::after{
  content:""; position:absolute; left:50%; bottom:0; width:120px; height:6px;
  border-radius:999px; transform:translateX(-50%) scaleX(0); transform-origin:center;
  background: linear-gradient(90deg, var(--green,#0abe67), var(--yellow,#fece00), var(--blue,#1888de));
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  animation: blogUnderlineGrow .7s cubic-bezier(.2,.65,.2,1) .1s forwards;
}
@keyframes blogUnderlineGrow{ to{ transform:translateX(-50%) scaleX(1); } }
.blog-kicker{ font-size: .95rem; }
.blog-body{ margin-top: .75rem; font-size: 1rem; line-height: 1.8; color: #1f2937; text-align: justify; hyphens: auto; }
.blog-body p{ margin: 0 0 1rem; }
.blog-list{ margin: .5rem 0 1.25rem 1.15rem; padding: 0; }
.blog-list > li{ margin: .5rem 0 .9rem; }
.blog-list h4{ margin: 0 0 .25rem; font-weight: 800; font-size: 1.05rem; line-height: 1.35; color: #0f172a; text-align: left; }
.quote{ margin: 1.1rem 0; padding: .9rem 1rem; background: linear-gradient(180deg, rgba(10,190,103,.06), rgba(24,136,222,.05)); border-left: 6px solid var(--green,#0abe67); border-radius: 12px; text-align:left; }
.quote p{ margin: 0 0 .4rem; color: #0f172a; }
.quote footer{ font-size: .95rem; color: #475569; }

/* Helpers */
.content-narrow{ width: min(980px, 92vw); margin-inline:auto; }

/* ---------- Keyframes (shared) ---------- */
@keyframes splitIn{ to{ opacity:1; transform:translateY(0) } }
@keyframes growLine{ to{ transform:translateX(-50%) scaleX(1); } }
@keyframes drift{ 0%{transform:translateX(0)} 100%{transform:translateX(-25%)} }

/* ---------- Enrol pulse (32-sample sine; seamless loop) ---------- */
@keyframes enrolScaleSine32{
  0% { transform: scale(1); }
  3.125% { transform: scale(1.0127); }
  6.25% { transform: scale(1.0249); }
  9.375% { transform: scale(1.0361); }
  12.5% { transform: scale(1.046); }
  15.625% { transform: scale(1.054); }
  18.75% { transform: scale(1.0601); }
  21.875% { transform: scale(1.0638); }
  25% { transform: scale(1.065); }
  28.125% { transform: scale(1.0638); }
  31.25% { transform: scale(1.0601); }
  34.375% { transform: scale(1.054); }
  37.5% { transform: scale(1.046); }
  40.625% { transform: scale(1.0361); }
  43.75% { transform: scale(1.0249); }
  46.875% { transform: scale(1.0127); }
  50% { transform: scale(1); }
  53.125% { transform: scale(0.9873); }
  56.25% { transform: scale(0.9751); }
  59.375% { transform: scale(0.9639); }
  62.5% { transform: scale(0.954); }
  65.625% { transform: scale(0.946); }
  68.75% { transform: scale(0.9399); }
  71.875% { transform: scale(0.9362); }
  75% { transform: scale(0.935); }
  78.125% { transform: scale(0.9362); }
  81.25% { transform: scale(0.9399); }
  84.375% { transform: scale(0.946); }
  87.5% { transform: scale(0.954); }
  90.625% { transform: scale(0.9639); }
  93.75% { transform: scale(0.9751); }
  96.875% { transform: scale(0.9873); }
  100% { transform: scale(1); }
}
@keyframes enrolFilterSine32{
  0% { filter: brightness(1) saturate(1) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  3.125% { filter: brightness(1.0078) saturate(1.0059) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  6.25% { filter: brightness(1.0153) saturate(1.0115) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  9.375% { filter: brightness(1.0222) saturate(1.0167) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  12.5% { filter: brightness(1.0283) saturate(1.0212) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  15.625% { filter: brightness(1.0333) saturate(1.0249) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  18.75% { filter: brightness(1.037) saturate(1.0277) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  21.875% { filter: brightness(1.0392) saturate(1.0294) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  25% { filter: brightness(1.04) saturate(1.03) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  28.125% { filter: brightness(1.0392) saturate(1.0294) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  31.25% { filter: brightness(1.037) saturate(1.0277) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  34.375% { filter: brightness(1.0333) saturate(1.0249) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  37.5% { filter: brightness(1.0283) saturate(1.0212) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  40.625% { filter: brightness(1.0222) saturate(1.0167) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  43.75% { filter: brightness(1.0153) saturate(1.0115) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  46.875% { filter: brightness(1.0078) saturate(1.0059) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
  50% { filter: brightness(1) saturate(1) drop-shadow(0 14px 26px rgba(0,0,0,.18)); }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-edge > .container::before,
  .split-text--hero span,
  .split-text--section span,
  .enrol-burst img,
  .enrol-burst::after{
    animation:none !important;
  }
}

/* =====================================================
   MOBILE POLISH
===================================================== */

/* ≤ 768px */
@media (max-width: 768px){
  .hero-edge h1{
    font-size: clamp(1.45rem, 5.4vw, 2.05rem);
    line-height: 1.12;
    margin-bottom: .35rem;
  }
  .enrol-burst{ width: clamp(112px, 24vw, 180px); top:10px; right:10px; }
  #heroCarousel .carousel-inner{ height: clamp(240px, 52vh, 360px); }

  .classes-grid{ width: min(640px, 100%); grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile{ height: clamp(170px, 30vw, 220px); }

  .blog-card{ border-radius:14px; padding: clamp(.9rem, 3.2vw, 1.25rem) clamp(.9rem, 4vw, 1.6rem); }
}

/* ≤ 575.98px */
@media (max-width: 575.98px){
  .hero-edge h1{ font-size: clamp(1.35rem, 6vw, 1.9rem); }
  .enrol-burst{ width: clamp(104px, 32vw, 150px); top:8px; right:8px; }
  #heroCarousel .carousel-inner{ height: clamp(220px, 48vh, 340px); }
  #heroCarousel{ border-radius: 14px; }

  .classes-grid{ width:100%; grid-template-columns: 1fr; gap:12px; }
  .tile{ height: clamp(180px, 52vw, 240px); border-radius: 18px; }

  .visit-cta-row{ display:grid; place-items:center; }
  .visit-cta-row .btn.btn-visit{ position:static; transform:none; margin-top:.55rem; padding:.8rem 1.05rem; }

  .blog-wrap{ padding-top: 1.25rem; padding-bottom: 2.25rem; }
}

/* Desktop tweaks */
@media (min-width: 992px) and (max-width: 1199.98px){
  .enrol-burst{ width: clamp(200px, 20vw, 280px); top: 12px; right: 12px; z-index: 5; }
}
@media (min-width: 1200px){
  .hero-carousel-wrap{ position: static; }
  .enrol-burst{
    position: absolute;
    top: calc(72px + 12px);
    right: calc((100vw - min(1200px, 94vw)) / 2 + 12px);
    width: clamp(240px, 14vw, 360px);
    z-index: 1020;
  }
}

/* Mobile: lift hero under fixed nav */
@media (max-width: 575.98px){
  .hero-edge{
    padding-top: 4.75rem;
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0));
  }
  .hero-edge h1{ margin-bottom: .6rem; }
}
@media (min-width: 576px) and (max-width: 768px){
  .hero-edge{ padding-top: 4.25rem; }
}