/*
    Šablona Doma - vzhled prvku Kroky (rozvržení je v _base/steps.css). Kroužky z palety s měkkým
    přechodem, čísla ručním písmem, zlatá přerušovaná spojnice, u kruhu tečkovaná a ručně tažená
    zlatá kružnice, záře uprostřed a zlatá kulička. Barvy textu z proměnných Domy, takže prvek
    v tmavé sekci (cm-bg-dark) přepne text na světlý.
*/

.theme-doma .cm-steps-element{
    --cm-steps-accent:var(--palette-gold);
    --cm-steps-line:var(--palette-gold);
    --cm-steps-marker-bg:var(--palette-butter);
    --cm-steps-marker-text:var(--palette-brown);
    --cm-steps-pulse:color-mix(in srgb, var(--palette-gold) 32%, transparent);
}

/* kroužek - odstín barvy kroku s jemným světlem vlevo nahoře */
.theme-doma .cm-steps-marker,
.theme-doma .cm-steps-dot{
    background-image:radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--cm-steps-color, var(--cm-steps-marker-bg)) 45%, var(--palette-paper)), var(--cm-steps-color, var(--cm-steps-marker-bg)) 70%);
}
.theme-doma .cm-steps-dark > .cm-steps-marker,
.theme-doma .cm-steps-dot.cm-steps-dark{
    color:var(--palette-cream);
}

.theme-doma .cm-steps-number{
    font-family:var(--font-accent, inherit);
    font-weight:700;
}

.theme-doma .cm-steps-title{
    color:var(--doma-heading);
}
.theme-doma .cm-steps-text{
    color:var(--doma-text-body);
}

/* ------------------------------------------------------------------------------------------
    Časová osa
------------------------------------------------------------------------------------------ */

.theme-doma .cm-steps-timeline .cm-steps-marker{
    box-shadow:0 10px 22px -14px var(--doma-shadow-strong);
}
.theme-doma .cm-steps-timeline .cm-steps-number{
    font-size:3.2rem;
}
.theme-doma .cm-steps-timeline .cm-steps-title{
    font-family:var(--font-heading, inherit);
    font-weight:400;
    font-size:2.2rem;
    line-height:1.2;
}
.theme-doma .cm-steps-timeline .cm-steps-text{
    font-size:1.65rem;
    line-height:1.65;
}
.theme-doma .cm-steps-timeline .cm-steps-icon{
    transition:rotate 1.1s var(--doma-ease), scale 1.1s var(--doma-ease);
}
.theme-doma .cm-steps-timeline .cm-steps-item:hover .cm-steps-icon{
    rotate:-8deg;
    scale:1.08;
}

@media (max-width:767px){
    .theme-doma .cm-steps-timeline .cm-steps-number{
        font-size:2.6rem;
    }
    .theme-doma .cm-steps-timeline .cm-steps-title{
        font-size:2rem;
    }
    .theme-doma .cm-steps-timeline .cm-steps-text{
        font-size:1.55rem;
    }
}

/* ------------------------------------------------------------------------------------------
    Kruh
------------------------------------------------------------------------------------------ */

.theme-doma .cm-steps-circle-area{
    --cm-steps-dot-shadow:0 6px 14px -8px var(--doma-shadow);
}

/* místo pravidelné kružnice tečkovaná a ručně tažená */
.theme-doma .cm-steps-ring-line{
    display:none;
}
.theme-doma .cm-steps-ring-dots{
    display:inline;
    stroke:var(--palette-gold);
    stroke-width:1.6;
    stroke-dasharray:2 10;
    stroke-linecap:round;
    opacity:.7;
}
.theme-doma .cm-steps-ring-hand{
    display:inline;
    stroke:var(--palette-gold);
    stroke-width:3.2;
    stroke-linecap:round;
}
.theme-doma .cm-steps-arrows path{
    stroke:var(--doma-gold-line);
    stroke-width:2.8;
}

/* záře za středem */
.theme-doma .cm-steps-glow{
    display:block;
    position:absolute;
    left:30%;
    top:50%;
    width:40%;
    aspect-ratio:1;
    translate:0 -50%;
    border-radius:50%;
    background:radial-gradient(closest-side, color-mix(in srgb, var(--palette-butter) 95%, transparent), color-mix(in srgb, var(--palette-butter) 25%, transparent) 60%, transparent);
    pointer-events:none;
}

.theme-doma .cm-steps-hub{
    background:radial-gradient(circle at 40% 35%, var(--palette-paper), color-mix(in oklab, var(--palette-butter) 45%, var(--palette-paper)) 70%, var(--palette-butter));
    box-shadow:0 18px 40px -26px var(--doma-shadow-strong);
}

.theme-doma .cm-steps-center{
    font-family:var(--font-accent, inherit);
    font-weight:700;
    font-size:clamp(2rem, 4.2cqw, 3.8rem);
    line-height:1;
    color:var(--palette-brown);
}

.theme-doma .cm-steps-ball{
    width:1.8rem;
    height:1.8rem;
    background:radial-gradient(circle at 35% 35%, color-mix(in oklab, var(--palette-butter) 40%, #fff), var(--palette-gold) 60%, var(--doma-gold-deep));
    box-shadow:0 0 14px 4px color-mix(in srgb, var(--palette-gold) 55%, transparent);
}

.theme-doma .cm-steps-dot{
    border:2px solid var(--palette-paper);
}
.theme-doma .cm-steps-dot .cm-steps-number{
    font-size:clamp(2rem, 3.4cqw, 3rem);
}

/* popisky kolem kruhu ručním písmem */
.theme-doma .cm-steps-circle .cm-steps-title{
    font-family:var(--font-accent, inherit);
    font-weight:700;
    font-size:clamp(1.7rem, 2.9cqw, 2.7rem);
    line-height:1.05;
    color:var(--doma-text);
}
.theme-doma .cm-steps-circle .cm-steps-text{
    color:var(--doma-text-muted);
}

@container (max-width:600px){
    .theme-doma .cm-steps-circle .cm-steps-marker{
        box-shadow:0 6px 14px -8px var(--doma-shadow);
    }
    .theme-doma .cm-steps-circle .cm-steps-marker .cm-steps-number{
        font-size:2.4rem;
    }
    .theme-doma .cm-steps-circle .cm-steps-title{
        font-size:2.4rem;
    }
    .theme-doma .cm-steps-center{
        font-size:clamp(1.8rem, 6cqw, 2.8rem);
    }
}

@media (prefers-reduced-motion:no-preference){
    .theme-doma .cm-steps-glow{
        animation:cm-steps-doma-glow 10s ease-in-out infinite;
    }
}
@keyframes cm-steps-doma-glow{
    0%,100%{opacity:.55;scale:.92}
    50%{opacity:1;scale:1.08}
}
@media (prefers-reduced-motion:reduce){
    .theme-doma .cm-steps-timeline .cm-steps-icon{
        transition:none;
    }
}