/* GPX-routes: bouwt verder op events/events.css (hero, filters, kaarten). */
.gpx-hero h1{margin-bottom:22px}
.gpx-stats{display:flex;gap:38px;margin:30px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.gpx-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.gpx-stats dt{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.gpx-stats dd{margin:0;font-family:var(--heading);font-size:40px;font-weight:600;letter-spacing:-1.5px;color:#f3f1ef}

.gpx-hero-art{position:relative;min-height:410px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 30% 20%,#3a2f36 0,#262327 60%,var(--bg) 100%)}
.gpx-hero-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px}
.gpx-hero-art svg{position:absolute;left:12%;top:13%;width:76%;height:70%;overflow:visible}
.gpx-hero-art path{fill:none;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gpx-hero-art .art-0{stroke:var(--gold);stroke-width:3}
.gpx-hero-art .art-1{stroke:var(--accent);stroke-width:2.4;opacity:.85}
.gpx-hero-art .art-2{stroke:var(--ink);stroke-width:1.6;opacity:.45}
.gpx-hero-art .art-3{stroke:var(--ink);stroke-width:1.6;opacity:.3}
.gpx-hero-art span{position:absolute;left:30px;top:28px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:2.4px}
.gpx-hero-art b{position:absolute;bottom:25px;right:28px;color:var(--ink);font-size:10px;text-transform:uppercase;letter-spacing:1.7px}

.gpx-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:34px}
.gpx-filters .event-filters{margin:0}
.gpx-distance button.is-selected,.gpx-distance button:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)}

.gpx-category{padding-top:38px;margin-top:38px;border-top:1px solid var(--line)}
.gpx-category:first-child{padding-top:0;margin-top:0;border-top:0}
.gpx-category-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.gpx-category-head h3{margin:0;font-family:var(--heading);font-size:30px;letter-spacing:-1.2px}
.gpx-category-head p{margin:0;color:var(--muted);font-size:13px}
.gpx-category-head span{margin-left:auto;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.gpx-group{margin:26px 0 12px;color:var(--accent-text);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.gpx-category-head+.gpx-group{margin-top:0}

.gpx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.gpx-card{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card);transition:transform .18s ease,border-color .18s ease}
.gpx-card:hover{transform:translateY(-3px);border-color:#9f606b}
.gpx-shape{width:118px;height:118px;padding:8px;border-radius:10px;background:#211f23;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:14px 14px}
.gpx-shape path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gpx-shape circle{fill:var(--accent);stroke:#211f23;stroke-width:1.2}
.gpx-card-body{display:flex;flex-direction:column;min-width:0}
.gpx-card h3{margin:0 0 10px;font-family:var(--heading);font-size:17px;line-height:1.25;letter-spacing:-.5px;overflow-wrap:anywhere}
.gpx-card-stats{display:flex;gap:16px;margin:0 0 14px;color:var(--muted);font-size:11px}
.gpx-card-stats b{color:#f3f1ef;font-family:var(--heading);font-size:20px;font-weight:600;letter-spacing:-.6px}
.gpx-download{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;padding:7px 13px;border:1px solid var(--accent);border-radius:999px;color:#fff;font-size:11px;font-weight:700;transition:background-color .18s ease}
.gpx-download small{color:var(--accent-text);font-size:10px;font-weight:600}
.gpx-download b{font-size:14px;font-weight:400}
.gpx-download:hover{background:var(--accent)}
.gpx-download:hover small{color:#fff}

/* Knoppen die de kaart openen zien eruit als gewone tekst of beeld. */
.gpx-open{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
h3 .gpx-open{width:100%}
h3 .gpx-open:hover{color:var(--accent-text)}
.gpx-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.gpx-view{display:inline-flex;align-items:center;min-height:36px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}
.gpx-view:hover{background:#433139;border-color:#9f606b}

/* Venster met kaart en hoogteprofiel */
.route-dialog{width:min(980px,calc(100% - 28px));max-height:calc(100vh - 28px);padding:0;border:1px solid #66535d;border-radius:14px;background:#29262b;color:#f5eef0;box-shadow:0 24px 80px rgba(0,0,0,.55);overflow-y:auto}
.route-dialog::backdrop{background:rgba(15,13,16,.77);backdrop-filter:blur(3px)}
.route-head{padding:26px 60px 8px 28px}
.route-head .label{margin:0 0 6px}
.route-head h2{margin:0;font-size:32px;letter-spacing:-1.4px;line-height:1.1}
.route-status{margin:0;padding:34px 28px;color:var(--muted)}
.route-map{height:min(52vh,420px);margin:12px 28px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#211f23}
.route-stats{display:flex;flex-wrap:wrap;gap:12px 38px;margin:0;padding:18px 28px 6px}
.route-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.route-stats dt{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.route-stats dd{margin:0;font-family:var(--heading);font-size:24px;font-weight:600;letter-spacing:-.8px;color:#f3f1ef}
.route-profile{padding:6px 28px 0}
.route-profile h3{margin:0 0 6px;color:var(--accent-text);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.route-profile svg{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;border-radius:8px}
.route-profile svg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.route-profile text{fill:#b9aeb4;font-size:11px}
.route-profile .grid{stroke:rgba(255,255,255,.09);stroke-width:1}
.route-profile .area{fill:rgba(207,76,88,.28)}
.route-profile .line{fill:none;stroke:#e8838d;stroke-width:2;stroke-linejoin:round}
.route-profile [hidden]{display:none}
.route-profile .cursor{stroke:var(--gold);stroke-width:1.5}
.route-profile .dot{fill:var(--gold);stroke:#29262b;stroke-width:2}
.route-readout{min-height:20px;margin:6px 0 0;color:#e7dde1;font-size:13px;font-weight:600}
.route-note{margin:4px 28px 0;color:var(--muted);font-size:11px}
.route-download{margin:16px 28px 26px}
.route-dialog .dialog-close{z-index:2000}
@media(max-width:650px){
  .route-dialog{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0}
  .route-head{padding:20px 54px 6px 18px}.route-head h2{font-size:25px}
  .route-map{margin:10px 18px 0;height:300px}
  .route-stats{padding:14px 18px 4px;gap:10px 26px}.route-stats dd{font-size:20px}
  .route-profile{padding:6px 12px 0}.route-note{margin-inline:18px}.route-download{margin:14px 18px 22px}
}

@media(max-width:1100px){.gpx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
  .gpx-stats{gap:26px}.gpx-stats dd{font-size:32px}
  .gpx-hero-art{min-height:285px;border-radius:15px}
  .gpx-hero-art span{left:20px;top:19px}.gpx-hero-art b{right:19px;bottom:18px;font-size:8px}
  .gpx-category-head{gap:6px 14px}.gpx-category-head h3{font-size:25px}.gpx-category-head p{width:100%;order:3}
  .gpx-grid{grid-template-columns:1fr;gap:10px}
  .gpx-card{grid-template-columns:92px 1fr;gap:14px;padding:13px}
  .gpx-shape{width:92px;height:92px}
}
@media(prefers-reduced-motion:reduce){.gpx-card,.gpx-download,.gpx-view{transition:none}}