/* randonav.app — photo-led, two trail cards, minimal chrome.
   The trail accents come from the apps themselves so a card is recognisable before it is read:
   GR20 green, TMB alpine blue. */

:root{
  --ink:#16202b; --muted:#5b6b7c; --line:#e0e6ec; --bg:#fff; --panel:#f7f9fb;
  --gr20:#2f6f4e; --tmb:#1f5f8b; --dark:#16202b;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- top bar ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;padding:18px 24px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;text-decoration:none;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.brand img{border-radius:7px}
.lang{color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:5px 13px;
  backdrop-filter:blur(6px);background:rgba(0,0,0,.18)}
.lang:hover{background:rgba(0,0,0,.35)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(78vh,660px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,18,28,.45) 0%,rgba(10,18,28,.15) 35%,rgba(10,18,28,.85) 100%)}
.hero-inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 24px 64px;width:100%}
.hero h1{font-size:clamp(32px,6vw,60px);line-height:1.08;margin:0 0 18px;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-lead{font-size:clamp(17px,2.2vw,21px);max-width:620px;margin:0 0 16px;color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-note{font-size:14px;color:rgba(255,255,255,.75);margin:0;letter-spacing:.02em}

main{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- trail cards ---------- */
.trails{display:grid;grid-template-columns:1fr;gap:34px;margin:-42px 0 0;position:relative;z-index:3}
@media(min-width:900px){.trails{grid-template-columns:1fr 1fr}}

.trail{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 8px 34px rgba(16,32,48,.14);display:flex;flex-direction:column}
.trail-photo{aspect-ratio:16/9;overflow:hidden;background:#dde5ec}
.trail-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.trail:hover .trail-photo img{transform:scale(1.04)}
.trail-body{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
.trail-where{margin:0;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.trail-gr20 .trail-where{color:var(--gr20)}
.trail-tmb .trail-where{color:var(--tmb)}
.trail h2{margin:4px 0 6px;font-size:clamp(24px,3vw,30px)}
.trail-tag{margin:0 0 14px;font-size:17px;font-weight:600;color:var(--ink)}
.trail-blurb{margin:0 0 18px;color:var(--muted)}

.trail-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 20px}
.trail-facts li{font-size:13.5px;font-weight:700;padding:6px 13px;border-radius:999px}
.trail-gr20 .trail-facts li{background:#eaf2ed;color:var(--gr20)}
.trail-tmb .trail-facts li{background:#e8f0f6;color:var(--tmb)}

.trail-why{list-style:none;padding:0;margin:0 0 24px}
.trail-why li{position:relative;padding-left:22px;margin-bottom:12px;font-size:15.5px;color:var(--muted)}
.trail-why li b{color:var(--ink);display:block;font-size:16px;margin-bottom:1px}
.trail-why li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%}
.trail-gr20 .trail-why li::before{background:var(--gr20)}
.trail-tmb .trail-why li::before{background:var(--tmb)}

.trail-ctas{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto}
.btn{display:inline-block;padding:12px 19px;border-radius:11px;text-decoration:none;
  font-weight:650;font-size:15px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn:hover{border-color:#c2cfdb}
.trail-gr20 .btn-primary{background:var(--gr20);border-color:var(--gr20);color:#fff}
.trail-tmb .btn-primary{background:var(--tmb);border-color:var(--tmb);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{color:var(--muted)}

/* ---------- shared / why ---------- */
.shared{padding:70px 0 10px}
.shared h2,.why h2,.testi h2{font-size:clamp(24px,3.2vw,32px);margin:0 0 26px}
.shared-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:640px){.shared-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.shared-grid{grid-template-columns:repeat(3,1fr)}}
.shared-grid h3{font-size:17px;margin:0 0 5px}
.shared-grid p{margin:0;color:var(--muted);font-size:15.5px}

.strip{margin:64px -24px;height:min(38vh,320px);overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover}
@media(min-width:1128px){.strip{margin-left:calc((100vw - 1080px)/-2);margin-right:calc((100vw - 1080px)/-2)}}

.why{padding:0 0 70px;max-width:720px}
.why p{color:var(--muted);margin:0}

/* ---------- endorsement stream ----------
   A seamless horizontal loop: the track holds the quotes twice and translates by exactly -50%,
   so the duplicate arrives where the original began at the moment the animation resets.
   Duration comes from --stream-duration, set per page from the number of cards, so adding a
   quote lengthens the loop instead of speeding it up.

   Pauses on hover and on keyboard focus, and prefers-reduced-motion drops it to a plain
   scrollable row — an animation nobody can stop is an accessibility problem. */
.stream{padding:8px 0 76px;overflow:hidden}
.stream h2{font-size:clamp(24px,3.2vw,32px);margin:0 0 26px}

.stream-viewport{position:relative;margin:0 -24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@media(min-width:1128px){
  .stream-viewport{margin-left:calc((100vw - 1080px)/-2);margin-right:calc((100vw - 1080px)/-2)}
}

/* Spacing is a per-card margin, not a flex gap — see the note in tools/gen-home.js.
   No horizontal padding either: translateX(-50%) resolves against the border box, so any
   left padding puts the halfway point half-a-padding away from one full period and the loop
   jumps by that much every cycle. The edge mask supplies the visual inset instead. */
.stream-track{display:flex;width:max-content;padding:4px 0;
  animation:stream-slide var(--stream-duration,40s) linear infinite}
.stream-track:hover,.stream-track:focus-within{animation-play-state:paused}
@keyframes stream-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.tq{flex:0 0 340px;margin:0 20px 0 0;background:var(--panel);border-radius:16px;padding:26px 24px 22px;
  display:flex;flex-direction:column}
.tq blockquote{margin:0 0 16px;font-size:16.5px;line-height:1.6;position:relative;flex:1}
.tq blockquote::before{content:"\201C";position:absolute;left:-4px;top:-20px;
  font-size:52px;line-height:1;color:var(--line)}
.tq figcaption{font-size:14px;font-weight:700}
.tq figcaption span{display:block;font-weight:400;color:var(--muted);margin-top:2px}

/* too few cards to loop convincingly — centre them and stand still */
.stream-static .stream-viewport{-webkit-mask-image:none;mask-image:none;margin:0}
.stream-static .stream-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:20px;padding:4px 0}
.stream-static .tq{flex:1 1 300px;max-width:380px;margin:0}

@media(prefers-reduced-motion:reduce){
  .stream-track{animation:none;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  .stream-track>[aria-hidden="true"]{display:none}
  .tq{scroll-snap-align:start}
  .stream-viewport{-webkit-mask-image:none;mask-image:none}
}

/* ---------- footer ---------- */
footer{background:var(--dark);color:rgba(255,255,255,.72);padding:30px 24px;text-align:center}
footer a{color:#fff;text-decoration:none;font-weight:650}
footer a:hover{text-decoration:underline}
footer p{margin:0 0 9px}
footer .small{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5);max-width:720px;margin:0 auto}