/* branike/steps + branike/steps-item */

/* ── Parent wrapper ──────────────────────────────────────── */
.bb-steps { /* CSS vars nastavené inline */ }

.bb-steps__track {
    display:   flex;
    gap:       var(--bb-st-gap, 32px);
    list-style:none;
    margin:    0; padding: 0;
}

/* Vertical */
.bb-st-orient-vertical .bb-steps__track {
    flex-direction: column;
}

/* ── Steps Item ──────────────────────────────────────────── */
.bb-steps-item {
    flex:        1;
    display:     flex;
    flex-direction: column;
    gap:         .5rem;
    position:    relative;
}

/* ── Head: indicator + title ─────────────────────────────── */
.bb-si__head {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    position:    relative; /* nad connector linkou (::after na .bb-steps-item) */
    z-index:     1;
}

/* Vertical: head stacked */
.bb-st-orient-vertical .bb-si__head {
    align-items: flex-start;
}

/* 🔴🔴 VODOROVNÉ KROKY: NADPIS PATRÍ POD INDIKÁTOR (28. 8. 2026)
   Spojnica beží vo výške stredu indikátora a nadpis stál VEDĽA neho v tej istej
   výške — čiara teda prechádzala cez písmená a vyzeralo to ako prečiarknutý text.
   `z-index: 1` na hlavičke to nerieši: text nemá pozadie, takže linka presvitá
   pomedzi písmená. Odmerané na `ako-to-prebieha`: nadpis „Zadanie" a linka mali
   obe `top: 534 px`.
   Riešenie je rozloženie, nie prekrývanie — indikátor hore, nadpis pod ním.
   Vo zvislej orientácii ostáva všetko po starom. */
.bb-st-orient-horizontal .bb-si__head {
    flex-direction: column;
    align-items:    flex-start;
    gap:            .5rem;
}

/* ── Connector line (::after) ────────────────────────────── */
/* Horizontal: linka vpravo od indikatora */
.bb-st-orient-horizontal .bb-steps-item:not(:last-child)::after {
    content:    '';
    position:   absolute;
    top:        calc(var(--bb-st-size, 48px) / 2);
    left:       calc(var(--bb-st-size, 48px) + .75rem);
    right:      calc(-1 * var(--bb-st-gap, 32px) + .5rem);
    height:     var(--bb-st-line-w, 2px);
    background: var(--bb-st-line-c, var(--bb-primary, #7C3AED));
    transform:  translateY(-50%);
}

/* Vertical: linka pod indikatorom */
.bb-st-orient-vertical .bb-steps-item:not(:last-child)::after {
    content:    '';
    position:   absolute;
    left:       calc(var(--bb-st-size, 48px) / 2);
    top:        calc(var(--bb-st-size, 48px) + .5rem);
    bottom:     calc(-1 * var(--bb-st-gap, 32px) + .5rem);
    width:      var(--bb-st-line-w, 2px);
    background: var(--bb-st-line-c, var(--bb-primary, #7C3AED));
    transform:  translateX(-50%);
}

/* Line style */
.bb-st-line-dashed  .bb-steps-item::after { background: none !important; border-top:  var(--bb-st-line-w,2px) dashed var(--bb-st-line-c, var(--bb-primary, #7C3AED)); }
.bb-st-line-dotted  .bb-steps-item::after { background: none !important; border-top:  var(--bb-st-line-w,2px) dotted var(--bb-st-line-c, var(--bb-primary, #7C3AED)); }
.bb-st-line-none    .bb-steps-item::after { display: none; }

.bb-st-orient-vertical.bb-st-line-dashed .bb-steps-item::after { border-top:none; border-left: var(--bb-st-line-w,2px) dashed var(--bb-st-line-c, var(--bb-primary, #7C3AED)); background:none !important; }
.bb-st-orient-vertical.bb-st-line-dotted .bb-steps-item::after { border-top:none; border-left: var(--bb-st-line-w,2px) dotted var(--bb-st-line-c, var(--bb-primary, #7C3AED)); background:none !important; }

/* ── Indicator ───────────────────────────────────────────── */
.bb-si__indicator {
    flex-shrink:     0;
    width:           var(--bb-st-size, 48px);
    height:          var(--bb-st-size, 48px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bb-st-accent, var(--bb-primary, #7C3AED));
    color:           #fff;
    font-weight:     700;
    font-size:       calc(var(--bb-st-size, 48px) * 0.38);
    line-height:     1;
    position:        relative;
    z-index:         1;
}

/* Circle style */
.bb-st-style-circle  .bb-si__indicator { border-radius: 50%; }

/* Square style */
.bb-st-style-square  .bb-si__indicator { border-radius: 6px; }

/* Line style: just a colored number, no background box */
.bb-st-style-line .bb-si__indicator {
    background:    none;
    border-bottom: 3px solid var(--bb-st-accent, var(--bb-primary, #7C3AED));
    border-radius: 0;
    color:         var(--bb-st-accent, var(--bb-primary, #7C3AED));
}

/* CSS counter for auto-numbering */
.bb-st-numbered .bb-steps__track { counter-reset: bb-step; }
.bb-st-numbered .bb-steps-item   { counter-increment: bb-step; }
.bb-st-numbered .bb-si__indicator--num::before { content: counter(bb-step); }

/* ── Title + description ─────────────────────────────────── */
.bb-si__title {
    font-size:   1em;
    font-weight: 700;
    line-height: 1.3;
}

.bb-si__desc {
    margin:      0;
    font-size:   .88em;
    opacity:     .75;
    line-height: 1.55;
}

/* Vertical: desc má ľavý padding (zarovnané s title) */
.bb-st-orient-vertical .bb-si__desc {
    padding-left: calc(var(--bb-st-size, 48px) + .75rem);
    margin-top:   -.25rem;
}

/* ── Responsive: horizontal → vertical on mobile ─────────── */
@media (max-width: 600px) {
    .bb-st-orient-horizontal .bb-steps__track {
        flex-direction: column;
    }
    .bb-st-orient-horizontal .bb-steps-item::after { display: none; }
}

/* ═══ Postupné objavenie (14. 10. 2026, Brani: „body po jednom, chvíľka pauza") ═══════════════
 * Triedy a poradie (--i, --bb-st-n, --bb-st-pause) pridá server len pri zapnutej voľbe.
 * 🔴 Skryté sa nič nezačína, kým to nepovolí prehliadač: „čas" skrýva až po `is-armed`
 *    zo skriptu (bez skriptu je všetko vidno), „skrolovanie" len kde sú scroll-driven animácie.
 * 🔴 Menej pohybu: všetko hneď a nehybne. Hýbe sa len opacity / translate / scale → CLS 0.
 * Šípka = hrot na konci spojnice (::before položky); objaví sa, až keď sa spojnica nakreslí.
 */
.bb-st-arrows .bb-steps-item:not(:last-child)::before {
    content:    '';
    position:   absolute;
    z-index:    1;
    width:      calc(var(--bb-st-line-w, 2px) * 3 + 6px);
    height:     calc(var(--bb-st-line-w, 2px) * 3 + 6px);
    background: var(--bb-st-line-c, var(--bb-primary, #7C3AED));
}
.bb-st-arrows.bb-st-orient-horizontal .bb-steps-item:not(:last-child)::before {
    top:        calc(var(--bb-st-size, 48px) / 2);
    right:      calc(-1 * var(--bb-st-gap, 32px) + .5rem);
    translate:  0 -50%;
    clip-path:  polygon(0 0, 100% 50%, 0 100%);
}
.bb-st-arrows.bb-st-orient-vertical .bb-steps-item:not(:last-child)::before {
    left:       calc(var(--bb-st-size, 48px) / 2);
    bottom:     calc(-1 * var(--bb-st-gap, 32px) + .5rem);
    translate:  -50% 0;
    clip-path:  polygon(0 0, 100% 0, 50% 100%);
}
.bb-st-arrows.bb-st-line-none .bb-steps-item::before { display: none; }
@media (max-width: 600px) {
    .bb-st-arrows.bb-st-orient-horizontal .bb-steps-item::before { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    /* ── Čas: krok, pauza, ďalší krok ──
       🔴 Prechod a oneskorenie LEN v stave is-in: skrytie po is-armed musí byť okamžité,
          inak by krok 2 ešte 0,7 s svietil a potom zhasol (odmerané 14. 10.). */
    .bb-st-seq--time.is-armed .bb-steps-item { opacity: 0; translate: 0 .75rem; }
    .bb-st-seq--time.is-armed .bb-steps-item:not(:last-child)::after { scale: 0 1; transform-origin: left center; }
    .bb-st-seq--time.is-armed.bb-st-orient-vertical .bb-steps-item:not(:last-child)::after { scale: 1 0; transform-origin: center top; }
    .bb-st-seq--time.is-armed.bb-st-arrows .bb-steps-item:not(:last-child)::before { opacity: 0; }

    .bb-st-seq--time.is-armed.is-in .bb-steps-item {
        opacity:          1;
        translate:        0 0;
        transition:       opacity .45s ease, translate .45s ease;
        transition-delay: calc(var(--i, 0) * var(--bb-st-pause, 700ms));
    }
    .bb-st-seq--time.is-armed.is-in .bb-steps-item:not(:last-child)::after {
        scale:            1 1;
        transition:       scale calc(var(--bb-st-pause, 700ms) * .45) ease-out;
        transition-delay: calc(var(--i, 0) * var(--bb-st-pause, 700ms) + var(--bb-st-pause, 700ms) * .4);
    }
    .bb-st-seq--time.is-armed.is-in.bb-st-arrows .bb-steps-item:not(:last-child)::before {
        opacity:          1;
        transition:       opacity .2s ease;
        transition-delay: calc(var(--i, 0) * var(--bb-st-pause, 700ms) + var(--bb-st-pause, 700ms) * .85);
    }
}

/* ── Skrolovanie: každý krok o kúsok ďalej (od 10 % trate, spolu 32 % / počet krokov) ── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bb-st-seq--scroll { --bb-st-s: calc(32% / var(--bb-st-n, 4)); }
        .bb-st-seq--scroll .bb-steps__track { view-timeline-name: --bb-st; }
        .bb-st-seq--scroll .bb-steps-item {
            animation:       bb-st-in linear both;
            animation-timeline: --bb-st;
            animation-range: cover calc(10% + var(--i, 0) * var(--bb-st-s)) cover calc(10% + var(--i, 0) * var(--bb-st-s) + var(--bb-st-s) * .6);
        }
        .bb-st-seq--scroll .bb-steps-item:not(:last-child)::after {
            animation:       bb-st-line linear both;
            animation-timeline: --bb-st;
            animation-range: cover calc(10% + var(--i, 0) * var(--bb-st-s) + var(--bb-st-s) * .5) cover calc(10% + var(--i, 0) * var(--bb-st-s) + var(--bb-st-s) * .9);
            transform-origin: left center;
        }
        .bb-st-seq--scroll.bb-st-orient-vertical .bb-steps-item:not(:last-child)::after {
            animation-name:   bb-st-line-v;
            transform-origin: center top;
        }
        .bb-st-seq--scroll.bb-st-arrows .bb-steps-item:not(:last-child)::before {
            animation:       bb-st-arrow linear both;
            animation-timeline: --bb-st;
            animation-range: cover calc(10% + var(--i, 0) * var(--bb-st-s) + var(--bb-st-s) * .88) cover calc(10% + var(--i, 0) * var(--bb-st-s) + var(--bb-st-s) * .98);
        }
    }
}
@keyframes bb-st-in     { from { opacity: 0; translate: 0 .75rem; } to { opacity: 1; translate: 0 0; } }
@keyframes bb-st-line   { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes bb-st-line-v { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes bb-st-arrow  { from { opacity: 0; } to { opacity: 1; } }