/* ==========================================================================
   VR Celebrations — Responsive Overrides
   File: assets/css/responsive.css
   Breakpoints: 320 / 375 / 390 / 414 (mobile), 768 / 992 (tablet),
                1200 / 1440 / 1920 (desktop). Desktop-first overrides.
   ========================================================================== */

/* ---------- ≤ 1199px : small desktop / large tablet ---------- */
@media (max-width: 1199.98px) {

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

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

/* ---------- ≤ 991px : tablet ---------- */
@media (max-width: 991.98px) {

  .hero-section__inner {
    grid-template-columns: 1fr;
  }

  .hero-section__copy {
    max-width: 40rem;
    text-align: center;
    margin-inline: auto;
  }

  .hero-section__lead {
    margin-inline: auto;
  }

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

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

  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  .cta-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- ≤ 767px : large phones ---------- */
@media (max-width: 767.98px) {

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

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

  .section-heading {
    margin-bottom: var(--space-lg);
  }
}

/* ---------- ≤ 575px : phones (320–414) ---------- */
@media (max-width: 575.98px) {

  .occasion-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-strip {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-md);
  }

  .stat-item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2xs);
  }

  .hero-section__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- ≤ 359px : smallest phones (320) ---------- */
@media (max-width: 359.98px) {

  .occasion-grid,
  .stats-strip {
    grid-template-columns: 1fr;
  }
}

/* ---------- ≥ 1440px : large desktop ---------- */
@media (min-width: 1440px) {

  .container {
    max-width: var(--container-wide);
  }
}

/* ---------- ≥ 1920px : ultra-wide — cap line lengths, keep rhythm ---------- */
@media (min-width: 1920px) {

  .container {
    max-width: 1440px;
  }
}