/* ===========================================================================
   Pomoćne klase — namerno kratak spisak. Sve što se ponavlja postaje komponenta.
   =========================================================================== */

.text-muted   { color: var(--dg-ink-muted); }
.text-center  { text-align: center; }
.text-sm      { font-size: var(--dg-fs-sm); }
.text-xs      { font-size: var(--dg-fs-xs); }

.measure { max-width: var(--dg-measure); }
.mx-auto { margin-inline: auto; }

.mt-2 { margin-top: var(--dg-2); }
.mt-4 { margin-top: var(--dg-4); }
.mt-6 { margin-top: var(--dg-6); }
.mb-4 { margin-bottom: var(--dg-4); }

.full-bleed { width: 100%; }

.hide { display: none !important; }

@media (max-width: 47.999rem) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 48rem) {
    .hide-desktop { display: none !important; }
}

/* Kompaktni režim je sve ispod 1200 px — ne samo telefon.
   Puna traka sa kategorijama traži oko 1130 px samo za sebe, pa se ispod
   te širine navigacija i filteri prikazuju kao fioke. */
@media (max-width: 74.999rem) {
    .hide-compact { display: none !important; }
}
@media (min-width: 75rem) {
    .hide-wide { display: none !important; }
}

@media print {
    .site-header, .site-footer, .skip-link, .btn, .pagination { display: none !important; }
    body { background: #fff; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --- Postepeni prikaz pri skrolovanju -------------------------------------- */
/* Klasu dodaje skripta; bez nje se ništa ne krije, pa sadržaj uvek postoji. */
.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--dg-dur-slow) var(--dg-ease-out),
                transform var(--dg-dur-slow) var(--dg-ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* --- Sprečavanje pomeranja rasporeda dok se slike učitavaju ---------------- */
img[width][height] { height: auto; }

/* --- Oznaka testnog okruženja ---------------------------------------------- */
/* Namerno upadljivo: nikad ne sme da se pomeša test i produkcija.
   Traka nije lepljiva — lepljivo zaglavlje bi joj se popelo preko, a i nema
   razloga da zauzima prostor pri skrolovanju. */
.env-banner {
    margin: 0;
    padding: var(--dg-2) var(--dg-4);
    background: var(--dg-berry);
    color: #fff;
    text-align: center;
    font-family: var(--dg-font-mono);
    font-size: var(--dg-fs-2xs);
    letter-spacing: var(--dg-track-wide);
    text-transform: uppercase;
}
[data-theme="dark"] .env-banner { color: var(--dg-bg); }

/* U adminu je <body> mreža sa dve kolone — traka mora preko obe, inače
   pojede kolonu navigacije i gurne sadržaj van ekrana. */
.admin > .env-banner { grid-column: 1 / -1; }