/* ============================================================
Kameleon 2026 — WordPress lijepak
============================================================
Ovo je JEDINI CSS fajl koji se pise rucno.
Ostali fajlovi u assets/css/ generisu se iz ../design/ skriptom
build-css.ps1 i ne smiju se dirati. Ali dizajn stranice su mockupi:
u njima su slike prazni divovi sa gradijentom. WordPress na to mjesto
ubacuje pravi ![]()
sa width/height atributima, plus svoje klase
(.alignleft, .wp-caption, .screen-reader-text...) kojih u mockupu nema.
Sve sto premoscuje tu razliku zivi ovdje.
============================================================ */
/* ------------------------------------------------------------
1. Slike u kontejnerima dizajna
------------------------------------------------------------
Svaki od ovih kontejnera u mockupu je prazan div sa washom.
Slika mora prekriti ga u potpunosti, ispod dekorativnih ::before
i ::after slojeva (hairline u boji rubrike, scrim, sjaj). */
.card-img > img,
.lead-img > img,
.hero-img > img,
.row-card-img > img,
.b-feat-img > img,
.kat-lead-img > img,
.ev-card-img > img,
.teh-thumb > img,
.news-img > img,
.res-img > img,
.brand-hero-img > img,
.inline-img > img,
.cover > img,
.ev-thumb > img,
.clip > img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
z-index:1; /* iznad washa, ispod ::before/::after */
display:block;
}
/* Kad slika postoji, wash se ne vidi — ali ostaje kao fallback
dok se slika ucitava, i za clanke bez istaknute slike. */
/* Podcast cover je 1:1 i ima inicijal preko sebe (mix-blend-mode). */
.cover > img{ border-radius:inherit }
.cover > span{ z-index:2 }
/* Datumski pecat, badge i play dugme moraju ostati iznad slike. */
.badge,
.date-stamp,
.res-kind,
.clip-play,
.clip-dur,
.num-stamp{ z-index:3 }
/* ------------------------------------------------------------
2. Slike unutar teksta clanka
------------------------------------------------------------
40.000 naslijedjenih clanaka ima ![]()
direktno u sadrzaju,
cesto sa fiksnim width/height atributima iz 2017. */
.art-body img{
max-width:100%;
height:auto;
border-radius:var(--r-md);
display:block;
margin:0 auto;
}
.art-body figure{ margin:36px 0 }
.art-body figure img{ width:100% }
.art-body iframe,
.art-body video,
.art-body embed{
max-width:100%;
border-radius:var(--r-md);
display:block;
margin:32px auto;
}
/* WordPress caption */
.wp-caption{ max-width:100%;margin:36px 0 }
.wp-caption img{ width:100% }
.wp-caption-text,
.wp-element-caption{
font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
color:var(--text-faint);padding-top:12px;line-height:1.6;text-align:left;
}
/* Poravnanja iz klasicnog editora */
.alignleft{ float:left;margin:6px 28px 22px 0;max-width:50% }
.alignright{ float:right;margin:6px 0 22px 28px;max-width:50% }
.aligncenter{ display:block;margin:32px auto }
.alignnone{ margin:32px 0 }
.art-body::after{ content:'';display:table;clear:both }
@media (max-width:560px){
.alignleft,.alignright{ float:none;margin:24px auto;max-width:100% }
}
/* ------------------------------------------------------------
3. Pristupacnost
------------------------------------------------------------ */
.screen-reader-text{
position:absolute!important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
position:fixed!important;top:12px;left:12px;z-index:400;
width:auto;height:auto;clip:auto;margin:0;
background:var(--k-ink);color:var(--k-paper);
padding:12px 20px;border-radius:var(--r-pill);
font-family:var(--font-mono);font-size:11px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;
}
/* ------------------------------------------------------------
4. Polje pretrage u topbaru
------------------------------------------------------------
U mockupu je .search obican div sa tekstom. U temi je