/* ==========================================================================
   Eleganz Kids International Preschool — homepage sections
   Loads after style.css and only styles what is unique to the home page.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px);
  background:
    radial-gradient(90% 70% at 5% 0%, var(--pink-100) 0%, transparent 58%),
    radial-gradient(70% 60% at 98% 92%, var(--green-50) 0%, transparent 60%),
    linear-gradient(170deg, var(--pink-50) 0%, #fffdfd 62%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  position: relative;
  z-index: var(--z-content);
}

.hero-copy { max-width: 640px; }

/* Eyebrow and the "Admissions Open" flag share a row above the headline. */
.hero-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hero-flags .eyebrow { margin-bottom: 0; }

.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 .accent { color: var(--pink-700); }

.hero-sub {
  max-width: 44ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px dashed var(--border-strong);
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--green-800);
}
.hero-points .icon-dot {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--pink-100);
  color: var(--green-700);
}
.hero-points svg { width: 19px; height: 19px; }

/* hero visual ----------------------------------------------------------- */
.hero-visual {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}

/* Offset pink card behind the photo, so the corner reads as layered. */
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: var(--z-decor);
  inset: 7% -5% -7% 7%;
  border-radius: var(--r-xl);
  background: var(--pink-200);
}

.hero-photo {
  position: relative;
  z-index: var(--z-content);
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--green-100);
  box-shadow: var(--shadow-lg);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* floating chips -------------------------------------------------------- */
.hero-chip {
  position: absolute;
  z-index: var(--z-content);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-md);
  font-size: 14px;
  font-weight: 800;
  color: var(--green-900);
  white-space: nowrap;
}
.hero-chip svg { width: 18px; height: 18px; color: var(--amber-500); }
.hero-chip--ages { top: 6%; left: -2%; animation: bob 6s var(--ease-out) infinite; }
.hero-chip--play { bottom: 16%; right: -3%; animation: bob 7.5s var(--ease-out) infinite .8s; }

/* hero background confetti --------------------------------------------- */
.hero-decor { position: absolute; inset: 0; z-index: var(--z-decor); pointer-events: none; overflow: hidden; }
.hero-decor span { position: absolute; border-radius: 50%; }
.hero-decor .d1 { width: 14px; height: 14px; top: 16%; left: 42%; background: var(--amber-300); }
.hero-decor .d2 { width: 10px; height: 10px; top: 72%; left: 8%;  background: var(--pink-400); }
.hero-decor .d3 { width: 18px; height: 18px; top: 8%;  left: 22%; background: var(--teal-400); }
.hero-decor .d4 { width: 12px; height: 12px; bottom: 12%; left: 46%; background: var(--pink-300); }
.hero-decor .blob {
  width: 280px; height: 280px;
  border-radius: 50%;
  right: -90px; top: -110px;
  background: var(--pink-100);
  opacity: .8;
  filter: blur(4px);
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ----------------------------------------------------------------- mascot */
/* Base + boundary variants live in style.css so every page can use them.
   Only the hero-specific placement belongs here. */

/* perched over the top-right corner of the hero photo */
.mascot--hero {
  width: clamp(92px, 10.5vw, 132px);
  top: -20%;
  /* Only a small overhang: at viewport == --shell the photo already sits flush
     with the content edge, so a larger one gets clipped by the hero. */
  right: -2%;
  animation-duration: 8s;
}

/* Mobile-only perch beside the flags; see the 960px block. */
.mascot--flags { display: none; }

/* ---------------------------------------------------------------- welcome */
.welcome-inner {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

/* width:100% is load-bearing — `margin-inline:auto` below cancels the grid
   item's default stretch, and the frame has no intrinsic width of its own. */
.welcome-art { position: relative; width: 100%; }
/* Squarer than the 4/3.4 it used when this held an abstract SVG. The classroom
   photo is portrait (1086x1448), so a landscape frame threw away a third of it
   — the posters at the top and the front table at the bottom. A square keeps
   the teacher and the three activity tables, and the extra height balances the
   copy column beside it, which runs to four blocks plus a button. The gradient
   stays as the placeholder the photo loads over. */
.welcome-art-frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--pink-200) 0%, var(--pink-100) 55%, var(--green-100) 100%);
  box-shadow: var(--shadow-md);
}

/* Absolute so the portrait source cannot size the frame — the aspect-ratio
   above is the only thing that sets its height. Cropped a little above centre:
   the children's faces and the teacher all sit in the upper-middle band, and a
   true centre crop starts eating them as the column narrows. */
.welcome-art-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* The dark "Since day one" note card that used to overhang this photo's
   bottom-right corner was removed on 2026-09-22 — the photograph carries the
   section on its own. */

.welcome-copy h2 { margin-bottom: var(--sp-5); }
.welcome-copy p + p { margin-top: var(--sp-4); }
.welcome-copy p { color: var(--ink-muted); }
.welcome-copy .lead { font-size: 18px; color: var(--ink-soft); font-weight: 600; }
.welcome-copy .btn { margin-top: var(--sp-8); }

/* ------------------------------------------------------------- philosophy */
.philosophy-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.philosophy-copy p { color: var(--ink-muted); margin-top: var(--sp-4); }

.method-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.method-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--tint-soft);
  border: 2px solid var(--tint);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--green-900);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.method-list li:hover {
  transform: translateY(-3px);
  border-color: var(--tint-deep);
  box-shadow: 0 12px 24px var(--tint-glow);
}
.method-list .tick {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--tint-deep);
  color: var(--green-900);
  transition: transform var(--t-base) var(--ease-spring);
}
.method-list li:hover .tick { transform: scale(1.14) rotate(-8deg); }
.method-list svg { width: 16px; height: 16px; }

/* Seven ways of learning, cycled through the pastel set so the grid reads as
   a rainbow. nth-child is right here: the tint follows position, not meaning. */
.method-list li:nth-child(7n + 1) { --tint-soft: var(--pink-50);   --tint: var(--pink-100);   --tint-deep: var(--pink-300);   --tint-glow: rgba(224, 112, 143, .24); }
.method-list li:nth-child(7n + 2) { --tint-soft: var(--sky-50);    --tint: var(--sky-100);    --tint-deep: var(--sky-200);    --tint-glow: rgba(31, 123, 168, .22); }
.method-list li:nth-child(7n + 3) { --tint-soft: #fffaee;          --tint: var(--amber-100);  --tint-deep: #f6dd9a;           --tint-glow: rgba(244, 173, 26, .26); }
.method-list li:nth-child(7n + 4) { --tint-soft: var(--green-50);  --tint: var(--green-100);  --tint-deep: var(--green-200);  --tint-glow: rgba(16, 107, 88, .20); }
.method-list li:nth-child(7n + 5) { --tint-soft: var(--lilac-50);  --tint: var(--lilac-100);  --tint-deep: var(--lilac-200);  --tint-glow: rgba(109, 81, 189, .22); }
.method-list li:nth-child(7n + 6) { --tint-soft: var(--peach-50);  --tint: var(--peach-100);  --tint-deep: var(--peach-200);  --tint-glow: rgba(194, 95, 36, .22); }
.method-list li:nth-child(7n + 7) { --tint-soft: var(--sky-50);    --tint: var(--sky-100);    --tint-deep: var(--sky-200);    --tint-glow: rgba(31, 123, 168, .22); }

/* The programmes section is shared with programmes.html and now lives in
   style.css, alongside the other cross-page components. */

/* ----------------------------------------------------------------- why us */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: clamp(36px, 4vw, 56px);
}
.why-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: var(--tint);
}
.why-card p { flex: 1; }
.why-card .link-arrow { margin-top: var(--sp-4); color: var(--tint-ink); }

/* Tint bar that wipes across the top edge on hover. */
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--tint-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.why-card:hover::before { transform: scaleX(1); }

/* ----------------------------------------------------------- testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: clamp(36px, 4vw, 56px);
}
.testimonial { display: flex; flex-direction: column; border-color: var(--tint); }
.testimonial .quote-mark {
  font-family: "Poppins", sans-serif;
  font-size: 54px;
  font-weight: 800;
  line-height: .7;
  color: var(--tint-deep);
  margin-bottom: var(--sp-3);
}
.testimonial blockquote { margin: 0; flex: 1; font-size: 16px; color: var(--ink-soft); }
.rating { display: flex; gap: 3px; margin-top: var(--sp-5); color: var(--amber-500); }
.rating svg { width: 17px; height: 17px; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.testimonial-author .avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
  border: 2px solid var(--tint-deep);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--green-900);
}
.testimonial-author b { display: block; font-size: 15px; color: var(--green-900); }
.testimonial-author span { font-size: 13.5px; color: var(--ink-muted); }

/* The final CTA band is shared with the Admissions page and now lives in
   style.css. */

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .why-grid,
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .hero-inner,
  .welcome-inner,
  .philosophy-inner { grid-template-columns: 1fr; }

  .hero-copy { max-width: none; }
  /* margin-bottom leaves room for the badge that overhangs the photo. */
  .hero-visual { order: -1; max-width: 430px; margin-bottom: var(--sp-5); }
  /* Tighter offsets so the layered card never reaches the viewport edge. */
  .hero-visual::before { inset: 6% -3% -6% 6%; }
  .hero-chip--ages { left: 0; }
  .hero-chip--play { right: 0; }

  /* Once the hero stacks, every corner of the photo is taken (header above,
     chips on it), and the bird covered the children wherever it sat. It moves
     off the photo into the empty space right of the two flags instead; the
     padding keeps the flags from wrapping underneath it. */
  .mascot--hero { display: none; }
  .hero-flags {
    position: relative;
    padding-right: 68px;
  }
  .mascot--flags {
    display: block;
    width: 62px;
    top: 50%;
    right: 0;
    translate: 0 -50%;
  }

  .welcome-art { width: 100%; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 620px) {
  .why-grid,
  .testimonial-grid,
  .method-list { grid-template-columns: 1fr; }

  .hero-actions .btn { width: 100%; }
  .hero-points { gap: var(--sp-4); }
  .hero-chip { font-size: 13px; padding: 9px 14px; }
}