/**
 * Responsive Refinements
 * Mobile 9:16 Cinematic First & Editorial Desktop
 */

/* ==================================================
   MOBILE (max-width: 900px)
   ================================================== */
@media (max-width: 900px) {
  /* Floating sound button */
  .floating-sound-control {
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    right: 1.2rem;
  }

  .sound-toggle-btn {
    width: 34px;
    height: 34px;
  }

  /* Hero Section */
  .hero-section {
    padding: 4.5rem 4vw 3rem;
    min-height: 100svh;
  }

  .hero-invitation-card {
    padding: 2.2rem 1.2rem;
    border-radius: 22px;
  }

  .hero-invitation-card::after {
    inset: 6px;
    border-radius: 16px;
  }

  .hero-person-name {
    font-size: clamp(2.5rem, 9.2vw, 3.6rem);
  }

  .blessings-line,
  .blessings-sub {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  /* Section Padding */
  .invitation-section {
    padding: 6rem 6vw;
  }

  .section-header {
    margin-bottom: 3.5rem;
  }

  /* The Big Day Card */
  .bigday-section {
    padding: 5rem 4vw;
  }

  .bigday-card {
    padding: 3rem 3.2rem;
    border-radius: 42px;
    max-width: 360px;
    width: 90%;
  }

  .bigday-subtitle {
    font-size: 1.12rem;
    max-width: 280px;
  }

  .bigday-date {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    margin-bottom: 2.8rem;
  }

  .bigday-script {
    font-size: clamp(3rem, 10vw, 3.8rem);
  }

  /* Moments Section */
  .moments-section {
    padding: 5rem 5vw 5.5rem;
  }

  .moments-frame-outer {
    max-width: 380px;
    width: 92%;
    padding: 9px;
    border-radius: 44px;
  }

  .moments-frame-inner {
    border-radius: 36px;
  }

  /* Venue Section */
  .venue-section {
    padding: 5rem 5vw 5.5rem;
  }

  .venue-card {
    max-width: 500px;
    border-radius: 28px;
  }

  .venue-card-body {
    padding: 2.2rem 1.2rem 2.4rem;
  }

  .venue-directions-btn {
    padding: 0.9rem 2.4rem;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
  }

  /* Events / Celebration */
  .events-grid {
    grid-template-columns: 1fr;
    border-bottom: none;
  }

  .event-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 3rem 1.8rem;
    min-height: auto;
  }

  .event-card:last-child {
    border-bottom: 1px solid var(--line);
  }

  .event-title {
    font-size: 2.2rem;
  }

  .event-video-container {
    margin: 1.5rem auto 2.2rem;
  }

  .luxury-phone-frame {
    max-width: 440px;
    width: 100%;
    padding: 9px;
    border-radius: 1.5rem;
  }

  .phone-frame-inner {
    border-radius: 1rem;
  }

  /* Countdown */
  .countdown-section {
    padding: 6rem 6vw;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 3.5rem auto 2.5rem;
  }

  .countdown-unit {
    padding: 2.2rem 1rem;
    border-bottom: 1px solid var(--dark-border);
  }

  .countdown-unit:nth-child(2) {
    border-right: none;
  }

  .countdown-unit:nth-child(3) {
    border-bottom: none;
  }

  .countdown-unit:nth-child(4) {
    border-right: none;
    border-bottom: none;
  }

  .countdown-number {
    font-size: clamp(2.8rem, 12vw, 4.2rem);
  }

  /* Gallery */
  .gallery-header-split {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .editorial-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 240px;
    gap: 1rem;
  }

  .gallery-figure.tall {
    grid-row: span 2;
  }

  .gallery-figure.wide {
    grid-column: span 2;
  }

  .gallery-caption {
    padding: 1.2rem 1rem;
  }

  .gallery-caption-title {
    font-size: 1.1rem;
  }

  .gallery-caption-sub {
    font-size: 0.8125rem;
  }

  /* Family */
  .family-presentation {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 1.5rem;
  }

  .family-emblem-wrapper {
    order: 2;
    padding: 0.5rem 0;
  }

  .family-pillar:first-child {
    order: 1;
  }

  .family-pillar:last-child {
    order: 3;
  }

  /* RSVP */
  .rsvp-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .rsvp-intro-col {
    position: static;
  }

  .rsvp-form-container {
    padding: 2.5rem 1.5rem;
  }

  .attendance-pill-group {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-section {
    padding: 6rem 6vw 4rem;
  }
}

/* ==================================================
   EXTRA SMALL MOBILE (max-width: 480px)
   ================================================== */
@media (max-width: 480px) {
  .editorial-gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 320px;
  }

  .gallery-figure.wide {
    grid-column: span 1;
  }

  .gallery-figure.tall {
    grid-row: span 1;
  }

  .modal-nav-btn {
    display: none; /* Rely on swipe and close button on compact mobile */
  }

  .modal-btn-close {
    top: 1rem;
    right: 1rem;
  }
}

/* ==================================================
   TABLET / MID-SCREEN (901px to 1250px)
   ================================================== */
@media (max-width: 1250px) and (min-width: 901px) {
  .events-section .section-container {
    max-width: 100%;
    padding: 0 1.5vw;
  }

  .event-card {
    padding: 3rem 0.8rem;
  }

  .luxury-phone-frame {
    max-width: 340px;
  }
}

/* ==================================================
   LARGE DESKTOP (min-width: 1400px)
   ================================================== */
@media (min-width: 1400px) {
  .section-container {
    max-width: 1340px;
  }

  .hero-names {
    font-size: 6.8rem;
  }

  .editorial-gallery-grid {
    grid-auto-rows: 420px;
  }
}