/* ==========================================================================
   RESPONSIVE OVERRIDES
   Breakpoints: 1024px (tablet), 768px (large mobile), 480px (small mobile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET — 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .celebrations__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__grid { columns: 3 200px; }
  .couple__grid { gap: var(--space-md); }
}

/* --------------------------------------------------------------------------
   LARGE MOBILE / SMALL TABLET — 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  main section, .hero, .footer { padding: var(--space-xl) var(--space-sm); }

  /* Nav collapses to slide-out panel */
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--color-espresso); 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(0,0,0,0.3);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__music { order: -1; margin-right: var(--space-2xs); }

  /* Countdown */
  .countdown__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

  /* Chronicle timeline — stack, marker moves to left rail */
  .chronicle__line { left: 24px; }
  .chronicle__entry, .chronicle__entry--reverse {
    grid-template-columns: 1fr; gap: var(--space-md); padding-left: 56px;
  }
  .chronicle__entry--reverse .chronicle__frame,
  .chronicle__entry--reverse .chronicle__text { order: initial; text-align: left; }
  .chronicle__marker { left: 24px; top: 0; transform: translate(-50%, 0); width: 38px; height: 38px; }
  .chronicle__frame { max-width: 260px; margin-top: var(--space-lg); }

  /* Bride & groom stack */
  .couple__grid { grid-template-columns: 1fr; }
  .couple__divider { display: none; }

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

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

  /* Gallery */
  .gallery__grid { columns: 2 160px; }

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

  /* Treasury */
  .treasury__card { flex-direction: column; text-align: center; }

  /* Contact stays 3-across but tighter */
  .contact__grid { gap: var(--space-sm); }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE — 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__portrait { width: 100px; height: 100px; }
  .hero__names { font-size: clamp(2.4rem, 14vw, 3.2rem); }
  .hero__date { font-size: 0.72rem; flex-wrap: wrap; }

  .countdown__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); }
  .countdown__value { font-size: 1.6rem; }

  .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); }
}