/* ============================================================
   AURORA — Responsive System
   Breakpoints: 480 / 768 / 1024 / 1280 / 1536
   ============================================================ */

/* ---- MOBILE SMALL (< 480px) ---- */
@media (max-width: 479px) {
  :root { --container-gutter: 20px; }

  .nav__links { display: none; }
  .nav__actions .btn--primary { display: none; }
  .nav__hamburger { display: flex; }

  .hero {
    padding: var(--space-section) var(--container-gutter);
    min-height: 100dvh;
    min-height: 100svh;
    align-items: flex-start;
    padding-top: calc(72px + var(--space-section));
  }
  .hero__content { text-align: left; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll { display: none; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: 1fr; }

  .section { padding-block: var(--space-section); }
  .section--loose { padding-block: var(--space-section-lg); }

  .card, .card--feature { padding: var(--space-lg); }

  .footer__top { flex-direction: column; gap: var(--space-lg); }
  .footer__links { flex-wrap: wrap; gap: var(--space-md); }

  .cta-banner { padding: var(--space-xxl) var(--space-lg); }
  .timeline__item { flex-wrap: wrap; }
}

/* ---- MOBILE LARGE (480 – 767px) ---- */
@media (min-width: 480px) and (max-width: 767px) {
  :root { --container-gutter: 24px; }

  .nav__links { display: none; }
  .nav__actions .btn--primary { display: none; }
  .nav__hamburger { display: flex; }

  .hero { padding: var(--space-section-lg) var(--container-gutter); }
  .hero__actions { flex-wrap: wrap; justify-content: center; }

  .grid--2 { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--auto { grid-template-columns: 1fr; }
  .grid--auto-lg { grid-template-columns: 1fr; }

  .footer__top { flex-direction: column; gap: var(--space-xl); }
}

/* ---- TABLET (768 – 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --container-gutter: 24px; }

  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--auto { grid-template-columns: repeat(2, 1fr); }
  .grid--auto-lg { grid-template-columns: repeat(2, 1fr); }

  .footer__top { flex-wrap: wrap; gap: var(--space-xxl); }
}

/* ---- DESKTOP (1024 – 1279px) ---- */
@media (min-width: 1024px) {
  .nav__hamburger { display: none; }
  .nav__mobile-menu { display: none !important; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--auto { grid-template-columns: repeat(3, 1fr); }
  .grid--auto-lg { grid-template-columns: repeat(3, 1fr); }
}

/* ---- WIDE DESKTOP (≥ 1280px) ---- */
@media (min-width: 1280px) {
  :root { --container-gutter: 32px; }
  .grid--auto { grid-template-columns: repeat(4, 1fr); }
  .grid--auto-lg { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ULTRAWIDE (≥ 1536px) ---- */
@media (min-width: 1536px) {
  :root { --container-gutter: 40px; }
}

/* ---- ORIENTATION ---- */
@media (max-width: 1023px) and (orientation: landscape) {
  .hero { min-height: 100dvh; align-items: center; padding-block: var(--space-section); }
  .hero__scroll { display: none; }
}

/* ---- PRINT ---- */
@media print {
  .nav, .hero__scroll, .theme-toggle { display: none; }
  .hero { min-height: auto; padding: var(--space-xxl); }
  .card { box-shadow: none; border: 1px solid #ccc; backdrop-filter: none; }
  * { color: black !important; background: white !important; }
}