/* ==========================================================================
   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;
}

/* ---------------------------------------------------------------- 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, the photo is the first thing on the page and the
     bird's desktop perch puts it up beside the header, half out of the hero
     and reading as part of the navigation. Dropped to the foot of the photo
     instead, where it lands next to the school name directly below it. The
     desktop placement above is untouched. */
  .mascot--hero {
    width: clamp(74px, 19vw, 96px);
    top: auto;
    bottom: -6%;
    /* Bottom-LEFT, not right: the "Play-based curriculum" chip occupies the
       bottom-right corner, and the bird landed straight across it. The left
       corner is clear, and it puts the bird directly above the school name,
       which starts at the left edge of the copy below. */
    right: auto;
    left: 1%;
  }

  .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; }
}