/* ==========================================================================
   SUN CITY — Responsive rules
   ========================================================================== */

/* ---- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .notify__panel {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero__panel {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 720px) {
  :root {
    --space-2xl: 5rem;
    --space-xl: 3.5rem;
  }

  .nav__meta > span:not(.nav__dot) { display: none; }

  .hero { padding-top: 5.5rem; }

  .hero__title { font-size: clamp(3.2rem, 16vw, 5rem); }

  .hero__sub { font-size: 1.1rem; }

  .countdown { gap: var(--space-2xs); }
  .countdown__unit { min-width: 48px; }
  .countdown__value { font-size: 1.5rem; }
  .countdown__sep { font-size: 1.5rem; }

  .btn-row { width: 100%; flex-direction: column; }
  .btn { flex: none; width: 100%; padding: 0.9rem 1.5rem; }

  .hero__panel { padding: var(--space-sm); }

  .gallery__stage { height: 68vh; perspective: 1000px; }
  .gallery__card { width: 68vw; }

  .services__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .panel { padding: 1.25rem 1rem; }

  /* The sun→panel energy rays are designed for a single wide row; they
     read as broken, oversized lines once panels stack into columns. */
  .services__rays { display: none; }

  .notify__form { flex-direction: column; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__copy { text-align: left; }

  .hero__scroll-hint { display: none; }
}

@media (max-width: 420px) {
  .countdown__unit { min-width: 42px; }
}

/* ---- Fine pointer only: hover-dependent affordances -------------------- */
@media (hover: none) {
  .panel { animation-duration: 9s; }
}