/* ==========================================================================
   RESPONSIVE BREAKPOINTS & MOBILE-FIRST ADAPTATIONS
   Breakpoints: 375px+, 768px+, 1024px+
   ========================================================================== */

/* Mobile Enhancements (Default < 768px) */
@media (max-width: 767px) {
  .hero-frame {
    padding: 2.5rem 1.25rem;
  }
  
  .door-crest {
    width: 90px;
    height: 90px;
  }
  .door-left .door-crest { right: -45px; }
  .door-right .door-crest { left: -45px; }

  .opening-content {
    padding: 2.25rem 1.25rem;
  }

  .opening-script-names {
    font-size: 2.5rem;
  }

  /* Timeline Mobile adjustment: single-sided vertical line */
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    width: 100% !important;
    left: 0 !important;
    padding-left: 50px !important;
    padding-right: 1rem !important;
    text-align: left !important;
  }

  .timeline-dot {
    left: 12px !important;
    right: auto !important;
  }

  .couple-photo-wrapper {
    width: 160px;
    height: 210px;
  }

  .countdown-item {
    min-width: 70px;
    padding: 0.9rem 0.5rem;
  }

  .music-toggle {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
  }

  /* Mobile Flower Accents */
  .hero-flower {
    width: clamp(140px, 38vw, 220px);
    opacity: 0.38;
  }

  .section-flower {
    width: clamp(120px, 32vw, 180px);
    opacity: 0.28;
  }

  .card-flower-tl,
  .card-flower-br {
    width: clamp(75px, 20vw, 110px);
    opacity: 0.3;
  }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .hero-frame {
    padding: 4rem 3rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .couple-grid {
    grid-template-columns: 1fr auto 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}