/* ============ Forside.html — sidespesifikk ============ */

/* ikoner i meta-rader */
.ic{width:22px;height:22px;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- HERO ---------- */
/* Todelt: lesbar tekstkolonne til venstre, hele logoen synlig til høyre.
   Ingen overlapp på desktop => logoen kan være tydelig OG teksten skarp. */
.hero{position:relative;min-height:clamp(580px,84vh,860px);display:flex;align-items:center;
  padding-top:clamp(96px,11vh,140px);padding-bottom:clamp(48px,7vw,84px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:none}

/* logoen — eget felt til høyre, vertikalt sentrert, tydelig faded vannmerke */
.hero-emblem{position:absolute;z-index:0;right:clamp(24px,4vw,96px);top:50%;
  transform:translateY(-50%);height:auto;width:clamp(400px,47vw,680px);max-width:none;
  opacity:.55;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.14));
  -webkit-mask-image:none;mask-image:none;mix-blend-mode:normal}

/* svak scrim bak teksten — holder venstre kolonne rolig uten å fargelegge bakgrunnen */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--bg) 0%, color-mix(in srgb,var(--bg) 80%,transparent) 34%,
    transparent 58%);}

.hero-inner{position:relative;z-index:2;max-width:none;width:100%}
.hero-text{max-width:min(62%,820px)}
.hero-h{font-size:clamp(29px,3vw,42px);margin:18px 0 0;line-height:1.13;text-wrap:balance}
.hero-h em{font-style:normal;color:var(--accent)}
.hero-sub{font-size:clamp(18px,1.5vw,20.5px);color:var(--ink-2);max-width:56ch;margin:34px 0 0;line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-meta{margin-top:42px;gap:14px 40px;padding-top:24px;border-top:1px solid var(--line-soft)}

/* ---- nettbrett: stable logoen øverst som bakteppe, tekst nederst ---- */
@media(max-width:900px){
  .hero{align-items:flex-end;min-height:clamp(620px,90vh,820px);padding-top:clamp(120px,18vh,200px)}
  .hero-emblem{top:clamp(96px,16vh,150px);right:50%;transform:translateX(50%);
    width:min(78%,520px);opacity:.4}
  .hero-scrim{background:linear-gradient(0deg,
    var(--bg) 6%, var(--bg) 30%, color-mix(in srgb,var(--bg) 60%,transparent) 52%, transparent 78%);}
  .hero-text{max-width:none}
  .hero-sub{max-width:54ch}
}
@media(max-width:560px){
  .hero-emblem{width:118%;top:clamp(88px,13vh,120px);opacity:.34}
  .hero-scrim{background:linear-gradient(0deg,
    var(--bg) 8%, var(--bg) 38%, color-mix(in srgb,var(--bg) 55%,transparent) 60%, transparent 84%);}
}

a.meta-maps{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
a.meta-maps:hover{text-decoration-color:var(--accent)}

/* ---------- FEATURE (kommende tur) ---------- */
.feature{display:grid;grid-template-columns:1.02fr 1fr;overflow:hidden}
.feature-media{position:relative;border:0;border-radius:0;min-height:480px;align-items:flex-end;justify-content:flex-end}
.feature-media .ph-tag{margin:18px}
.feature-body{padding:clamp(28px,3.4vw,48px);position:relative}
.feature-title{font-size:clamp(30px,3.6vw,50px);margin:12px 0 0}
.feature-title a,.past-body h3 a{color:inherit;text-decoration:none}
.feature-title a:hover,.past-body h3 a:hover{color:var(--accent)}
.feature-lead{color:var(--ink-2);font-size:18.5px;margin:26px 0 0;max-width:48ch;line-height:1.62}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:30px 0;
  padding:26px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.feature-grid .meta-item{align-items:center;gap:13px}
.feature-grid .meta-item--full{grid-column:1/-1}
.feature-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px}
.signup{display:flex;align-items:center;gap:16px}
.signup-txt{color:var(--ink-2);font-size:16px;white-space:nowrap}
.signup-txt b{color:var(--ink);font-family:'Barlow Condensed';font-size:19px;letter-spacing:.02em}

/* ---------- TIDLIGERE TURER ---------- */
.past-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.past{overflow:hidden;display:flex;flex-direction:column}
.past-media{position:relative;overflow:hidden;border:0;border-radius:0;height:210px;align-items:flex-end}
.past-body{padding:24px}
.past-body h3{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:23px;margin:10px 0 10px;line-height:1.12}
.past-body p{color:var(--ink-2);font-size:16.5px;margin:0 0 18px;line-height:1.55}
.past-meta{font-family:'Barlow Condensed';text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;color:var(--ink-3);display:block;padding-top:14px;border-top:1px solid var(--line-soft)}
.past:hover .past-media .ph-tag{color:var(--accent)}

/* ---------- MEDLEMMER ---------- */
.mem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mem{overflow:hidden;display:flex;flex-direction:column}
.mem-avatar{position:relative;overflow:hidden;border:0;border-radius:0;aspect-ratio:5/4}
.mem-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.mem-body{padding:22px 22px 24px}
.mem-role{font-family:'Barlow Condensed';text-transform:uppercase;letter-spacing:.14em;
  font-size:13.5px;color:var(--accent);font-weight:600}
.mem-body h3{font-family:var(--font-cond);font-weight:700;font-size:22px;margin:7px 0 12px;letter-spacing:.01em}
.mem-bike{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:16px}
.mem-bike svg{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mem-cta{justify-content:center;background:
  linear-gradient(var(--panel-2),var(--panel-2)) padding-box,
  var(--panel-2);border-style:dashed;border-color:var(--line)}
.mem-cta .mem-body{display:flex;flex-direction:column;justify-content:center;height:100%}
.mem-cta h3{margin:7px 0 16px;max-width:14ch}
.mem-bike-cta{display:inline-flex;align-items:center;gap:9px;color:var(--accent);
  font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.mem-cta:hover{border-color:var(--accent)}

/* ---------- JOIN ---------- */
.join{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;overflow:hidden;position:relative}
.join::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 100% at 50% 0%, var(--accent-glow), transparent 60%)}
.join-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;display:flex;
  flex-direction:column;align-items:center}
.join-h{font-size:clamp(32px,4.6vw,58px);margin:16px 0 0;max-width:18ch}
.join p{color:var(--ink-2);font-size:18px;max-width:52ch;margin:20px 0 0}
.join .hero-cta{justify-content:center;margin-top:30px}

/* ---------- RESPONSIVT ---------- */
@media(max-width:980px){
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:300px}
  .past-grid{grid-template-columns:1fr 1fr}
  .mem-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .past-grid,.mem-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .hero-h{font-size:clamp(34px,11vw,56px)}
  .feature-foot{flex-direction:column;align-items:stretch}
  .feature-foot .btn{justify-content:center}
}

/* ---------- Bli med-knapp ---------- */
.btn-join{display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15.5px;
  padding:15px 26px;border-radius:var(--radius);border:1px solid var(--line);background:transparent;
  color:var(--ink);transition:.15s}
.btn-join:hover{border-color:var(--accent);color:var(--accent)}
.btn-join.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-join .chk{display:none}
.btn-join .lbl-on{display:none}
.btn-join.on .chk{display:inline}
.btn-join.on .lbl-on{display:inline}
.btn-join.on .lbl-off{display:none}

/* ---------- Leaflet kart ---------- */
.lun-map{position:relative;overflow:hidden;background:var(--panel-2)}

/* ---------- Rutekart (GPS-stil plassholder) ---------- */
.routemap{position:relative;overflow:hidden;background:var(--panel-2)}
.routemap .map-svg{position:absolute;inset:0;width:100%;height:100%;display:block;color:var(--ink)}
.routemap .grid{stroke:currentColor;opacity:.05;stroke-width:1}
.routemap .land{fill:currentColor;opacity:.05}
.routemap .water{fill:currentColor;opacity:.09}
.routemap .contour{fill:none;stroke:currentColor;opacity:.09;stroke-width:1.1}
.routemap .road{fill:none;stroke:currentColor;opacity:.17;stroke-width:1.6;stroke-linecap:round}
.routemap .route-case{fill:none;stroke:var(--panel);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.routemap .route{fill:none;stroke:var(--accent);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.routemap .wp{fill:var(--accent)}