/*
    Prvek Kroky - rozvržení časové osy a kruhu. Platí ve všech šablonách (Klasická z něj má
    i střídmý vzhled), šablona si barvy, písma a ozdoby nastaví ve vlastním steps.css.
    Web i náhled v adminu mají stejné značky:

    .cm-steps-element.cm-steps-timeline | .cm-steps-circle.cm-steps-count-N(.cm-steps-has-ball)
        [kruh] .cm-steps-circle-area
            .cm-steps-graphic (aria-hidden) - svg kružnice a šipky, .cm-steps-glow, .cm-steps-hub,
                .cm-steps-lap > .cm-steps-ball, .cm-steps-dot (--cm-steps-x, --cm-steps-y, --cm-steps-stop)
            p.cm-steps-center
        ol.cm-steps-list > li.cm-steps-item(.cm-steps-pos-top|bottom|left|right)(.cm-steps-dark)
            .cm-steps-marker (aria-hidden) > img.cm-steps-icon | .cm-steps-number
            .cm-steps-body > .cm-steps-title + p.cm-steps-text

    Barva kroužku položky z palety přichází jako --cm-steps-color (bez ní platí --cm-steps-marker-bg).
    Velikosti jsou v rem (1rem = 10px) - web nastavuje písmo každému prvku zvlášť, proto ho
    tady má každý text vlastní.
*/

.cm-steps-element{
    --cm-steps-accent:var(--button-bg-primary-from, #E5BC48);
    --cm-steps-line:color-mix(in srgb, var(--cm-steps-accent) 72%, var(--text-color, #222));
    --cm-steps-marker-bg:color-mix(in srgb, var(--cm-steps-accent) 30%, #fff);
    --cm-steps-marker-text:var(--text-color, #222);
    --cm-steps-marker-size:6.4rem;
    --cm-steps-pulse:color-mix(in srgb, var(--cm-steps-accent) 35%, transparent);
    --cm-steps-dot-shadow:0 0 0 0 transparent;
    position:relative;
}

/* starší prohlížeč bez color-mix - pevné odstíny, ať kroužky nezůstanou bez podkladu */
@supports not (color:color-mix(in srgb, red 50%, blue)){
    .cm-steps-element{
        --cm-steps-line:var(--cm-steps-accent);
        --cm-steps-marker-bg:#F6ECD2;
        --cm-steps-pulse:transparent;
    }
    .cm-steps-hub{
        background-color:#F8F3E3;
    }
}

.cm-steps-list{
    margin:0;
    padding:0;
    list-style:none;
}

.cm-steps-marker{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:var(--cm-steps-marker-size);
    height:var(--cm-steps-marker-size);
    border-radius:50%;
    background-color:var(--cm-steps-color, var(--cm-steps-marker-bg));
    color:var(--cm-steps-marker-text);
    overflow:hidden;
}
.cm-steps-dark > .cm-steps-marker,
.cm-steps-dot.cm-steps-dark{
    color:#fff;
}

.cm-steps-icon{
    display:block;
    width:62%;
    height:62%;
    object-fit:contain;
}

.cm-steps-number{
    font-size:2.4rem;
    font-weight:700;
    line-height:1;
}

.cm-steps-title{
    display:block;
    width:auto;
    margin:0;
    font-size:2.2rem;
    font-weight:700;
    line-height:1.25;
    color:inherit;
    text-wrap:balance;
    overflow-wrap:break-word;
}

.cm-steps-text{
    margin:0;
    font-size:1.6rem;
    line-height:1.6;
    white-space:pre-line;
    overflow-wrap:break-word;
}

/* ------------------------------------------------------------------------------------------
    Časová osa - kroužek vlevo, nadpis a text vpravo, přerušovaná spojnice ke dalšímu kroku
------------------------------------------------------------------------------------------ */

.cm-steps-timeline .cm-steps-item{
    position:relative;
    display:grid;
    grid-template-columns:var(--cm-steps-marker-size) minmax(0,1fr);
    gap:2rem;
    padding-bottom:3rem;
}
.cm-steps-timeline .cm-steps-item:last-child{
    padding-bottom:0;
}
.cm-steps-timeline .cm-steps-item:not(:last-child)::before{
    content:"";
    position:absolute;
    left:calc(var(--cm-steps-marker-size) / 2);
    top:calc(var(--cm-steps-marker-size) + 1rem);
    bottom:.8rem;
    width:2px;
    margin-left:-1px;
    background-image:linear-gradient(180deg, var(--cm-steps-line) 0 55%, transparent 55% 100%);
    background-size:2px 1.1rem;
}
.cm-steps-timeline .cm-steps-body{
    min-width:0;
    padding-top:.8rem;
}
.cm-steps-timeline .cm-steps-title + .cm-steps-text{
    margin-top:.6rem;
}

@media (max-width:767px){
    .cm-steps-timeline{
        --cm-steps-marker-size:5rem;
    }
    .cm-steps-timeline .cm-steps-item{
        gap:1.5rem;
        padding-bottom:2.4rem;
    }
    .cm-steps-timeline .cm-steps-body{
        padding-top:.4rem;
    }
    .cm-steps-timeline .cm-steps-number{
        font-size:2rem;
    }
    .cm-steps-timeline .cm-steps-title{
        font-size:2rem;
    }
    .cm-steps-timeline .cm-steps-text{
        font-size:1.5rem;
    }
}

/* ------------------------------------------------------------------------------------------
    Kruh - plocha 900 × 700 (stejné souřadnice počítá web i admin), zastávky na kružnici,
    popisky kolem. Velikosti se řídí šířkou plochy (cqw), užší plocha (telefon, úzký sloupec)
    má kruh menší a pod ním číslovaný seznam.
------------------------------------------------------------------------------------------ */

.cm-steps-circle-area{
    --cm-steps-dot-size:clamp(3.4rem, 5.6cqw, 5rem);
    --cm-steps-label-gap:calc(var(--cm-steps-dot-size) / 2 + 1.1rem);
    /* rezerva nad a pod kruhem pro delší popisky u horní a spodní zastávky */
    --cm-steps-space:4rem;
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto;
    container-type:inline-size;
}

.cm-steps-graphic{
    position:relative;
    margin:var(--cm-steps-space) 0;
    aspect-ratio:900 / 700;
}

.cm-steps-ring{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    fill:none;
}
.cm-steps-ring-line{
    stroke:var(--cm-steps-line);
    stroke-width:2;
}
/* tečkovanou a ručně taženou kružnici ukazuje jen šablona, která o ně stojí */
.cm-steps-ring-dots,
.cm-steps-ring-hand{
    display:none;
}
.cm-steps-arrows path{
    fill:none;
    stroke:var(--cm-steps-line);
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cm-steps-glow{
    display:none;
}

/* střed kruhu - kotouč pod textem uprostřed */
.cm-steps-hub{
    position:absolute;
    left:50%;
    top:50%;
    width:27.78%;
    aspect-ratio:1;
    translate:-50% -50%;
    border-radius:50%;
    background-color:color-mix(in srgb, var(--cm-steps-accent) 14%, #fff);
}

.cm-steps-center{
    position:absolute;
    z-index:3;
    left:50%;
    top:calc(var(--cm-steps-space) + 100cqw * 350 / 900);
    width:24cqw;
    margin:0;
    translate:-50% -50%;
    font-size:clamp(1.6rem, 3.2cqw, 3rem);
    font-weight:700;
    line-height:1.15;
    text-align:center;
    text-wrap:balance;
    overflow-wrap:break-word;
    color:var(--cm-steps-marker-text);
}

/* kulička obíhá na otáčejícím se čtverci kolem středu, stojí mezi první a druhou zastávkou */
.cm-steps-lap{
    position:absolute;
    z-index:1;
    left:24.44%;
    top:17.14%;
    width:51.11%;
    height:65.71%;
    border-radius:50%;
    pointer-events:none;
}
.cm-steps-ball{
    position:absolute;
    left:50%;
    top:0;
    width:1.6rem;
    height:1.6rem;
    translate:-50% -50%;
    border-radius:50%;
    background-color:var(--cm-steps-line);
}
.cm-steps-count-2 .cm-steps-lap{transform:rotate(90deg)}
.cm-steps-count-3 .cm-steps-lap{transform:rotate(60deg)}
.cm-steps-count-4 .cm-steps-lap{transform:rotate(45deg)}
.cm-steps-count-5 .cm-steps-lap{transform:rotate(36deg)}
.cm-steps-count-6 .cm-steps-lap{transform:rotate(30deg)}
.cm-steps-count-7 .cm-steps-lap{transform:rotate(25.71deg)}
.cm-steps-count-8 .cm-steps-lap{transform:rotate(22.5deg)}

/* zastávka na kružnici - číslo nebo ikona */
.cm-steps-dot{
    position:absolute;
    z-index:2;
    left:var(--cm-steps-x);
    top:var(--cm-steps-y);
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--cm-steps-dot-size);
    height:var(--cm-steps-dot-size);
    translate:-50% -50%;
    border-radius:50%;
    background-color:var(--cm-steps-color, var(--cm-steps-marker-bg));
    color:var(--cm-steps-marker-text);
    box-shadow:var(--cm-steps-dot-shadow);
    overflow:hidden;
}
.cm-steps-dot .cm-steps-number{
    font-size:clamp(1.6rem, 2.6cqw, 2.2rem);
}

/* popisky kolem kruhu (seznam leží přes plochu kruhu, výška plochy = šířka × 700 / 900) */
.cm-steps-circle .cm-steps-list{
    position:absolute;
    z-index:3;
    left:0;
    top:var(--cm-steps-space);
    width:100%;
    height:calc(100cqw * 700 / 900);
    pointer-events:none;
}
.cm-steps-circle .cm-steps-item{
    position:absolute;
    max-width:19cqw;
    pointer-events:auto;
}
.cm-steps-circle .cm-steps-marker{
    display:none;
}
.cm-steps-circle .cm-steps-title{
    font-size:clamp(1.5rem, 2.2cqw, 2rem);
    line-height:1.2;
}
.cm-steps-circle .cm-steps-text{
    margin-top:.4rem;
    font-size:clamp(1.3rem, 1.6cqw, 1.5rem);
    line-height:1.4;
}
.cm-steps-circle .cm-steps-pos-top{
    left:var(--cm-steps-x);
    bottom:calc(100% - var(--cm-steps-y));
    margin-bottom:var(--cm-steps-label-gap);
    translate:-50% 0;
    text-align:center;
}
.cm-steps-circle .cm-steps-pos-bottom{
    left:var(--cm-steps-x);
    top:var(--cm-steps-y);
    margin-top:var(--cm-steps-label-gap);
    translate:-50% 0;
    text-align:center;
}
.cm-steps-circle .cm-steps-pos-right{
    left:var(--cm-steps-x);
    top:var(--cm-steps-y);
    margin-left:var(--cm-steps-label-gap);
    translate:0 -50%;
    text-align:left;
}
.cm-steps-circle .cm-steps-pos-left{
    right:calc(100% - var(--cm-steps-x));
    top:var(--cm-steps-y);
    margin-right:var(--cm-steps-label-gap);
    translate:0 -50%;
    text-align:right;
}

/* úzká plocha (telefon, úzký sloupec) - pod kruhem číslovaný seznam, popisky se zalamují */
@container (max-width:600px){
    .cm-steps-graphic{
        margin:0;
    }
    .cm-steps-center{
        top:calc(100cqw * 350 / 900);
    }
    .cm-steps-circle .cm-steps-list{
        position:static;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:1.2rem;
        margin-top:2.4rem;
        pointer-events:auto;
    }
    .cm-steps-circle .cm-steps-item{
        position:static;
        display:flex;
        align-items:center;
        gap:1.4rem;
        max-width:none;
        margin:0;
        translate:none;
        text-align:left;
    }
    .cm-steps-circle .cm-steps-marker{
        display:flex;
        --cm-steps-marker-size:3.8rem;
    }
    .cm-steps-circle .cm-steps-marker .cm-steps-number{
        font-size:1.8rem;
    }
    .cm-steps-circle .cm-steps-body{
        min-width:0;
    }
    .cm-steps-circle .cm-steps-title{
        font-size:1.8rem;
        text-wrap:wrap;
    }
    .cm-steps-circle .cm-steps-text{
        font-size:1.5rem;
    }
    .cm-steps-center{
        font-size:clamp(1.4rem, 4.6cqw, 2.4rem);
    }
}

/* oběh kuličky - na každé zastávce se zastaví, zastávka při příjezdu pulzne (pořadí v oběhu --cm-steps-stop) */
@keyframes cm-steps-lap-2{0%{transform:rotate(0deg)}36.67%,50%{transform:rotate(180deg)}86.67%,100%{transform:rotate(360deg)}}
@keyframes cm-steps-lap-3{0%{transform:rotate(0deg)}24.44%,33.33%{transform:rotate(120deg)}57.78%,66.67%{transform:rotate(240deg)}91.11%,100%{transform:rotate(360deg)}}
@keyframes cm-steps-lap-4{0%{transform:rotate(0deg)}18.33%,25%{transform:rotate(90deg)}43.33%,50%{transform:rotate(180deg)}68.33%,75%{transform:rotate(270deg)}93.33%,100%{transform:rotate(360deg)}}
@keyframes cm-steps-lap-5{0%{transform:rotate(0deg)}14.67%,20%{transform:rotate(72deg)}34.67%,40%{transform:rotate(144deg)}54.67%,60%{transform:rotate(216deg)}74.67%,80%{transform:rotate(288deg)}94.67%,100%{transform:rotate(360deg)}}
@keyframes cm-steps-lap-6{0%{transform:rotate(0deg)}12.22%,16.67%{transform:rotate(60deg)}28.89%,33.33%{transform:rotate(120deg)}45.56%,50%{transform:rotate(180deg)}62.22%,66.67%{transform:rotate(240deg)}78.89%,83.33%{transform:rotate(300deg)}95.56%,100%{transform:rotate(360deg)}}
@keyframes cm-steps-lap-7{0%{transform:rotate(0deg)}10.48%,14.29%{transform:rotate(51.43deg)}24.76%,28.57%{transform:rotate(102.86deg)}39.05%,42.86%{transform:rotate(154.29deg)}53.33%,57.14%{transform:rotate(205.71deg)}67.62%,71.43%{transform:rotate(257.14deg)}81.9%,85.71%{transform:rotate(308.57deg)}96.19%,100%{transform:rotate(360deg)}}
@keyframes cm-steps-lap-8{0%{transform:rotate(0deg)}9.17%,12.5%{transform:rotate(45deg)}21.67%,25%{transform:rotate(90deg)}34.17%,37.5%{transform:rotate(135deg)}46.67%,50%{transform:rotate(180deg)}59.17%,62.5%{transform:rotate(225deg)}71.67%,75%{transform:rotate(270deg)}84.17%,87.5%{transform:rotate(315deg)}96.67%,100%{transform:rotate(360deg)}}

@keyframes cm-steps-stop-2{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}7.5%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}27.5%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}
@keyframes cm-steps-stop-3{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}5%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}18.33%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}
@keyframes cm-steps-stop-4{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}3.75%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}13.75%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}
@keyframes cm-steps-stop-5{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}3%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}11%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}
@keyframes cm-steps-stop-6{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}2.5%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}9.17%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}
@keyframes cm-steps-stop-7{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}2.14%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}7.86%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}
@keyframes cm-steps-stop-8{0%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}1.88%{scale:1.14;box-shadow:var(--cm-steps-dot-shadow),0 0 0 .9rem var(--cm-steps-pulse)}6.87%,100%{scale:1;box-shadow:var(--cm-steps-dot-shadow),0 0 0 0 transparent}}

/* animace jen bez omezení pohybu - jinak kulička stojí mezi první a druhou zastávkou a zastávky nepulzují */
@media (prefers-reduced-motion:no-preference){
    .cm-steps-lap{
        animation-timing-function:cubic-bezier(.65,0,.35,1);
        animation-iteration-count:infinite;
    }
    .cm-steps-has-ball .cm-steps-dot{
        animation-timing-function:ease-out;
        animation-iteration-count:infinite;
        animation-delay:calc(var(--cm-steps-stop) * 3s - .8s);
    }
    .cm-steps-count-2 .cm-steps-lap{animation-name:cm-steps-lap-2;animation-duration:6s}
    .cm-steps-count-3 .cm-steps-lap{animation-name:cm-steps-lap-3;animation-duration:9s}
    .cm-steps-count-4 .cm-steps-lap{animation-name:cm-steps-lap-4;animation-duration:12s}
    .cm-steps-count-5 .cm-steps-lap{animation-name:cm-steps-lap-5;animation-duration:15s}
    .cm-steps-count-6 .cm-steps-lap{animation-name:cm-steps-lap-6;animation-duration:18s}
    .cm-steps-count-7 .cm-steps-lap{animation-name:cm-steps-lap-7;animation-duration:21s}
    .cm-steps-count-8 .cm-steps-lap{animation-name:cm-steps-lap-8;animation-duration:24s}
    .cm-steps-count-2.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-2;animation-duration:6s}
    .cm-steps-count-3.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-3;animation-duration:9s}
    .cm-steps-count-4.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-4;animation-duration:12s}
    .cm-steps-count-5.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-5;animation-duration:15s}
    .cm-steps-count-6.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-6;animation-duration:18s}
    .cm-steps-count-7.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-7;animation-duration:21s}
    .cm-steps-count-8.cm-steps-has-ball .cm-steps-dot{animation-name:cm-steps-stop-8;animation-duration:24s}
}