/* ==========================================================================
   FIVE KIDS NURSERY — RESPONSIVE OVERRIDES
   Tested widths: 1440 / 1280 / 1024 / 768 / 480 / 390 / 375
   Breakpoints: 1180 (nav collapses) · 1024 · 768 (mobile bar) · 480
   ========================================================================== */

/* ---------- ≤ 1180px : hamburger navigation ---------- */
@media (max-width: 1180px) {
  .site-header__cta { display: none; }
  .icon-btn--whatsapp, .icon-btn--call { display: inline-grid; }
  .menu-toggle { display: inline-block; }

  /* Mobile / tablet menu panel (JS on) */
  .js .nav {
    position: fixed; left: 0; right: 0; top: var(--nav-top, 76px); bottom: 0; z-index: 99;
    padding: 1.25rem var(--pad) 6rem; overflow-y: auto; background: #fff;
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s;
  }
  .js .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: .25rem; max-width: 34rem; margin-inline: auto; }
  .js .nav__list a { padding: .95rem 1.2rem; font-size: 1.25rem; border-radius: 20px; }
  .js .nav__list li { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .4s var(--ease-out); }
  .js .nav.is-open .nav__list li { opacity: 1; transform: none; }
  .js .nav.is-open .nav__list li:nth-child(2) { transition-delay: .04s; }
  .js .nav.is-open .nav__list li:nth-child(3) { transition-delay: .08s; }
  .js .nav.is-open .nav__list li:nth-child(4) { transition-delay: .12s; }
  .js .nav.is-open .nav__list li:nth-child(5) { transition-delay: .16s; }
  .js .nav.is-open .nav__list li:nth-child(6) { transition-delay: .2s; }
  .js .nav.is-open .nav__list li:nth-child(7) { transition-delay: .24s; }
  .js .nav.is-open .nav__list li:nth-child(8) { transition-delay: .28s; }
  .js .nav.is-open .nav__list li:nth-child(9) { transition-delay: .32s; }
  .js .nav.is-open .nav__list li:nth-child(10) { transition-delay: .36s; }
  .js .nav.is-open .nav__list li:nth-child(11) { transition-delay: .4s; }
  .nav__cta-mobile { display: block; margin-top: .75rem; }
  .js .nav__cta-mobile a { text-align: center; font-size: 1.15rem; }

  /* No-JS fallback: nav simply wraps under the logo */
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: .5rem; }
  .no-js .nav { order: 3; width: 100%; }
  .no-js .nav__list { flex-wrap: wrap; }
  .no-js .menu-toggle { display: none; }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 560px; margin-inline: auto; width: 100%; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid, .speech__grid, .parents__grid, .contact__grid, .safety__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; margin-inline: auto; width: 100%; }
  .parents__media { max-width: 520px; margin-inline: auto; width: 100%; }
  .eyfs-card, .eyfs-card:nth-child(n + 5) { grid-column: span 6; }
  .eyfs-card:last-child { grid-column: 4 / span 6; }
  .classes__grid { grid-template-columns: 1fr 1fr; }
  .classes__grid .class-card:last-child { grid-column: 1 / -1; flex-direction: row; }
  .classes__grid .class-card:last-child .class-card__media { flex: 0 0 45%; aspect-ratio: auto; }
  .daycare__intro { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .timeline::before { display: none; }
  .facilities__grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-auto-rows: 170px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .cta__deco--1, .cta__deco--3 { opacity: .45; }
}

/* ---------- ≤ 768px : mobile-first UX ---------- */
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { padding-bottom: 72px; } /* room for the sticky mobile bar */
  .topbar { display: none; }
  .site-header__inner { min-height: 64px; }
  .logo img { height: 44px; }
  .site-header.is-scrolled .logo img { height: 38px; }

  .float-actions { display: none; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: .5rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 22px rgba(31, 42, 68, .14);
  }
  .mobile-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .5rem; background: var(--sun-soft); border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 600; font-size: .95rem; text-decoration: none; }
  .mobile-bar__btn--primary { background: var(--coral); color: #fff; }

  .hero { padding-top: 1.75rem; }
  .btn-row .btn { flex: 1 1 auto; }
  .hero__tag { left: 2%; bottom: -4%; font-size: .82rem; }
  .why__grid, .classes__grid { grid-template-columns: 1fr; }
  .classes__grid .class-card:last-child { flex-direction: column; }
  .classes__grid .class-card:last-child .class-card__media { flex: none; aspect-ratio: 4 / 3; }
  .class-card__go { opacity: 1; transform: none; }
  .eyfs-card, .eyfs-card:nth-child(n + 5), .eyfs-card:last-child { grid-column: 1 / -1; }
  .eyfs-card__more { grid-template-rows: 0fr; }
  .facilities__grid { grid-template-columns: 1fr; }
  .space-card__view { opacity: 1; transform: none; }
  .safety__list { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: .7rem; }
  .bento__item--big { grid-column: span 2; }
  .bento__item--wide { grid-column: span 2; }
  .form__split { grid-template-columns: 1fr; }
  .site-footer { padding-bottom: 4rem; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cta__deco--3 { display: none; }
  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox__btn--prev, .lightbox__btn--next { position: absolute; bottom: -3.6rem; }
  .lightbox__btn--prev { left: calc(50% - 60px); }
  .lightbox__btn--next { right: calc(50% - 60px); }
  .lightbox__cap { padding-inline: .5rem; }
}

/* Touch devices: hover-only effects must be visible without hover */
@media (hover: none) {
  .class-card__go, .space-card__view { opacity: 1; transform: none; }
}

/* ---------- ≤ 768px timeline becomes vertical ---------- */
@media (max-width: 640px) {
  .timeline { grid-template-columns: 1fr; row-gap: 0; padding-left: .5rem; }
  .timeline::before { display: block; left: 21px; right: auto; top: 10px; bottom: 30px; border-top: 0; border-left: 3px dashed rgba(31, 42, 68, .35); }
  .timeline__item { padding: 0 0 1.75rem 3.4rem; }
  .timeline__item::before { top: 4px; left: 8px; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .trust__grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .trust-card { padding: 1.25rem .8rem; }
  .btn { width: 100%; }
  .btn-row { gap: .7rem; }
  .btn--sm { width: auto; }
  .hero__float--sun { width: 60px; height: 60px; }
  .hero__float--plane { width: 48px; height: 48px; padding: 10px; }
  .about__media { min-height: 400px; }
  .about__img--a { width: 78%; }
  .about__img--b { width: 44%; }
  .video { width: 54%; }
  .speech__bubble { width: 58px; height: 58px; }
  .carousel__controls { gap: .4rem; }
  .carousel__btn { width: 42px; height: 42px; }
  .site-footer__slogan { margin-bottom: 1.75rem; }
}

/* ---------- ≤ 375px ---------- */
@media (max-width: 375px) {
  h1 { font-size: 2.25rem; }
  .trust__grid { grid-template-columns: 1fr; }
  .quick-facts li { font-size: .85rem; }
  .mobile-bar__btn { font-size: .88rem; }
  .carousel__dot { width: 24px; }
}