/* ═══════════════════════════════════════════════
   OUR STORY — Responsive Styles (Mobile First)
   ═══════════════════════════════════════════════ */

/* ── Mobile (default) ── */

/* Show bottom nav on mobile */
@media (max-width: 768px) {
  .bottom-nav {
    display: block;
  }

  body {
    padding-bottom: 70px;
  }

  .music-player {
    top: auto;
    bottom: 80px;
    right: var(--space-sm);
    padding: 6px 12px;
  }

  .music-player__label {
    display: none;
  }

  /* Hero */
  .hero__title {
    font-size: clamp(2.2rem, 10vw, 4rem);
  }

  .hero__subtitle {
    font-size: var(--fs-body);
    padding: 0 var(--space-sm);
  }

  .hero__cta {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-small);
  }

  /* Chapters */
  .chapter {
    padding: var(--space-xl) var(--space-sm);
  }

  .chapter__title {
    font-size: clamp(1.8rem, 6vw, 3rem);
  }

  .chapter__memories {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  /* Gallery */
  .gallery__grid {
    columns: 2;
    column-gap: var(--space-sm);
  }

  .gallery__grid .memory-card {
    margin-bottom: var(--space-sm);
  }

  .gallery__filters {
    gap: 4px;
    padding: 0 var(--space-sm);
  }

  .gallery__filter-btn {
    padding: 6px 14px;
    font-size: var(--fs-tiny);
  }

  /* Film Roll */
  .film-frame {
    width: 220px;
  }

  .film-frame__image {
    height: 160px;
  }

  /* Viewer Modal */
  .viewer-modal__content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .viewer-modal__close {
    top: var(--space-sm);
    right: var(--space-sm);
  }

  .viewer-modal__image {
    max-height: 40vh;
  }

  .viewer-modal__filter-options {
    gap: 4px;
  }

  .viewer-modal__filter-btn {
    padding: 6px 10px;
  }

  /* Send Modal */
  .send-modal__content {
    width: 95%;
    padding: var(--space-lg);
    max-height: 90vh;
    overflow-y: auto;
  }

  .send-modal__recipients {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }

  .send-modal__recipient {
    padding: var(--space-sm);
  }

  /* Reasons */
  .reason-card {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .reason-card__number {
    font-size: var(--fs-h2);
    min-width: 40px;
  }

  /* Timeline */
  .timeline__event {
    padding-left: 46px;
  }

  .timeline__year {
    padding-left: 46px;
  }

  /* Open When */
  .open-when__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .open-when-card {
    height: 180px;
  }

  /* Generator */
  .generator__photos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  /* Finale */
  .finale__infinity {
    font-size: clamp(3rem, 15vw, 8rem);
  }

  /* Surprise */
  .surprise__result {
    max-width: 300px;
  }
}

/* ── Small Mobile ── */
@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(1.8rem, 9vw, 3rem);
  }

  .chapter__memories {
    grid-template-columns: 1fr;
  }

  .gallery__grid {
    columns: 1;
  }

  .open-when-card {
    height: 160px;
  }

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

  .send-modal__recipients {
    grid-template-columns: 1fr;
  }
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .gallery__grid {
    columns: 3;
  }

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

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

/* ── Desktop ── */
@media (min-width: 1025px) {
  .gallery__grid {
    columns: 4;
  }

  .chapter__memories {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Hover effects only on desktop */
  .memory-card__overlay {
    opacity: 0;
  }

  .memory-card:hover .memory-card__overlay {
    opacity: 1;
  }
}

/* ── Large Desktop ── */
@media (min-width: 1440px) {
  :root {
    font-size: 18px;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body::after {
    display: none;
  }
}

/* ── Touch devices ── */
@media (hover: none) {
  .memory-card__overlay {
    opacity: 1;
    background: linear-gradient(
      to top,
      rgba(13, 11, 12, 0.7) 0%,
      transparent 50%
    );
  }

  .memory-card__send-hint {
    display: none;
  }
}