/* ==========================================================================
   RESPONSIVE.CSS — Breakpoint Optimizations for 320px to 1440px
   ========================================================================== */

/* ===== DESKTOP / LARGE SCREENS (1280px - 1440px+) ===== */
@media (min-width: 1280px) {
  .hero__stage { max-width: 960px; }
  .opening-content, .events-content, .couple-content, .gallery-content { max-width: 1140px; }
}

/* ===== TABLET / SMALL LAPTOP (900px - 1024px) ===== */
@media (max-width: 1024px) {
  .hero__stage { padding: 60px 24px; }
}

/* ===== TABLET (768px - 900px) ===== */
@media (max-width: 900px) {
  .couple-content .parents-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .couple-photo-frame--single {
    max-width: 300px;
  }

  .events-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .parents-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

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

/* ===== SMALL TABLET / LARGE MOBILE (640px) ===== */
@media (max-width: 640px) {
  .hero__stage  { min-height: 75vh; padding: 40px 16px; }

  .hero__names  { flex-direction: column; align-items: center; gap: 0; }
  .hero__name   { font-size: clamp(2rem, 8vw, 3rem); }
  .hero__amp    { font-size: clamp(1.6rem, 6vw, 2.2rem); margin: 4px 0; }
  .hero__date   { font-size: 0.9rem; letter-spacing: 0.2em; }

  .music-toggle { bottom: 20px; right: 16px; width: 46px; height: 46px; }
}

/* ===== MOBILE / PHONES (425px - 480px) ===== */
@media (max-width: 480px) {
  .nav { padding: 14px 20px; }

  #hero { min-height: 100svh; }

  #opening,
  #couple,
  #events,
  #countdown,
  #quote-section,
  #gallery,
  #rsvp {
    padding: 70px 16px;
  }

  .section-title { font-size: clamp(24px, 6.5vw, 34px); }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .countdown-box { padding: 22px 12px; }

  .countdown-number { font-size: clamp(34px, 10vw, 54px); }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .event-card { padding: 36px 20px; }

  .couple-photo-frame--single { max-width: 270px; }

  footer { padding: 60px 16px 32px; }

  .maps-btn {
    width: 100%;
    justify-content: center;
  }

  .ornament-line { width: 44px; }
}

/* ===== SMALL MOBILE (375px) ===== */
@media (max-width: 375px) {
  .hero__name { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .gate-names { font-size: clamp(28px, 7vw, 44px); }
  .countdown-grid { gap: 10px; }
}

/* ===== EXTRA SMALL MOBILE (320px) ===== */
@media (max-width: 320px) {
  .hero__stage { padding: 30px 12px; }
  .gate-content { padding: 30px 14px; }
  .gate-bismillah { font-size: 22px; }
  .gate-names { font-size: 26px; }
  .gate-date { font-size: 11px; letter-spacing: 0.15em; }
  .countdown-box { padding: 18px 8px; }
  .countdown-number { font-size: 30px; }
}