/* ==========================================================================
   KUDA & TERERAI - PREMIUM INTERACTIVE WEDDING INVITATION
   Responsive Stylesheet - assets/css/responsive.css
   Mobile-first, covers all devices from 280px foldables to 2560px+ 4K TVs
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLUID TYPOGRAPHY (CLAMP-BASED, MOBILE-FIRST)
   -------------------------------------------------------------------------- */
.hero-title {
  font-size: clamp(2.4rem, 6vw + 0.5rem, 6rem);
}
.title-ampersand {
  font-size: clamp(1.8rem, 4.5vw + 0.5rem, 4rem);
}
.section-heading {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.75rem);
}

/* --------------------------------------------------------------------------
   2. ULTRA-NARROW / FOLDING FRONT-SCREEN (<= 320px)
      Galaxy Z Fold front display, Galaxy A01 etc.
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
  .wax-seal { width: 80px; height: 80px; }
  .wax-seal-label { font-size: 1.2rem; }
  .wax-seal-action { font-size: 0.6rem; }
  .hero-title { font-size: 2rem; }
  .title-ampersand { font-size: 1.5rem; }
  .hero-date-box { padding: 8px 12px; }
  .hero-date { font-size: 0.85rem; }
  .guest-stationery-card { padding: 20px 12px !important; }
  .guest-card-monogram { font-size: 1.6rem; }
  .guest-revealed-name { font-size: 1.6rem; }
  .scratch-card-container { height: 180px; }
  .revealed-wedding-date { font-size: 1.9rem; }
  .countdown-number { font-size: 1.4rem; }
  .countdown-box { padding: 5px 4px !important; min-width: auto; }
  .countdown-label { font-size: 0.55rem; }
  .countdown-separator { font-size: 1.2rem; }
  .details-card, .form-container, .wishes-wall-container { padding: 18px 12px !important; }
  .swatch-color { height: 60px; }
  .invitation-nav-wrapper { top: 10px; right: 10px; }
  .music-control-wrapper, .btn-scroll-top { right: 10px; }
  .section-heading { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   3. SMALL PHONES (321px - 414px)
      iPhone SE (375), Samsung Galaxy S/A series (360-412px)
   -------------------------------------------------------------------------- */
@media (max-width: 414px) {
  .wax-seal { width: 100px; height: 100px; }
  .wax-seal-label { font-size: 1.4rem; }
  .wax-seal-action { font-size: 0.7rem; letter-spacing: 0.2em; }
  .invitation-nav-wrapper { top: 15px; right: 15px; }
  .music-control-wrapper { bottom: 15px; right: 15px; }
  .btn-scroll-top { bottom: 75px; right: 15px; }
  .hero-date { font-size: 0.9rem; letter-spacing: 0.12em; }
  .guest-stationery-card { padding: 28px 18px !important; }
  .guest-card-monogram { font-size: 1.8rem; }
  .guest-revealed-name { font-size: 1.9rem; }
  .scratch-card-container { height: 200px; }
  .revealed-wedding-date { font-size: 2.1rem; }
}

/* --------------------------------------------------------------------------
   4. STANDARD MOBILE PORTRAIT (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .story-row { margin-bottom: 40px; flex-direction: column !important; }
  .story-content { padding: 10px 0 20px 0 !important; text-align: center; }
  .story-text { text-align: center; }
  .story-img-wrapper { text-align: center !important; }
  .story-img-border-gold { display: none; }
  .countdown-number { font-size: 2rem; }
  .countdown-box { min-width: auto; padding: 8px !important; }
  .countdown-separator { font-size: 1.5rem; }
  .timeline-line { left: 20px; }
  .timeline-item { flex-direction: column; align-items: flex-start !important; padding-left: 45px; position: relative; }
  .timeline-time { width: auto; text-align: left !important; padding: 0 0 5px 0 !important; }
  .timeline-badge-wrapper { position: absolute; left: 20px; top: 5px; width: auto; transform: translateX(-50%); }
  .timeline-content { width: 100%; padding-left: 0 !important; }
  .bridal-avatar-wrapper { width: 150px; height: 150px; }
  .bridal-avatar-wrapper.small-avatar { width: 95px; height: 95px; }
  .swatch-color { height: 80px; }
  .swatch-name { font-size: 0.7rem; }
  .map-iframe-placeholder { height: 250px; }
  .section-padding { padding: 55px 0; }
}

/* --------------------------------------------------------------------------
   5. LARGE PHONES / PHABLETS (481px - 599px)
      iPhone Plus/Pro Max, Pixel 7 Pro
   -------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 599px) {
  .scratch-card-container { height: 220px; max-width: 440px; }
  .bridal-avatar-wrapper { width: 165px; height: 165px; }
  .bridal-avatar-wrapper.small-avatar { width: 110px; height: 110px; }
  .countdown-number { font-size: 2.2rem; }
  .section-padding { padding: 60px 0; }
}

/* --------------------------------------------------------------------------
   6. SMALL TABLETS (600px - 767px)
      Samsung Galaxy Tab, Kindle Fire, iPad Mini landscape
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 767px) {
  .section-padding { padding: 65px 0; }
  .scratch-card-container { height: 225px; max-width: 450px; }
  .bridal-avatar-wrapper { width: 175px; height: 175px; }
  .gallery-grid .col-6 { flex: 0 0 50%; max-width: 50%; }
  .story-row { flex-direction: column !important; }
  .story-content { text-align: center; padding: 15px 0 25px 0 !important; }
  .story-img-border-gold { display: none; }
}

/* --------------------------------------------------------------------------
   7. TABLETS (768px - 991px)
      iPad portrait, Samsung Tab S8, Surface Go
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .section-padding { padding: 75px 0; }
  .invitation-menu { width: 100%; right: -100%; }
  .menu-monogram { margin-top: 20px; }
  .gallery-grid .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
  .scratch-card-container { height: 230px; }
  .bridal-avatar-wrapper { width: 180px; height: 180px; }
  .bridal-avatar-wrapper.small-avatar { width: 120px; height: 120px; }
  .map-iframe-placeholder { height: 320px; }
  .details-card { padding: 35px 28px !important; }
  .countdown-number { font-size: 2.4rem; }
}

/* --------------------------------------------------------------------------
   8. LARGE TABLETS / SMALL LAPTOPS (992px - 1199px)
      iPad Pro 11", Surface Pro, MacBook Air 11"
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .section-padding { padding: 90px 0; }
  .invitation-menu { width: 320px; right: -320px; }
  .gallery-grid .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .map-iframe-placeholder { height: 360px; }
  .bridal-avatar-wrapper { width: 190px; height: 190px; }
}

/* --------------------------------------------------------------------------
   9. STANDARD LAPTOPS (1200px - 1439px)
      MacBook Pro 13/14", Dell XPS 13, 1080p laptops
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1439px) {
  .container { max-width: 1140px; }
}

/* --------------------------------------------------------------------------
   10. LARGE DESKTOPS (1440px - 1919px)
       MacBook Pro 16", iMac 24", 1440p monitors
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .container { max-width: 1200px; }
}

/* --------------------------------------------------------------------------
   11. FULL HD DISPLAYS (1920px+)
       27" iMac, 1080p TVs, large monitors
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }
  .section-padding { padding: 140px 0; }
  .hero-title { font-size: 7.5rem; }
  .title-ampersand { font-size: 5rem; }
  .section-heading { font-size: 3rem; }
  .bridal-avatar-wrapper { width: 240px; height: 240px; }
  .scratch-card-container { max-width: 550px; height: 280px; }
}

/* --------------------------------------------------------------------------
   12. 4K SMART TVs AND ULTRA-WIDE (2560px+)
       Samsung QLED, LG OLED, Sony Bravia 4K TV browsers
   -------------------------------------------------------------------------- */
@media (min-width: 2560px) {
  .container { max-width: 1900px; }
  body { font-size: 1.3rem; }
  .section-padding { padding: 200px 0; }
  .hero-title { font-size: 10rem; }
  .title-ampersand { font-size: 7rem; }
  .section-heading { font-size: 4.5rem; }
  .guest-revealed-name { font-size: 4rem; }
  .guest-card-monogram { font-size: 3.5rem; }
  .scratch-card-container { max-width: 700px; height: 360px; }
  .revealed-wedding-date { font-size: 4.5rem; }
  .countdown-number { font-size: 5rem; }
  .countdown-label { font-size: 0.95rem; }
  .bridal-avatar-wrapper { width: 300px; height: 300px; }
  .bridal-avatar-wrapper.small-avatar { width: 200px; height: 200px; }
  .gallery-img { min-height: 320px; object-fit: cover; }
  .map-iframe-placeholder { height: 600px; }
  .invitation-menu { width: 480px; right: -480px; }
  .invitation-nav-wrapper { top: 30px; right: 30px; }
  .music-control-wrapper { bottom: 30px; right: 30px; }
  .btn-scroll-top { bottom: 100px; right: 30px; }
}

/* --------------------------------------------------------------------------
   13. LANDSCAPE ORIENTATION — PHONES
       Prevents overflow and cramped layouts on phone landscape
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section { min-height: auto; padding: 80px 0 60px; }
  .opening-screen { min-height: 100svh; }
  .wax-seal { width: 80px; height: 80px; }
  .section-padding { padding: 40px 0; }
  .scratch-card-container { height: 160px; }
}

/* --------------------------------------------------------------------------
   14. ACCESSIBILITY FOCUS AND REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. HIGH-DPI / RETINA DISPLAY FIXES
       Prevents blurry hairline borders on 2x/3x Retina screens
   -------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .border-gold,
  .avatar-border-gold,
  .shimmer-line {
    border-width: 0.5px;
  }
}