/* Mobile-first base lives in styles.css; this file layers on the deliberate
   desktop composition rather than mechanically shrinking it.

   Desktop spine: --line-x switches from a left-edge offset to a fixed
   fraction of the 1120px content canvas. Every paired section (welcome,
   venue, dress code + details) and every programme row share the exact same
   3-column grid ratio (1fr / auto / 1.2fr), so the "auto" anchor column
   always lands at the same x. js/route.js reads the real rendered position
   of every anchor and draws the connecting path/dots from that — there is
   no separate desktop path to keep in sync with this ratio. */

@media (min-width: 860px) {
  :root {
    --line-x: 46%;
  }

  body { font-size: 16px; line-height: 1.55; }

  /* ===== Hero: balanced two-column composition ===== */
  .hero {
    padding: 64px 48px 24px;
    display: flex;
    align-items: flex-start;
    gap: 4%;
    text-align: left;
  }
  .hero__art { flex: 0 0 48%; justify-content: flex-start; }
  .hero__couple { width: 100%; max-width: 480px; }

  .hero__content { flex: 0 0 48%; margin-top: 8px; }

  /* Desktop's two-column layout doesn't have the mobile crossing problem,
     so this anchor just needs to stay out of the flex row (it would
     otherwise become a third flex item and get squeezed to zero width). */
  /* left/top are set dynamically in js/route.js from the couple wrapper's
     own live rect (.hero-couple), not fixed here — see positionHeroRouteEnd. */
  .hero__route-end { position: absolute; margin: 0; }

  .hero__title-art { max-width: 520px; margin: 0; }
  .rings-divider { justify-content: flex-start; margin: 20px 0 20px; }
  .rings-divider__rule { flex: 1 1 auto; max-width: 130px; }
  .hero__names { font-size: clamp(2.6rem, 4vw, 3.6rem); }
  .hero__date { font-size: 1.5rem; margin-bottom: 22px; }

  .countdown { align-items: flex-start; }
  .countdown__grid { justify-content: flex-start; }
  .countdown__value { font-size: 1.9rem; }
  .countdown__unit-label { font-size: 0.82rem; }

  /* ===== Shared 3-column spine grid ===== */
  .split-row {
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
    column-gap: 44px;
    align-items: start;
  }
  .split-row__node { position: static; }
  .split-row__side--b { margin-top: 0; }
  .split-row__node--venue { margin-top: 30px; }
  .split-row__node--pair { margin-top: -15px; }

  /* .section is the direct parent of every welcome/programme/venue/
     dresscode+details block. On mobile these rely on --line-x/padding for
     their left gutter, but on desktop nothing capped their width, so the
     grid spanned the full viewport and left-column text landed almost at
     x=0. Centering the shared parent (instead of each section's own
     content) keeps every section's left edge on the same column without
     per-section offsets. */
  .section {
    padding-top: var(--section-space-desktop);
    width: min(var(--content-width), calc(100% - 64px));
    margin-inline: auto;
  }

  .section__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 1;
    margin-bottom: 22px;
  }
  .section__text { font-size: 1rem; line-height: 1.55; }

  /* ===== Welcome + Tbilisi panorama ===== */
  .welcome__art img { max-width: 620px; }

  /* ===== Programme: compact rows sharing the spine grid ===== */
  .programme__heading {
    padding-left: 0;
    padding-right: 0;
  }
  .timeline {
    padding-left: 0;
    padding-right: 0;
    margin-top: 24px;
    gap: 14px;
  }
  .timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
    column-gap: 44px;
    align-items: center;
    min-height: 84px;
  }
  .timeline__meta { grid-column: 1; justify-self: end; gap: 14px; }
  .timeline__node { position: static; grid-column: 2; justify-self: center; }
  .timeline__body { grid-column: 3; justify-self: start; text-align: left; }
  .timeline__icon { width: 36px; height: 36px; }
  .timeline__time { font-size: 1.125rem; font-weight: 600; }
  .timeline__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 3px; }
  .timeline__desc { max-width: 42ch; }

  /* ===== Venue ===== */
  .venue__art img { max-width: 620px; }

  /* ===== Dress code + Details ===== */
  .moments { margin-top: 22px; gap: 22px; }
  .moments__icon { width: 36px; height: 36px; }

  /* ===== Closing: compact, phrase on one line, spine flows into the rings ===== */
  .closing {
    padding: 24px 48px 10px;
    max-width: 960px;
  }
  .icon--rings-closing { width: 64px; height: 38px; }
  .closing__lead {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    max-width: 46ch;
    margin: 18px auto 24px;
    white-space: normal;
  }
  .closing__names { font-size: clamp(2.2rem, 3vw, 2.8rem); }
  .closing__postscript { width: 215px; margin-top: 0; }
}

@media (min-width: 860px) and (max-width: 1200px) {
  .closing__lead { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
}