/* ═══════════════════════════════════════════════════════
   responsive.css  –  Mobile-first Responsive Overrides
═══════════════════════════════════════════════════════ */

/* ── All widths: ensure no overflow ── */
body {
  max-width: 100vw;
  overflow-x: hidden;
}

* {
  max-width: 100%;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ════════════════════════════════════
   MOBILE BASE  (< 480px)
════════════════════════════════════ */
@media (max-width: 479px) {
  .section {
    padding: var(--sp-12) var(--sp-4);
  }

  .section-title {
    font-size: var(--fs-2xl);
  }

  .countdown-grid {
    gap: var(--sp-3);
  }

  .countdown-item {
    min-width: 60px;
  }

  .couple-photo-wrap,
  .couple-photo,
  .couple-photo-placeholder {
    width: 160px;
    height: 160px;
  }

  .closing-mono {
    font-size: var(--fs-4xl);
  }

  .events-grid {
    gap: var(--sp-5);
  }

  .event-card {
    padding: var(--sp-6);
  }

  .attend-options {
    flex-direction: column;
  }

  .attend-option {
    width: 100%;
  }
}

/* ════════════════════════════════════
   SMALL PHONES  (360px – 479px)
════════════════════════════════════ */
@media (max-width: 380px) {
  .cover-mono {
    font-size: 3rem;
  }

  .cover-names {
    font-size: 1.4rem;
  }

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

  .float-btn {
    width: 44px;
    height: 44px;
    font-size: var(--fs-base);
  }

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

/* ════════════════════════════════════
   PHABLET  (480px – 639px)
════════════════════════════════════ */
@media (min-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ════════════════════════════════════
   TABLET  (640px – 1023px)
════════════════════════════════════ */
@media (min-width: 640px) {
  .section {
    padding: var(--sp-24) var(--sp-8);
  }

  .section-sm {
    padding: var(--sp-16) var(--sp-8);
  }

  .section-title {
    font-size: var(--fs-3xl);
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
  }

  .contacts-grid {
    gap: var(--sp-5);
  }

  /* Story alternating layout already handled by component.css */
  /* Keep story-item alignment */
}

/* ════════════════════════════════════
   DESKTOP  (1024px+)
════════════════════════════════════ */
@media (min-width: 1024px) {
  .section {
    padding: var(--sp-24) var(--sp-12);
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  /* Larger event cards side by side */
  .events-grid {
    gap: var(--sp-10);
  }

  .event-card {
    padding: var(--sp-10) var(--sp-8);
  }

  /* Hero names slightly larger */
  .hero-names {
    letter-spacing: 0.02em;
  }
}

/* ════════════════════════════════════
   WIDE SCREEN  (1440px+)
════════════════════════════════════ */
@media (min-width: 1440px) {
  .section {
    max-width: 1000px;
  }

  .couple-grid {
    max-width: 900px;
  }

  .gallery-grid {
    max-width: 1100px;
  }
}

/* ════════════════════════════════════
   SAFE AREA (notch phones)
════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .floating-controls {
    bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  }

  #cover .cover-scroll-hint {
    bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
  }
}

/* ════════════════════════════════════
   PRINT
════════════════════════════════════ */
@media print {
  #loading-screen,
  #cover,
  .floating-controls,
  .scroll-progress,
  #lightbox {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  #main-content {
    opacity: 1 !important;
  }
}