/* =====================================================================
   responsive.css: phone / narrow-screen overrides
   ---------------------------------------------------------------------
   Load this LAST: it overrides rules from the other files, so it
   has to come after them.
     960–1199px  tablets in landscape: desktop layout with tighter padding.
     <= 959px  hide the desktop rail and show the phone top bar and the
               position dots, then stack the venue in one column;
               PT / EN gets a soft background on the landing and, in
               the site, moves into the top bar next to the monogram.
     <= 600px  stretch the landing date photos across small phones.
   It also turns off animations for people who ask for reduced motion.
   ===================================================================== */


@media (max-width: 959px) {
  .rail { display: none; }
  .content { margin-left: 0; }

  /* sticky, not fixed: iOS Safari can leave fixed bars stranded mid-screen
     after the keyboard closes. Sticky stays in the page flow, so it can't. */
  .topbar {
    position: sticky; top: 0; height: var(--topbar-h); z-index: 10;
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
    background: var(--ivory); border-bottom: 1px solid var(--line);
  }
  .topbar__monogram { width: 44px; height: 44px; }
  .topbar__current { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }

  .dots {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 10;
    display: flex; flex-direction: column; gap: 8px;
  }
  .dots a { width: 12px; height: 28px; display: grid; place-items: center; }
  .dots a::before {
    content: ""; width: 2px; height: 8px; border-radius: 1px;
    background: rgba(110, 106, 96, .4); transition: height .25s, background-color .25s;
  }
  .dots a.is-active::before { height: 24px; background: var(--olive); }

  section[id] { scroll-margin-top: var(--topbar-h); }

  .welcome { min-height: 60svh; padding: 40px 20px; }
  .welcome__text { font-size: 16px; }

  .venue {
    min-height: 0; padding: 48px 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "header" "photo" "map" "address";
    row-gap: 28px;
  }
  .venue__title { font-size: 42px; }
  .venue__photo { min-height: 0; aspect-ratio: 342 / 240; }
  .map { height: 200px; }

  .questionnaire { padding: 48px 20px; }
  .section-title { font-size: 40px; }
  .form { gap: 20px; }

  /* PT / EN floats over the content here, so give it a soft ivory pill */
  .lang {
    left: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 0 4px; border-radius: 999px; background: rgba(244, 239, 230, .9);
  }
  /* Inside the site, PT / EN lives in the top bar next to the monogram
     (partials/site/topbar.html), so hide the floating one there */
  .site:not([hidden]) ~ .lang, .opening-site .site ~ .lang { display: none; }
  .topbar__lang { margin-right: auto; margin-left: 6px; }
  .topbar__lang .lang { position: static; padding: 0; background: none; }
}

@media (max-width: 650px) {
  .date-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .date-photos .photo { aspect-ratio: 3 / 4; }
  .date-photos__num { font-size: 30px; right: 8px; bottom: 6px; }
  .photo__label { font-size: 10px; letter-spacing: .14em; }
  .landing { gap: 28px; padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}