/* ----------------------------------------------------------
   NikoC — Trails module (huisstijl)
---------------------------------------------------------- */
:root{
  --ink:#181B15; --ink-2:#20241D; --ink-3:#2A2F26;
  --paper:#F0EDE6; --muted:#8C9185;
  --gold:#C8A84B; --gold-d:#A88C39; --moss:#4C6B2F; --moss-l:#6B9040;
  --line:rgba(240,237,230,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:Barlow,sans-serif;font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--paper)}
img{max-width:100%;display:block}
/* Moet ná de img-regel hierboven staan: een author-regel met display:block
   overrulet de browserstandaard voor [hidden], waardoor de lightbox de
   foto én de video tegelijk toonde. */
[hidden]{display:none!important}

.tl-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.tl-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--paper);margin:0}

/* --- Top nav: nu gedeeld in /assets/css/site-header.css (.sh-nav) --- */

/* --- Map hero --- */
.tl-hero{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:8px 0 22px}
#tl-map{height:var(--mp-h,240px);background:var(--ink-2)}
.leaflet-container{font-family:Barlow,sans-serif;background:var(--ink-2)}

/* Bandhoogte en vensterstand komen uit /assets/css/map-panel.css */

/* Actieve filters — alleen zichtbaar als er écht gefilterd is */
.tl-active{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 18px;
  font-size:13px;color:var(--muted)}
.tl-active b{color:var(--gold);font-weight:500}
.tl-active .tl-active-reset{background:none;border:none;padding:0;cursor:pointer;color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.tl-active .tl-active-reset:hover{color:var(--gold)}

/* Frosted filter panel (Reunite-stijl) */
.tl-filters{position:absolute;top:14px;left:14px;z-index:800;display:flex;flex-direction:column;gap:10px;
  background:rgba(24,27,21,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(200,168,75,.28);border-radius:9px;padding:14px 16px;min-width:210px}
.tl-filters .f-title{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.tl-filters select,.tl-filters input[type=range]{width:100%}
.tl-filters select{background:var(--ink-2);color:var(--paper);border:1px solid var(--line);
  border-radius:5px;padding:7px 9px;font-family:Barlow,sans-serif;font-size:13px}
.tl-filters .f-dist{font-size:12px;color:var(--muted)}
.tl-filters input[type=range]{accent-color:var(--gold);margin-top:4px}
.tl-count{font-size:12px;color:var(--muted)}
.tl-count b{color:var(--gold);font-weight:500}

/* Frosted layer switcher */
.leaflet-control-layers{background:rgba(24,27,21,.78)!important;backdrop-filter:blur(10px);
  border:1px solid rgba(200,168,75,.28)!important;border-radius:8px!important;color:var(--paper)}
.leaflet-control-layers-expanded{padding:10px 14px;font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.06em}
.leaflet-control-layers label{color:var(--paper)}
.leaflet-control-zoom a{background:rgba(24,27,21,.82)!important;color:var(--gold)!important;
  border:1px solid rgba(200,168,75,.25)!important}
.leaflet-bar{border:none!important}

/* Branded track popup */
.tl-pop .leaflet-popup-content-wrapper{background:var(--ink-2);color:var(--paper);
  border:1px solid rgba(200,168,75,.35);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tl-pop .leaflet-popup-tip{background:var(--ink-2);border:1px solid rgba(200,168,75,.35)}
.tl-pop .leaflet-popup-content{margin:0;width:230px!important}
.tl-pop-card img{width:100%;height:120px;object-fit:cover;border-radius:7px 7px 0 0}
.tl-pop-card .b{padding:11px 13px 13px}
.tl-pop-card .t{font-family:'Playfair Display',serif;font-weight:700;font-size:15px;line-height:1.3}
.tl-pop-card .m{font-size:11.5px;color:var(--muted);margin:5px 0 9px}
.tl-pop-card .go{display:inline-block;padding:6px 13px;background:var(--gold);color:var(--ink);
  border-radius:4px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.leaflet-popup-close-button{color:var(--muted)!important}

/* --- Card grid --- */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin:26px 0 26px}
.tl-more-btn{display:block;margin:0 auto 50px;padding:11px 26px;background:var(--ink-2);
  border:1px solid rgba(200,168,75,.35);border-radius:5px;color:var(--gold);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase}
.tl-more-btn:hover{background:rgba(200,168,75,.1);border-color:var(--gold)}
.tl-card{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:transform .18s,border-color .18s;display:flex;flex-direction:column}
.tl-card:hover{transform:translateY(-3px);border-color:rgba(200,168,75,.4)}
.tl-card .ph{aspect-ratio:8/5;background:var(--ink-3);overflow:hidden}
.tl-card .ph img{width:100%;height:100%;object-fit:cover}
.tl-card .bd{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.tl-card h3{font-size:19px;line-height:1.3}
.tl-card h3 a{color:var(--paper)}
.tl-card h3 a:hover{color:var(--gold)}
.tl-card .meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted);margin-top:auto}
.tl-card .meta span{display:inline-flex;align-items:center;gap:5px}
.tl-card .meta svg{width:13px;height:13px;color:var(--gold)}
.tl-chip{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(200,168,75,.4);border-radius:99px;padding:2px 10px;width:max-content}

/* --- Detail page --- */
.tl-head{padding:26px 0 18px}
.tl-head h1{font-size:clamp(26px,4.4vw,42px);margin:6px 0 12px}
.tl-stats{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;color:var(--muted)}
.tl-stats span{display:inline-flex;align-items:center;gap:7px}
.tl-stats svg{width:15px;height:15px;color:var(--gold)}
.tl-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.tl-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:5px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.11em;text-transform:uppercase;border:1px solid rgba(200,168,75,.45);color:var(--gold)}
.tl-btn svg{width:14px;height:14px}
.tl-btn:hover{background:rgba(200,168,75,.12);color:var(--gold)}
.tl-btn.solid{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.tl-btn.solid:hover{background:var(--gold-d);color:var(--ink)}
#tl-route-map{height:min(66vh,600px)}
/* Leesblok in een kader — zelfde paneel als het hoogteprofiel, ruimer van binnen */
.tl-introbox{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;
  padding:26px 30px;margin:26px 0 6px}
/* Losse introtitel: spant over de volledige breedte, bóven de twee kolommen */
.tl-intro-h{font-size:clamp(21px,2.6vw,29px);line-height:1.25;margin:0 0 2px}
.tl-intro{font-size:16.5px;color:#CFCCC2;margin:0;
  columns:2 420px;column-gap:52px;column-rule:1px solid var(--line)}
.tl-intro-h + .tl-intro{margin-top:16px}
.tl-intro>div{break-inside:avoid-column}
/* De bovenmarge van het eerste element duwt alleen kolom 1 omlaag; kolom 2
   begint bovenaan de kolombox en kwam daardoor hoger dan de titel te staan. */
.tl-intro>:first-child{margin-top:0}
.tl-intro table.nc-tbl{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px;
  break-inside:avoid-column}
.tl-intro table.nc-tbl td{padding:9px 12px}
.tl-intro table.nc-tbl.bordered td{border:1px solid var(--line)}
.tl-intro table.nc-tbl.plain td{border:none}
.tl-intro table.nc-tbl.plain tr:nth-child(even){background:rgba(255,255,255,.02)}
.tl-intro b,.tl-intro strong{color:var(--paper);font-weight:500}
.tl-intro blockquote{margin:16px 0;padding:2px 0 2px 16px;border-left:2px solid var(--gold);
  color:var(--paper);font-style:italic;break-inside:avoid-column}
.tl-intro hr{border:none;border-top:1px solid var(--line);margin:20px 0}
.tl-intro img,.tl-intro-img{width:100%;border-radius:8px;margin:14px 0;break-inside:avoid-column}

.tl-sec{margin:40px 0}
.tl-sec .tl-label{display:block;margin-bottom:14px}

/* Elevation profile */
.tl-profile{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:18px 18px 10px}
.tl-profile svg{width:100%;height:170px;display:block}
.tl-profile .axis{font-size:10.5px;fill:var(--muted);font-family:Barlow,sans-serif}

/* Photos */
/* 360-embed: wrapper houdt elke geplakte iframe op 16:9 en in huisstijl */
.tl-360{position:relative;aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.tl-360 iframe,.tl-360 video,.tl-360 embed,.tl-360 object{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:600px){.tl-360{aspect-ratio:4/3}}

/* Draft-preview: balk bovenaan, alleen zichtbaar met admin-sessie */
.tl-draftbar{position:sticky;top:0;z-index:1200;background:var(--gold);color:var(--ink);
  text-align:center;padding:9px 14px;font-family:'Barlow Condensed',sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase}
@media print{.tl-draftbar{display:none}}

.tl-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tl-photos a{border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.tl-photos img{width:100%;height:180px;object-fit:cover;transition:transform .25s}
.tl-photos a:hover img{transform:scale(1.04)}

/* Lightbox */
.tl-lb{position:fixed;inset:0;background:rgba(12,14,10,.94);z-index:10000;display:none;
  align-items:center;justify-content:center;padding:30px}
.tl-lb.open{display:flex}
.tl-lb img{max-width:94vw;max-height:88vh;border-radius:6px}
.tl-lb .x{position:absolute;top:18px;right:22px;color:var(--paper);font-size:30px;cursor:pointer;
  background:none;border:none;line-height:1}
.tl-lb .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(24,27,21,.7);
  border:1px solid rgba(200,168,75,.35);color:var(--gold);border-radius:99px;width:44px;height:44px;
  font-size:20px;cursor:pointer}
.tl-lb .prev{left:18px}.tl-lb .next{right:18px}

/* Waypoint pins */
.tl-wp-pin{filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}

/* Trip link */
.tl-trip-link{display:inline-flex;align-items:center;gap:10px;background:var(--ink-2);
  border:1px solid rgba(200,168,75,.3);border-radius:8px;padding:10px 16px;margin-top:14px;font-size:14px}

/* Footer */
.tl-footer{border-top:1px solid var(--line);padding:30px 0 44px;margin-top:30px;
  font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between}
.tl-footer a{color:var(--muted)}
.tl-footer a:hover{color:var(--gold)}

@media (max-width:640px){
  .tl-filters{position:static;margin:0;border-radius:0;border-left:none;border-right:none;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
  .tl-filters .f-title{width:100%}
  .tl-filters select{width:auto;flex:1}
  #tl-map{height:var(--mp-h,170px)}
  .tl-introbox{padding:18px 18px}
  .tl-intro{column-rule:none}
}

/* --- Contact modal (gedeeld met /stories/contact.php) --- */
.cm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:5000;padding:20px}
.cm-overlay.open{display:flex}
.cm-panel{width:min(420px,100%);background:var(--ink-2);border:1px solid rgba(240,237,230,.15);
  border-radius:8px;padding:28px;position:relative}
.cm-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;padding:4px}
.cm-close:hover{color:var(--paper)}
.cm-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cm-title{font-family:'Playfair Display',serif;font-size:24px;color:var(--paper);margin-bottom:20px}
.cm-field{display:block;margin-bottom:14px}
.cm-lbl{display:block;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cm-field input,.cm-field textarea{width:100%;background:var(--ink-3);border:1px solid rgba(240,237,230,.15);
  border-radius:4px;padding:9px 12px;font-family:Barlow,sans-serif;font-size:13px;font-weight:300;
  color:var(--paper);outline:none;transition:border-color .15s;resize:vertical}
.cm-field input:focus,.cm-field textarea:focus{border-color:rgba(200,168,75,.4)}
.cm-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cm-submit{width:100%;padding:11px;background:var(--gold);color:var(--ink);border:none;border-radius:999px;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:background .15s}
.cm-submit:hover{background:var(--gold-d)}
.cm-submit:disabled{opacity:.5;cursor:not-allowed}
.cm-status{font-size:12px;margin-top:12px;text-align:center;min-height:16px}
.cm-status.ok{color:var(--moss-l)}
.cm-status.err{color:#C0392B}

/* --- Fase 2 feedback-ronde --- */
/* .tl-crumbs en de avatar-'.tl-profile' zijn vervangen door het gedeelde
   /assets/css/site-header.css (.sh-crumbs/.sh-header). De onderstaande
   .tl-profile-regel (verderop in dit bestand) blijft puur voor het
   hoogteprofiel-grafiekblok — géén naamsbotsing meer. */

/* Alleen de inhoud van de balk; de balk zelf is .mp-bar in de module */
.tl-filterbar .f-title{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tl-filterbar select{background:var(--ink-3);color:var(--paper);border:1px solid var(--line);
  border-radius:5px;padding:7px 10px;font-family:Barlow,sans-serif;font-size:13px}
.tl-filterbar .f-dist{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.tl-filterbar input[type=range]{accent-color:var(--gold);width:130px}

.tl-statrow{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px}
.tl-statrow .tl-stats{flex:1;min-width:260px}
.tl-statrow .tl-actions{margin:0}
.tl-btn.sm{padding:7px 14px;font-size:11px}
.tl-btn.sm svg{width:13px;height:13px}

.tl-photos a{position:relative;display:block}
.tl-photos a video{width:100%;height:180px;object-fit:cover;display:block;transition:transform .25s}
.tl-photos a.vid:hover video{transform:scale(1.04)}
.tl-photos .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.tl-photos .play span{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:99px;background:rgba(200,168,75,.94);
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.tl-photos .play svg{width:20px;height:20px;display:block;margin-left:3px}
.tl-lb video{max-width:94vw;max-height:88vh;border-radius:6px}

@media (max-width:640px){
  .tl-filterbar .tl-count{margin-left:0;width:100%}
  .tl-statrow{flex-direction:column}
}

/* Vraagteken naast de downloadknoppen; de uitleg komt als tooltip.
   Zelfde maatvoering als de andere ronde knoppen op de site. */
.tl-gpxhelp{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(240,237,230,.16);color:var(--muted);background:var(--ink-2)}
.tl-gpxhelp svg{width:17px;height:17px}
.tl-gpxhelp:hover,.tl-gpxhelp:focus-visible{color:var(--gold);border-color:rgba(200,168,75,.45)}
.tl-gpxhelp::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);white-space:nowrap;pointer-events:none;
  background:rgba(24,27,21,.96);color:var(--paper);border:1px solid rgba(200,168,75,.3);
  border-radius:6px;padding:7px 12px;font-family:Barlow,sans-serif;font-size:12.5px;font-weight:300;
  opacity:0;transition:opacity .18s,transform .18s;z-index:30;
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
.tl-gpxhelp:hover::after,.tl-gpxhelp:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:520px){.tl-gpxhelp::after{white-space:normal;width:min(230px,60vw);left:auto;right:0;transform:translateY(4px)}
  .tl-gpxhelp:hover::after,.tl-gpxhelp:focus-visible::after{transform:translateY(0)}}

/* Reset-view op de routekaart: zelfde vorm als het GPX-vraagteken */
.tl-hero{position:relative}
.tl-mapreset{position:absolute;top:62px;right:14px;z-index:1000;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:rgba(24,27,21,.82);border:1px solid rgba(200,168,75,.3);color:var(--gold);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}
.tl-mapreset svg{width:17px;height:17px}
.tl-mapreset:hover{background:rgba(200,168,75,.18);border-color:var(--gold)}
.tl-mapreset::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;
  white-space:nowrap;pointer-events:none;background:rgba(24,27,21,.96);color:var(--paper);
  border:1px solid rgba(200,168,75,.3);border-radius:6px;padding:6px 11px;
  font-family:Barlow,sans-serif;font-size:12.5px;font-weight:300;opacity:0;transition:opacity .18s}
.tl-mapreset:hover::after,.tl-mapreset:focus-visible::after{opacity:1}