/* ==========================================================================
   Desktop layout — everything from 1024px up.

   The phone layout *is* the artboard, one column deep. On a laptop that column
   alone reads as a lonely strip, so from here the page opens out: a split
   hero, two-up cards, a photo grid, and a top bar instead of the tab bar.

   Every selector carries a `:root ` prefix. The theme files address many of
   these elements as `.theme-wedding .thing` (two classes); a bare `.thing`
   here would lose on specificity no matter how late it loads, and `:root`
   contributes exactly the one extra class-level unit needed to win.
   ========================================================================== */

@media (min-width: 1024px) {

  :root {
    --wide: 1180px;
    --gutter: max(4vw, calc((100% - var(--wide)) / 2));
    --nav-h: 68px;
    --measure: 620px;      /* comfortable reading width for body copy */
  }

  /* ---------------------------------------------------------------- shell */
  :root .stage { display: block; }

  :root .invite {
    width: 100%;
    max-width: none;
    box-shadow: none;
  }

  :root .section { padding: 104px var(--gutter); }

  /* the confetti tile repeats many more times across a wide page, so ease it
     back or it reads as wallpaper rather than texture */
  :root .theme-wedding { --tex-opacity: 0.1; }
  :root .theme-wedding .rsvp,
  :root .theme-wedding .wishes-read { --tex-opacity: 0.07; }
  :root .theme-sangjit { --tex-opacity: 0.1; --tex-rsvp-opacity: 0.07; }
  :root .tex::before,
  :root .theme-wedding .closing::before { background-size: 260px; }
  /* flush sections carry their own artwork edge to edge */
  :root .section--flush { padding: 0; }
  :root .theme-wedding .closing,
  :root .theme-sangjit .closing { padding: 0; }

  :root body { font-size: 17px; }

  /* ==================================================================
     Top bar — the phone tab bar, re-cast along the top edge
     ================================================================== */
  :root .navbar {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    margin-left: 0;
    height: var(--nav-h);
    justify-content: center;
    gap: clamp(10px, 2.6vw, 48px);
    padding: 0 var(--gutter);
    box-shadow: 0 2px 26px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  :root body.is-past-cover .navbar {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  :root .navbar a {
    position: relative;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 9px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    padding: 0 4px;
  }
  :root .navbar a svg { width: 16px; height: 16px; }
  :root .navbar a::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px; bottom: 15px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
  }
  :root .navbar a[aria-current='true']::after,
  :root .navbar a:hover::after { transform: scaleX(1); }

  /* three classes so it outranks `:root .navbar a` above, which would
     otherwise force this back into the flex flow */
  :root .navbar .navbar__brand {
    display: block;
    position: absolute;
    left: var(--gutter);
    top: 50%;
    translate: 0 -50%;
    width: 54px;
    height: 50px;
    background: currentColor;
    opacity: 0.9;
  }

  :root .audio-toggle {
    top: calc(var(--nav-h) + 18px);
    bottom: auto;
    right: max(18px, calc((100% - var(--wide)) / 2 - 62px));
  }
  :root .toast {
    left: 50%;
    right: auto;
    bottom: 30px;
    transform: translate(-50%, 14px);
  }
  :root .toast.is-on { transform: translate(-50%, 0); }

  /* ==================================================================
     1. Cover — the card on one side, the photograph on the other
     ================================================================== */
  :root .cover {
    display: grid;
    grid-template-columns: 0.92fr 1fr;
    grid-template-rows: 100svh;
    align-items: stretch;
    min-height: 620px;
    padding: 0;
  }

  :root .cover .cover__photo {
    position: relative;
    inset: auto;
    grid-area: 1 / 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  :root .cover .cover__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The crop window slides inside the photograph as you scroll. Because the
       image is object-fit:cover it can travel any distance without ever
       exposing an edge — no gap is possible. */
    object-position: 50% calc(var(--cover-focus, 46%) - var(--par, 0px));
  }
  /* crop-mode layers feed --par to a child instead of moving themselves */
  :root [data-parallax][data-parallax-mode='crop'] { translate: none; }

  :root .cover .cover__card,
  :root .cover .cover__inner {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  :root .cover .cover__card { width: min(74%, 424px); }
  :root .cover .cover__inner { width: min(86%, 470px); padding: 0; }

  :root .cover .cover__cue {
    grid-area: 1 / 1 / 2 / 2;
    align-self: end;
    bottom: 38px;                      /* the bar lives at the top here */
  }

  /* ==================================================================
     2. The couple
     ================================================================== */
  /* wedding — the two portraits sit side by side */
  :root .theme-wedding .couple {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    padding: 104px var(--gutter);
    align-items: start;
  }
  :root .theme-wedding .person {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(6, 18, 42, 0.4);
  }

  /* sangjit — one tall artboard whose text is pinned to the artwork, so it
     holds its designed measure. The margins are filled with the same artwork
     stretched horizontally: sized 100% x 100% it keeps every band at exactly
     the same height, so the join either side is invisible. */
  :root .theme-sangjit .couple {
    max-width: 690px;
    margin-inline: auto;
    overflow: visible;
  }
  :root .theme-sangjit .couple::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0; left: 50%;
    width: 100vw;
    translate: -50% 0;
    background: url('../img/sangjit/couple-bg.jpg') center / 100% 100% no-repeat;
    /* blurred so the stretched pattern never fights the crisp panel in front */
    filter: blur(30px) saturate(1.05);
    transform: scale(1.04);
  }
  :root .theme-sangjit .couple__bg {
    box-shadow: 0 0 70px rgba(40, 0, 14, 0.55);
  }

  /* ==================================================================
     3. Date band
     ================================================================== */
  :root .dateband__inner {
    max-width: 900px;
    margin-inline: auto;
    gap: 42px;
    padding: 42px 30px;
  }
  :root .dateband__day { font-size: 1.6rem; }
  :root .dateband__dm b { font-size: 2.6rem; }
  :root .dateband__dm span { font-size: 1.15rem; }
  :root .dateband__year { font-size: 1.75rem; }

  /* ==================================================================
     4. Events
     ================================================================== */
  :root .theme-wedding .events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
    padding: 104px var(--gutter);
  }
  :root .theme-wedding .events .countdown-wrap {
    grid-column: 1 / -1;
    margin-top: 30px;
  }
  :root .theme-wedding .event {
    margin: 0;
    padding: 44px 38px 40px;
    border-radius: 8px;
    background: rgba(255, 240, 228, 0.6);
    box-shadow: 0 16px 40px rgba(12, 42, 91, 0.1);
  }

  :root .theme-sangjit .events { padding: 104px var(--gutter); }
  :root .theme-sangjit .event {
    max-width: 660px;
    margin-inline: auto;
    padding: 48px 44px 42px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 40px rgba(106, 4, 34, 0.1);
  }

  :root .event__venue { font-size: 2.05rem; }
  :root .event__time { font-size: 1.45rem; }
  :root .event__address { font-size: 1.02rem; }
  :root .map { margin: 26px 0 22px; }

  /* the florals move out into the wide margins instead of crowding the copy */
  :root .events__deco--l { left: -1%; top: 9%; width: 13%; }
  :root .events__deco--r { right: -3%; bottom: 3%; width: 26%; }
  :root .theme-sangjit .events__deco { left: -12%; top: 16%; width: 52%; }

  /* ==================================================================
     5. RSVP
     ================================================================== */
  :root .rsvp { padding: 96px var(--gutter) 110px; }
  :root .rsvp .rule,
  :root .rsvp .form { max-width: var(--measure); margin-inline: auto; }
  :root .rsvp__bloom { width: 23%; }
  :root .rsvp__bloom--l { left: 1%; bottom: -2%; }
  :root .rsvp__bloom--r { right: 1%; bottom: -2%; }
  :root .rsvp .field__label { font-size: 3.2rem; }
  :root .rsvp__deadline { font-size: 1.1rem; }
  :root .choices--grid { gap: 12px; }
  :root .choices--grid .choice span { font-size: 1.02rem; padding: 11px 10px; }
  :root .choices--grid.choices--three .choice span { font-size: 0.96rem; }

  /* ==================================================================
     6. Gift
     ================================================================== */
  :root .gift { padding: 100px var(--gutter); }
  :root .gift > *:not(.deco) { max-width: var(--measure); margin-inline: auto; }
  :root .gift__note { font-size: 1.05rem; }
  :root .account__number { font-size: 1.72rem; }
  :root .theme-wedding .gift__bloom--l { left: 1%; top: 6%; width: 15%; }
  :root .theme-sangjit .gift__bloom--l { left: 0; top: 4%; width: 17%; }
  :root .theme-sangjit .gift__bloom--r { right: 0; bottom: 2%; width: 19%; }

  /* ==================================================================
     7. Wishes
     ================================================================== */
  :root .theme-wedding .wishes-write { padding: 92px var(--gutter) 84px; }
  :root .wishes-write > *:not(.deco) { max-width: 660px; margin-inline: auto; }
  :root .wishes__title img { height: 62px; }
  :root .wishes__bloom { left: 2%; bottom: -6%; width: 16%; }

  :root .theme-wedding .wishes-read { padding: 82px var(--gutter) 96px; }
  :root .wishes-read__bloom { right: 2%; top: 8%; width: 15%; }
  :root .wishes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 52px;
    max-height: none;
    overflow: visible;
    align-content: start;
  }
  :root .wishes__empty { grid-column: 1 / -1; }

  /* ==================================================================
     8. Gallery
     ================================================================== */
  :root .theme-wedding .gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
  }
  :root .theme-wedding .gallery__item img {
    width: 100%;
    height: 100%;
    min-height: 46svh;
    object-fit: cover;
  }
  :root .theme-sangjit .gallery { padding: 0; }
  :root .theme-sangjit .gallery__item img { height: 74svh; min-height: 420px; object-fit: cover; }

  /* ==================================================================
     9. Closing
     ================================================================== */
  :root .theme-wedding .closing__photo { padding: 96px 0 0; }
  :root .theme-wedding .closing__photo img { max-width: 440px; margin-inline: auto; }
  :root .closing__note {
    max-width: 660px;
    margin-inline: auto;
    font-size: 1.3rem;
    padding: 46px var(--gutter) 42px;
  }
  :root .theme-wedding .closing__bg { height: 46svh; min-height: 340px; object-fit: cover; }
  :root .closing__ty img { max-width: 320px; }

  :root .theme-sangjit .closing__inner { padding: 86px var(--gutter) 72px; }
  :root .theme-sangjit .closing__monogram { max-width: 150px; }
  :root .theme-sangjit .closing__ty img { width: auto; max-width: 340px; }
  :root .theme-sangjit .closing__photo img { height: 76svh; min-height: 420px; object-fit: cover; }

  :root .closing__foot { padding: 46px var(--gutter) 58px; font-size: 0.9rem; }
  :root .closing__monogram { width: 96px; }

  /* ==================================================================
     shared type tweaks
     ================================================================== */
  :root .field__label { font-size: 3rem; }
  :root .btn { font-size: 1.08rem; }
  :root .countdown { max-width: 430px; }
  :root .countdown b { font-size: 1.9rem; }
  :root .countdown small { font-size: 0.64rem; }
  :root .wish__name { font-size: 2.6rem; }
}

/* ------------------------------------------------------------------- wide */
@media (min-width: 1500px) {
  :root { --wide: 1280px; }
  :root .cover { grid-template-columns: 0.88fr 1fr; }
  :root .cover .cover__card { width: min(74%, 460px); }
}