/* ==========================================================================
   RESPONSIVE OVERRIDES — 1024 / 768 / 480
   ========================================================================== */

@media (max-width: 1024px) {
  .celebrations__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__grid { columns: 3 200px; }
}

@media (max-width: 768px) {
  main section, .footer { padding: var(--space-xl) var(--space-sm); }

  .hero__grid { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); }
  .hero__visual { order: -1; }
  .hero__visual-ring { display: none; }
  .hero__portrait { margin: 0 auto; width: 220px; }
  .hero__tagline { margin-left: auto; margin-right: auto; }
  .hero__date { justify-content: center; }
  .hero__actions { justify-content: center; }

  .gate__scene { width: 220px; height: 190px; transform: scale(0.9); }
  .gate__title { margin-bottom: var(--space-lg); }

  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--color-cream-card); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: var(--space-lg); padding: var(--space-xl);
    transform: translateX(100%); transition: var(--transition-slow);
    box-shadow: -10px 0 30px rgba(74,25,66,0.15);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__music { order: -1; margin-right: var(--space-2xs); }

  .necklace { gap: var(--space-sm); flex-wrap: wrap; row-gap: var(--space-lg); }
  .necklace__chain { display: none; }

  .keepsake-swiper .swiper-slide { width: 260px; }

  .couple__grid { grid-template-columns: 1fr; }
  .couple__heart { margin: var(--space-md) 0; }
  .couple__heart-frame { width: 150px; }

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

  .family__houses { grid-template-columns: 1fr; gap: var(--space-lg); }

  .gallery__grid { columns: 2 160px; }

  .venue__wrap { grid-template-columns: 1fr; }
  .venue__map { min-height: 260px; }
  .venue__map iframe { min-height: 260px; }

  .treasury__card { flex-direction: column; text-align: center; }
  .contact__grid { gap: var(--space-sm); }
}

@media (max-width: 480px) {
  .gate__scene { transform: scale(0.78); }
  .gate__title { font-size: 2.4rem; }

  .hero__portrait { width: 150px; }
  .hero__names { font-size: clamp(2.4rem, 14vw, 3.2rem); }

  .necklace__pendant { width: 76px; height: 88px; }
  .necklace__value { font-size: 1.35rem; }

  .celebrations__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; max-width: 260px; }
  .gallery__grid { columns: 2 130px; }

  .rsvp__toggle { flex-direction: column; gap: var(--space-2xs); }

  .lightbox__prev, .lightbox__next { font-size: 1.2rem; padding: var(--space-2xs); }
  .lightbox__close { top: var(--space-sm); right: var(--space-sm); }
}