/* ==========================================================================
   LITTLE TODDLERS CRECHE — responsive.css
   Mobile-first refinements. Load AFTER style.css.
   Breakpoints: 1200 / 1024 / 900 / 768 / 560 / 400
   ========================================================================== */

/* ---------- Large desktop ---------- */
@media (max-width: 1200px) {
  :root { --sp-7: 5.2rem; --sp-6: 3.8rem; }
  .hero-chip--a { left: -2%; }
  .hero-chip--b { right: -1%; }
  .nav-list a { padding: 0.55rem 0.65rem; font-size: 0.9rem; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1080px) {
  .nav-list { display: none; }
  .hamburger { display: block; }
  .nav-actions .btn--nav-cta { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

/* ---------- Tablet landscape ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero-visual { max-width: 620px; margin-inline: auto; width: 100%; }
  .hero .lead { max-width: none; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .split--reverse .split__media { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .newsletter { grid-template-columns: 1fr; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 900px) {
  :root { --sp-7: 4.2rem; --sp-6: 3.2rem; --nav-h: 74px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
  .topbar .container { justify-content: center; text-align: center; }
  .topbar .topbar-hide-sm { display: none; }
  .cta-banner { padding: 2rem 1.5rem; }
}

/* ---------- Mobile landscape / small tablet ---------- */
@media (max-width: 768px) {
  .container, .container-narrow { width: min(100% - 2rem, var(--container)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .hero { padding-top: 2rem; }
  .hero-cta { gap: 0.6rem; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero-chip { position: static; margin-top: 0.6rem; display: inline-flex; }
  .hero-chip-stack { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
  .routine-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .timeline { padding-left: 2rem; }
  .timeline-item::before { left: -2rem; width: 17px; height: 17px; }
  .lightbox { padding: 3.5rem 0.85rem; }
  .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; }
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
  .float-stack { right: 14px; bottom: 14px; }
  .fab { width: 52px; height: 52px; font-size: 1.2rem; }
  .wa-tooltip { display: none; }
  .footer-bottom { justify-content: center; text-align: center; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Mobile portrait ---------- */
@media (max-width: 560px) {
  :root { --sp-7: 3.4rem; --sp-6: 2.6rem; --sp-5: 2.2rem; --r-xl: 28px; --r-lg: 22px; }
  body { font-size: 0.97rem; }
  .brand-text small { display: none; }
  .brand-mark { width: 46px; height: 46px; border-radius: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); padding: var(--sp-2); }
  .stat__label { font-size: 0.76rem; }
  .form-card { padding: 1.25rem; }
  .cart-drawer { width: 100%; }
  .btn { padding: 0.85rem 1.5rem; font-size: 0.93rem; }
  .btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }
  .filter-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
  .filter-btn { flex: none; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }
  .mobile-nav ul a { font-size: 1.12rem; padding: 0.85rem 1rem; }
  .swiper-button-prev, .swiper-button-next { display: none !important; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn-play { justify-content: center; }
  .cart-item { grid-template-columns: 56px 1fr auto; }
  .cart-item img { width: 56px; height: 56px; }
}

/* ==========================================================================
   MOBILE PERFORMANCE
   Blur, backdrop-filter and large gradient blobs are the three most expensive
   things on a phone GPU. Below 900px we dial all three back hard — the design
   still reads the same, but scrolling stays at 60fps on mid-range Androids.
   ========================================================================== */
@media (max-width: 900px) {
  /* Cheaper glass: less blur radius, no saturation pass */
  .nav,
  .mobile-nav,
  .glass,
  .hero-chip,
  .program-card__tag,
  .wish-btn,
  .lightbox,
  .cart-backdrop {
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }

  /* Blobs: smaller blur radius costs far less to composite */
  .blob { filter: blur(44px); opacity: 0.55; }

  /* Skip work on sections the user has not scrolled to yet */
  .section { content-visibility: auto; contain-intrinsic-size: auto 640px; }
  .hero, .page-hero { content-visibility: visible; }

  /* Drop the decorative floaters — they animate constantly for little payoff */
  .float-shape { display: none; }

  /* Shorter, cheaper shadows */
  .card, .product-card, .mural-card, .info-card { box-shadow: var(--sh-xs); }
}

/* Save data / slow connection: kill the particle canvas entirely */
@media (prefers-reduced-data: reduce) {
  #particle-canvas { display: none; }
  .blob { display: none; }
}

/* ---------- Touch devices: disable hover-only transforms ---------- */
@media (hover: none) {
  .card:hover, .program-card:hover, .mural-card:hover,
  .product-card:hover, .masonry-item:hover, .info-card:hover { transform: none; }
  .tilt { transform: none !important; }
  .cursor-dot, .cursor-ring { display: none; }
  .masonry-item__overlay { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(31, 42, 68, 0.7)); }
}

/* ---------- Landscape phones: shorter heroes ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: 1.75rem; }
  .page-hero { padding-block: 2rem 1.5rem; }
}

/* ---------- Print ---------- */
@media print {
  #particle-canvas, .float-stack, .site-header, .scroll-progress,
  .cursor-dot, .cursor-ring, #preloader, .newsletter { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .card, .program-card, .mural-card { break-inside: avoid; box-shadow: none; }
}

/* ---------- Forced colors / high contrast ---------- */
@media (forced-colors: active) {
  .btn, .filter-btn.is-active { border: 2px solid currentColor; }
  .card, .program-card, .product-card { border: 1px solid currentColor; }
}