/* ==========================================================================
   LEGAL PAGES: Privacy, Terms, SMS Terms
   Loaded only on pages whose meta sets "legal": true (bin/build-pages.mjs).

   A hero with a photograph beside it; "On this page" held in view on the
   left, with a marker that slides down a rule to the section being read; the
   text on the right at a reading measure; a thin bar along the top of the
   window showing how far down the reader is.

   Colour comes only from the tokens in styles.css, so a palette that
   redefines them reaches these pages without a second sheet.
   ========================================================================== */

/* ---------- Hero ---------- */
.legal-hero{
  overflow:hidden;
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2.6rem,5vw,3.8rem);
}
.legal-hero-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.legal-hero .page-title{ max-width:16ch; }
.legal-hero .page-lede{ color:var(--text); }
.legal-summary{
  color:var(--muted); font-size:1rem; line-height:1.65; max-width:58ch; margin:1rem 0 0;
}
.legal-date{
  display:flex; align-items:center; gap:.75rem;
  color:var(--muted-2); font-size:1rem; margin:1.1rem 0 0;
}
.legal-date::before{
  content:""; flex:none; width:2rem; height:1px; background:var(--line-strong);
}
.legal-date time{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* The photograph sits in the same frame as the site's featured cards: a
   panel edge, a soft drop, and the chrome lip along the top. */
.legal-photo{
  position:relative; margin:0; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow-sm);
}
.legal-photo::after{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:var(--chrome); opacity:.85;
}
.legal-photo picture{ display:block; width:100%; height:100%; }
.legal-photo img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:960px){
  .legal-hero-grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
  .legal-photo{ aspect-ratio:4/3; }
}

/* ---------- Document ---------- */
.legal-doc{ padding-block:clamp(2.4rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem); }
.legal-layout{ display:grid; gap:2rem; }
.legal-body{ min-width:0; max-width:40rem; }

/* The column sets the measure (40rem, about 70 characters), not each
   paragraph's own cap. */
.legal-body .lede,
.legal-body .note{ max-width:none; }
.legal-body .fine{ font-size:1rem; margin:1.6rem 0 0; }
.legal-body .check-list + p,
.legal-body ol + p{ margin-top:1.3rem; }
.legal-body p:last-child{ margin-bottom:0; }

.legal-section{ padding-block:clamp(2.1rem,4vw,2.8rem); border-top:1px solid var(--line); }
.legal-section:first-child{ padding-top:0; border-top:0; }
.legal-section:last-child{ padding-bottom:0; }
.legal-section > h2{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.55rem,1.15rem + 1.3vw,2.1rem); line-height:1.1;
  color:var(--text); margin:0 0 1.1rem;
  /* Added to the root's scroll-padding (which clears the 72px header), so a
     heading reached from the contents lands with air above it. */
  scroll-margin-top:1.5rem;
}

/* SMS Terms keeps the closing booking band; a rule marks where the document
   ends and the invitation begins. */
.legal-doc + .cta{ border-top:1px solid var(--line); }

/* ---------- On this page ---------- */
.legal-contents-title{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.1rem; line-height:1.2; color:var(--text);
  margin:0 0 .9rem;
}
.legal-contents ol{ list-style:none; margin:0; padding:0; display:grid; }
/* .legal-doc is also a .section, whose body links are ice; the contents are
   navigation, so they start quiet and light up where the reader is. */
.legal-doc .legal-contents a{
  display:block; padding:.45rem 0; color:var(--muted); text-decoration:none;
  font-size:1rem; line-height:1.4;
}
.legal-doc .legal-contents a:hover{ color:var(--text); }

/* Phone and tablet: a plain list above the text, no marker. */
@media (max-width:959.98px){
  .legal-contents{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.2rem 1.35rem .9rem;
  }
  .legal-contents li + li{ border-top:1px solid var(--line); }
  .legal-doc .legal-contents a{ padding:.6rem 0; }
  .legal-contents-marker{ display:none; }
}

/* Desktop: held in view on the left, with the marker on the rule. */
@media (min-width:960px){
  .legal-layout{
    grid-template-columns:15rem minmax(0,40rem);
    gap:clamp(3rem,6vw,5.5rem); align-items:start;
  }
  .legal-contents{
    position:sticky; top:calc(72px + 1.75rem);
    max-height:calc(100vh - 72px - 3.5rem); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .legal-contents-track{ position:relative; padding-left:1.25rem; }
  .legal-contents-track::before{
    content:""; position:absolute; left:1px; top:0; bottom:0; width:1px;
    background:var(--line-strong);
  }
  .legal-contents-marker{
    position:absolute; left:.5px; top:0; width:2px; height:0; border-radius:2px;
    background:var(--ice);
    transition:transform .45s cubic-bezier(.16,1,.3,1);
  }
  .legal-doc .legal-contents a{
    transition:color .2s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .legal-doc .legal-contents a:hover{ transform:translateX(3px); }
  .legal-doc .legal-contents a[aria-current]{ color:var(--text); font-weight:600; }
}

/* ---------- Reading bar ---------- */
.legal-progress{ display:none; }
@supports (animation-timeline: scroll()){
  .legal-progress{
    display:block; position:fixed; top:0; left:0; right:0; z-index:110;
    height:3px; pointer-events:none;
    background:var(--chrome); transform-origin:0 50%; transform:scaleX(0);
    animation:legal-read linear both;
    animation-timeline:scroll(root);
  }
}
@keyframes legal-read{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- Reduced motion: no bar, and the marker jumps ---------- */
@media (prefers-reduced-motion:reduce){
  .legal-progress{ display:none !important; }
  .legal-contents-marker,
  .legal-doc .legal-contents a{ transition:none !important; }
  .legal-doc .legal-contents a:hover{ transform:none; }
}

@media print{
  .legal-progress, .legal-contents, .legal-photo{ display:none !important; }
  .legal-layout{ display:block; }
}