/* Općina Cerna — bočna kolona: povezane objave i dokumenti */

/* Boja poveznica: klasa se navodi dvaput namjerno.
   Elementorov kit emitira globalnu boju linka kao `.elementor-kit-5 a`
   (specificnost 0-1-1), sto nadjacava selektor s jednom klasom. Bez ovoga
   svaka poveznica u widgetu poprimi globalnu plavu, iako widget ima svoju
   boju. Pogadalo je navigaciju, ploce izbornika, bocnu navigaciju i kartice
   novosti. Nadeno 01.09.2026. */


.cb {
  --cb-accent: #0f6c99;
  --cb-strong: #1f2c33;
  --cb-muted: #586f7c;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Barlow", system-ui, sans-serif;
  color: var(--cb-muted);
}

.cb--okvir { padding: 26px; border: 1px solid #e6ecef; }

.cb-naslov {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

/* --- Povezane objave --- */
.cb-lista { display: flex; flex-direction: column; }

.cb-stavka.cb-stavka {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 0;
  border-bottom: 1px solid #e6ecef;
  color: var(--cb-muted);
  text-decoration: none;
}

.cb-stavka:first-child { padding-top: 0; }
.cb-stavka:last-child { border-bottom: none; padding-bottom: 0; }
.cb-stavka:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

.cb-datum { font-size: 13.5px; color: var(--cb-muted); }

.cb-stavka-naslov {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cb-strong);
  text-wrap: pretty;
}

.cb a:hover, .cb a:focus { color: inherit; }
.cb-stavka:hover .cb-stavka-naslov { color: var(--cb-accent) !important; }

/* --- Dokumenti --- */
.cb-dok { display: flex; align-items: flex-start; gap: 12px; }
.cb-dok + .cb-dok { padding-top: 18px; margin-top: 2px; border-top: 1px solid #eef2f4; }

.cb-dok-ikona { flex: 0 0 auto; display: flex; margin-top: 2px; }
.cb-dok-telo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }

/* Mjeri se sirina roditelja, ne prozora: isti widget stoji i u uskom bocnom
   stupcu i u punoj sirini teksta, a medijski upit tu razliku ne vidi. */
.cb-dok-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cb-dokumenti { container-type: inline-size; }

.cb-dok-naziv {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cb-strong);
  text-wrap: pretty;
}

.cb-dok-meta { font-size: 13.5px; color: var(--cb-muted); }
.cb-dok-gumbi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; }

.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  cursor: pointer;
  border-radius: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 140ms, background 140ms, color 140ms;
}

/* Klasa stoji dvaput: Elementorov kit stilizira `a` i `button` globalno
   (`.elementor-kit-5 a`, 0-1-1) i inace pregazi jednostruku klasu (0-1-0) —
   izmjereno na stranici Ukop, gdje je „Preuzmi" ispao plav na tamnom. Iz
   istog razloga svako stanje ponavlja svaku boju: kit stilizira i `:hover`. */
.cb-btn--obris.cb-btn--obris { border: 1px solid #dfe7eb; background: #fff; color: #37474f; }
.cb-btn--obris.cb-btn--obris:hover,
.cb-btn--obris.cb-btn--obris:focus { border-color: #80d8ff; background: #fff; color: var(--cb-accent); }

.cb-btn--pun.cb-btn--pun { border: 1px solid #37474f; background: #37474f; color: #fff; }
.cb-btn--pun.cb-btn--pun:hover,
.cb-btn--pun.cb-btn--pun:focus { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; }

.cb-btn:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: -2px; }

@container (min-width: 520px) {
  .cb-dok-telo {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .cb-dok-tekst { flex: 1 1 260px; }
  .cb-dok-gumbi { padding-top: 0; margin-left: auto; }
}


/* --- Lightbox dokumenta --- */
.cd-scrim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 32, 38, 0.74);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.cd-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  /* Visina se MORA zadati. Samo `max-height` ostavlja panel da se skupi na
     visinu sadrzaja, a tijelo je `flex: 1 1 auto` bez vlastite visine — pa je
     iframe padao na zadanih 150 px i od PDF-a se vidjela samo traka.

     Cilj je 80 % visine prozora, ali nikad manje od dosadasnjih 900 px i
     nikad preko ruba: na velikom zaslonu 900 px je bilo tek dvije trecine
     prozora i dokument se citao kroz procjep. */
  height: min(calc(100vh - 80px), max(900px, 80vh));
  max-height: calc(100vh - 80px);
  background: #fff;
  box-shadow: 0 32px 70px rgba(12, 22, 27, 0.45);
}

.cd-vrh {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 20px 28px;
  border-bottom: 1px solid #e6ecef;
}

.cd-oznaka {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  border: 1px solid #dfe7eb;
  background: #f7fafc;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #586f7c;
}

.cd-naziv {
  flex: 1;
  min-width: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: #1f2c33;
}

.cd-zatvori {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #586f7c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-zatvori:hover { background: #eef2f4; color: #1f2c33; }
.cd-zatvori:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: -2px; }

.cd-telo { flex: 1 1 auto; min-height: 0; background: #eef1f3; }
/* Ispuna okvira vrijedi SAMO za izravan pregled slike ili PDF-a, gdje je
   sama datoteka prikaz. Bez izuzimanja `--tekst` pogadalo je i slike unutar
   pretvorenog Worda: grb od 128x167 px rastezao se na 780x1018 (izmjereno
   07.09.2026., zapisnik 9. sjednice). */
.cd-telo:not(.cd-telo--tekst) iframe,
.cd-telo:not(.cd-telo--tekst) img { display: block; width: 100%; height: 100%; border: 0; }
.cd-telo:not(.cd-telo--tekst) img { object-fit: contain; background: #eef1f3; }

.cd-dno {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 28px 24px;
  border-top: 1px solid #e6ecef;
}

.cd-nap { font-size: 14.5px; line-height: 1.55; color: #586f7c; }

@media (max-width: 767px) {
  .cd-scrim { padding: 0; align-items: stretch; }
  .cd-panel { max-width: 100%; height: 100vh; max-height: none; }
  .cd-vrh { padding: 16px 16px 16px 20px; }
  .cd-naziv { font-size: 16px; }
  .cd-telo { min-height: 60vh; }
  .cd-dno { flex-direction: column; align-items: stretch; padding: 18px 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-btn { transition: none; }
}

/* --- Bocna navigacija --- */
/* Prepisano iz prototipa (blok <aside> u Cerna Siskovci.dc.html). */
.cb-nav { gap: 14px; }
.cb-nav.cb--okvir { padding: 24px; }

.cb-nav-veza.cb-nav-veza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 15.5px;
  color: #37474f;
  text-decoration: none;
  border-bottom: 1px solid #eef2f4;
}

.cb-nav-veza:last-child { border-bottom: none; }
.cb-nav-veza:hover { color: var(--cb-accent); }
.cb-nav-veza:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

/* Trenutna stranica: podebljana i u akcentu, uz strelicu. */
.cb-nav-veza.cb-nav-veza.je-aktivna {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  color: var(--cb-accent);
}

.cb-nav-veza svg { flex: 0 0 auto; }

/* Stavka s nadnaslovom (npr. mjesec održavanja) slaže se u stupac — mjesec
   iznad naziva. U redu jedno uz drugo dugi nazivi su se prelamali. */
.cb-nav-veza.cb-nav-veza--slozena {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  padding: 13px 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.4;
}

.cb-nav-nad {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-accent);
}

/* --- Osnovni podaci --- */
.cb-podaci { gap: 16px; }

.cb-podaci--plavo {
  padding: 26px;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
}

.cb-podaci--plavo .cb-naslov { color: var(--cb-accent); }

.cb-red {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #dceaf2;
  font-size: 15px;
}

.cb-podaci:not(.cb-podaci--plavo) .cb-red { border-bottom-color: #e6ecef; }
.cb-red:last-child { padding-bottom: 0; border-bottom: none; }

.cb-red-naziv { color: var(--cb-muted); }

.cb-red-vrijednost {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  color: var(--cb-strong);
  text-align: right;
}

/* Dizajn paket Opcinske uprave (03.09.2026.): naziv kao mala verzalna oznaka
   iznad vrijednosti, redci odvojeni crtom. */
.cb-podaci--stupac { gap: 14px; }
.cb-podaci--stupac .cb-red { flex-direction: column; align-items: stretch; gap: 4px; padding: 13px 0; border-bottom: 1px solid #eef2f4; }
.cb-podaci--stupac .cb-red:first-child { padding-top: 0; }
.cb-podaci--stupac .cb-red:last-child { padding-bottom: 0; border-bottom: none; }
.cb-podaci--stupac .cb-red-vrijednost { font-size: 16px; text-align: left; }

.cb-podaci--stupac .cb-red-naziv,
.cb-podaci--bez-okvira .cb-red-naziv {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

/* „Organizatori": naziv je ono sto se cita prvo, a vrijednost mu je opis —
   obrnuto od uobicajenog retka, pa se stilovi zamjenjuju. */
.cb-podaci--opis .cb-red-naziv {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #1f2c33;
}

.cb-podaci--opis .cb-red-vrijednost {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--cb-muted);
}

/* Bez okvira: ugnijezden u tudi blok (redci telefona u „Kontakt nacelnika"). */
.cb-podaci--bez-okvira.cb-podaci--bez-okvira { padding: 0; border: 0; background: none; gap: 0; }
.cb-podaci--bez-okvira .cb-red { padding: 11px 0; gap: 14px; border-bottom: 1px solid #eef2f4; }
.cb-podaci--bez-okvira .cb-red:first-child { padding-top: 0; }
.cb-podaci--bez-okvira .cb-red:last-child { padding-bottom: 0; border-bottom: none; }
.cb-podaci--bez-okvira .cb-red-vrijednost { font-size: 15.5px; font-weight: 600; }
.cb-red-vrijednost a.cb-red-veza.cb-red-veza { color: inherit; text-decoration: none; }
.cb-red-vrijednost a.cb-red-veza.cb-red-veza:hover { color: var(--cb-accent); }

/* Bocni stupac je uzak (320 px), pa duge neprekinute rijeci — e-mail adrese,
   nazivi datoteka — moraju imati gdje puknuti umjesto da izlaze iz okvira. */
.cb, .cb * { overflow-wrap: anywhere; }

/* --- Pregled pretvorenog dokumenta --- */
/* `.cd-telo` je za PDF i slike samo okvir; kod pretvorenih dokumenata sam
   nosi tekst, pa treba pomicanje i citljive margine. */
.cd-telo--tekst {
  overflow: auto;
  background: #fff;
  padding: 32px 36px 40px;
  -webkit-overflow-scrolling: touch;
}

.cd-doc {
  max-width: 780px;
  margin: 0 auto;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #1f2c33;
}

.cd-doc h1, .cd-doc h2, .cd-doc h3, .cd-doc h4 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2c33;
  margin: 1.6em 0 0.6em;
}
.cd-doc h1 { font-size: 24px; }
.cd-doc h2 { font-size: 20px; }
.cd-doc h3 { font-size: 17.5px; }
.cd-doc h4 { font-size: 16px; }
.cd-doc > :first-child { margin-top: 0; }

.cd-doc p { margin: 0 0 1em; }
.cd-doc ul, .cd-doc ol { margin: 0 0 1em; padding-left: 1.4em; }
.cd-doc li { margin-bottom: 0.35em; }
.cd-doc a { color: #0f6c99; }
/* Slika u pretvorenom dokumentu ide u svojoj velicini, samo ne siroj od
   spremnika. `width: auto` stoji izricito da je nijedno opcenitije pravilo
   ne rastegne. Napomena: mammoth ne prenosi velicinu prikaza iz Worda, pa se
   slika vidi u punoj velicini datoteke — u zapisniku 9. sjednice grb je
   128 px (oko 3,4 cm) naspram 1,48 cm koliko ga Word crta. */
.cd-doc img { width: auto; max-width: 100%; height: auto; }

.cd-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 14.5px;
}
.cd-doc th, .cd-doc td {
  border: 1px solid #dfe7eb;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.cd-doc th { background: #f4f9fc; font-weight: 700; }
.cd-doc tr:nth-child(even) td { background: #fbfdfe; }

/* Tablica iz proracunske datoteke zna biti mnogo sira od prozora. */
.cd-tablica { overflow-x: auto; }
.cd-tablica table { width: auto; min-width: 100%; white-space: nowrap; }

.cd-list {
  margin: 0 0 10px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #586f7c;
}
.cd-list + .cd-tablica { margin-bottom: 28px; }

.cd-stanje {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 40px 28px;
  text-align: center;
  color: #586f7c;
  font-size: 16px;
  line-height: 1.6;
}
.cd-stanje strong { font-family: "Montserrat", system-ui, sans-serif; font-size: 17px; color: #1f2c33; }

@media (max-width: 767px) {
  .cd-telo--tekst { padding: 20px 16px 28px; }
  .cd-doc { font-size: 15.5px; }
}

/* ---------------------------------------------------------------------------
   Dokumenti na dnu stranice — handoff „Dokumenti stranice", varijanta 7A.
   Mjere su iz handoffa; klase koje stoje na poveznicama i gumbima pisu se
   dvaput jer ih Elementorov kit inace pregazi (`.elementor-kit-N a`, 0-1-1).
--------------------------------------------------------------------------- */

/* Odjeljak dolazi na kraj sadrzaja, odmah iza teksta ili galerije, pa mu
   treba isti razmak koji u stupcu sadrzaja imaju naslovi druge razine
   (52 px iznad). Bez toga se naslov „Dokumenti" zalijepi za ono iznad. */
.cerna-pagedocs {
  display: flex;
  flex-direction: column;
  margin-top: 52px;
  background: #fff;
}

/* U objavi je to jedan redak unutar teksta, ne odjeljak — ondje je manje. */
.cerna-pagedocs.cerna-pagedocs--jedan { margin-top: 24px; }

.cerna-pagedocs__head { display: flex; align-items: center; gap: 22px; padding-bottom: 20px; }

.cerna-pagedocs .cerna-pagedocs__title.cerna-pagedocs__title {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1f2c33;
  white-space: nowrap;
}

.cerna-pagedocs__rule { flex: 1; height: 1px; background: #e6ecef; }

.cerna-pagedocs__count {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #586f7c;
  white-space: nowrap;
}

.cerna-pagedocs__colhead,
.cerna-pagedocs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 420px;
  gap: 24px;
}

.cerna-pagedocs__colhead {
  padding-bottom: 14px;
  border-bottom: 1px solid #dfe7eb;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #37474f;
}

.cerna-pagedocs__col-file { text-align: right; }

.cerna-pagedocs__row { align-items: center; padding: 18px 0; border-bottom: 1px solid #eef2f4; }

.cerna-pagedocs__name {
  font-size: 17.5px;
  line-height: 1.45;
  color: #1f2c33;
  text-wrap: pretty;
}

/* Napomena uz dokument nije u dizajnu, ali polje postoji odranije —
   ispisuje se tiho ispod naziva da upisani podatak ne nestane. */
.cerna-pagedocs__note { display: block; margin-top: 3px; font-size: 15px; color: #586f7c; }

.cerna-pagedocs__date { font-size: 16px; color: #586f7c; }

.cerna-pagedocs__file { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

.cerna-pagedocs__ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dfe7eb;
  color: #37474f;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cerna-pagedocs__size {
  min-width: 52px;
  text-align: right;
  white-space: nowrap;
  font-size: 15.5px;
  color: #586f7c;
}

.cerna-pagedocs .cerna-pagedocs__view.cerna-pagedocs__view {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid #dfe7eb;
  border-radius: 0;
  background: none;
  color: #37474f;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Kit dira i :hover i :focus, pa se dvostruka klasa mora ponoviti i ondje. */
.cerna-pagedocs .cerna-pagedocs__view.cerna-pagedocs__view:hover,
.cerna-pagedocs .cerna-pagedocs__view.cerna-pagedocs__view:focus {
  border-color: #0f6c99;
  color: #0f6c99;
  background: none;
  border-radius: 0;
}

.cerna-pagedocs .cerna-pagedocs__dl.cerna-pagedocs__dl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: #37474f;
  color: #fff;
}

.cerna-pagedocs .cerna-pagedocs__dl.cerna-pagedocs__dl:hover,
.cerna-pagedocs .cerna-pagedocs__dl.cerna-pagedocs__dl:focus {
  background: #0f6c99;
  color: #fff;
  border-radius: 0;
}

.cerna-pagedocs__view:focus-visible,
.cerna-pagedocs__dl:focus-visible {
  outline: 3px solid rgba(128, 216, 255, 0.75);
  outline-offset: 2px;
}

/* Prijelomi se mjere po SIRINI STUPCA SADRZAJA, ne po sirini ekrana.
   Prototip je crtan u spremniku od 1180 px, a nasa stranica ima bocni
   stupac, pa je stvarni prostor na 1200 px ekrana svega ~705 px — po
   sirini ekrana bi ondje jos stajala tri stupca i naziv bi pao na 135 px.
   Spremnik je omot, ne sam odjeljak: upit se rjesava prema najblizem
   spremniku-PRETKU, pa element ne moze odgovarati na upit o vlastitoj
   sirini. (Nauceno 03.09.2026. na widgetu poveznica.) */
.cerna-pagedocs-omot { container-type: inline-size; }

@container (max-width: 1099px) {
  .cerna-pagedocs__colhead,
  .cerna-pagedocs__row { grid-template-columns: minmax(0, 1fr) 170px 400px; }
}

/* Ispod 900 px stupca redak ide u dva reda: naziv i datum gore, datoteka ispod. */
@container (max-width: 899px) {
  .cerna-pagedocs__colhead { display: none; }
  .cerna-pagedocs__file { justify-content: flex-start; flex-wrap: wrap; }

  /* Redak po prototipu (Cerna Natjecaj v2, mobilni): naziv; sivi redak
     „datum · XLSX · 3 MB"; Pregled i preuzimanje iste visine. Prije su
     oznaka (34), velicina i gumbi (48) stajali u jednom retku razlicitih
     visina, a velicina je visjela u praznini (Toni 13.10.2026.). Celija
     datoteke se rastvara (`contents`) da se dijelovi slazu redoslijedom. */
  .cerna-pagedocs__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
  .cerna-pagedocs__name { order: 1; flex: 1 1 100%; margin-bottom: 6px; }
  .cerna-pagedocs__date { order: 2; font-size: 14.5px; }
  .cerna-pagedocs__file { display: contents; }
  .cerna-pagedocs__ext,
  .cerna-pagedocs__size {
    order: 3;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    color: #586f7c;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
  }
  .cerna-pagedocs__size { order: 4; }
  .cerna-pagedocs__ext::before,
  .cerna-pagedocs__size::before { content: "·"; margin: 0 7px; }
  .cerna-pagedocs__date:empty + .cerna-pagedocs__file .cerna-pagedocs__ext::before { content: none; }
  .cerna-pagedocs__row::after { content: ""; order: 5; flex: 0 0 100%; height: 14px; }
  .cerna-pagedocs .cerna-pagedocs__view.cerna-pagedocs__view { order: 6; }
  .cerna-pagedocs .cerna-pagedocs__dl.cerna-pagedocs__dl { order: 7; }
  .cerna-pagedocs .cerna-pagedocs__view.cerna-pagedocs__view + .cerna-pagedocs__dl.cerna-pagedocs__dl { margin-left: 10px; }
}

/* Dodirne mete se ravnaju po uredaju, pa to ostaje upit o ekranu. */
@media (max-width: 1024px) {
  .cerna-pagedocs { margin-top: 40px; }
}

@media (max-width: 767px) {
  .cerna-pagedocs { margin-top: 32px; }
  .cerna-pagedocs .cerna-pagedocs__title.cerna-pagedocs__title { font-size: 21px; }
  .cerna-pagedocs__name { font-size: 16.5px; }
  .cerna-pagedocs .cerna-pagedocs__view.cerna-pagedocs__view { height: 48px; }
  .cerna-pagedocs .cerna-pagedocs__dl.cerna-pagedocs__dl { width: 48px; height: 48px; }
}

/* Dug naslov odjeljka („Dokumentacija zone") s `nowrap` prelijevao je
   redak na 480 px — mjereno 16 px preko. Na uskom se lomi u vise redaka. */
@container (max-width: 559px) {
  .cerna-pagedocs__head { flex-wrap: wrap; gap: 8px 16px; }
  .cerna-pagedocs .cerna-pagedocs__title.cerna-pagedocs__title { white-space: normal; }
  .cerna-pagedocs__rule { min-width: 24px; }
}