/* Layout: Siroka. Design tokens, hero, body grid, gallery mosaic.
   The accent is overridden on the wrapper rather than in the Blocksy palette,
   so the rest of the portal keeps #C10000 until all three layouts are decided.
   Blocksy palette variables are re-pointed here as well, so anything the theme
   renders inside the article -- comments, related posts -- follows the layout. */

.kz-siroka {
  --kz-bg: #ffffff;
  --kz-surface: #faf9f6;
  --kz-surface-2: #f0eee8;
  --kz-ink: #141413;
  --kz-ink-2: #4c4b47;
  --kz-ink-3: #8b8a84;
  --kz-line: rgba(0, 0, 0, .11);
  --kz-accent: #D61F26;
  --kz-accent-2: #AB191E;
  --kz-soft: rgba(214, 31, 38, .08);
  --kz-tsize: 15.5px;
  --theme-palette-color-1: var(--kz-accent);
  --theme-palette-color-2: var(--kz-accent-2);
  background-color: var(--kz-bg);
  color: var(--kz-ink);
}

/* Blocksy dark mode flips an attribute on the document element. Until dark mode
   is switched on in the Customizer these rules simply never match. */
html[data-theme="dark"] .kz-siroka,
body.ct-dark-mode .kz-siroka {
  --kz-bg: #111110;
  --kz-surface: #191918;
  --kz-surface-2: #232320;
  --kz-ink: #f3f2ee;
  --kz-ink-2: #b6b5ae;
  --kz-ink-3: #85847d;
  --kz-line: rgba(255, 255, 255, .13);
  --kz-accent: #FF5257;
  --kz-accent-2: #FF8083;
  --kz-soft: rgba(255, 82, 87, .15);
}

.kz-siroka__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Hero ----
   min-height rather than a fixed height, caption in flow, pinned to the bottom:
   a headline that runs long grows the photograph downwards instead of spilling
   out of it. ---- */
.kz-siroka__hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  background-color: #111110;
  overflow: hidden;
}
.kz-siroka__hero-media { position: absolute; inset: 0; }

/* Featured images in this archive go back to 2005 and many are far narrower
   than the band they now fill, so they are stretched and cropped rather than
   fitted. The crop is held above centre because faces sit in the upper third of
   most event photographs. */
.kz-siroka__hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.kz-siroka__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 8%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .45));
}

.kz-siroka__hero-cap {
  position: relative;
  width: 100%;
  padding: 150px 0 44px;
}

.kz-siroka__badges { display: inline-flex; margin-bottom: 18px; }
.kz-badge {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 10px;
  color: #ffffff;
}
.kz-badge--accent { background-color: var(--kz-accent); }
.kz-badge--accent:hover { background-color: var(--kz-accent-2); color: #ffffff; }
.kz-badge--glass { background-color: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }

/* The maximum is set per post as an inline custom property, bucketed by
   headline length in kz_siroka_title_size(). */
.kz-siroka__title {
  margin: 0;
  max-width: 24ch;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(30px, 6.2vw, var(--kz-h1, 82px));
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
}

.kz-siroka__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: baseline;
  margin-top: 22px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
}
.kz-siroka__byline b { color: #ffffff; font-weight: 600; }
.kz-siroka__byline a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.kz-siroka__byline a:hover { color: #ffffff; }
/* ---- Body: article card over the hero, sidebar to the right ---- */
.kz-siroka__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  align-items: start;
  margin-top: -34px;
}
.kz-siroka__card {
  position: relative;
  background-color: var(--kz-bg);
  padding: 44px 48px 0;
  border-radius: 20px 20px 0 0;
}
.kz-siroka__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.kz-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 96px;
}
.kz-share__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kz-line);
  border-radius: 50%;
  background: transparent;
  color: var(--kz-ink-2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.kz-share__btn:hover { border-color: var(--kz-accent); color: var(--kz-accent); }
.kz-share__btn.is-copied { border-color: var(--kz-accent); color: var(--kz-accent); }

/* ---- Article text ---- */
.kz-siroka__text {
  max-width: 64ch;
  font-size: var(--kz-tsize);
  line-height: 1.75;
  color: var(--kz-ink);
}
.kz-siroka__text p { margin: 0 0 24px; }
.kz-siroka__text > p:first-of-type {
  font-size: calc(var(--kz-tsize) + 2px);
  color: var(--kz-ink-2);
}
.kz-siroka__text a {
  color: var(--kz-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kz-siroka__text a:hover { color: var(--kz-ink); }
.kz-siroka__text h2 {
  margin: 38px 0 14px;
  font-family: Newsreader, Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.kz-siroka__text h3 { margin: 30px 0 12px; font-size: 20px; font-weight: 700; }
.kz-siroka__text blockquote {
  margin: 30px 0;
  padding-left: 22px;
  border-left: 3px solid var(--kz-accent);
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--kz-ink);
}
.kz-siroka__text figure { margin: 30px 0; }
.kz-siroka__text img { max-width: 100%; height: auto; border-radius: 12px; }
.kz-siroka__text figcaption {
  margin-top: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--kz-ink-3);
}

/* ---- Sidebar: widgets become cards. Widget content is filled in later, so
   only the shell is styled here. ---- */
.kz-siroka__side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 56px;
}
.kz-siroka .kz-siroka__side .ct-widget,
.kz-siroka .kz-siroka__side .widget {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--kz-line);
  border-radius: 16px;
  background: transparent;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kz-ink-2);
}
.kz-siroka .kz-siroka__side .widget-title {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kz-accent);
}
.kz-siroka .kz-siroka__side .widget-title::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  background-color: var(--kz-accent);
}
.kz-siroka .kz-siroka__side .widget-title::after { content: none; }
.kz-siroka .kz-siroka__side ul { list-style: none; margin: 0; padding: 0; }
.kz-siroka .kz-siroka__side li { margin: 0 0 6px; }
.kz-siroka .kz-siroka__side li:last-child { margin-bottom: 0; }
.kz-siroka .kz-siroka__side a { color: var(--kz-ink); text-decoration: none; }
.kz-siroka .kz-siroka__side a:hover { color: var(--kz-accent); }
/* ---- Gallery mosaic ----
   The layout follows the number of photographs the post actually has. Only one
   in four posts carries exactly the four the design was drawn for. ---- */
.kz-eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kz-ink-3);
}
.kz-siroka__gallery { margin-top: 40px; }
.kz-siroka__gallery .kz-eyebrow { display: block; margin-bottom: 14px; }

.kz-mosaic { display: grid; gap: 10px; }
.kz-mosaic__item { position: relative; margin: 0; min-width: 0; }
.kz-mosaic__item a { display: block; width: 100%; height: 100%; }
.kz-mosaic__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.kz-mosaic--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 280px; }

.kz-mosaic--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 170px 170px; }
.kz-mosaic--3 .kz-mosaic__item:nth-child(1) { grid-row: span 2; }

.kz-mosaic--4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 200px 200px; }
.kz-mosaic--4 .kz-mosaic__item:nth-child(1) { grid-row: span 2; }
.kz-mosaic--4 .kz-mosaic__item:nth-child(4) { grid-column: span 2; }

/* Everything past the fourth photograph is revealed in place, so the mosaic
   needs no lightbox to stay honest about how many photographs there are. */
.kz-mosaic__more {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 14px;
  background-color: rgba(0, 0, 0, .55);
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.kz-mosaic__more:hover { background-color: rgba(0, 0, 0, .68); }
.kz-mosaic__rest {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.kz-mosaic__rest .kz-mosaic__item { height: 150px; }

/* ---- Tags, related, comments ---- */
.kz-siroka__foot { padding-top: 44px; padding-bottom: 60px; }
.kz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--kz-line);
}
.kz-tags__label { margin-right: 6px; }
.kz-tags a {
  padding: 6px 12px;
  border: 1px solid var(--kz-line);
  border-radius: 100px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--kz-ink);
  text-decoration: none;
}
.kz-tags a:hover { border-color: var(--kz-accent); color: var(--kz-accent); }
.kz-siroka__comments { margin-top: 44px; }

/* ---- Narrow desktop: the 300px sidebar starts to squeeze the measure ---- */
@media (max-width: 1100px) {
  .kz-siroka__cols { grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; }
  .kz-siroka__card { padding: 34px 28px 0; }
  .kz-siroka__hero { min-height: 520px; }
  .kz-siroka__hero-cap { padding: 110px 0 38px; }
}

/* ---- Mobile: the scrim is dropped and the headline moves off the photograph.
   White type over a 210px crop of an old, small image is not legible. ---- */
@media (max-width: 900px) {
  .kz-siroka__wrap { padding: 0 16px; }

  .kz-siroka__hero {
    display: block;
    min-height: 0;
    background-color: var(--kz-bg);
  }
  .kz-siroka__hero-media { position: relative; height: 210px; }
  .kz-siroka__scrim { display: none; }
  .kz-siroka__hero-cap { padding: 18px 0 0; }
  .kz-siroka__title {
    max-width: none;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--kz-ink);
    text-shadow: none;
  }
  .kz-siroka__byline { gap: 14px; margin-top: 14px; color: var(--kz-ink-3); }
  .kz-siroka__byline b { color: var(--kz-ink); }
  .kz-siroka__byline a { border-bottom-color: var(--kz-line); }

  .kz-siroka__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 28px; }
  .kz-siroka__card { padding: 0; border-radius: 0; }
  .kz-siroka__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .kz-siroka__text { max-width: none; }

  .kz-share { flex-direction: row; position: static; }
  .kz-siroka__side { position: static; padding-top: 0; }

  .kz-mosaic--2,
  .kz-mosaic--3,
  .kz-mosaic--4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .kz-mosaic--3 .kz-mosaic__item:nth-child(1),
  .kz-mosaic--4 .kz-mosaic__item:nth-child(1),
  .kz-mosaic--4 .kz-mosaic__item:nth-child(4) { grid-row: auto; grid-column: auto; }
  .kz-mosaic__item { height: 210px; }
  .kz-mosaic__rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Corrections found in review ---- */

/* display:grid on the class beats the hidden attribute, which is only
   display:none in the user agent sheet, so the rest of the gallery stayed
   visible before the button was pressed. */
.kz-mosaic__rest[hidden] { display: none; }

/* The core RSS widget injects a feed icon into its heading, which lands between
   the square marker and the label. */
.kz-siroka .kz-siroka__side .widget-title .rss-widget-icon,
.kz-siroka .kz-siroka__side .widget-title img { display: none; }

/* RSS widget titles are links, so the generic sidebar link colour was winning
   over the eyebrow colour and rendering them dark. */
.kz-siroka .kz-siroka__side .widget-title a { color: inherit; text-decoration: none; }
.kz-siroka .kz-siroka__side .widget-title a:hover { color: var(--kz-accent-2); }

/* On mobile the caption moves off the photograph onto the page background, and
   a translucent white pill becomes invisible there. */
@media (max-width: 900px) {
  .kz-badge--glass {
    background-color: transparent;
    border: 1px solid var(--kz-line);
    color: var(--kz-ink-3);
    backdrop-filter: none;
  }
}
/* ---- Vezano ---- */
.kz-related { margin-top: 40px; }
.kz-related__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.kz-related__title {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kz-ink);
}
.kz-related__all {
  margin-left: auto;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--kz-accent);
  text-decoration: none;
}
.kz-related__all:hover { color: var(--kz-ink); }
.kz-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.kz-related__card { display: block; text-decoration: none; color: inherit; }
.kz-related__media {
  position: relative;
  display: block;
  height: 150px;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--kz-surface-2);
}
.kz-related__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kz-related__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 5px 8px;
  pointer-events: none;
}
.kz-related__label {
  display: block;
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--kz-ink);
}
.kz-related__card:hover .kz-related__label { color: var(--kz-accent); }

@media (max-width: 900px) {
  .kz-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kz-related__head { flex-wrap: wrap; gap: 8px; }
  .kz-related__all { margin-left: 0; }
}
/* ---- Comments ----
   Blocksy renders these, so the markup is its own: .ct-comment-inner wraps each
   entry, .ct-comment-meta the author and time, .ct-comment-content the body.
   Only type and rhythm are set here, so a Blocksy update cannot break layout. */
.kz-siroka__comments { margin-top: 44px; }
.kz-siroka .ct-comments { max-width: none; }
.kz-siroka .ct-comments-title {
  margin: 0 0 6px;
  font-family: Newsreader, Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kz-ink);
}
.kz-siroka .ct-comment-list { list-style: none; margin: 0; padding: 0; }
.kz-siroka .ct-comment-list li.comment { list-style: none; }
.kz-siroka .ct-comment-inner {
  padding: 20px 0;
  border-top: 1px solid var(--kz-line);
}
.kz-siroka .ct-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.kz-siroka .ct-comment-author {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kz-ink);
}
.kz-siroka .ct-comment-author cite { font-style: normal; }
.kz-siroka .ct-comment-meta-data,
.kz-siroka .ct-comment-meta-data a {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--kz-ink-3);
  text-decoration: none;
}
.kz-siroka .ct-comment-meta-data a:hover { color: var(--kz-accent); }
.kz-siroka .ct-comment-content {
  max-width: 72ch;
  font-size: var(--kz-tsize);
  line-height: 1.7;
  color: var(--kz-ink-2);
}
.kz-siroka .ct-comment-content p { margin: 0 0 12px; }
.kz-siroka .ct-comment-content p:last-child { margin-bottom: 0; }

/* Replies keep the hairline rhythm and pick up a rule instead of an indent
   alone, so a deep thread stays readable. */
.kz-siroka .ct-comment-list ul.children {
  list-style: none;
  margin: 0 0 0 20px;
  padding-left: 22px;
  border-left: 2px solid var(--kz-line);
}

.kz-siroka .comment-reply-link {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--kz-accent);
  text-decoration: none;
}

/* The closed notice, which most of this archive shows: comments are shut
   automatically 60 days after publication, site-wide. */
.kz-siroka p.no-comments {
  margin: 20px 0 0;
  padding: 14px;
  border: 1px dashed var(--kz-line);
  border-radius: 12px;
  background: transparent;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  text-align: center;
  color: var(--kz-ink-3);
}
/* ---- Citat ----
   Ported from Customizer -> Additional CSS, where it is bound to
   .entry-content.is-layout-flow, a class WordPress puts on block containers and
   this layout's text wrapper does not carry.

   A paragraph that is entirely in italics is a quoted statement, not prose. The
   size stays the same as body text on purpose: measured over 279 such
   paragraphs the median is 640 characters, about ten lines, and at 24px that
   becomes a wall that takes over the article. The marking is carried by the
   quotation marks, the indent and the darker ink.

   The marks are set in Georgia rather than Inter, which draws them as two flat
   slabs. Georgia is a system font, so nothing extra is downloaded. This is the
   only place on the site that leaves Inter, and only for those two ornaments.

   Quotation marks the author typed themselves are stripped by kz-single.php,
   otherwise one paragraph in ten would show two pairs. */
.kz-siroka__text > p:has(> em:only-child) {
  position: relative;
  padding: 6px 64px 44px;
  color: var(--kz-ink);
}
.kz-siroka__text > p:has(> em:only-child)::before,
.kz-siroka__text > p:has(> em:only-child)::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--kz-accent);
}

/* The empty second half of the declaration is alternative text: the mark is an
   ornament and a screen reader should not announce it. */
.kz-siroka__text > p:has(> em:only-child)::before {
  content: "\201C" / "";
  left: 0;
  top: -6px;
}
.kz-siroka__text > p:has(> em:only-child)::after {
  content: "\201D" / "";
  right: 0;
  bottom: -18px;
}

/* An opening quote must not also be treated as the oversized lede paragraph. */
.kz-siroka__text > p:first-of-type:has(> em:only-child) {
  font-size: var(--kz-tsize);
}

/* On a phone the column is around 343px, where a 64px indent on both sides
   would eat a third of the line. */
@media (max-width: 767px) {
  .kz-siroka__text > p:has(> em:only-child) { padding: 4px 36px 30px; }
  .kz-siroka__text > p:has(> em:only-child)::before,
  .kz-siroka__text > p:has(> em:only-child)::after { font-size: 52px; }
  .kz-siroka__text > p:has(> em:only-child)::after { bottom: -12px; }
}
/* ---- Meteo widget ----
   The plugin ships a fixed markup and its own blue gradient card. Rather than
   fork the plugin, the existing elements are re-placed on a grid here, so a
   plugin update cannot be lost:

     row 1  .lokacija  |  .datum        the eyebrow line
     row 2  .meteodata |  .weather-icon temperature large, the rest in two columns
     row 3  .izvor                     the source line

   The temperature is the first list item, so it is pulled to full width and
   enlarged, and its "Temp:" label is dropped -- the reading speaks for itself. */
.kz-siroka .kz-siroka__side .kzinfo_weather_widget {
  padding: 0;
  border: 0;
  overflow: hidden;
}
.kz-siroka .kz-siroka__side .kzinfo_weather_widget a {
  display: block;
  color: #f3f2ee;
  text-decoration: none;
}

.kz-siroka .kz-siroka__side .weather-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 20px;
  border-radius: 16px;
  background-color: #111110;
  background-image: none;
  color: #f3f2ee;
  font-family: Inter, system-ui, sans-serif;
}

/* The page itself is nearly black in dark mode, so the card lifts a step. */
html[data-theme="dark"] .kz-siroka .kz-siroka__side .weather-widget,
body.ct-dark-mode .kz-siroka .kz-siroka__side .weather-widget {
  background-color: #232320;
}

.kz-siroka .kz-siroka__side .weather-widget .lokacija,
.kz-siroka .kz-siroka__side .weather-widget .datum {
  grid-row: 1;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .6;
}
.kz-siroka .kz-siroka__side .weather-widget .lokacija { grid-column: 1; }
.kz-siroka .kz-siroka__side .weather-widget .datum {
  grid-column: 2;
  justify-self: end;
  white-space: nowrap;
}
.kz-siroka .kz-siroka__side .weather-widget .datum .inline { display: inline; }

.kz-siroka .kz-siroka__side .weather-widget .meteodata { grid-column: 1; grid-row: 2; }
.kz-siroka .kz-siroka__side .weather-widget .weather-icon {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: 38px;
  line-height: 1;
  opacity: .9;
}

.kz-siroka .kz-siroka__side .weather-widget .meteodata ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(243, 242, 238, .75);
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li div { display: inline; }

/* The temperature. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata li:first-child {
  grid-column: 1 / -1;
  gap: 0;
  margin: 2px 0 8px;
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: #f3f2ee;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li:first-child span { display: none; }

.kz-siroka .kz-siroka__side .weather-widget .izvor {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: none;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: inherit;
  opacity: .45;
}
/* The plugin sizes its card by putting a fixed height on each row, which left
   the eyebrow stretched to 152px and the whole card at 380px. */
.kz-siroka .kz-siroka__side .weather-widget,
.kz-siroka .kz-siroka__side .weather-widget .lokacija,
.kz-siroka .kz-siroka__side .weather-widget .datum,
.kz-siroka .kz-siroka__side .weather-widget .weather-icon,
.kz-siroka .kz-siroka__side .weather-widget .meteodata,
.kz-siroka .kz-siroka__side .weather-widget .meteodata ul,
.kz-siroka .kz-siroka__side .weather-widget .meteodata li,
.kz-siroka .kz-siroka__side .weather-widget .izvor {
  height: auto;
  min-height: 0;
  max-height: none;
}
.kz-siroka .kz-siroka__side .weather-widget .weather-icon { padding: 0; }
.kz-siroka .kz-siroka__side .weather-widget .izvor { padding: 10px 0 0; }

/* Two columns inside a 260px card leave little room, so the metric type drops a
   notch and the labels are allowed to wrap under their value. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata li { font-size: 11px; }
.kz-siroka .kz-siroka__side .weather-widget .meteodata ul { gap: 5px 12px; }
/* The plugin builds its card as a fixed 380px box with .meteodata and .izvor
   absolutely positioned against its bottom edge, centred text, and a 20px left
   margin. All of that has to be unwound before the grid above can take effect. */
.kz-siroka .kz-siroka__side .weather-widget {
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: left;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata,
.kz-siroka .kz-siroka__side .weather-widget .izvor {
  position: static;
  inset: auto;
  width: auto;
}
.kz-siroka .kz-siroka__side .weather-widget .weather-icon { margin-top: 0; }

/* The plugin's card sat on a photograph, so its type carries a heavy drop
   shadow and a pale yellow label colour. Neither belongs on a flat dark card. */
.kz-siroka .kz-siroka__side .weather-widget .lokacija,
.kz-siroka .kz-siroka__side .weather-widget .datum,
.kz-siroka .kz-siroka__side .weather-widget .weather-icon,
.kz-siroka .kz-siroka__side .weather-widget .meteodata ul li { text-shadow: none; }
.kz-siroka .kz-siroka__side .weather-widget .meteodata ul li span { color: inherit; opacity: .65; }
.kz-siroka .kz-siroka__side .weather-widget .meteodata ul li {
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.35;
  text-align: left;
}
/* ---- Meteo widget, final arrangement ----
   The mockup puts the readings in two columns, but its labels are one word.
   Croatian ones are not: "Padaline danas" and "Vlaga zraka" wrap at the 122px
   a two-column grid leaves inside a 300px sidebar. So the readings become a
   single column with the value flush right, which fits on one line every time.

   The icon is taken out of the flow and pinned beside the temperature, because
   the plugin's markup puts it in a different branch than the reading. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata {
  grid-column: 1 / -1;
  grid-row: 2;
}
.kz-siroka .kz-siroka__side .weather-widget .weather-icon {
  position: absolute;
  top: 48px;
  right: 20px;
  font-size: 40px;
  line-height: 1;
  opacity: .9;
}

.kz-siroka .kz-siroka__side .weather-widget .meteodata ul {
  display: block;
  margin: 0;
  padding: 0;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 11.5px;
  white-space: nowrap;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li + li {
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li + li + li { margin-top: 0; }

/* The temperature keeps its unit on the same line. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata li:first-child {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  color: #f3f2ee;
}
/* A reading is not two flex children but three or five: label, value, unit, and
   for wind a bracketed direction as well. space-between spread all of them
   across the row, so instead the label is pushed left with an auto margin and
   everything after it stays grouped on the right. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata li {
  justify-content: flex-start;
  gap: 3px;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li > span:first-child {
  margin-right: auto;
  padding-right: 10px;
}
/* The icon shares row two with the readings instead of being taken out of the
   flow: overlapping grid items are placed deterministically, which absolute
   positioning against the plugin's own relative card was not. The temperature
   reserves room on its right so the two never collide. */
.kz-siroka .kz-siroka__side .weather-widget .weather-icon {
  position: static;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  z-index: 1;
  margin-top: 2px;
}
.kz-siroka .kz-siroka__side .weather-widget .meteodata li:first-child { padding-right: 58px; }
/* Breathing room between the eyebrow and the temperature. The icon takes the
   same offset so the two stay on one optical line. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata li:first-child { margin-top: 16px; }
.kz-siroka .kz-siroka__side .weather-widget .weather-icon { margin-top: 14px; }
/* Rainfall is dropped from the card. Addressed by position rather than by
   :last-child, so it stays the rainfall row even if the plugin ever appends
   another reading. Order in widget.html: temperature, humidity, pressure,
   wind, rainfall. */
.kz-siroka .kz-siroka__side .weather-widget .meteodata li:nth-child(5) { display: none; }
/* ---- Sidebar widgets ----
   The RSS widget emits two different shapes, depending on whether the feed
   gives its items a link:

     no link   <li>Mjesto: CIRKVENA <span class="rss-date">3. 8. 2026.</span></li>
     link      <li><a class="rsswidget">PRODAVAC/PRODAVACICA ...</a></li>

   The first is a reading, the second is something to click, so they get
   different treatment. Both are addressed structurally rather than by widget
   id, so re-creating a widget does not lose its styling. */
.kz-siroka .kz-siroka__side .widget_rss ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kz-siroka .kz-siroka__side .widget_rss li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  padding: 8px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--kz-ink-2);
  text-wrap: pretty;
}
.kz-siroka .kz-siroka__side .widget_rss li + li { border-top: 1px solid var(--kz-line); }
.kz-siroka .kz-siroka__side .widget_rss li:first-child { padding-top: 2px; }
.kz-siroka .kz-siroka__side .widget_rss li:last-child { padding-bottom: 2px; }

/* The date is secondary: it sits at the far right of the row, or drops to its
   own line when the reading is long. */
.kz-siroka .kz-siroka__side .widget_rss .rss-date {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--kz-ink-3);
}

/* Linked items are the clickable kind. The feeds shout in capitals, which is
   hard to read at this size and out of key with the rest of the sidebar, so the
   row is set in sentence case. */
.kz-siroka .kz-siroka__side .widget_rss li > a.rsswidget {
  flex: 1 1 100%;
  color: var(--kz-ink);
  text-decoration: none;
  text-transform: lowercase;
}
.kz-siroka .kz-siroka__side .widget_rss li > a.rsswidget::first-letter { text-transform: uppercase; }
.kz-siroka .kz-siroka__side .widget_rss li > a.rsswidget:hover { color: var(--kz-accent); }

/* Feed summaries and the source line are noise in a 300px column. */
.kz-siroka .kz-siroka__side .widget_rss .rssSummary,
.kz-siroka .kz-siroka__side .widget_rss cite { display: none; }

/* Titles wrap in a narrow card often enough to be worth balancing. */
.kz-siroka .kz-siroka__side .widget-title { text-wrap: balance; }
/* ---- Hero without a photograph ----
   About four percent of the archive carries no featured image. Rather than send
   those posts back to the old single, the hero renders flat: the same badge,
   headline and byline on a dark band, but only as tall as its contents. A 640px
   slab of empty black would be worse than no hero at all. */
.kz-siroka__hero--flat {
  min-height: 0;
  display: block;
}
.kz-siroka__hero--flat .kz-siroka__hero-cap { padding: 54px 0 44px; }

/* Nothing sits behind the headline here, so the shadow has nothing to lift it
   off and only muddies the letterforms. */
.kz-siroka__hero--flat .kz-siroka__title { text-shadow: none; }

@media (max-width: 900px) {
  .kz-siroka__hero--flat { background-color: #111110; }
  .kz-siroka__hero--flat .kz-siroka__hero-cap { padding: 28px 0 30px; }
  .kz-siroka__hero--flat .kz-siroka__title { color: #ffffff; }
  .kz-siroka__hero--flat .kz-siroka__byline { color: rgba(255, 255, 255, .82); }
  .kz-siroka__hero--flat .kz-siroka__byline b { color: #ffffff; }
  .kz-siroka__hero--flat .kz-badge--glass {
    background-color: rgba(255, 255, 255, .14);
    border: 0;
    color: #ffffff;
  }
}