/* 01.fitness – SEKCE jak-to-funguje (návrh home-06, mobil-3). Vše pod #jak-to-funguje. */
#jak-to-funguje .jak-hlava{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:64px;align-items:end}
#jak-to-funguje .jak-uvod{display:flex;flex-direction:column;gap:22px}
#jak-to-funguje .sek-h{font-size:72px}
#jak-to-funguje .jak-bok{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-bottom:6px}
#jak-to-funguje .jak-kroky{margin:72px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.128%}   /* 24/1128 → značky dráhy sedí na středech */
#jak-to-funguje .jak-kroky li{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
#jak-to-funguje .jak-cislo{font-size:20px;letter-spacing:.08em;color:var(--zlata-text)}
#jak-to-funguje .jak-kroky h3{font-size:32px;margin:0}
#jak-to-funguje .jak-start,#jak-to-funguje .jak-finish{display:none}

#jak-to-funguje .jak-draha{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
#jak-to-funguje .jak-draha-znacky-cary line{stroke:var(--zlata);stroke-width:2;stroke-dasharray:3 4}
#jak-to-funguje .jak-draha-pas{fill:#2b2826}
#jak-to-funguje .jak-draha-linka{fill:#f4f1ec;opacity:.7}
#jak-to-funguje .jak-draha-tik{fill:#f4f1ec;opacity:.45}
#jak-to-funguje .jak-draha-velky{font-family:var(--heading);font-weight:800;font-size:36px;letter-spacing:4px;fill:#f4f1ec}
#jak-to-funguje .jak-draha-maly{font-family:var(--heading);font-weight:800;font-size:18px;fill:#f4f1ec;opacity:.75}
#jak-to-funguje .jak-draha-body circle{fill:var(--zlata);stroke:#fff;stroke-width:4}

#jak-to-funguje .jak-cta{margin-top:44px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}

@media(max-width:1250px){
  #jak-to-funguje .sek-h{font-size:56px}
  #jak-to-funguje .jak-hlava{grid-template-columns:1fr;gap:24px}
  #jak-to-funguje .jak-kroky h3{font-size:26px}
}
/* --- mobil: svislá dráha vlevo, značka u každého kroku (návrh mobil-3) --- */
@media(max-width:760px){
  #jak-to-funguje .sek-h{font-size:44px}
  #jak-to-funguje .jak-draha{display:none}
  #jak-to-funguje .jak-draha-obal{position:relative;margin-top:40px;padding:34px 0 34px 74px}
  #jak-to-funguje .jak-draha-obal::before{content:'';position:absolute;left:0;top:0;bottom:0;width:50px;border-radius:4px;background:#2b2826;
    background-image:linear-gradient(90deg,transparent 5px,rgba(244,241,236,.7) 5px,rgba(244,241,236,.7) 7px,transparent 7px,transparent 43px,rgba(244,241,236,.7) 43px,rgba(244,241,236,.7) 45px,transparent 45px),
      repeating-linear-gradient(180deg,transparent 0 38px,rgba(244,241,236,.45) 38px 40px);background-size:100% 100%,24px 100%;background-position:0 0,13px 0;background-repeat:no-repeat}
  #jak-to-funguje .jak-start,#jak-to-funguje .jak-finish{display:block;position:absolute;left:0;width:50px;text-align:center;font-family:var(--heading);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#f4f1ec;z-index:1}
  #jak-to-funguje .jak-start{top:10px}
  #jak-to-funguje .jak-finish{bottom:10px}
  #jak-to-funguje .jak-kroky{margin:0;grid-template-columns:1fr;gap:40px}
  #jak-to-funguje .jak-kroky li{position:relative;display:block;padding:0}
  #jak-to-funguje .jak-kroky li::before{content:'';position:absolute;left:-30px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--zlata);box-shadow:0 0 0 3px #fff}
  #jak-to-funguje .jak-cislo{display:inline;font-size:22px;margin-right:6px}
  #jak-to-funguje .jak-kroky h3{display:inline;font-size:22px}
  #jak-to-funguje .jak-kroky p{margin-top:6px;font-size:14px}
  #jak-to-funguje .jak-cta{margin-top:32px;gap:16px}
}