/* ─── Mobile-first base (applied to all sizes) ────────────────
   Most mobile styling is in each component's own CSS file.
   This file handles breakpoint-specific overrides only.
   ─────────────────────────────────────────────────────────── */

/* ─── Tablet (768px and below) ───────────────────────────────── */
@media (max-width: 768px) {
  section {
    padding: var(--space-8) var(--space-2);
  }

  /* Hero */
  .hero::before {
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .hero::after {
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .hero__tagline {
    font-size: var(--text-base);
    max-width: 90%;
  }

  /* Countdown */
  .countdown__card {
    min-width: 75px;
    padding: var(--space-2) var(--space-3);
  }

  .countdown__separator {
    display: none;
  }

  /* Details grid */
  .details__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

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

  /* RSVP guest rows: stack fields */
  .rsvp-guest-row__fields {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ─── Small Phone (480px and below) ─────────────────────────── */
@media (max-width: 480px) {
  section {
    padding: var(--space-6) var(--space-2);
  }

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

  /* Countdown */
  .countdown__timer {
    gap: var(--space-1);
  }

  .countdown__card {
    min-width: 65px;
    padding: var(--space-2);
  }

  /* Gallery */
  .gallery__grid {
    columns: 1;
  }

  /* Dress code swatches */
  .dresscode__swatch {
    width: 60px;
    height: 60px;
  }

  .dresscode__swatches {
    gap: var(--space-2);
  }

  /* Music toggle */
  .music-toggle {
    width: 44px;
    height: 44px;
    bottom: var(--space-2);
    right: var(--space-2);
  }

  /* Lightbox */
  .lightbox__prev,
  .lightbox__next {
    font-size: 2rem;
  }

  .lightbox__close {
    font-size: 2rem;
    top: var(--space-2);
    right: var(--space-2);
  }

  /* Envelope: tighten padding on very small screens */
  .envelope-overlay {
    padding: var(--space-3) var(--space-2);
  }

  .envelope__letter-names {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  }
}

/* ─── Very short screens (landscape phone) ───────────────────── */
@media (max-height: 560px) and (orientation: landscape) {
  .envelope-overlay {
    flex-direction: row;
    gap: var(--space-4);
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
  }

  .envelope {
    width: min(220px, 40vw);
    margin-bottom: 0;
  }

  .envelope__cta {
    animation: none;
  }
}

/* ─── Large Desktop (1440px and above) ──────────────────────── */
@media (min-width: 1440px) {
  .section-inner {
    max-width: 1300px;
  }

  .gallery__grid {
    column-gap: var(--space-3);
  }
}