/* 01.fitness – SEKCE navod-cesta (návod Zalda → vchod den/noc → QR kód, HUD fotky). Vše pod #navod-cesta. */
#navod-cesta{--sekce-py:36px;--hud-akcent:var(--zlata);display:flex;flex-direction:column;align-items:flex-start;gap:32px}
#navod-cesta .nc-hlava{display:flex;flex-direction:column;gap:14px;max-width:1000px}
#navod-cesta .sek-h{font-size:52px}
#navod-cesta .w-lead{font-size:17px;line-height:1.55}
#navod-cesta .w-lead strong{color:var(--text)}
#navod-cesta strong{color:var(--text)}
#navod-cesta a:not(.w-btn){color:var(--zlata-text);font-weight:800;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* kapitola = číslo + nadpis + úvodní věta, pod tím obsah */
#navod-cesta .nc-kap{width:100%;display:flex;flex-direction:column;gap:18px;border-top:2px solid var(--antracit);padding-top:20px}
#navod-cesta .nc-kap-hlava{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start;max-width:900px}
#navod-cesta .nc-cislo{font-size:52px;line-height:.9;color:var(--zlata-text)}
#navod-cesta .nc-cislo.je-zlate{color:var(--zlata)}
#navod-cesta .nc-kap-hlava h2{font-size:36px;line-height:1}
#navod-cesta .nc-kap-hlava p{margin-top:4px;font-size:16px;line-height:1.5;color:var(--text-seda)}
#navod-cesta .nc-navigace{display:flex;flex-wrap:wrap;gap:12px}
#navod-cesta .nc-navigace .w-btn{padding:0 20px;font-size:14px}

/* 01 dva vchody vedle sebe: sloupec = hlavička vchodu, HUD fotka, kroky (den světlý, noc tmavý) */
#navod-cesta .nc-vchody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
#navod-cesta .nc-vchod{display:flex;flex-direction:column;gap:14px;padding:18px}
#navod-cesta .nc-den{background:var(--beton)}
#navod-cesta .nc-noc{background:var(--antracit);color:#fff;scroll-margin-top:24px}
#navod-cesta .nc-vchod-hlava{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline}
#navod-cesta .nc-vchod-hlava .w-eyebrow{grid-column:1 / -1}
#navod-cesta .nc-cas{font-size:30px;line-height:1;white-space:nowrap}
#navod-cesta .nc-den .nc-cas{color:var(--zlata-text)}
#navod-cesta .nc-vchod h3{font-size:24px;line-height:1.05}
#navod-cesta .nc-vchod-text{font-size:16px;line-height:1.55;color:var(--text-seda)}
#navod-cesta .nc-noc .w-eyebrow{color:var(--zlata-na-tmave)}
#navod-cesta .nc-noc .nc-cas{color:var(--zlata)}
#navod-cesta .nc-noc h3,#navod-cesta .nc-noc strong{color:#fff}
#navod-cesta .nc-noc a:not(.w-btn){color:var(--zlata-na-tmave)}
#navod-cesta .nc-noc-kroky{display:flex;flex-direction:column;gap:16px}
#navod-cesta .nc-noc-kroky ol{list-style:none;margin:0;padding:0;counter-reset:nk;display:flex;flex-direction:column;gap:12px}
#navod-cesta .nc-noc-kroky li{counter-increment:nk;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:15px;line-height:1.55;color:var(--na-tmave)}
#navod-cesta .nc-noc-kroky li:before{content:counter(nk);display:grid;place-items:center;width:28px;height:28px;background:var(--zlata);color:var(--text);font-family:var(--heading);font-weight:800;font-size:16px}
#navod-cesta .nc-video{width:100%;aspect-ratio:16/9;background:#000}
#navod-cesta .nc-video video{display:block;width:100%;height:100%;object-fit:cover}
#navod-cesta .nc-video.je-placeholder{display:flex;align-items:center;justify-content:center;background:#3a3735}

/* 02 QR kód – 4 malé kroky */
#navod-cesta .nc-qr{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
#navod-cesta .nc-qr li{display:flex;flex-direction:column;gap:16px}
#navod-cesta .nc-qr-foto{margin:0;aspect-ratio:1/1;background:var(--beton);overflow:hidden}
#navod-cesta .nc-qr-foto img{display:block;width:100%;height:100%;object-fit:cover}
#navod-cesta .nc-qr-foto.je-placeholder{display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-size:14px}
#navod-cesta .nc-qr-text{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:8px;align-content:start}
#navod-cesta .nc-qr-c{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;background:var(--antracit);color:var(--zlata);font-family:var(--heading);font-weight:800;font-size:19px}
#navod-cesta .nc-qr h3{font-size:24px;line-height:1.1;padding-top:4px}
#navod-cesta .nc-qr-text p{font-size:15px;line-height:1.6;color:var(--text-seda)}

#navod-cesta .nc-dalsi{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:-16px}
#navod-cesta .nc-tip{display:flex;flex-direction:column;gap:10px;padding:22px 24px;background:var(--beton)}
#navod-cesta .nc-tip p:not(.w-eyebrow){font-size:15px;line-height:1.6;color:var(--text)}
#navod-cesta .nc-tip-tmave{background:var(--antracit)}
#navod-cesta .nc-tip-tmave .w-eyebrow{color:var(--zlata-na-tmave)}
#navod-cesta .nc-tip-tmave p:not(.w-eyebrow),#navod-cesta .nc-tip-tmave a:not(.w-btn),#navod-cesta .nc-tip-tmave strong{color:#fff}
#navod-cesta > .w-btn{margin-top:-8px}
#navod-cesta .nc-adresa{font-style:normal;font-size:14px;color:var(--text-seda);margin-top:-14px}

/* ---------- HUD: body, vodicí čáry, trasa a štítky přes fotku ---------- */
#navod-cesta .hud{margin:0;width:100%;position:relative;container-type:inline-size}
#navod-cesta .hud-foto{position:relative;overflow:hidden;background:#b2cfdf}
#navod-cesta .hud-foto>img{display:block;width:100%;height:100%;object-fit:cover}
#navod-cesta .hud-cary{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#navod-cesta .hud-vodic{fill:none;stroke:#fffaf1;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #1117);stroke-dasharray:1;stroke-dashoffset:0}
#navod-cesta .hud-trasa path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#navod-cesta .hud-trasa-okraj{stroke:#fffaf1;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:0}
#navod-cesta .hud-trasa-barva{stroke:var(--hud-akcent);stroke-width:7;stroke-dasharray:1;stroke-dashoffset:0}
#navod-cesta .hud-sipka{stroke:var(--hud-akcent);stroke-width:7;filter:drop-shadow(0 1px 1px #fff)}
#navod-cesta .hud-bod{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;z-index:3}
#navod-cesta .hud-bod:before{content:"";width:17px;height:17px;border:3px solid #fffaf1;border-radius:50%;background:var(--hud-akcent);box-shadow:0 2px 8px #0005}
#navod-cesta .hud-bod i{display:none}
#navod-cesta .hud-stitky{position:absolute;inset:0;pointer-events:none}
#navod-cesta .hud-stitek{position:absolute;left:var(--x);top:var(--y);width:var(--w);display:flex;gap:12px;padding:clamp(8px,2.1cqw,24px);background:#fff;color:var(--text);box-shadow:0 6px 24px #0003;z-index:4}
#navod-cesta .hud-stitek.je-tmavy{background:var(--antracit);color:#fff}
#navod-cesta .hud-c{display:none}
#navod-cesta .hud-obsah{display:block;width:100%;min-width:0}
#navod-cesta [data-psat]{position:relative;display:block;line-height:1.15;overflow-wrap:anywhere}
#navod-cesta .hud-rezerva{visibility:hidden;display:block}
#navod-cesta .hud-psano{position:absolute;inset:0;display:block}
#navod-cesta .hud-mini{font-family:var(--heading);font-weight:800;font-size:clamp(10px,1.7cqw,19px);letter-spacing:.14em;text-transform:uppercase;color:var(--zlata-text);margin-bottom:4px}
#navod-cesta .hud-znacka{font-family:var(--heading);font-weight:800;font-size:clamp(17px,4.4cqw,52px);line-height:1}
#navod-cesta .hud-nazev{font-family:var(--heading);font-weight:800;font-size:clamp(12px,2.5cqw,30px);text-transform:uppercase;letter-spacing:.01em}
#navod-cesta .hud-cas{font-family:var(--heading);font-weight:800;font-size:clamp(15px,3.4cqw,40px);color:var(--zlata-text);margin-top:2px}
#navod-cesta .je-tmavy .hud-cas{color:var(--zlata)}
#navod-cesta .hud-popis{font-size:clamp(11px,1.5cqw,16px);line-height:1.35;margin-top:4px;color:var(--text-seda)}
#navod-cesta .je-tmavy .hud-popis{color:var(--na-tmave)}
/* úzký HUD (mobil): štítky pod fotkou, body a štítky číslované */
@container (max-width:440px){
  #navod-cesta .hud-stitky{position:static;display:grid;gap:8px;margin-top:8px}
  #navod-cesta .hud-stitek{position:relative;left:auto;top:auto;width:auto;align-items:center;padding:12px 14px;box-shadow:none;border:1px solid #0001}
  #navod-cesta .hud-c{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--hud-akcent);color:var(--text);font-style:normal;font-family:var(--heading);font-weight:800;font-size:15px}
  #navod-cesta .hud-obsah{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
  #navod-cesta .hud-mini,#navod-cesta .hud-popis{grid-column:1 / -1}
  #navod-cesta .hud-mini{font-size:12px}
  #navod-cesta .hud-znacka{font-size:26px}
  #navod-cesta .hud-nazev{font-size:18px}
  #navod-cesta .hud-cas{font-size:22px;text-align:right;margin-top:0}
  #navod-cesta .hud-popis{font-size:13px;margin-top:2px}
  #navod-cesta .hud-bod:before{width:26px;height:26px;border-width:2px}
  #navod-cesta .hud-bod i{display:block;position:absolute;color:var(--text);font-style:normal;font-family:var(--heading);font-weight:800;font-size:15px}
  #navod-cesta .hud-vodic{display:none}
  #navod-cesta .hud-tmavy .hud-stitek{border-color:#fff2}
}

@media(max-width:1250px){
  #navod-cesta .sek-h{font-size:46px}
  #navod-cesta .nc-qr{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
}
@media(max-width:1199px){
  #navod-cesta .nc-vchody{grid-template-columns:1fr}
}
@media(max-width:760px){
  #navod-cesta{--sekce-py:28px;gap:28px}
  #navod-cesta .sek-h{font-size:36px}
  #navod-cesta .w-lead{font-size:16px}
  #navod-cesta .nc-kap{gap:18px;padding-top:20px}
  #navod-cesta .nc-kap-hlava{column-gap:14px}
  #navod-cesta .nc-cislo{font-size:40px}
  #navod-cesta .nc-kap-hlava h2{font-size:28px}
  #navod-cesta .nc-kap-hlava p{font-size:15px}
  #navod-cesta .nc-navigace{display:grid;grid-template-columns:1fr}
  #navod-cesta .nc-vchod{padding:16px;gap:14px}
  #navod-cesta .nc-cas{font-size:28px}
  #navod-cesta .nc-vchod h3{font-size:22px}
  #navod-cesta .nc-qr{grid-template-columns:1fr;gap:32px}
  #navod-cesta .nc-qr-foto{order:2}
  #navod-cesta .nc-dalsi{grid-template-columns:1fr;gap:14px;margin-top:-8px}
  #navod-cesta > .w-btn{width:100%;margin-top:-4px}
  #navod-cesta .nc-adresa{margin-top:-10px}
}
@media(prefers-reduced-motion:reduce){#navod-cesta .hud *{transition:none!important}}