/* ============================================================
   Sharayu & Dipak Wedding — Responsive Styles
   Mobile-first breakpoints for all sections
   ============================================================ */

/* ===== DESKTOP TIGHT (≤ 1100px) ===== */
@media (max-width: 1100px) {
  .cd-label { display: none; }
  #navbar { padding: 0 var(--sp-6); }
}

/* ===== TABLET (≤ 900px) ===== */
@media (max-width: 900px) {
  :root {
    --navbar-h: 60px;
    --offset-top: 60px;
  }

  /* Countdown */
  .cd-label { display: none; }
  .cd-number { font-size: 0.88rem; }
  .cd-units { gap: var(--sp-1); }
  #countdown-bar {
    padding: 4px 10px;
    gap: var(--sp-2);
  }

  /* Navbar */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  #navbar { padding: 0 var(--sp-6); }

  /* Events */
  .events-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }

  /* Timeline */
  .timeline-line { left: 20px; }
  .timeline-item {
    grid-template-columns: auto 1fr;
    gap: var(--sp-5);
    align-items: start;
  }
  /* On mobile: hide the empty placeholder column, show full-width content */
  .timeline-left:not(:has(.timeline-content)),
  .timeline-right:not(:has(.timeline-content)) {
    display: none;
  }
  /* All content columns go to column 2 next to the dot */
  .timeline-left:has(.timeline-content),
  .timeline-right:has(.timeline-content) {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }
  .timeline-dot { grid-column: 1; grid-row: 1; margin-top: var(--sp-5); }

  /* Gallery */
  .gallery-grid { columns: 2; }

  /* Events Timeline */

  /* Venue */
  .venue-grid { grid-template-columns: 1fr; }
  .venue-map-container { order: -1; }

  /* Wishes */
  .wishes-form-wrap { padding: var(--sp-8) var(--sp-6); }

  /* Section */
  .section { padding: var(--sp-20) 0; }
}

/* ===== MOBILE (≤ 600px) ===== */
@media (max-width: 600px) {
  :root {
    --navbar-h: 56px;
    --offset-top: 56px;
  }

  /* Countdown bar in navbar */
  #countdown-bar {
    gap: var(--sp-2);
    padding: 3px 8px;
  }

  .cd-number { font-size: 0.8rem; }
  .cd-unit-label { font-size: 0.32rem; }
  .cd-sep { font-size: 0.75rem; margin-bottom: 3px; }
  .cd-unit { min-width: 24px; }

  /* Navbar */
  #navbar { padding: 0 var(--sp-4); }
  .nav-brand { font-size: 1.35rem; padding: var(--sp-1) 0; }

  /* Opening Overlay */
  .door-tap-pill { padding: 9px 20px; font-size: 0.64rem; letter-spacing: 0.18em; }

  /* Hero */
  .hero-page-stage { padding: calc(var(--offset-top) + var(--sp-2)) var(--sp-2) var(--sp-6); }
  .hero-page-stage--ganpati { padding-bottom: var(--sp-10); }
  .hero-ganpati-reveal { gap: var(--sp-3); padding: var(--sp-4) var(--sp-2); }
  .ganpati-reveal-img { width: 140px; }
  .ganpati-deva-invocation { font-size: 1.35rem; }
  .ganpati-eng-invocation { font-size: 0.65rem; letter-spacing: 0.22em; }
  .hero-scroll-cue { bottom: var(--sp-4); }
  .hero-scroll-pill { padding: 6px 14px; font-size: 0.58rem; }
  .hero-content { padding: var(--sp-8) 28px var(--sp-6); width: 95%; gap: var(--sp-2); }
  .hero-ganpati-img { width: 52px; }
  .hero-invocation { font-size: 0.62rem; letter-spacing: 0.2em; }
  .hero-poem { font-size: clamp(0.55rem, 2.5vw, 0.74rem); line-height: 1.55; padding: var(--sp-2) var(--sp-1); max-width: 100%; }
  .hero-invite-lead,
  .hero-family-welcome { font-size: 0.6rem; letter-spacing: 0.14em; }
  .hero-names { font-size: clamp(2rem, 8.8vw, 3.2rem); }
  .hero-parent-line { font-size: clamp(0.52rem, 2.3vw, 0.68rem); letter-spacing: 0.03em; }
  .hero-date-frame { padding: 11px 22px 13px; }
  .hero-date { font-size: 0.86rem; letter-spacing: 0.18em; }

  /* Section headers */
  .section-title { font-size: clamp(1.4rem, 5vw, 2rem); }
  .section-subtitle { font-size: 0.9rem; }

  /* Events */
  .event-wide-content .dress-section-label { text-align: left; }


  /* Gallery */
  .gallery-grid { columns: 1; }
  .gallery-filters { gap: var(--sp-2); }
  .filter-btn { font-size: 0.55rem; padding: var(--sp-2) var(--sp-4); }

  /* Venue */
  .venue-map-container iframe { height: 280px; }
  .venue-name { font-size: 1.2rem; }

  /* Forms & Wishes */
  .form-input, .form-select, .form-textarea { font-size: 0.85rem; }
  .wishes-grid { grid-template-columns: 1fr; }
  .wishes-form-wrap { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); }

  /* Timeline */
  .timeline-content { padding: var(--sp-5); }
  .timeline-title { font-size: 1.05rem; }

  /* Footer */
  .footer-team-buttons { gap: var(--sp-3); width: 100%; }
  .btn-team { width: 100%; max-width: 260px; padding: 13px 24px; font-size: 0.74rem; }

  /* Music player */
  #music-player { bottom: var(--sp-5); right: var(--sp-5); }
  #music-btn { width: 46px; height: 46px; font-size: 0.95rem; }

  /* Section */
  .section { padding: var(--sp-16) 0; }

  /* Lightbox */
  .lightbox-nav { width: 36px; height: 36px; font-size: 0.9rem; }
  .lightbox-prev { left: var(--sp-2); }
  .lightbox-next { right: var(--sp-2); }
}

/* ===== EXTRA SMALL MOBILE (≤ 420px) ===== */
@media (max-width: 420px) {
  .cd-unit-sec,
  .cd-sep-sec {
    display: none;
  }
  .nav-brand { font-size: 1.22rem; }
  #countdown-bar { padding: 2px 6px; }
  .hero-content { padding: var(--sp-7) 20px var(--sp-5); width: 96%; }
  .hero-poem { font-size: clamp(0.48rem, 2.45vw, 0.58rem); }
  .hero-parent-line { font-size: clamp(0.46rem, 2.35vw, 0.56rem); letter-spacing: 0.02em; }
}

/* ===== SMALL MOBILE (≤ 380px) ===== */
@media (max-width: 380px) {
  .cd-sep { display: none; }
  .cd-units { gap: 3px; }
  .nav-brand { font-size: 1.12rem; }
  .cd-unit { min-width: 22px; }
  .cd-number { font-size: 0.76rem; }

  .door-tap-pill { padding: 8px 16px; font-size: 0.58rem; }
  .hero-names { font-size: 2.1rem; }
  .hero-content { padding: var(--sp-6) 16px var(--sp-5); width: 98%; }
  .hero-poem { font-size: clamp(0.42rem, 2.4vw, 0.5rem); }
  .hero-parent-line { font-size: clamp(0.41rem, 2.3vw, 0.48rem); letter-spacing: 0; }

  .btn-gold, .btn-outline-gold { padding: var(--sp-3) var(--sp-8); font-size: 0.65rem; }
}

/* ===== WIDE SCREENS (≥ 1400px) ===== */
@media (min-width: 1400px) {
  .events-grid { gap: var(--sp-10); }
  .gallery-grid { columns: 4; }
  .venue-map-container iframe { height: 480px; }
}

/* ===== LANDSCAPE PHONE ===== */
@media (max-height: 500px) and (orientation: landscape) {
  #hero { min-height: 100vh; height: auto; padding: calc(var(--offset-top) + var(--sp-10)) 0 var(--sp-10); }
  .opening-overlay { overflow-y: auto; }
  .opening-content { padding: var(--sp-4) var(--sp-6); gap: var(--sp-3); }
  .opening-om { font-size: 2rem; }
  .opening-names { font-size: 2rem; }
}

/* ===== PRINT ===== */
@media print {
  #opening-overlay, #countdown-bar, #navbar, #music-player, #hero-canvas { display: none; }
  body { background: white; color: black; }
  .section { padding: 20px 0; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  .hero-bg { background-attachment: scroll; }
}

/* ===== HIGH CONTRAST / FORCED COLORS ===== */
@media (forced-colors: active) {
  .btn-gold, .btn-outline-gold {
    border: 2px solid ButtonText;
  }
}