/* Telo jednog postupka iz zvaničnog uputstva — snimci ekrana, blok „Koraci kroz interfejs"
   i tabele šifarnika.

   ZAŠTO modul a ne pages/uputstva.css: isti sadržaj se prikazuje na DVA mesta — na stranici
   /uputstva/{slug}/{ordinal} i u popup-u iz citata [U#] (_RefModal, koji se pojavljuje na
   Pitaj Pravnu, analizi ugovora, editoru…). Da su ova pravila per-page, u popup-u bi snimci
   ekrana bili neuokvireni i bez mreže. Navigacija i istorija verzija ostaju u pages/uputstva.css
   jer postoje samo na stranici.

   Boje idu isključivo kroz var(--c-*) tokene — bez hex vrednosti. */

/* ---------- Snimci ekrana ---------- */
.up-slike {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
}

.up-slike__title {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 12px;
}

.up-slike__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.up-slika {
    margin: 0;
    /* min-width:0 je obavezan na grid detetu — bez njega sadrzaj (npr. alt tekst slike koja
       se nije ucitala) probija kolonu i razvuce celu stranicu u sirinu. */
    min-width: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    background: var(--c-surface-2);
}

.up-slika img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Snimci ekrana su različitih proporcija; ne secemo ih, samo ogranicimo visinu
       da jedna duga slika ne razvuce mrezu. */
    max-height: 420px;
    object-fit: contain;
    background: var(--c-surface);
    /* Slika koja se ne ucita prikazuje alt tekst — bez ovoga on izlazi iz okvira. */
    overflow: hidden;
    font-size: .75rem;
    color: var(--c-text-muted);
}

.up-slika figcaption {
    padding: 7px 10px;
    font-size: .76rem;
    color: var(--c-text-muted);
    border-top: 1px solid var(--c-border);
}

.up-slike__note {
    margin-top: 10px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

/* U popup-u je prostor uzi — jedna kolona i niza slika, da se ne skroluje unedogled. */
.rm-body .up-slike__grid { grid-template-columns: 1fr; }
.rm-body .up-slika img { max-height: 300px; }

/* ---------- Slika ubačena U tekst, uz svoj korak ----------
   Uputstvo je niz koraka i slika je dokaz koraka; kad sve slike stoje u mreži na dnu, citalac
   mora da ih broji da bi znao koja je koja. Zato se slika pominjana brojem („slika br. 43")
   prikazuje odmah ispod tog koraka.

   Uza je od tela i uvucena, da ne preseca tok citanja: tekst ostaje glavni, slika je potvrda. */
.up-slika--inline {
    max-width: 520px;
    margin: 10px 0 16px;
}

/* Unutar numerisanog koraka slika se poravnava sa tekstom stavke, ne sa brojem. */
li > .up-slika--inline { margin-left: 0; }

.up-slika--inline img { max-height: 380px; }

.up-slika--inline figcaption {
    font-variant-numeric: tabular-nums;
}

/* U popup-u je prostor uzi — slika ide punom sirinom kolone. */
.rm-body .up-slika--inline { max-width: 100%; }

/* ---------- Blok „Koraci kroz interfejs" ----------
   Jedino mesto u kuriranom tekstu gde reci nisu organove nego opis snimka ekrana
   (v. instrukcije §6). Mora se vizuelno razlikovati od tela uputstva. */
.up-koraci {
    margin: 14px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--c-brand);
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
    background: var(--c-surface-2);
}

.up-koraci > :first-child { margin-top: 0; }
.up-koraci > :last-child { margin-bottom: 0; }

.up-koraci ol,
.up-koraci ul {
    margin: 6px 0 0;
    padding-left: 1.15rem;
}

.up-koraci li { margin-bottom: 4px; }

/* Telo sekcije: duge tabele i sifarnici ne smeju da razvuku stranicu ni popup. */
.op-doc table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 640px) {
    .up-slike__grid { grid-template-columns: 1fr; }
}