/* Vrijeme, upozorenja i kvaliteta zraka — traka upozorenja i traka u herou.
   Mjere su iz handoffa (README + `Cerna Baneri Upozorenja` i `Cerna Naslovnica`,
   render na 2560). Klase na poveznicama i gumbima pisu se dvaput jer ih
   Elementorov kit inace pregazi (`.elementor-kit-N a`, 0-1-1). */

/* =========================================================== traka upozorenja */

/* Boja trake je boja upozorenja; dolazi kao varijabla iz PHP-a. Na crvenoj su
   crta, obrub i podloga gumba bijeli s prozirnoscu. */
.cerna-alert {
  background: var(--alert-bg, #f5c400);
  color: var(--alert-fg, #1f2c33);
  border-bottom: 1px solid rgba(31, 44, 51, 0.16);
  font-family: "Barlow", system-ui, sans-serif;
  --alert-crta: rgba(31, 44, 51, 0.3);
  --alert-gumb: rgba(31, 44, 51, 0.14);
}
.cerna-alert--4 { border-bottom-color: rgba(0, 0, 0, 0.18); --alert-crta: rgba(255, 255, 255, 0.42); --alert-gumb: rgba(255, 255, 255, 0.2); }
.cerna-alert[hidden] { display: none !important; }

.cerna-alert__row {
  /* Sadrzaj trake mora stati tocno iznad kontejnera stranice: 1360 px do
     1919 px, 1600 px iznad toga, plus vlastiti padding. Bez toga je traka
     uvucena 40 px (odnosno 160 px na 2560) u odnosu na logo i naslov. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

/* Datum je u istom tekstualnom toku kao vrsta pojave (handoff, zamka 1).
   Tekst se poravnava **po osnovnoj liniji**, ne po sredini kutije: razina je
   Montserrat 11,5 px u verzalu, pojava Barlow 15,5 px, pa su im kutije iste
   visine imale osnovne linije 6 px razmaknute — verzal je vidljivo sjedio
   iznad ostatka reda. Isto stoji i u prototipu, pa je ovo popravak preko
   njega. Ikona i crta nemaju osnovnu liniju i ostaju centrirane. */
.cerna-alert .cerna-alert__text.cerna-alert__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 13px;
  color: inherit;
  font-size: 15.5px;
  line-height: 1;
  text-decoration: none;
}
.cerna-alert .cerna-alert__text.cerna-alert__text:hover,
.cerna-alert .cerna-alert__text.cerna-alert__text:focus { color: inherit; opacity: 0.78; }
.cerna-alert__text svg { flex: 0 0 auto; align-self: center; }

.cerna-alert__level {
  display: block;
  line-height: 20px;
  white-space: nowrap;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cerna-alert__sep { flex: 0 0 auto; align-self: center; width: 1px; height: 20px; background: var(--alert-crta); }
.cerna-alert__event {
  display: block;
  line-height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cerna-alert__when {
  display: inline;
  margin-left: 13px;
  opacity: 0.82;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.cerna-alert .cerna-alert__source.cerna-alert__source {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  line-height: 30px;
  border: 1px solid var(--alert-crta);
  border-radius: 0;
  color: inherit;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.cerna-alert .cerna-alert__cta.cerna-alert__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  line-height: 30px;
  border-radius: 0;
  background: var(--alert-gumb);
  color: inherit;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.cerna-alert .cerna-alert__source.cerna-alert__source:hover,
.cerna-alert .cerna-alert__source.cerna-alert__source:focus,
.cerna-alert .cerna-alert__cta.cerna-alert__cta:hover,
.cerna-alert .cerna-alert__cta.cerna-alert__cta:focus { color: inherit; opacity: 0.78; border-radius: 0; background: var(--alert-gumb); }
.cerna-alert .cerna-alert__source.cerna-alert__source:hover { background: transparent; }

.cerna-alert .cerna-alert__close.cerna-alert__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cerna-alert .cerna-alert__close.cerna-alert__close:hover,
.cerna-alert .cerna-alert__close.cerna-alert__close:focus { opacity: 1; background: none; color: inherit; }

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

/* Ispod 1440 px pada datum, ispod 480 px i crta. Gumb za zatvaranje ostaje. */
@media (max-width: 1439px) {
  .cerna-alert__when { display: none; }
}
@media (max-width: 1024px) {
  .cerna-alert__row { padding: 0 28px; gap: 14px; }
}
@media (max-width: 767px) {
  .cerna-alert__row { padding: 0 16px; gap: 10px; }
  .cerna-alert .cerna-alert__source.cerna-alert__source { display: none; }
}
/* Na najuzim ekranima ostaje **razina** („ŽUTO UPOZORENJE"), ne vrsta pojave:
   razina je ono sto posjetitelja upozorava, a vrsta stoji iza gumba Detalji.
   Prototip na 375 px pokazuje upravo razinu. */
@media (max-width: 479px) {
  .cerna-alert__sep { display: none; }
  .cerna-alert__event { display: none; }
}

/* ============================================================ traka u herou */

/* Widget stoji u hero spremniku i na sirokim ekranima lebdi 76 px iznad
   njegova donjeg ruba, poravnat s desnim rubom sadrzaja. Sirina prati
   `--content-width` samog hero spremnika, pa se poklapa s naslovom iznad. */
.elementor-widget-cerna-vrijeme-traka {
  position: absolute;
  left: 50%;
  bottom: 76px;
  width: var(--content-width, 100%);
  max-width: calc(100% - var(--padding-left, 40px) - var(--padding-right, 40px));
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 2;
}
.elementor-widget-cerna-vrijeme-traka > .elementor-widget-container { pointer-events: auto; }

.cerna-wx {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(12, 22, 27, 0.2);
  font-family: "Barlow", system-ui, sans-serif;
  color: #1f2c33;
}

.cerna-wx__now { display: flex; align-items: center; gap: 14px; padding: 14px 22px; }
.cerna-wx__now-ikona { display: inline-flex; flex: 0 0 auto; }
.cerna-wx__now-tekst { display: flex; flex-direction: column; gap: 2px; }
.cerna-wx__temp { display: flex; align-items: baseline; gap: 5px; }
.cerna-wx__temp strong { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 24px; line-height: 1; color: #1f2c33; }
.cerna-wx__jedinica { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #586f7c; }
.cerna-wx__opis { font-size: 13.5px; color: #586f7c; white-space: nowrap; }

.cerna-wx__crta { display: block; width: 1px; margin: 14px 0; background: #e6ecef; flex: 0 0 auto; }

.cerna-wx__dani { display: flex; align-items: center; gap: 18px; padding: 14px 22px; }
.cerna-wx__dan { display: flex; align-items: center; gap: 7px; }
.cerna-wx__dan-ime { font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #586f7c; }
.cerna-wx__dan-ikona { display: inline-flex; }
.cerna-wx__dan-temp { font-family: "Montserrat", system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #1f2c33; }

.cerna-wx .cerna-wx__aq.cerna-wx__aq {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 22px;
  border-left: 1px solid #e6ecef;
  background: #f7fafc;
  color: #1f2c33;
  text-decoration: none;
}
.cerna-wx .cerna-wx__aq.cerna-wx__aq:hover,
.cerna-wx .cerna-wx__aq.cerna-wx__aq:focus { background: #eaf6fd; color: #1f2c33; }
.cerna-wx__aq-tocka { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cerna-wx__aq-tekst { display: flex; flex-direction: column; gap: 2px; }
.cerna-wx__aq-oznaka { font-family: "Montserrat", system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #586f7c; }
.cerna-wx__aq-naziv { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 14.5px; color: #1f2c33; }
.cerna-wx__aq-strelica { color: #0f6c99; flex: 0 0 auto; }
/* Skala razina vidi se samo na mobitelu (cerna-vrijeme-mobitel.css). */
.cerna-wx__aq-skala { display: none; }

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

/* Tablet: traka nize (96 px) i bez prognoze. */
@media (max-width: 1024px) {
  .elementor-widget-cerna-vrijeme-traka { bottom: 96px; }
  .cerna-wx__crta, .cerna-wx__dani { display: none; }
}

/* Mobitel: traka ulazi u tok na dnu heroa, puna sirina, svijetla podloga s
   obrubom i bez sjene — raspored iz prototipa za male ekrane.
   Granica je 768 (Elementorov tablet), ne 767: na tocno 768 px (iPad
   uspravno) trazilica je vec puna sirina po Elementorovoj postavci, a traka
   je jos lebdjela i prekrivala gumb Traži (12.10.2026.). */
@media (max-width: 768px) {
  /* display: block — kao flex s justify-content: flex-end spremnik se
     stisnuo na sirinu sadrzaja i odmaknuo udesno (Z Fold, 475 px, 13.10.). */
  .elementor-widget-cerna-vrijeme-traka {
    display: block;
    position: static;
    left: auto; bottom: auto;
    width: 100%; max-width: none;
    transform: none;
    margin-top: 8px;
  }
  .cerna-wx { width: 100%; flex-wrap: wrap; background: #f7fafc; box-shadow: none; border: 1px solid #e6ecef; }
  .cerna-wx__now { flex: 1 1 auto; }
  .cerna-wx .cerna-wx__aq.cerna-wx__aq { flex: 1 1 100%; border-left: 0; border-top: 1px solid #e6ecef; }
}

/* Od 440 px (Z Fold vanjski ekran 475) do tableta uspravno trenutno vrijeme
   i kvaliteta zraka stoje jedno uz drugo, u dvije jednake polovice. Opis
   vremena s DHMZ-a zna biti dug („Umjereno oblačno, slaba kiša" treba 509 px
   u jednom retku), pa se lomi u drugi redak umjesto da gura karticu.
   Ispod 768 vidi cerna-vrijeme-mobitel.css. */
@media (min-width: 440px) and (max-width: 768px) {
  .cerna-wx { flex-wrap: nowrap; }
  .cerna-wx__now { flex: 1 1 50%; min-width: 0; }
  .cerna-wx__opis { white-space: normal; }
  .cerna-wx .cerna-wx__aq.cerna-wx__aq { flex: 1 1 50%; border-top: 0; border-left: 1px solid #e6ecef; }
  .cerna-wx__aq-oznaka { white-space: nowrap; }
}
@media (min-width: 440px) and (max-width: 480px) {
  .cerna-wx__now, .cerna-wx .cerna-wx__aq.cerna-wx__aq { padding-left: 16px; padding-right: 16px; }
}

/* Strelica kvalitete zraka uz desni rub kartice — u dva retka stajala je
   odmah iza teksta, na sredini (Toni, iPhone 16, 14.10.2026.). */
@media (max-width: 768px) {
  .cerna-wx__aq-strelica { margin-left: auto; }
}

/* Ispod 768 px vrijedi raspored iz cerna-vrijeme-mobitel.css (handoff
   widget_prognoza, 14.10.2026.) — dvije plocice ispod heroja i prognoza; on je
   zamijenio i 2.79.1 pravilo za 360–439 px. Pravila iznad ostaju za 768. */

/* ====================================================== stranica vrijeme/zrak */

.cerna-vz { display: flex; flex-direction: column; font-family: "Barlow", system-ui, sans-serif; color: #37474f; }

.cerna-vz__head { display: flex; align-items: center; gap: 22px; padding: 52px 0 26px; }
.cerna-vz .cerna-vz__h2.cerna-vz__h2 {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1f2c33;
  white-space: nowrap;
}
.cerna-vz__rule { flex: 1; height: 1px; background: #e6ecef; }
.cerna-vz__source {
  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;
}

/* ---------- upozorenja ---------- */

.cerna-warn { display: flex; flex-direction: column; gap: 18px; }
.cerna-warn__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.cerna-warn .cerna-warn__tab.cerna-warn__tab {
  display: flex; align-items: center; gap: 11px; flex-wrap: nowrap;
  min-height: 54px; padding: 0 18px; border: 1px solid #e6ecef; border-radius: 0;
  background: #fff; color: #1f2c33; cursor: pointer; text-align: left;
}
/* Tema boji svaki `button` na hoveru — karticu dana drzimo na njezinoj
   pozadini, a aktivna ostaje tamna. */
.cerna-warn .cerna-warn__tab.cerna-warn__tab:hover { background: #fff; color: #1f2c33; }
.cerna-warn .cerna-warn__tab.is-aktivan,
.cerna-warn .cerna-warn__tab.is-aktivan:hover { background: #1f2c33; border-color: #1f2c33; color: #fff; }
.cerna-warn__tab-dan {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.cerna-warn__tab-datum { font-size: 14.5px; color: #586f7c; white-space: nowrap; }
.cerna-warn .cerna-warn__tab.is-aktivan .cerna-warn__tab-datum { color: #c6d4db; }
.cerna-warn__tab-tocka { width: 10px; height: 10px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; }

.cerna-warn__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.cerna-warn__item {
  display: flex; flex-direction: column; gap: 9px; padding: 24px;
  background: #fff; border: 1px solid #e6ecef; border-left: 4px solid var(--razina, #e6ecef);
}
.cerna-warn__item-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cerna-warn__badge {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px;
}
.cerna-warn__meaning {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #586f7c;
}
.cerna-warn__valid { font-size: 14.5px; color: #586f7c; flex-basis: 100%; }
.cerna-vz .cerna-warn__title.cerna-warn__title {
  margin: 0; font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: 21px; line-height: 1.25; color: #1f2c33;
}
.cerna-warn__detail { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 16.5px; color: #37474f; }
.cerna-warn__impact { margin: auto 0 0; font-size: 16px; line-height: 1.65; color: #586f7c; text-wrap: pretty; }

.cerna-warn__prazno {
  display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px;
  background: #f2fbf5; border-left: 4px solid #1f9d55; font-size: 16.5px; color: #37474f;
}
.cerna-warn__prazno svg { flex: 0 0 auto; margin-top: 2px; }

/* Cetiri stupnja u jednakim stupcima; naziv stoji iznad znacenja, kvadratic
   se proteze kroz oba retka. */
.cerna-warn__legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-top: 4px; }
.cerna-warn__legend-item {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 11px;
  align-items: start; color: #586f7c;
}
.cerna-warn__legend-boja { grid-row: span 2; width: 14px; height: 14px; margin-top: 3px; }
.cerna-warn__legend-naziv { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 15px; color: #1f2c33; }
.cerna-warn__legend-tekst { font-size: 14.5px; line-height: 1.4; color: #586f7c; }

/* ---------- vrijeme ---------- */

.cerna-vz__weather { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; }

.cerna-now { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: #37474f; }
.cerna-now__label {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9fb1ba;
}
.cerna-now__temp-red { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cerna-now__temp { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 68px; line-height: 1; color: #fff; }
.cerna-now__unit { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 20px; color: #9fb1ba; }
/* Opis stoji uz temperaturu u istom redu („28,4 °C Vedro"), ne ispod. */
.cerna-now__desc { font-size: 17px; color: #c6d4db; }
/* Crte izmedu celija su podloga mreze koja se vidi kroz razmak od 1 px. */
.cerna-now__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.16); }
.cerna-now__cell { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 14px 14px; background: #37474f; }
.cerna-now__cell-label {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9fb1ba;
}
.cerna-now__cell-value { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #fff; }

.cerna-fc-wrap {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px; background: #fff; border: 1px solid #e6ecef;
}
.cerna-fc__head {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #586f7c;
}
.cerna-fc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cerna-fc__day {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 12px 22px; background: #f4f9fc; text-align: center;
}
.cerna-fc__day-head { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cerna-fc__day-name { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #1f2c33; }
.cerna-fc__day-date { font-size: 14px; color: #586f7c; }
.cerna-fc__icon { display: inline-flex; color: #0f6c99; }
.cerna-fc__desc { font-size: 14.5px; line-height: 1.45; color: #586f7c; text-wrap: pretty; }
.cerna-fc__temp { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.cerna-fc__max { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 20px; color: #1f2c33; }
.cerna-fc__min { font-size: 15px; color: #586f7c; }

/* ---------- kvaliteta zraka ---------- */

/* Dvije kartice dijele redove vanjske mreze (subgrid), pa im zaglavlje,
   indeks, senzori i tablica pocinju u istoj liniji bez obzira na to u
   koliko se redaka prelomi savjet. Bez mjerenja visina u JS-u. */
.cerna-aq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 20px;
  row-gap: 22px;
}
.cerna-aq__station {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-content: start;
  gap: 20px;
  padding: 26px;
  border: 1px solid #e6ecef;
  background: #fff;
}
/* Preglednik bez subgrida: kartice rade, samo nisu poravnate. */
@supports not (grid-template-rows: subgrid) {
  .cerna-aq__station { grid-row: auto; grid-template-rows: none; }
}

.cerna-aq__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cerna-aq__name { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 19px; color: #1f2c33; }
.cerna-aq__ago { font-size: 14.5px; color: #586f7c; white-space: nowrap; }

/* Indeks, ljestvica i savjet stoje u zajednickom bloku s rubom u boji
   indeksa — bez toga blok vizualno propada u karticu. */
.cerna-aq__index {
  display: flex; flex-direction: column; gap: 13px;
  padding: 20px; background: #f4f9fc; border-left: 3px solid var(--boja, #e6ecef);
}
.cerna-aq__index-top { display: flex; align-items: center; gap: 10px; }
.cerna-aq__index-num { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 42px; line-height: 1; }
.cerna-aq__index-of { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #9fb1ba; }
.cerna-aq__index-tekst { display: flex; flex-direction: column; gap: 2px; margin-left: 6px; }
.cerna-aq__index-oznaka { font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #586f7c; }
.cerna-aq__index-naziv { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 19px; color: #1f2c33; }
.cerna-aq__scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cerna-aq__scale-step { height: 6px; opacity: 0.28; }
.cerna-aq__scale-step.is-on { opacity: 1; }
.cerna-aq__advice { font-size: 16px; line-height: 1.6; color: #37474f; text-wrap: pretty; }

.cerna-aq__env { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cerna-aq .cerna-aq__sensor.cerna-aq__sensor {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 112px; padding: 14px 16px;
  border: 1px solid #e6ecef; border-radius: 0; background: #fff; color: #1f2c33;
  text-align: left; cursor: pointer;
}
.cerna-aq .cerna-aq__sensor.cerna-aq__sensor:hover,
.cerna-aq .cerna-aq__sensor.cerna-aq__sensor:focus { border-color: #80d8ff; background: #fff; }
.cerna-aq .cerna-aq__sensor.cerna-aq__sensor:disabled { cursor: default; opacity: 1; }
.cerna-aq__sensor-label { font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #586f7c; }
.cerna-aq__sensor-row { display: flex; align-items: baseline; gap: 5px; }
.cerna-aq__sensor-value { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 24px; color: #1f2c33; }
.cerna-aq__sensor-unit { font-size: 14px; color: #586f7c; }

.cerna-aq__poll { display: flex; flex-direction: column; }
.cerna-aq__poll-head,
.cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row {
  display: grid;
  grid-template-columns: 9px 68px minmax(0, 1fr) 70px 48px 46px;
  column-gap: 11px;
  align-items: center;
}
.cerna-aq__poll-head {
  padding-bottom: 12px; border-bottom: 1px solid #dfe7eb;
  font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #586f7c;
}
.cerna-aq__poll-head-naziv { grid-column: 2 / 4; }
.cerna-aq__poll-head-mjera { grid-column: 4 / 7; text-align: right; }
.cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row {
  height: 48px; padding: 0; border: 0; border-bottom: 1px solid #eef2f4; border-radius: 0;
  background: none; color: #1f2c33; cursor: pointer; text-align: left;
}
.cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row:hover,
.cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row:focus { background: #f5fbfe; color: #1f2c33; }
.cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row:disabled { cursor: default; }
.cerna-aq__dot { width: 9px; height: 9px; border-radius: 50%; }
.cerna-aq__poll-naziv { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #1f2c33; }
.cerna-aq__poll-opis { font-size: 15px; color: #586f7c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerna-aq__poll-vrijednost { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 15.5px; text-align: right; }
.cerna-aq__poll-jedinica { font-size: 13.5px; color: #586f7c; }

/* ---------- sto znaci indeks ---------- */

.cerna-vz__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cerna-vz__legend-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px;
  padding: 18px 20px; background: #f7fafc; border-left: 3px solid var(--boja, #e6ecef);
}
.cerna-vz__legend-num {
  grid-row: span 2; font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: 20px; color: var(--boja, #586f7c);
}
.cerna-vz__legend-naziv { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #1f2c33; }
.cerna-vz__legend-tekst { font-size: 15px; line-height: 1.55; color: #586f7c; text-wrap: pretty; }

.cerna-vz__note {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 40px;
  padding: 22px 24px; background: #f4f9fc; border-left: 3px solid #0f6c99;
  font-size: 15.5px; line-height: 1.7; color: #37474f;
}
.cerna-vz__note svg { flex: 0 0 auto; margin-top: 2px; }

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

/* ---------- razine ---------- */

@media (min-width: 1560px) {
  /* Iznad 1560 px svaki senzor dobiva svoj stupac. */
  .cerna-aq__env { grid-template-columns: repeat(var(--senzora, 2), minmax(0, 1fr)); }
}
/* Od 1920 px kontejner stranice je 1600 px i prototip na tom stupnju trazi
   veci naslov, siru karticu trenutnog stanja i siru traku upozorenja. */
@media (min-width: 1920px) {
  .cerna-alert__row { max-width: 1680px; }
  .cerna-vz .cerna-vz__h2.cerna-vz__h2 { font-size: 31px; }
  .cerna-vz__weather { grid-template-columns: 400px minmax(0, 1fr); }
}
@media (max-width: 1439px) {
  .cerna-vz__weather { grid-template-columns: 330px minmax(0, 1fr); }
  .cerna-vz__legend { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  /* Tablet: kartice zraka jedna ispod druge, prognoza i dalje u redu. */
  .cerna-vz__weather { grid-template-columns: 1fr; }
  .cerna-warn__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
  .cerna-fc-wrap { padding: 22px; }
  .cerna-aq { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; }
  .cerna-aq__station { grid-row: auto; grid-template-rows: none; }
  .cerna-warn__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cerna-vz__head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 36px 0 20px; }
  .cerna-vz .cerna-vz__h2.cerna-vz__h2 { font-size: 21px; white-space: normal; }
  .cerna-vz__rule { display: none; }
  .cerna-warn__tabs { grid-template-columns: 1fr; gap: 8px; }
  .cerna-warn__list { gap: 14px; }
  .cerna-warn__legend { grid-template-columns: 1fr; gap: 12px; }
  .cerna-fc-wrap { padding: 18px 16px; gap: 14px; }
  .cerna-now { padding: 24px; }
  .cerna-now__temp { font-size: 54px; }
  .cerna-fc { grid-template-columns: 1fr; gap: 10px; }
  .cerna-fc__day {
    display: grid; grid-template-columns: 84px 44px minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 14px 16px; text-align: left;
  }
  .cerna-fc__day-head { align-items: flex-start; }
  .cerna-fc__temp { margin-top: 0; justify-content: flex-end; }
  .cerna-aq__station { padding: 20px; gap: 16px; }
  /* Opis tvari je na mobitelu skriven, pa mreza ima stupac manje — inace
     vrijednost upadne u njegov prazni stupac (0–51 px) i prekrije jedinicu
     (nadjeno obilaskom 14.10.2026.). */
  .cerna-aq__poll-head,
  .cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row { grid-template-columns: 9px minmax(0, 1fr) 64px 44px 46px; column-gap: 8px; }
  .cerna-aq__poll-head-naziv { grid-column: 2 / 3; }
  .cerna-aq__poll-head-mjera { grid-column: 3 / 6; }
  .cerna-aq__poll-opis { display: none; }
  .cerna-vz__legend { grid-template-columns: 1fr; }
  .cerna-vz__note { margin-top: 28px; padding: 18px 20px; }
}

/* Prognoza do 440 px: opis ide ispod ikone — u jednom retku na 320 je
   imao 7 px i prekrivao temperaturu. */
@media (max-width: 440px) {
  .cerna-fc__day {
    grid-template-columns: 76px 36px minmax(0, 1fr) auto;
    grid-template-areas: "dan ikona . temp" "dan opis opis opis";
    row-gap: 2px; column-gap: 10px;
  }
  .cerna-fc__day-head { grid-area: dan; }
  .cerna-fc__icon { grid-area: ikona; }
  .cerna-fc__desc { grid-area: opis; }
  .cerna-fc__temp { grid-area: temp; }
}

/* Kartice senzora u dva stupca na najuzim ekranima: „TEMPERATURA" s
   razmakom slova 0,12em ne stane u 320 px. */
@media (max-width: 380px) {
  .cerna-aq .cerna-aq__sensor.cerna-aq__sensor { padding-left: 12px; padding-right: 12px; }
  .cerna-aq .cerna-aq__sensor-label { letter-spacing: 0.05em; }
}

/* ---------- modal s grafom ---------- */

.cerna-graf-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12, 22, 27, 0.62);
}
.cerna-graf-overlay[hidden] { display: none !important; }
.cerna-graf {
  display: flex; flex-direction: column; gap: 20px;
  width: min(880px, 100%); max-height: 90vh; overflow: auto;
  padding: 26px 28px; background: #fff;
  font-family: "Barlow", system-ui, sans-serif; color: #37474f;
}
.cerna-graf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cerna-graf__kicker { font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #586f7c; }
.cerna-graf__title { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 21px; line-height: 1.3; color: #1f2c33; }
.cerna-graf .cerna-graf__close.cerna-graf__close {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
  border: 1px solid #e6ecef; border-radius: 0; background: #fff; color: #37474f; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cerna-graf .cerna-graf__close.cerna-graf__close:hover,
.cerna-graf .cerna-graf__close.cerna-graf__close:focus { background: #0f6c99; color: #fff; border-color: #0f6c99; }
.cerna-graf__chart svg { display: block; width: 100%; height: 240px; }
.cerna-graf__axis { display: flex; justify-content: space-between; padding-top: 8px; font-size: 13px; color: #586f7c; }
.cerna-graf__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cerna-graf__stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #f7fafc; }
.cerna-graf__stat-label { font-family: "Montserrat", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #586f7c; }
.cerna-graf__stat-value { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 22px; color: #1f2c33; }
.cerna-graf__stat-unit { font-size: 13.5px; color: #586f7c; }
.cerna-graf__foot { font-size: 14.5px; color: #586f7c; }

@media (max-width: 767px) {
  .cerna-graf { padding: 20px; gap: 16px; }
  .cerna-graf__stats { grid-template-columns: 1fr; gap: 10px; }
  .cerna-graf__chart svg { height: 200px; }
}

/* Kit stilizira svaki `button` s velikim slovima i razmakom slova
   (`.elementor-kit-5 button`, 0-1-1). Na kartici senzora i u tablici tvari
   to je pretvorilo jedinicu **µg/m³ u „MG/M³"** — razlika je tisućustruka —
   a nazive tvari i dane u karticama u verzal. Zato svaki naš gumb izričito
   vraća normalan tekst, a velika slova ostaju samo ondje gdje ih dizajn
   traži (oznake iznad vrijednosti). Nađeno mjerenjem 04.09.2026. */
.cerna-vz .cerna-warn__tab.cerna-warn__tab,
.cerna-aq .cerna-aq__sensor.cerna-aq__sensor,
.cerna-aq .cerna-aq__poll-row.cerna-aq__poll-row,
.cerna-graf .cerna-graf__close.cerna-graf__close {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.cerna-aq__sensor-label,
.cerna-aq__poll-head,
.cerna-warn__tab-dan,
.cerna-aq__index-oznaka { text-transform: uppercase; }
.cerna-warn__tab-dan { letter-spacing: 0.08em; font-weight: 700; }
.cerna-aq__sensor-label { letter-spacing: 0.12em; }
.cerna-aq__poll-head { letter-spacing: 0.12em; }