/* Traka brojki i vremenska crta.
   Isti vizualni jezik kao tijek prijave u `Cerna Status Prijave.dc.html`:
   tocka, spojna crta, bez zaobljenja, bez sjena. */

/* ---------- Traka brojki ---------- */

.cbr {
  display: grid;
  grid-template-columns: repeat(var(--cbr-kol, 4), minmax(0, 1fr));
  gap: 1px;
  background: #e6ecef;
  border: 1px solid #e6ecef;
}

.cbr--plavo { background: #dceaf2; border-color: #dceaf2; }

.cbr-celija {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 20px;
  background: #fff;
  min-width: 0;
}

.cbr--plavo .cbr-celija { background: #f4f9fc; }

.cbr-broj {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--cbr-broj, #1f2c33);
  overflow-wrap: anywhere;
}

.cbr--plavo .cbr-broj { color: var(--cbr-broj, #0f6c99); }

.cbr-oznaka {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
  color: #586f7c;
}

@media (max-width: 480px) {
  .cbr-celija { padding: 18px 16px; }

  /* Najdulja rijec (--cbr-znakova, iz rendera) mora stati u celiju:
     velicina = sirina celije / (znakova × 0,66 em — Montserrat 800,
     izmjereno „Jednokratna" 0,625, „099/239-9770" 0,61, „Rukomet" 0,71 —
     zato 0,72; s 0,66 je „Rukomet" na 320 px izlazio 8 px, 14.10.2026.), a najvise
     velicina iz Elementora (--cbr-vel). Selektor nadjacava Elementorovo
     pravilo widgeta (.elementor-ID .elementor-element-ID .cbr-broj).
     Izmjereno 14.10.: Zastita zivotinja 16,5 px na 360 i 18,4 na 390,
     Zazeli 22 na 360, KUD (godine) ostaje 24. */
  .cbr-celija { container-type: inline-size; }
  .cbr.cbr .cbr-celija .cbr-broj.cbr-broj {
    font-size: min(var(--cbr-vel, 24px), calc(100cqi / (var(--cbr-znakova, 1) * 0.72)));
    overflow-wrap: normal;
  }
}

/* ---------- Vremenska crta ---------- */

.cvc {
  --cvc-razmak: 30px;
  /* Grid je na cijelom popisu, ne na pojedinoj stavci: stupac godine mora biti
     zajednicki, inace svaki redak racuna svoju sirinu i os se pomice udesno
     ondje gdje je oznaka dulja ("1959.-1962.", "prije 1966."). */
  display: grid;
  grid-template-columns: auto 22px minmax(0, 1fr);
  row-gap: var(--cvc-razmak, 30px);
  align-items: start;
}

.cvc-nadnaslov {
  grid-column: 1 / -1;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #586f7c;
  margin-bottom: -6px;
}

/* Omot stavke ne stvara vlastiti okvir — njegova tri djeteta ulaze izravno
   u mrezu popisa, pa svi redci dijele iste stupce. Klasa i dalje vrijedi za
   odabir (`--puna`, `:last-child`). */
.cvc-stavka { display: contents; }

.cvc-god {
  grid-column: 1;
  min-width: var(--cvc-god-w, 96px);
  padding-right: 18px;
  padding-top: 1px;
  text-align: right;
  white-space: nowrap;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  color: var(--cvc-accent, #0f6c99);
}

.cvc-os {
  grid-column: 2;
  position: relative;
  display: block;
  align-self: stretch;
}

/* Tocka na osi. */
.cvc-os::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--cvc-accent, #0f6c99);
  background: #fff;
}

.cvc-stavka--puna .cvc-os::before { background: var(--cvc-accent, #0f6c99); }

/* Crta do sljedece tocke: visina retka umanjena za tocku, uvecana za razmak. */
.cvc-os::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 9px;
  width: 1px;
  height: calc(100% - 21px + var(--cvc-razmak, 30px));
  background: #e6ecef;
}

.cvc-stavka:last-child .cvc-os::after { display: none; }

.cvc-sadrzaj {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cvc-naslov {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #1f2c33;
}

.cvc-tekst {
  font-size: 16.5px;
  line-height: 1.7;
  color: #586f7c;
}

/* Ispod 769 px godina ide iznad naslova, os ostaje uz lijevi rub. */
@media (max-width: 768px) {
  /* Na uskom ekranu stupac godine nestaje, pa zajednicka mreza vise ne treba —
     svaka stavka opet nosi svoj grid, a razmak ide na nju. */
  .cvc { display: flex; flex-direction: column; row-gap: 0; }
  .cvc-nadnaslov { margin-bottom: 18px; }
  .cvc-stavka {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    padding-bottom: var(--cvc-razmak, 30px);
  }
  .cvc-stavka:last-child { padding-bottom: 0; }
  .cvc-os { grid-column: 1; grid-row: 1 / span 2; }
  .cvc-god {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: left;
    padding-right: 0;
    padding-bottom: 3px;
    font-size: 17px;
  }
  .cvc-sadrzaj { grid-column: 2; grid-row: 2; }
}

/* Oznaka ispod brojke na najuzim ekranima („UDOMLJAVANJU" na 320 px). */
@media (max-width: 360px) {
  .cbr-oznaka { letter-spacing: 0.08em; }
}