/* ==========================================================================
   Kiddoo Play School - Home page only
   --------------------------------------------------------------------------
   Loaded ONLY by index.html, the same way admin.css is loaded only by
   admin.html. That is what keeps this file's louder, more colourful treatment
   from leaking onto About/Gallery/Contact/Programs/Admissions/Events, which
   deliberately keep the calmer shared look from components.css.

   Because nothing else loads this file, plain selectors are safe here - there
   is no need to prefix everything with body[data-page="home"].
   ========================================================================== */

:root {
  /* Pastel card fills. Light enough that --text still clears contrast on them,
     saturated enough that six cards read as six different cards.
     (The --tint-* tokens live in global.css - components.css needs them on
     pages that never load this file.) */
  --c-rose: #FFE7EB;
  --c-lemon: #FFF4C9;
  --c-sky: #E2EFFA;
  --c-mint: #E2F3E9;
  --c-lilac: #F4E9F7;
  --c-peach: #FFEADF;

  /* Full-bleed section washes */
  --wash-lemon: #FFFAE8;
  --wash-sky: #EFF7FD;
  --wash-rose: #FFF1F4;

  --shadow-lift: 0 18px 40px rgba(120, 72, 12, 0.16);
}

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */
.hero-carousel {
  position: relative;
  /* Tall enough to feel like a banner, capped so it never eats a laptop
     screen whole. */
  height: clamp(460px, 68vh, 660px);
  overflow: hidden;
  background-color: var(--hero-tint);
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The headline sits on top of an arbitrary photo once real ones are uploaded,
   so it needs its own scrim rather than trusting the image to be dark on the
   left. Without this the copy is unreadable on a bright photo. */
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-image: linear-gradient(
    100deg,
    rgba(28, 12, 30, 0.86) 0%,
    rgba(28, 12, 30, 0.66) 42%,
    rgba(28, 12, 30, 0.12) 78%,
    rgba(28, 12, 30, 0) 100%
  );
}

.hero-copy {
  max-width: 640px;
  color: var(--white);
}

.hero-copy h1 {
  color: var(--white);
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero-copy p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}

/* Urgency badge - the "limited seats" signal. Pulses gently to draw the eye;
   the global prefers-reduced-motion guard neutralises the animation. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--accent);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.hero-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--primary);
  animation: kiddoo-pulse 1.6s ease-in-out infinite;
}

@keyframes kiddoo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}

/* Carousel controls.
   Grouped in the bottom-right corner rather than vertically centred on the
   left and right edges. Centred edge arrows sit exactly where the headline
   and body copy are: at 1180px the container's left edge and the arrow
   overlap within a couple of pixels, and below ~1000px the arrow lands
   squarely on top of the paragraph. The corner is clear of the copy at every
   width. */
.hero-nav {
  position: absolute;
  bottom: var(--space-md);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--shadow-md);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.hero-nav:hover {
  background-color: var(--white);
  transform: scale(1.1);
}

.hero-nav--prev { right: calc(var(--space-md) + 52px); }
.hero-nav--next { right: var(--space-md); }

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  /* Vertically centred against the 44px arrow buttons beside them. */
  bottom: calc(var(--space-md) + 16px);
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  z-index: 3;
}

.hero-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--white);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-dot.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Colour washes - replaces the flat cream/white alternation
   -------------------------------------------------------------------------- */
.section--lemon { background-color: var(--wash-lemon); }
.section--sky   { background-color: var(--wash-sky); }
.section--rose  { background-color: var(--wash-rose); }

/* Eyebrow as a pill so each section opens with a clear coloured label. */
.section-header .eyebrow {
  background-color: var(--white);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Colourful cards
   -------------------------------------------------------------------------- */
.card--c1 { background-color: var(--c-rose); }
.card--c2 { background-color: var(--c-lemon); }
.card--c3 { background-color: var(--c-sky); }
.card--c4 { background-color: var(--c-mint); }
.card--c5 { background-color: var(--c-lilac); }
.card--c6 { background-color: var(--c-peach); }

.section .card {
  border-radius: var(--radius-lg);
}

/* Drop the 1px outline only on the TINTED cards - their fill already
   separates them from the wash behind. Deliberately not `.section .card
   { border: none }`: that also wiped .program-card's 6px coloured top rule,
   because `.section .card` outranks `.program-card` and the shorthand resets
   the colour the nth-child rules set. */
.card--c1,
.card--c2,
.card--c3,
.card--c4,
.card--c5,
.card--c6 {
  border: none;
}

.section .card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

/* The icon badge sits on white so the emoji/glyph reads against the tinted
   card behind it. */
.card-icon {
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}

.card:hover .card-icon {
  transform: scale(1.1) rotate(-6deg);
}

/* Programme cards keep their coloured top rule but sit on white so the rule
   still reads as an accent. */
.program-card {
  background-color: var(--white);
}

/* --------------------------------------------------------------------------
   Gallery preview
   -------------------------------------------------------------------------- */
.gallery-card {
  border: none;
  border-radius: var(--radius-lg);
}

/* Deliberately NO sizing override here. The Home preview shares .gallery-grid
   with /gallery, so it inherits the same 3-across collage and the same 4:3
   tiles. Setting a height or aspect ratio on this page only would make the two
   pages disagree about the shape of a photo. */

.gallery-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-lg) var(--space-sm) 0.9rem;
  background-image: linear-gradient(
    to top,
    rgba(20, 15, 5, 0.85) 0%,
    rgba(20, 15, 5, 0.35) 55%,
    rgba(20, 15, 5, 0) 100%
  );
}

.gallery-card-caption span {
  color: var(--white);
  font-size: 0.8rem;
}

/* Repeated from components.css because the rule above re-asserts the absolute
   overlay for this page - without this, the caption would sit back on top of
   a video's control bar on the Home preview only. */
.gallery-card--video .gallery-card-caption {
  position: static;
  background-image: none;
  padding: 0.6rem var(--space-sm) 0.75rem;
}

.gallery-card--video .gallery-card-caption span {
  color: var(--secondary);
}

/* --------------------------------------------------------------------------
   Enrolment / urgency band
   -------------------------------------------------------------------------- */
.cta-band {
  background-image: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Decorative rings, cropped by the band. pointer-events:none so they can
   never intercept a click meant for the CTA button. */
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--white);
  opacity: 0.18;
  pointer-events: none;
}

.cta-band::before { width: 280px; height: 280px; top: -140px; left: -60px; }
.cta-band::after  { width: 210px; height: 210px; bottom: -120px; right: -40px; }

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band .btn-primary {
  /* .btn-primary is a flat --primary in components.css; on this gradient it
     would nearly disappear, so the CTA flips to the yellow accent. */
  background-color: var(--accent);
  color: var(--text);
}

.cta-band .btn-primary:hover {
  background-color: var(--accent-dark);
}

.cta-note {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin: var(--space-sm) 0 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-carousel {
    height: clamp(420px, 72vh, 560px);
  }

  /* On a narrow screen the left-to-right scrim leaves the bottom of the copy
     over bare photo, so it becomes a vertical one. */
  .hero-overlay {
    background-image: linear-gradient(
      to top,
      rgba(28, 12, 30, 0.9) 0%,
      rgba(28, 12, 30, 0.72) 55%,
      rgba(28, 12, 30, 0.45) 100%
    );
  }

  .hero-copy {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  /* Corner arrows would crowd the centred dots on a 375px screen. Autoplay
     plus the dots is enough here. */
  .hero-nav {
    display: none;
  }

  .hero-dots {
    bottom: var(--space-md);
  }
}