/* saradnja — numerisani koraci na jednoj liniji.

   Linija kroz korake je jedan ::before preko cele rešetke, a ne granica po
   ćeliji — granica po ćeliji ostavlja prekid na svakom razmaku i "proces"
   prestane da izgleda kao proces. */

.pew-steps {
    position: relative;
    display: grid;
    gap: var(--sp-lg);
}

/* Rešetka prati broj koraka. Tri koraka u četvorokolonskoj rešetki ostavljaju
   praznu četvrtinu i liniju koja vodi u ništa; view.php zato broji korake i
   dodaje odgovarajuću klasu. */
.pew-steps--1 { grid-template-columns: minmax(0, 1fr); }
.pew-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pew-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pew-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pew-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pew-steps::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 4px;              /* sredina tačke ispod */
    height: 1px;
    background: var(--pew-line);
}
/* Jedan korak nije proces — linija bi bila crta kroz prazno. */
.pew-steps--1::before { display: none; }

.pew-step { position: relative; padding-top: var(--sp-lg); }
.pew-step::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--pew-accent-fill);
    /* Prsten u boji sekcije seče liniju iza tačke, pa tačka sedi NA liniji
       umesto da izgleda kao da je nalepljena preko nje. */
    box-shadow: 0 0 0 5px var(--pew-bg);
}

.pew-step__num {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--tr-label);
    color: var(--pew-accent);
    margin-bottom: var(--sp-2xs);
}
.pew-step__title { margin-bottom: var(--sp-3xs); color: var(--pew-fg); }
.pew-step__text  { color: var(--pew-fg-body); font-size: var(--fs-small); line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
    /* Vertikalno na uskom ekranu: linija se okreće u levu ivicu, koraci se
       uvlače pored nje. */
    .pew-steps,
    .pew-steps--2, .pew-steps--3, .pew-steps--4, .pew-steps--5 {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }
    .pew-steps::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .pew-step { padding-top: 0; padding-left: var(--sp-lg); }
    .pew-step::before { top: 6px; }
}