/* ==========================================================================
   RESPONSIVE.CSS
   Breakpoints:
     - Tablet : max-width 1024px
     - Phone  : max-width 640px
   Mobile order required by the brief: Photo -> Title -> Countdown -> Button
   Achieved with flex order values on the split layout.
   ========================================================================== */

/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
  .landing-left { flex: 0 0 42%; padding: 6vw 4vw; }
  .landing-right { flex: 0 0 58%; padding: 6vw 6vw 6vw 3vw; }

  .hero-title { font-size: clamp(2.4rem, 5.4vw, 3.8rem); }
  .polaroid { max-width: 380px; }
}

/* ---------- PHONE ---------- */
@media (max-width: 640px) {
  .landing::after { display: none; }

  .landing {
    flex-direction: column;
    min-height: auto;
  }

  .landing-left,
  .landing-right {
    flex: 1 1 auto;
    width: 100%;
  }

  .landing-left {
    order: 1;
    padding: 12vw 8vw 8vw;
    background: var(--color-paper-alt);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .landing-right {
    order: 2;
    padding: 10vw 8vw 14vw;
  }

  .landing-right-inner { max-width: 100%; }

  .polaroid-wrap { transform: rotate(-3deg); }
  .polaroid { max-width: 320px; padding: 18px 18px 60px; margin: 0 auto; }

  .hero-title { font-size: clamp(2.3rem, 9vw, 3rem); text-align: left; }
  .hero-subtitle { font-size: 1.3rem; }
  .hero-paragraph { font-size: 0.92rem; }

  /* countdown / letter -> above the CTA, matches required mobile order */
  .countdown-block { order: 3; }
  .letter-block { order: 3; max-width: 100%; }
  .cta-block { order: 4; }
  .eyebrow, .hero-title, .hero-subtitle, .hero-paragraph { order: 0; }
  .landing-right-inner { display: flex; flex-direction: column; }

  .countdown { gap: 8px; flex-wrap: nowrap; }
  .countdown-unit { min-width: 52px; padding: 10px 4px; }
  .countdown-number { font-size: 1.2rem; }
  .countdown-divider { font-size: 1.1rem; }

  .btn-open-letter { width: 100%; justify-content: center; padding: 16px 20px; }
  .cta-block { align-items: stretch; }
  .cta-helper { text-align: center; }

  .br-desktop { display: none; }

  .popup-card { padding: 36px 26px; }

  .music-toggle { bottom: 18px; right: 18px; width: 48px; height: 48px; }

  /* the two-page hinge flip only reads correctly side-by-side; use a simple rise on phones */
  body.is-ready .landing-left,
  body.is-ready .landing-right {
    animation-name: fadeUpIn;
  }
}

/* very small phones */
@media (max-width: 360px) {
  .hero-title { font-size: 2.1rem; }
  .polaroid { max-width: 260px; }
  .countdown-unit { min-width: 44px; }
}