/* ==========================================================================
   Responsive Styles — Mobile-First Media Queries
   ========================================================================== */

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .section { padding: var(--space-2xl) 0; }
  .container { padding: 0 var(--space-md); }

  /* Nav: show hamburger, hide inline links */
  .nav__hamburger { display: block; }
  .nav__links { display: none; }

  /* Stack grids vertically */
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Footer adjustments */
  .footer__names { font-size: var(--text-2xl); }
  .footer__links { flex-direction: column; gap: var(--space-sm); }

  /* Event cards full width */
  .event-card { padding: var(--space-lg); }

  /* Hero text sizing */
  .hero h1 { font-size: var(--text-4xl); }
  .hero p { font-size: 0.6875rem; }

  /* Hero names — script font needs to be smaller on mobile */
  .hero .script-text { font-size: var(--text-4xl); }

  /* Countdown units tighter */
  .countdown { gap: var(--space-md); }
  .countdown__value { font-size: var(--text-2xl); }

  /* Toggle cards stack on mobile */
  .toggle-group { flex-direction: column; }

  /* Address grid — stack city/zip on mobile */
  .address-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Prevent iOS zoom on form inputs (must be >= 16px) */
  .form-group input,
  .form-group textarea,
  .form-group select,
  .rsvp-form select,
  .password-gate__input {
    font-size: 16px;
  }

  /* RSVP form select — prevent overflow */
  .rsvp-form select {
    white-space: normal;
  }

  /* Password gate — more padding, full width */
  .password-gate__inner {
    padding: var(--space-2xl) var(--space-lg);
    max-width: 100%;
  }

  .password-gate__title {
    font-size: var(--text-4xl);
  }

  /* Page header sizing */
  .page-header__title { font-size: var(--text-3xl); }

  /* Timeline — tighter spacing */
  .timeline__item { padding-left: var(--space-xl); }

  /* Story carousel — shorter on mobile, bigger touch targets */
  .story-carousel,
  .story-carousel__slide img { max-height: 280px; }

  .story-carousel__btn {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }

  .story-carousel__btn--prev { left: var(--space-sm); }
  .story-carousel__btn--next { right: var(--space-sm); }

  /* Accordion — bigger touch targets */
  .accordion__header {
    padding: var(--space-lg) 0;
    min-height: 48px;
  }

  /* Cards — less padding on mobile */
  .card { padding: var(--space-lg); }

  /* Compact toggle cards tighter on mobile */
  .toggle-card--compact {
    padding: var(--space-sm) var(--space-md);
  }

  /* Selectable toggle card checkmark alignment */
  .toggle-card--selectable {
    justify-content: flex-start;
    padding: var(--space-md);
  }

  /* Guest details — tighter padding on mobile */
  .guest-details__inner {
    padding: var(--space-lg) var(--space-md) var(--space-sm);
  }

  /* Buttons — full width on mobile for easy tapping */
  .rsvp-form .btn,
  #contact-form .btn {
    width: 100%;
    padding: 1rem;
  }

  /* Silk ribbon text */
  .silk-ribbon__text { font-size: var(--text-base); }
  .silk-ribbon { height: 36px; }
  .silk-ribbon::before,
  .silk-ribbon::after { height: 36px; }
}

/* ---- Tablet (769px – 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Desktop (1025px+) ---- */
@media (min-width: 1025px) {
  .container { padding: 0 var(--space-2xl); }
}

/* ---- Large Desktop (up to 2560px) ---- */
@media (min-width: 1440px) {
  :root {
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
  }

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