@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   KLETNO — podstrona: Trasy (przełącznik tras + sticky mapa GPX)
   Style TYLKO dla tej podstrony (wspólne: css/style.css)
   ═══════════════════════════════════════════════════════════════ */

.trasy-section{ background:var(--cream); }

/* ── NAGŁÓWEK + PRZEŁĄCZNIK TRAS ───────────────────────────── */
.trasy-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px 32px;
  padding:clamp(54px,8vh,92px) clamp(22px,5vw,68px) clamp(28px,4vh,44px); }
.trasy-head__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,4.4vw,3.3rem); color:var(--ink); line-height:1.04; letter-spacing:-0.01em; margin-top:.25em; }
.trasy-head__title em{ font-style:italic; color:var(--moss); }
.trasy-switch{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:999px; background:var(--cream-deep); border:1px solid var(--line); }
.trasy-switch button{ border:none; background:transparent; border-radius:999px; padding:9px 16px; font-family:var(--sans);
  font-size:12.5px; font-weight:500; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
  transition:background .4s var(--spring), color .4s var(--spring), box-shadow .4s var(--spring); }
.trasy-switch button i{ font-size:16px; }
.trasy-switch button:hover{ color:var(--ink); }
.trasy-switch button.is-active{ background:var(--ink); color:var(--cream); box-shadow:0 6px 18px rgba(19,28,22,.22); }

/* ── SPLIT: PANEL + MAPA ───────────────────────────────────── */
.trasy-split{ display:grid; grid-template-columns:minmax(0,1fr) clamp(400px,46vw,820px); align-items:start; }
.trasy-main{ padding:0 clamp(26px,3.5vw,52px) clamp(64px,9vh,120px) clamp(22px,5vw,68px); min-width:0; }
.trasy-mapcol{ position:sticky; top:0; height:100vh; min-width:0; }
.trasy-mapcol #map{ width:100%; height:100%; }
.trasy-mapcol .leaflet-top{ top:84px; }

/* ── PANEL: NAGŁÓWEK TRASY ─────────────────────────────────── */
.route__code{ display:inline-block; font-size:11px; letter-spacing:.16em; font-weight:600; color:var(--clay); border:1px solid rgba(166,94,56,.35); border-radius:999px; padding:4px 11px; margin-bottom:14px; }
.route__name{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--ink); line-height:1.08; letter-spacing:-0.01em; }
.route__stats{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.4vw,34px); margin-top:22px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.route__stat{ display:flex; align-items:center; gap:11px; }
.route__stat i{ font-size:24px; color:var(--moss); }
.route__stat b{ display:block; font-family:var(--serif); font-size:1.35rem; color:var(--ink); line-height:1; }
.route__stat span{ font-size:11px; color:var(--ink-muted); letter-spacing:.04em; text-transform:uppercase; }

/* atrybuty */
.route__attrs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-top:24px; }
.route__attr{ display:flex; align-items:flex-start; gap:11px; }
.route__attr i{ font-size:19px; color:var(--clay); margin-top:2px; flex:0 0 auto; }
.route__attr b{ display:block; font-size:12.5px; color:var(--ink); }
.route__attr span{ font-size:12.5px; color:var(--ink-soft); font-weight:300; }

/* opis + czytaj więcej */
.route__descwrap{ margin-top:24px; }
.route__desc{ font-size:14px; color:var(--ink-soft); font-weight:300; line-height:1.72; }
.route__desc.clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.route__more{ margin-top:10px; display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--moss); background:none; border:none; cursor:pointer; padding:0; }
.route__more i{ transition:transform .4s var(--spring); }
.route__more.open i{ transform:rotate(180deg); }

/* akcje: GPX + profil */
.route__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.route__gpx{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px; background:var(--ink); color:var(--cream);
  font-size:13.5px; font-weight:500; text-decoration:none; transition:transform .45s var(--spring), background .3s ease; }
.route__gpx:hover{ transform:scale(.98); background:var(--moss-deep); }
.route__gpx i{ font-size:17px; }
.route__prof-btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; background:var(--paper); color:var(--ink-soft);
  border:1px solid var(--line); font-size:13px; cursor:pointer; transition:background .3s ease; }
.route__prof-btn:hover{ background:var(--cream-deep); }
.route__prof-btn i{ font-size:16px; color:var(--moss); }

/* ── PROFIL WYSOKOŚCI ──────────────────────────────────────── */
.route__profile{ margin-top:18px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 16px 10px; display:none; }
.route__profile.show{ display:block; }
.route__profile svg{ width:100%; height:auto; display:block; }
.route__profile .pf-area{ fill:rgba(166,94,56,.14); }
.route__profile .pf-line{ fill:none; stroke:var(--clay); stroke-width:2; }
.route__profile .pf-grid{ stroke:var(--line); stroke-width:1; }
.route__profile .pf-lab{ font-family:var(--sans); font-size:11px; fill:var(--ink-muted); }
.route__proflegend{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-muted); padding:6px 2px 0; }

/* ── OŚ POI (kilometraż) ───────────────────────────────────── */
.route__poi-h{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--ink); margin:34px 0 18px; }
.poilist{ position:relative; }
.poilist::before{ content:''; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:var(--line); }
.poi{ position:relative; display:grid; grid-template-columns:40px 1fr auto; gap:16px; align-items:center; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; padding:12px 6px; border-radius:12px; transition:background .3s ease; }
.poi:hover{ background:var(--cream-deep); }
.poi.is-active{ background:var(--cream-deep); }
.poi__dot{ position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 0 0 4px var(--cream); }
.poi__dot i{ font-size:19px; }
.poi__txt b{ display:block; font-size:14px; color:var(--ink); font-weight:600; line-height:1.25; }
.poi__txt span{ font-size:12px; color:var(--ink-muted); }
.poi__km{ font-family:var(--serif); font-size:1.05rem; color:var(--clay); white-space:nowrap; }

/* pin na mapie + numer/ikona */
.pin__ic{ display:block; transform:rotate(45deg); color:#fff; font-size:14px; line-height:1; }

/* ── RESPONSYWNOŚĆ ─────────────────────────────────────────── */
@media (max-width:1200px){ .trasy-split{ grid-template-columns:minmax(0,1fr) clamp(340px,40vw,520px); } }
@media (max-width:900px){
  .trasy-split{ grid-template-columns:1fr; }
  .trasy-main{ padding-right:clamp(22px,5vw,68px); }
  .trasy-mapcol{ position:static; height:auto; }
  .trasy-mapcol #map{ height:60vh; }
  .trasy-mapcol .leaflet-top{ top:12px; }
  .route__attrs{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .trasy-head{ flex-direction:column; align-items:flex-start; }
  .route__stats{ gap:16px 22px; }
}