/* ==========================================================================
   Responsive — mobile-first base lives in the other files.
   Breakpoints: 560 (large phone landscape) · 768 (tablet) · 1024 · 1440
   ========================================================================== */

@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

@media (min-width: 560px) {
  .rsvp__choice { grid-template-columns: 1fr 1fr; }
  .choice span { height: 100%; }
}

@media (min-width: 640px) {
  .ticket-actions { grid-template-columns: auto auto; justify-content: center; column-gap: 16px; }
  .ticket-actions__hint { grid-column: 1 / -1; }
  .board { grid-template-columns: repeat(4, auto); justify-content: space-between; padding: 18px 22px; }
}

@media (min-width: 860px) {
  .ticket {
    --stub: 236px;
    --cut-a: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent var(--notch), #000 calc(var(--notch) + .5px));
    --cut-b: radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent var(--notch), #000 calc(var(--notch) + .5px));
    grid-template-columns: 62px 1fr var(--stub);
  }
  .ticket__band { writing-mode: vertical-rl; rotate: 180deg; font-size: 1.55rem; letter-spacing: .3em; }
  .ticket__main { grid-template-columns: 1.2fr .8fr; grid-template-areas: "top top" "welcome aside" "reception aside" "grid aside"; column-gap: 26px; padding: 26px 30px 26px 34px; }
  .ticket__top { grid-area: top; display: block; }
  .ticket__title { margin-top: 0; padding-right: 230px; }
  .ticket__postmark { position: absolute; top: -6px; right: 0; }
  .ticket__waves { width: 110px; height: 52px; margin-right: -14px; }
  .ticket__stamp { width: 118px; height: 118px; }
  .ticket__welcome { grid-area: welcome; }
  .ticket__reception { grid-area: reception; }
  .ticket__grid { grid-area: grid; }
  .ticket__aside { grid-area: aside; align-self: stretch; margin-top: 0; align-content: end; }
  .ticket__trail { width: 190px; height: 95px; margin: 0 auto 6px 0; }
  .ticket__stub { height: auto; grid-template-columns: 1fr; grid-template-areas: "date" "rsvp" "qr" "scan"; row-gap: 14px; justify-items: center; padding: 26px 22px; border-top: 0; border-left: 2px dashed rgba(118, 80, 47, .4); }
  .ticket__qr { width: 150px; height: 150px; }
  .ticket__rsvp { width: 100%; font-size: 2.6rem; }
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
  .topbar { height: 72px; }
  .topbar__mark { font-size: 1.05rem; }

  .envelope { width: 440px; }
  .envelope__names { font-size: 2.6rem; }
  .envelope__caption { font-size: .7rem; }
  .envelope__letter-title { font-size: 2.6rem; }
  .wax-seal { width: 70px; height: 70px; font-size: 1.1rem; }

  .passport { width: 340px; }
  .hero__map { background-size: 120% auto; opacity: .06; }
  .hero__compass { width: 320px; height: 320px; left: 4%; }
  .corner-compass { width: 72px; height: 72px; top: 28px; left: 28px; }

  .letter { grid-template-columns: 1.1fr .9fr; align-items: center; column-gap: 60px; }
  .letter__photo { justify-self: end; }
  .signature { grid-column: 1 / -1; }

  .couple { gap: 30px; max-width: 760px; margin-inline: auto; }
  .families { max-width: 760px; margin-inline: auto; gap: 24px; }

  .route { max-width: 720px; margin-inline: auto; gap: 56px; }
  .milestone { grid-template-columns: 1fr 42%; gap: 40px; padding-left: 44px; }
  .milestone__title { font-size: 1.6rem; }
  .route__end { max-width: 720px; margin-inline: auto; }

  .std { grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; column-gap: 40px; }
  .std .section-head { grid-column: 1 / -1; }
  .std .date-card { grid-row: 2 / span 2; }
  .date-card { width: 380px; }

  .info { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .gallery { columns: 3; column-gap: 14px; }
  .gallery li { margin-bottom: 14px; }
  .btn-stack { grid-template-columns: 1fr 1fr; max-width: 560px; }
}

@media (min-width: 1024px) {
  .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; translate: 0 -50%; }
  .lightbox__prev { left: 28px; }
  .lightbox__next { right: 28px; }
  .lightbox__figure { padding: 60px 110px; }
  .gallery li:first-child img { aspect-ratio: 21 / 9; }
}

@media (min-width: 1440px) {
  :root { --max: 1180px; }
}

@media (hover: none) {
  .gallery button:hover img { transform: none; }
}