/* =========================================================================
   responsive.css — breakpoints from small mobile up to large desktop
   Base styles in style.css target comfortable defaults; this file adapts
   them across: small mobile · large mobile · tablet · laptop · desktop
   ========================================================================= */

/* ---------- Large desktop: a touch more air ---------- */
@media (min-width: 1600px) {
  :root { --narrow: 820px; }
  .hero__invite { max-width: 46ch; margin-inline: auto; }
}

/* ---------- Laptop ---------- */
@media (max-width: 1180px) {
  .venue__grid { gap: clamp(1.6rem, 4vw, 3rem); }
}

/* ---------- Tablet / small laptop: timeline goes two-sided ---------- */
@media (min-width: 900px) {
  .timeline {
    max-width: 880px;
    margin-inline: auto;
  }
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline__day {
    padding-left: 0;
    text-align: center;
  }
  .timeline__item {
    width: 50%;
    padding-left: 0;
    padding-right: 58px;
  }
  .timeline__item:nth-of-type(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 58px;
  }
  .timeline__node {
    left: auto;
    right: -24px;
  }
  .timeline__item:nth-of-type(even) .timeline__node {
    left: -24px;
    right: auto;
  }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 900px) {
  .venue__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.2rem, 7vw, 3rem);
  }
  .venue__body { text-align: center; }
  .venue__ornament { text-align: center; }
  .venue__media::after {
    inset: 10px -10px -10px 10px;
  }
}

/* ---------- Events: stack below tablet landscape ---------- */
@media (max-width: 820px) {
  .events__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 640px) {
  :root {
    --section-y: clamp(3.6rem, 12vw, 5rem);
  }

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

  .section--cream::after { inset: 8px; }

  .hero {
    min-height: 100svh;
    padding-inline: clamp(1rem, 6vw, 1.5rem);
  }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; min-width: min(100%, 15rem); }

  .entrance__card { width: min(88vw, 400px); }

  .invitation__card::before,
  .info__card::before { inset: 10px; }

  .venue__media::after { display: none; }

  .closing__actions .btn,
  .hero__actions .btn { width: 100%; }
  .closing__actions { width: 100%; max-width: 22rem; }

  .rsvp__card { padding-inline: clamp(1.15rem, 5vw, 1.7rem); }
}

/* ---------- Small / short phones: hero must stay clear of the scroll cue
     (the invitation copy + two CTAs can otherwise touch the cue) ---------- */
@media (max-width: 640px) and (max-height: 700px) {
  .hero { padding-block: clamp(2.6rem, 6vh, 3.4rem); }
  .hero__eyebrow { margin-bottom: .55rem; }
  .hero__names { font-size: clamp(2.9rem, 13.5vw, 3.9rem); }
  .hero__ornament { margin: .5rem auto; }
  .hero__invite { font-size: clamp(.98rem, 3.2vw, 1.12rem); line-height: 1.5; }
  .hero__meta { margin-top: .7rem; font-size: clamp(.92rem, 2.9vw, 1.05rem); }
  .hero__place { margin-top: .45rem; }
  .hero__actions { margin-top: 1rem; gap: .55rem; }

  .scroll-cue { gap: .3rem; }
  .scroll-cue__line { height: 26px; }
  .scroll-cue__text { font-size: .55rem; }
}

/* ---------- Countdown: 2×2 on phones ---------- */
@media (max-width: 560px) {
  .countdown__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
  }
  .countdown__unit { padding: 1rem .4rem; }

  .scratch__card { aspect-ratio: 4 / 3; }

  .timeline::before { left: 24px; }
  .timeline__day,
  .timeline__item { padding-left: 58px; }
  .timeline__node {
    width: 42px; height: 42px;
    left: 3px;
  }
  .timeline__node .icon { width: 18px; height: 18px; }

  .btn {
    letter-spacing: .16em;
    padding-inline: 1.5em;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .entrance__kicker { letter-spacing: .2em; }
  .entrance__tap { padding: .8em 1.6em; }
  .entrance__tap-text { letter-spacing: .2em; }
  .countdown__value { font-size: clamp(1.9rem, 11vw, 2.4rem); }
  .fab { width: 44px; height: 44px; }
}

/* ---------- Short viewports (landscape phones) — never crop entrance --- */
@media (max-height: 620px) {
  .entrance__ribbon { height: clamp(28px, 6vh, 54px); }
  .entrance__bow { width: clamp(92px, 16vh, 130px); }
  .entrance__card {
    gap: .3em;
    padding-top: clamp(.9rem, 3vh, 1.3rem);
    padding-bottom: clamp(.8rem, 3vh, 1.2rem);
  }
  .entrance__names { font-size: clamp(2rem, 9vh, 2.7rem); }
  .entrance__request { display: none; }
  .entrance__kicker { font-size: .58rem; }
}

@media (max-height: 460px) {
  .entrance__date { display: none; }
  .scroll-cue { display: none; }
}

/* ---------- Touch devices: avoid stuck hover states ---------- */
@media (hover: none) {
  .dress__card:hover,
  .event-card:hover,
  .timeline__card:hover,
  .btn--gold:hover,
  .btn--teal:hover {
    transform: none;
    box-shadow: none;
  }
  .dress__card:active,
  .event-card:active,
  .timeline__card:active {
    transform: scale(.99);
  }
  .fab { opacity: 1; transform: none; }
}

/* ---------- Larger phones in landscape: two columns ---------- */
@media (min-width: 561px) and (max-width: 820px) and (orientation: landscape) {
  .dress__grid { grid-template-columns: repeat(2, 1fr); }
}