/* ============================================================
   responsive.css — mobile-first breakpoints & device tuning
   ============================================================ */

/* ---------- Small phones (<= 380px) ---------- */
@media (max-width: 380px) {
  .container, .container--narrow { width: min(100% - 1.75rem, var(--container)); }
  .hero__names { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  .countdown__grid { gap: .45rem; }
  .countdown__cell { padding: .85rem .3rem; border-radius: 12px; }
  .btn { padding: .7rem 1.4rem; letter-spacing: .12em; }
  .fab__label { display: none; }
  .fab { padding: 0; width: 52px; justify-content: center; }
}

/* ---------- Large phones / small tablets (>= 480px) ---------- */
@media (min-width: 480px) {
  .hero__actions { gap: 1rem; }
  .rsvp__submit { width: auto; justify-self: center; min-width: 240px; }
}

/* ---------- Tablets (>= 700px) ---------- */
@media (min-width: 700px) {
  .scratch-card__content { padding: clamp(3rem, 5vw, 4.25rem) clamp(3rem, 7vw, 5rem); }

  /* Alternating timeline on wider screens */
  .timeline__list::before { left: 50%; transform: translateX(-.5px); }
  .timeline__item {
    width: 50%;
    padding: 0 3.25rem 3rem 0;
    text-align: right;
    margin-left: 50%;
  }
  .timeline__item:nth-child(even) {
    margin-left: 0;
    padding: 0 0 3rem 3.25rem;
    text-align: left;
  }
  .timeline__item:last-child { padding-bottom: 0; }
  .timeline__dot { left: auto; right: -8px; top: 4px; }
  .timeline__item:nth-child(even) .timeline__dot { left: -8px; right: auto; }
}

/* ---------- Laptops & desktop (>= 980px) ---------- */
@media (min-width: 980px) {
  .hero { padding-top: clamp(4rem, 7vw, 5.5rem); }
  .hero__figure { margin-bottom: 2.5rem; }

  .venues__grid { grid-template-columns: repeat(2, 1fr); }
  .pre-wedding__grid { grid-template-columns: repeat(3, 1fr); }
  .dress-code__grid { grid-template-columns: repeat(3, 1fr); }

  /* Gentle parallax affordance on desktop only */
  .hero__figure { will-change: transform; }
}

/* ---------- Short viewports (landscape phones) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 3rem; padding-bottom: 3rem; }
  .hero__image-frame { width: 150px; }
  .entrance__card { padding: 1.4rem 1.25rem; }
  .entrance__names { font-size: 2.1rem; }
  .entrance__hint { display: none; }
  .scroll-indicator { display: none; }
}

/* ---------- Safe-area / notched devices ---------- */
@supports (padding: max(0px)) {
  .section { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .floating-controls { bottom: calc(1.25rem + max(0px, var(--safe-bottom))); }
}

/* ---------- Print ---------- */
@media print {
  .entrance, .floating-controls, .scroll-indicator, .scratch-card__canvas,
  .hero__petals, .skip-link { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; }
}