/* sibenik.rocks — koncept B „Oglasna ploča”
   Paleta: ploča #F1EFEA, crna #191919, žuta #FFD23F, crvena #E4574C (kat),
   plava #2F6FDE (kat). Sistemski grotesque, nula webfontova, mobile-first. */

:root {
  --ploca: #F1EFEA;
  --crna: #191919;
  --zuta: #FFD23F;
  --crvena: #E4574C;
  --plava: #2F6FDE;
  --siva: #8B877E;
  --tekst-siva: #4B4B4B;
  --papir: #fff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ploca);
  color: var(--crna);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; }
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; } /* height NE dirati: FB embedovi žive od width/height atributa */

/* ===== mast ===== */
.mast {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  border-bottom: 2px solid var(--crna);
}
.mast .ime { font-weight: 900; font-size: 1.35rem; letter-spacing: -.03em; text-decoration: none; }
.mast .ime span { background: var(--zuta); padding: .05em .18em; transform: rotate(-1.5deg); display: inline-block; }
.mast nav { font-size: .85rem; font-weight: 700; display: flex; gap: 1rem; flex-wrap: wrap; }
.mast nav a { text-decoration: none; }
.mast nav a:hover, .mast nav a[aria-current] { background: var(--zuta); }
.mast nav .dojava { background: var(--crna); color: var(--zuta); padding: .1rem .5rem; border-radius: 4px; }

/* hamburger: mobilno sklopivo, bez JS-a (checkbox) */
.izbornik-kvacica { display: none; }
.burger { display: none; font-size: 1.35rem; font-weight: 900; cursor: pointer; line-height: 1; user-select: none; }
@media (max-width: 740px) {
  .burger { display: block; }
  .mast nav { display: none; width: 100%; flex-direction: column; gap: .1rem; padding-top: .6rem; font-size: 1rem; }
  .mast nav a { padding: .55rem .2rem; border-top: 1.5px solid #D8D4CB; }
  .mast nav .dojava { margin-top: .5rem; text-align: center; padding: .55rem; }
  .izbornik-kvacica:checked ~ nav { display: flex; }
}

main { max-width: 1020px; margin: 0 auto; }
.ploca { padding: 1rem 1rem 1.6rem; }

/* ===== pilule kategorija, statusi, naljepnice ===== */
.kat {
  display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; text-decoration: none;
}
.kat.crvena { background: var(--crvena); color: #fff; }
.kat.zuta { background: var(--zuta); color: var(--crna); }
.kat.plava { background: var(--plava); color: #fff; }
.kat.crna { background: var(--crna); color: #fff; }

.status {
  display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--crna); color: var(--zuta);
  padding: .2rem .55rem; border-radius: 3px;
}

.stikeri { display: flex; flex-wrap: wrap; gap: .45rem; }
.stiker {
  font-size: .78rem; font-weight: 700; background: var(--papir);
  border: 1.5px solid var(--crna); padding: .2rem .55rem; border-radius: 999px;
  text-decoration: none;
}
.stiker:nth-child(3n) { transform: rotate(1.6deg); background: var(--zuta); }
.stiker:nth-child(4n) { transform: rotate(-1.8deg); }
.stiker b { font-weight: 900; color: var(--crvena); margin-left: .25rem; }
.stiker.sve { background: var(--crna); color: var(--zuta); }
.stikeri.velika { margin: 1rem 0 2rem; }

.marker-naslov { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; margin: .5rem 0 1rem; }
.marker-naslov span { background: var(--zuta); padding: .03em .18em; transform: rotate(-1deg); display: inline-block; }

/* ===== kartice ===== */
.card {
  background: var(--papir); border: 2px solid var(--crna); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--crna);
}
.card h3, .card h4 { margin: .35rem 0 .45rem; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.card h3 { font-size: 1.32rem; line-height: 1.22; }
.card h4 { font-size: 1.02rem; line-height: 1.3; font-weight: 800; }
.card a { text-decoration: none; }
.card p { font-size: .88rem; line-height: 1.5; color: var(--tekst-siva); margin: 0; }
.card time { display: block; font-size: .72rem; color: var(--siva); margin-top: .5rem; }
.card .tijelo-kartice { padding: 1rem 1.05rem; }
.card .fslika, .card .fslika img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card .fslika img { border-bottom: 2px solid var(--crna); }
.card.ima-thumb { display: flex; align-items: stretch; overflow: hidden; }
.card .tslika-w { flex-shrink: 0; display: flex; }
.card .tslika { width: 9.5rem; height: 100%; object-fit: cover; border-right: 2px solid var(--crna); }
@media (max-width: 420px) { .card .tslika { width: 7.5rem; } }

/* ===== naslovnica ===== */
.hero-zona { margin-bottom: 1rem; }
.tok { display: flex; flex-direction: column; gap: 1rem; }
.naljepnice { margin-top: 2rem; }
.naljepnice h2 { font-size: 1.1rem; border-top: 3px solid var(--crna); padding-top: .8rem; }
.jos { margin-top: 1.5rem; font-weight: 800; }

@media (min-width: 741px) {
  .ploca { padding: 1.4rem; }
  .tok { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
  .hero-zona .card h3 { font-size: 1.6rem; line-height: 1.18; }
}

/* ===== inbox karton ===== */
.inbox {
  background: var(--zuta); border: 2px solid var(--crna); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--crna); padding: 1rem 1.05rem;
}
.inbox .naslov { font-weight: 900; font-size: 1rem; }
.inbox h4 { font-size: .92rem; line-height: 1.35; margin: .5rem 0 .15rem; font-weight: 800; }
.inbox p { font-size: .78rem; margin: .3rem 0 0; color: #3E3A28; }
.inbox .cta {
  display: inline-block; margin-top: .7rem; background: var(--crna); color: var(--zuta);
  font-weight: 800; font-size: .8rem; padding: .45rem .8rem; border-radius: 4px; text-decoration: none;
}

/* ===== članak: čitalački režim ===== */
.cl { max-width: 680px; margin: 0 auto; padding: 1.15rem 1.1rem 1.5rem; }
.cl .cl-vrh { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.cl h1 { font-size: 1.42rem; line-height: 1.22; font-weight: 900; letter-spacing: -.02em; margin: .25rem 0 .8rem; text-wrap: balance; }
.cl .meta { font-size: .72rem; color: var(--siva); margin: .55rem 0 .2rem; }
.cl .fclanak { margin: 0 0 1rem; }
.cl .tijelo { font-size: 17px; line-height: 1.68; }
.cl .tijelo p { margin: 0 0 1rem; }
.cl .tijelo mark { background: var(--zuta); padding: .02em .15em; }
.cl .tijelo h2, .cl .tijelo h3 { line-height: 1.25; letter-spacing: -.01em; margin: 1.6rem 0 .6rem; }
.cl .cl-stikeri { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--crna); }
.cl .cl-stikeri .lab { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--siva); margin-bottom: .5rem; }
.cl .inbox { margin-top: 1.6rem; }

/* povezani članci (računa skripte/related.py: tagovi + TF-IDF teksta) */
.cl .povezano { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--crna); }
.cl .povezano .lab {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--siva); margin: 0 0 .2rem;
}
@media (min-width: 741px) {
  .cl h1 { font-size: 1.9rem; }
}

/* slike i video u članku: dokazni materijal — crni okvir + žuta sjena, bez filtera */
.cl .tijelo img:not(.sitna), .cl .fclanak img, .cl .tijelo video {
  display: block; width: 100%; height: auto; border: 2px solid var(--crna);
  border-radius: 4px; box-shadow: 4px 4px 0 var(--zuta);
}
.cl .tijelo figure { margin: 1.2rem 0; }

/* video kao naslovni sadržaj članka (isječci sa sjednica su uspravni) */
.cl .fclanak video {
  display: block; width: 100%; height: auto; border: 2px solid var(--crna);
  border-radius: 4px; box-shadow: 4px 4px 0 var(--zuta); background: var(--crna);
}
.cl .fclanak.uspravni-video video {
  width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto;
}
.cl .tijelo figcaption, .wp-element-caption {
  font-size: .72rem; color: var(--siva); margin-top: .55rem;
}

/* sitne slike (≤80 px): prirodna veličina iz width/height atributa, bez okvira
   — NIKAKAV `width` ovdje, inače CSS pregazi atribut i slika naraste */
.cl .tijelo img.sitna {
  display: inline-block; border: 0; box-shadow: none; vertical-align: text-bottom;
}

/* potpis autora: avatar u krugu + ime, isto u svim člancima */
.cl .tijelo .potpis {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem;
}
.cl .tijelo img.autor {
  width: 50px; height: 50px; flex-shrink: 0;
  border: 2px solid var(--crna); border-radius: 50%; object-fit: cover;
}

/* citati kao prikucani papirići */
.cl .tijelo blockquote {
  margin: 1.1rem 0; padding: .8rem 1rem; background: var(--papir);
  border: 2px solid var(--crna); border-radius: 4px; box-shadow: 4px 4px 0 var(--zuta);
  font-size: .93rem; line-height: 1.55;
}
.cl .tijelo blockquote p:last-child { margin-bottom: 0; }

/* ===== kompat CSS za wp-block klase starih članaka ===== */

/* tablice: obični HTML + scroll u vlastitom okviru na mobitelu */
.cl .tijelo table {
  border-collapse: collapse; font-size: .85rem; line-height: 1.4;
  display: block; overflow-x: auto; max-width: 100%;
  border: 2px solid var(--crna); border-radius: 4px;
}
.cl .tijelo th, .cl .tijelo td { border: 1px solid #D8D4CB; padding: .35rem .55rem; text-align: left; }
.cl .tijelo th { background: var(--zuta); font-weight: 800; }
.wp-block-table { margin: 1.2rem 0; overflow-x: auto; }
.wp-block-table table { margin: 0; }

/* galerije: flex mreža, klik otvara lightbox */
.wp-block-gallery {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0;
}
.wp-block-gallery > figure { flex: 1 1 calc(50% - .5rem); margin: 0; min-width: 140px; }
.wp-block-gallery.columns-3 > figure { flex-basis: calc(33.33% - .5rem); }
.wp-block-gallery.columns-4 > figure { flex-basis: calc(25% - .5rem); }
.wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; cursor: zoom-in; }
.wp-block-gallery figcaption { font-size: .68rem; }

.wp-block-image { margin: 1.2rem 0; }
.wp-block-video { margin: 1.2rem 0; }
.wp-block-video video { width: 100%; }
.wp-block-embed { margin: 1.2rem 0; }
.wp-block-embed iframe { max-width: 100%; }
.alignleft { float: left; margin: 0 1rem .6rem 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 .6rem 1rem; max-width: 50%; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* FB embedovi: širina koju je WP zadao, centrirano */
.cl .tijelo iframe[src*="facebook.com"] { display: block; margin: 1.2rem auto; border: 0; }

/* interne kartice (bivši WP embedovi) */
.interna-kartica {
  margin: 1.2rem 0; background: var(--papir); border: 2px solid var(--crna);
  border-radius: 4px; box-shadow: 4px 4px 0 var(--crna); padding: .8rem 1rem;
}
.interna-kartica::before {
  content: "📌 povezano"; display: block; font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--siva); margin-bottom: .3rem;
}
.interna-kartica.vanjska::before { content: "🔗 s drugog portala"; }
.interna-kartica a { font-weight: 800; text-decoration: none; line-height: 1.35; display: block; }
.interna-kartica a:hover { background: var(--zuta); }

/* YouTube fasada: thumbnail + play, iframe tek na klik */
.yt-fasada { position: relative; display: block; margin: 1.2rem 0; cursor: pointer; }
.yt-fasada img { display: block; width: 100%; }
.yt-fasada::after {
  content: "▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; background: var(--crna); color: var(--zuta);
  border: 2px solid var(--zuta); border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 1.3rem; padding-left: .25rem;
}
.yt-fasada:hover::after { background: var(--crvena); color: #fff; }
.yt-video iframe { display: block; width: 100%; aspect-ratio: 16/9; height: auto; border: 0; margin: 1.2rem 0; }

/* ===== stranice tema/kategorija: kronologija ===== */
.tema-str .t-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.tema-str .t-head .broj { font-size: .78rem; font-weight: 800; background: var(--crna); color: #fff; border-radius: 999px; padding: .2rem .6rem; }
.kron .red { padding: .85rem 0; border-top: 1.5px solid #D8D4CB; display: flex; gap: .75rem; align-items: flex-start; }
.kron .red:first-child { border-top: none; }
.kron .rthumb { flex-shrink: 0; }
.kron .rthumb img { width: 6rem; height: 3.8rem; object-fit: cover; border: 2px solid var(--crna); border-radius: 4px; display: block; }
.kron .rtekst { min-width: 0; }
.kron .red h4 { font-size: 1rem; line-height: 1.35; margin: .25rem 0 0; font-weight: 800; }
.kron .red h4 a { text-decoration: none; }
.kron .red h4 a:hover { background: var(--zuta); }
.kron .red time { font-size: .72rem; color: var(--siva); }
.kron .red .status { margin-left: .5rem; }

/* ===== paginacija, footer ===== */
.pagin { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; font-weight: 800; }
.pagin a { text-decoration: none; background: var(--papir); border: 2px solid var(--crna); border-radius: 4px; padding: .3rem .7rem; box-shadow: 3px 3px 0 var(--crna); }
.pagin span { font-size: .8rem; color: var(--siva); }

.dno { border-top: 2px solid var(--crna); margin-top: 3rem; padding: 1.2rem 1.1rem 2rem; font-size: .85rem; }
.dno a { font-weight: 700; }

/* ===== lightbox ===== */
dialog.lightbox {
  border: none; background: rgba(15, 14, 12, .96); padding: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
}
dialog.lightbox img {
  position: absolute; inset: 0; margin: auto;
  max-width: 96vw; max-height: 92vh; width: auto; height: auto; object-fit: contain;
  transition: transform .15s ease-out, opacity .15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  dialog.lightbox img { transition: none; }
}
dialog.lightbox .lb-zatvori, dialog.lightbox .lb-prev, dialog.lightbox .lb-next {
  position: absolute; z-index: 2; background: var(--crna); color: var(--zuta);
  border: 2px solid var(--zuta); border-radius: 50%; width: 2.6rem; height: 2.6rem;
  font-size: 1.1rem; font-weight: 900; cursor: pointer;
}
dialog.lightbox .lb-zatvori { top: .8rem; right: .8rem; }
dialog.lightbox .lb-prev { left: .8rem; top: 50%; transform: translateY(-50%); }
dialog.lightbox .lb-next { right: .8rem; top: 50%; transform: translateY(-50%); }