/* ==========================================================================
   Fakt počasí — prémiový článek novinek (docs/design/novinky-v2, kontrakt docs/news/komponenty.md)
   Systém „Tichá obloha": tmavá noční scéna, sklo, Instrument Sans + IBM Plex Mono.
   CSP: žádné inline styly; SVG nese jen třídy a prezentační atributy.
   Barva = data: chladná modrá = mráz/záporné teploty, jantar = teplo/nad nulou,
   azur = interakce (odkazy, přepínač, fokus), žlutá CAP = výstraha / zástupný obsah.

   Skořápka (rail, horní a spodní lišta, nabídka Více, patička), písma a základní tokeny jsou
   produktové: stránka načítá `/styles.css` a `/nav-sheet.css` a tenhle soubor nese jen styly bloků
   článku (vlastník a human-value review, 1. 10. 2026: článek pod 1200 px neměl navigaci a držel
   kopii railu a vlastní `:root`). Tokeny, které produkt nemá, jsou níž na `body` článku; ty, které
   má, se berou od něj: --text, --t2…--t4, --azur, --amber, --amber-2, --hair, --warn-y(-ink),
   --blue (dříve --cold), --s9-glass (dříve --glass), --route-line (dříve --line),
   --route-text-5 (dříve --t5), --route-muted (dříve --t6).
   ========================================================================== */

body[data-page-route="novinky"] {
  --cold-ink: #B8CCFF; --ice: #DCEBFF; --glass-hi: rgba(22, 32, 64, .52);
  --r-card: 26px; --r-tile: 20px; --r-pill: 999px;
  --gut: 16px; --sb: 0px;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (min-width: 760px) { body[data-page-route="novinky"] { --gut: 32px; } }
@media (min-width: 1200px) { body[data-page-route="novinky"] { --sb: 268px; --gut: 48px; } }

html { -webkit-text-size-adjust: 100%; }
/* Pozadí článku je jeho vlastní noční obloha (produktový `body` dává jen #08090d); stejná specifičnost
   jako pravidlo skořápky, a protože tenhle soubor se načítá za ním, vyhrává. Na stránce není #app-bg. */
body[data-page-route="novinky"]:not([data-page-route="home"]) {
  background:
    radial-gradient(1200px 700px at 80% 1400px, rgba(143, 180, 255, .07), transparent 70%),
    radial-gradient(900px 600px at 10% 3600px, rgba(106, 210, 255, .05), transparent 70%),
    linear-gradient(180deg, #070D1C 0%, #0A1532 45%, #0B1733 100%);
  background-color: #070D1C;
}
/* Sloupec článku se řídí sám (hero přes celou šířku, tělo v mřížce); skořápkové odsazení `main` by ho
   zúžilo a u spodní lišty ho nahrazuje patička (`.site-footer` si rezervuje místo pod lištou). */
body[data-page-route="novinky"]:not([data-page-route="home"]) main {
  width: auto; max-width: none; min-height: 0; margin: 0; padding: 0;
}
body[data-page-route="novinky"] .site-footer { width: min(1080px, calc(100% - 2 * var(--gut))); max-width: none; padding-left: 0; padding-right: 0; box-sizing: border-box; }
.clanek, .archiv, .news-legacy { font: 400 18px/1.7 var(--sans); color: var(--text); font-kerning: normal; }
:is(.clanek, .news-legacy) a { color: var(--azur); text-underline-offset: 3px; }
.clanek b, .clanek strong { font-weight: 600; color: #fff; }
.ic { width: 1em; height: 1em; flex: none; }
/* `dUi` kreslí ikony skořápky s inline `style`, který CSP stránky zahodí; dvě deklarace jsou tady. */
.sb-ic svg, .bn-ic svg { display: block; flex: none; }

/* ---------- čtecí ukazatel (scroll-driven, jen kde je podpora) ---------- */
.progress { position: fixed; z-index: 40; top: 0; left: var(--sb); right: 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--azur)); box-shadow: 0 0 12px rgba(106, 210, 255, .6); }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Hlavičku vlastní společné shell-menu.css stejně jako na Přehledu. */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: max(640px, min(100svh, 940px)); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.scene { display: block; width: 100%; height: 100%; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 10, 24, .5) 0%, rgba(6, 10, 24, 0) 20%, rgba(6, 10, 24, 0) 62%, rgba(6, 10, 24, .7) 86%, #080F22 100%),
    linear-gradient(90deg, rgba(6, 10, 24, .78) 0%, rgba(6, 10, 24, .45) 38%, rgba(6, 10, 24, 0) 68%); }
.hero-body { width: min(1080px, 100% - 2 * var(--gut)); margin: 0 auto; padding: 120px 0 128px; }
.hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; row-gap: 8px; margin: 0 0 22px; font: 500 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t4); }
.hero-kicker a { color: var(--ice); text-decoration: none; padding: 8px 12px; border: 1px solid rgba(220, 235, 255, .28); border-radius: var(--r-pill); background: rgba(10, 16, 36, .35); backdrop-filter: blur(8px); }
.hero-kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--route-muted); }
.hero-kicker > a, .hero-kicker > span:not(.dot) { white-space: nowrap; }
/* The browser-language offer of a page with an English version (web/language-navigation.js). */
.hero-title { margin: 0; max-width: 9.99em; font-size: clamp(40px, 5.8vw, 86px); line-height: .98; font-weight: 700; letter-spacing: -.038em; text-wrap: balance;
  background: linear-gradient(100deg, #FFFFFF 0%, #EAF2FF 38%, #FFFFFF 46%, #C9DCFF 54%, #EEF4FF 62%, #B9CFF5 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(6, 10, 24, .55)); }
.hero-perex-stack { display: grid; }
.hero-perex-stack .hero-perex { grid-area: 1 / 1; display: block !important; visibility: hidden; }
html:not([data-podani]) .hero-perex-stack .per-reg--normal,
html[data-podani="bezne"] .hero-perex-stack .per-reg--normal,
html[data-podani="vedecky"] .hero-perex-stack .per-reg--scientific { visibility: visible; }
.hero-perex { max-width: 58ch; margin: 28px 0 0; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 26px 0 0; font: 400 12.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--route-text-5); }
.hero-meta a { color: var(--t3); }
.meta-short { display: none; }
.hero-meta .meta-item { white-space: nowrap; }
.hero-meta .meta-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; white-space: normal; }
.meta-dates > span { display: inline-block; }
.hero-meta .meta-sep { white-space: pre; }
.hero-meta .meta-sep--short { display: none; }
.hero-scroll { position: absolute; right: var(--gut); bottom: 128px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); color: var(--text); font-size: 20px; background: rgba(10, 16, 36, .35); backdrop-filter: blur(8px); }

/* zástupná plocha pro AI fotografii — v produkci se nevykresluje */
.ph-tag { position: absolute; z-index: 2; top: 84px; right: var(--gut); max-width: 340px; margin: 0; padding: 12px 14px;
  font: 400 12.5px/1.45 var(--sans); color: var(--warn-y-ink);
  background: rgba(6, 10, 24, .58); border: 1px dashed rgba(255, 207, 107, .6); border-radius: 12px; backdrop-filter: blur(8px); }
.ph-tag span { display: block; margin-bottom: 4px; font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--warn-y); }

/* přepínač podání */
.podani-nojs { margin: 10px 0 0; color: var(--t2); font-size: 13px; line-height: 1.5; }

/* ==========================================================================
   KLÍČOVÁ ČÍSLA
   ========================================================================== */
.cisla { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  width: min(1080px, 100% - 2 * var(--gut)); margin: -76px auto 0; }
.cislo { position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 36, 72, .72), rgba(10, 16, 36, .72)); border: 1px solid var(--route-line);
  backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); }
.cislo::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 235, 255, .55), transparent); }
.cislo-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; color: var(--ice);
  background: rgba(143, 180, 255, .12); border: 1px solid rgba(143, 180, 255, .22); }
.cislo-val { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 8px; white-space: nowrap; }
.cislo-val .n { font: 500 clamp(40px, 3.9vw, 56px)/1 var(--mono); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.cislo-val .u { font: 500 18px/1 var(--mono); color: var(--route-text-5); }
.cislo-val .p { font: 500 18px/1 var(--mono); color: var(--route-text-5); }
.cislo--rekord .cislo-val .n { color: var(--cold-ink); text-shadow: 0 0 28px rgba(143, 180, 255, .45); }
.cislo-lbl { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; color: var(--t3); }
.cislo-src { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--route-line); font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--route-muted); }

/* ==========================================================================
   TĚLO — mřížka s textovým sloupcem a výlomy
   ========================================================================== */
.telo { display: grid; padding-bottom: 40px;
  grid-template-columns: [full-start] minmax(var(--gut), 1fr) [wide-start] minmax(0, 200px) [text-start] min(680px, 100% - 2 * var(--gut)) [text-end] minmax(0, 200px) [wide-end] minmax(var(--gut), 1fr) [full-end]; }
.telo > *, .kap > * { grid-column: text; }
.kap { grid-column: full; display: grid; grid-template-columns: subgrid; margin-top: 104px; }
.telo > .wide, .kap > .wide, .telo > .wide-soft { grid-column: wide; }
.wide-soft { width: 100%; max-width: 880px; justify-self: center; }
.telo > .full, .kap > .full { grid-column: full; }

.telo p { margin: 0 0 22px; color: var(--t3); text-wrap: pretty; }
.lede { margin-top: 88px !important; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; color: var(--t2) !important; }

.kap-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 16px !important; font: 500 12.5px/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--route-text-5) !important; }
.kap-num { color: var(--ice); }
.kap-kicker::after { content: ""; flex: 0 0 56px; height: 1px; background: linear-gradient(90deg, rgba(220, 235, 255, .6), transparent); }
.kap h2 { margin: 0 0 28px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; font-weight: 700; letter-spacing: -.032em; color: #fff; text-wrap: balance; }
.kap .kap-subheading { margin: 38px 0 18px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.18; font-weight: 650; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.news-photo { position: relative; margin: 36px 0; }
.news-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.news-photo figcaption { margin-top: 12px; color: var(--route-text-5); font: 400 13px/1.5 var(--sans); }

.predel { display: flex; align-items: center; gap: 18px; margin: 96px 0 -8px; color: var(--blue); font-size: 22px; opacity: .8; }
.predel::before, .predel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 180, 255, .4)); }
.predel::after { transform: scaleX(-1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- společné: karta s infografikou ---------- */
.graf-card { position: relative; margin: 44px 0; padding: 30px; border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(22, 34, 68, .58), rgba(10, 16, 36, .58)); border: 1px solid var(--route-line);
  backdrop-filter: blur(14px); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.graf-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font: 500 11.5px/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--route-text-5) !important; }
.graf-kicker .ic { font-size: 15px; color: var(--blue); }
.graf-card > figcaption { margin-top: 16px; }
.graf-card h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.graf-sub { margin: 0 0 20px !important; font-size: 15px !important; line-height: 1.45; color: var(--route-text-5) !important; }
figcaption { font-size: 13.5px; line-height: 1.5; color: var(--route-muted); }
.src { display: block; margin-top: 6px; font: 400 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--route-muted); }
.graf { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.graf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 44px 0; }
.graf-row .graf-card { margin: 0; display: flex; flex-direction: column; }
.graf-row .graf-card figcaption { margin-top: auto; padding-top: 16px; }

.chip { display: inline-flex; margin-top: 10px; padding: 5px 10px; border-radius: var(--r-pill); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- scale_pair: jedna scéna a pod ní obyčejný odstavec ----------
   Návrh A vlastníka z 2. 10. 2026 („z boku za soumraku“, výšky ve skutečném poměru). Rámeček má na
   mobilu poměr 4 : 5 a od 600 px poměr 25 : 16; SVG má viewBox 1000 × 640 a `slice` dole uprostřed,
   takže se na mobilu ořízne jen okraj louky a popisky drží velikost (nejmenší 12 px při 320 px).
   Žádný štítek „Ilustrace“: vlastník rozhodl 2. 10. 2026, že je to z kresby zřejmé. */
/* Karta je ve sloupci `wide` (až 1080 px), ale scéna se kreslí na ~720 px: v ~1020 px širokém rámu měla
   karta při 1440 px výšku ~930 px a při 1280 × 720 nebyl vidět titulek, celá scéna i začátek odstavce
   (design review 2. 10. 2026). Karta proto končí na 780 px (rám 718 px, tj. ≤ 720 px) a je vystředěná;
   mobil (pod 780 px) se nemění. Rozestup h3 → scéna (6 px) byl o dvě třetiny menší než scéna → odstavec
   (20 px); okraje se slévají, takže 18 px dává rozestup 18 px (naměřeno), jen u této karty. */
.dv-card { width: 100%; max-width: 780px; justify-self: center; }
.dv-card h3 + .dv-ram { margin-top: 18px; }
.dv-ram { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; border: 1px solid var(--route-line);
  background: #0A1430; }
.dv-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; font-family: var(--sans); }
.dv-kota { fill: none; stroke: #EEF2FB; stroke-width: 1; opacity: .85; }
.dv-kota path { vector-effect: non-scaling-stroke; }
.dv-stitek { font-size: 28px; font-weight: 600; fill: #fff; letter-spacing: -.01em;
  paint-order: stroke; stroke: rgba(5, 10, 24, .72); stroke-width: 6px; stroke-linejoin: round; }
.dv-stitek--maly { font-size: 26px; }
.graf-card .dv-popis { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--t3); text-wrap: pretty; }
.dv-jmeno { font-weight: 600; color: #fff; }
.dv-stav { color: var(--t3); }
@media (min-width: 600px) { .dv-ram { aspect-ratio: 25 / 16; } }
@media (prefers-reduced-motion: no-preference) {
  .dv-mlha { animation: dv-mlha 26s ease-in-out infinite alternate; }
  @keyframes dv-mlha { to { transform: translateX(46px); } }
}

/* ---------- boxy ---------- */
/* Každý rámovaný blok (box, dvojice boxů, CTA, kroky, zdroje, hádanka) má pod sebou spodní okraj
   jako ostatní bloky (36–44 px). Mřížka `.telo`/`.kap` okraje neslévá: se spodním okrajem 0 začínal
   odstavec hned za rámečkem a měl jen vlastní půlřádek (~7 px) místo mezery (17. 10. 2026). */
.box { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px; margin: 40px 0; padding: 28px 30px; border-radius: 24px;
  background: linear-gradient(135deg, var(--tint-bg), rgba(10, 16, 36, .5) 60%); border: 1px solid var(--tint-line); }
.box::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, var(--tint), transparent 40%) border-box; opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border: 1px solid transparent; }
.box-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 24px; color: var(--tint); background: var(--tint-bg); border: 1px solid var(--tint-line); }
.box-kicker { margin: 4px 0 6px !important; font: 500 11.5px/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tint) !important; }
.box h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.box p:not(.box-kicker) { margin: 0; font-size: 16.5px; line-height: 1.65; }
.box--vedeli { --tint: var(--blue); --tint-bg: rgba(143, 180, 255, .10); --tint-line: rgba(143, 180, 255, .22); }
.box--vy { --tint: var(--azur); --tint-bg: rgba(106, 210, 255, .12); --tint-line: rgba(106, 210, 255, .30); margin: 72px 0 40px; padding: 34px 36px;
  box-shadow: 0 30px 90px -50px rgba(106, 210, 255, .6); }
.box--vy h3 { font-size: 28px; }
.box--vy p:not(.box-kicker) { font-size: 18px; color: var(--t2); }
/* tlačítko boxu „Co to znamená pro vás": další krok téhož doporučení, ne reklama za zdroji */
.box-action-lead { margin: 16px 0 8px; color: var(--t2); }
.box-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 20px; padding: 0 22px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(106, 210, 255, .3), rgba(106, 210, 255, .12)); border: 1px solid rgba(106, 210, 255, .6);
  color: #fff !important; font-weight: 600; font-size: 16px; text-decoration: none; transition: background .14s, box-shadow .2s; }
.box-btn:hover { background: linear-gradient(180deg, rgba(106, 210, 255, .42), rgba(106, 210, 255, .18)); box-shadow: 0 12px 34px -12px rgba(106, 210, 255, .65); }
.box-btn .ic { font-size: 18px; }
.box--tip { --tint: var(--amber-2); --tint-bg: rgba(255, 180, 84, .10); --tint-line: rgba(255, 180, 84, .26); }
.box-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 44px 0; }
.box-row .box { margin: 0; }
/* ---------- tabulka faktů: na úzké obrazovce se posouvá obal, ne stránka (4. 10. 2026) ---------- */
.tabulka { margin: 40px 0; }
.tabulka-titulek { margin: 0 4px 12px; font-size: 19px; font-weight: 600; line-height: 1.35; color: #fff; }
.tabulka-obal { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 22px; background: var(--s9-glass); border: 1px solid var(--route-line); }
.tabulka-obal:focus-visible { outline: 2px solid var(--azur); outline-offset: 2px; }
/* up to three columns wrap inside the text width; from four columns the wrapper may scroll and
   shows a fading right edge while more content is hidden, and a phone stacks the rows instead
   (human-value review, 5. 10. 2026) */
.tabulka--siroka .tabulka-obal { background: linear-gradient(90deg, var(--s9-glass), var(--s9-glass)) local, linear-gradient(270deg, rgba(143, 180, 255, .28), transparent) scroll right / 28px 100% no-repeat, var(--s9-glass); }
.tabulka table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; overflow-wrap: break-word; }
.tabulka--siroka table { min-width: 520px; overflow-wrap: normal; }
.tabulka th, .tabulka td { padding: 11px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--route-line); }
.tabulka thead th { font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); border-top: 0; }
.tabulka tbody th { font-weight: 600; color: #fff; }
.tabulka td { color: var(--t2); font-variant-numeric: tabular-nums; }
.tabulka-zdroj { margin: 10px 4px 0; font-size: 13.5px; color: var(--route-text-5); }
@media (max-width: 640px) {
  .tabulka th, .tabulka td { padding: 10px 12px; }
  .tabulka--siroka .tabulka-obal { background: var(--s9-glass); }
  .tabulka--siroka table { min-width: 0; }
  .tabulka--siroka thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabulka--siroka tr, .tabulka--siroka tbody th, .tabulka--siroka td { display: block; }
  .tabulka--siroka tbody tr { padding: 8px 0; border-top: 1px solid var(--route-line); }
  .tabulka--siroka tbody tr:first-child { border-top: 0; }
  .tabulka--siroka tbody th, .tabulka--siroka td { padding: 4px 16px; border-top: 0; }
  .tabulka--siroka td::before { content: attr(data-label); display: block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
}

/* ---------- tabulky: časová osa a kompaktní řádky (vlastník, 23. 10. 2026) ----------
   Výběr dělá renderer podle tvaru dat (news_blocks/tables.py). Jméno sloupce je vždy v DOM pro
   čtečku. Vizuálně se nikdy neskrývá u krátké hodnoty; skrýt smí jen jediný prozaický sloupec
   a v ose čas s názvem položky, což je sama položka. Dvojtečka za jménem je jen pro čtečku. */
.tabulka-skryte, .tabulka-bez-popisku > .tabulka-popisek { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabulka-popisek { display: block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.tabulka-stitek { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); border: 1px solid var(--route-line); background: rgba(255, 255, 255, .06); font-size: 13.5px; line-height: 1.4; color: var(--t3); }
/* Neutrální, dokud blok nenese výslovnou polaritu: „ano“ není automaticky dobrá zpráva. */
.tabulka-stitek--ano { border-color: rgba(143, 180, 255, .35); background: rgba(143, 180, 255, .10); }

.tabulka-osa { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.tabulka-osa::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 24px; width: 2px; background: var(--route-line); }
.tabulka-bod { position: relative; padding: 0 0 26px; }
.tabulka-bod:last-child { padding-bottom: 0; }
.tabulka-bod::before { content: ""; position: absolute; left: -34px; top: 4px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--t3); background: #0A1532; }
.tabulka-cas { font: 500 13.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--route-text-5); }
.tabulka-nazev { margin: 2px 0 4px; font-size: 21px; font-weight: 600; line-height: 1.3; color: #fff; }
.tabulka-nazev--dlouhy { font-size: 17px; font-weight: 500; line-height: 1.5; }
.tabulka-detail { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--t2); }
.tabulka-detail--short, .tabulka-detail--yesno { display: inline-block; vertical-align: top; margin: 8px 22px 0 0; }
.tabulka-detail--short { font-variant-numeric: tabular-nums; }
.tabulka-detail--short .tabulka-hodnota { color: #fff; font-weight: 600; }

.tabulka--radky th[scope="row"] { font-size: 17px; }
.tabulka--radky td > .tabulka-popisek { display: none; }
.tabulka--radky td { font-variant-numeric: tabular-nums; }
.tabulka--radky .tabulka-stitek { white-space: nowrap; }
.tabulka tbody th { font-variant-numeric: tabular-nums; }
@media (min-width: 641px) { .tabulka--osa .tabulka-osa { max-width: 720px; } }
@media (max-width: 640px) {
  .tabulka--radky .tabulka-obal { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tabulka--radky table { min-width: 0; }
  .tabulka--radky thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabulka--radky tbody { display: block; border-top: 1px solid var(--route-line); }
  /* Řádek se láme: název nahoře, krátké hodnoty se jmény vedle sebe, próza pod nimi. */
  .tabulka--radky tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 22px; padding: 14px 4px; border-bottom: 1px solid var(--route-line); }
  .tabulka--radky tbody th, .tabulka--radky tbody td { display: block; padding: 0; border: 0; }
  .tabulka--radky tbody th { flex: 1 1 100%; font-size: 18px; line-height: 1.3; }
  .tabulka--radky .tabulka-kratke { flex: 0 1 auto; min-width: 0; font-size: 16px; font-weight: 600; color: #fff; }
  .tabulka--radky .tabulka-ano { font-weight: 400; }
  .tabulka--radky td > .tabulka-popisek { display: block; margin-bottom: 2px; font-weight: 500; }
  .tabulka--radky .tabulka-dlouhe { flex: 1 1 100%; font-size: 15px; line-height: 1.45; color: var(--t2); }
  .tabulka--radky .tabulka-prazdne { display: none; }
}

/* ---------- recept (podmínky → výsledek) ---------- */
.recept { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 20px 0 44px; padding: 0; list-style: none; }
.recept > li { position: relative; padding: 24px 22px; border-radius: 22px; background: var(--s9-glass); border: 1px solid var(--route-line); backdrop-filter: blur(12px); }
.recept > li:not(:last-child)::after { content: "+"; position: absolute; z-index: 1; top: 50%; right: -26px; width: 22px; height: 22px; margin-top: -11px;
  display: grid; place-items: center; border-radius: 50%; font: 500 15px/1 var(--mono); color: var(--t4); background: #0D1838; border: 1px solid var(--hair); }
.recept > li:nth-last-child(2)::after { content: "="; color: var(--ice); border-color: rgba(143, 180, 255, .5); }
.recept-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; color: var(--t2); background: rgba(255, 255, 255, .06); border: 1px solid var(--hair); }
.recept h3 { margin: 18px 0 8px; font-size: 19px; line-height: 1.25; font-weight: 600; color: #fff; }
.recept p { margin: 0 !important; font-size: 15px; line-height: 1.55; color: var(--t4) !important; }
.recept-vysledek { background: linear-gradient(160deg, rgba(143, 180, 255, .26), rgba(106, 210, 255, .06) 70%) !important; border-color: rgba(143, 180, 255, .45) !important;
  box-shadow: 0 30px 70px -40px rgba(143, 180, 255, .8); }
.recept-vysledek .recept-ic { color: #fff; background: rgba(143, 180, 255, .28); border-color: rgba(220, 235, 255, .5); box-shadow: 0 0 30px rgba(143, 180, 255, .55); }
.recept-vysledek .recept-ic .ic { animation: spin 24s linear infinite; }

/* ---------- schéma (ilustrace) ---------- */
.schema { margin: 8px 0 48px; }
.schema img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--route-line); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95); }
.schema figcaption { margin-top: 12px; text-align: center; }

/* ---------- dvojice (stejná podmínka, jiný výsledek) ---------- */
.dvojice { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0 16px; margin: 40px 0; padding: 26px; border-radius: 24px;
  background: var(--s9-glass); border: 1px solid var(--route-line); }
.dvojice-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.dvojice-head b { font-size: 21px; color: #fff; }
.dvojice-head .graf-kicker { margin: 0 !important; }
.dvojice-pole { padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--route-line); }
.dvojice-pole--cold { background: linear-gradient(160deg, rgba(143, 180, 255, .2), rgba(143, 180, 255, .04)); border-color: rgba(143, 180, 255, .38); }
.dvojice-kde { margin: 0 0 4px !important; font-size: 18px; font-weight: 600; color: #fff !important; }
.dvojice-jak { display: flex; align-items: center; gap: 8px; margin: 0 0 14px !important; font: 400 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--route-text-5) !important; }
.dvojice-val { display: flex; align-items: baseline; gap: 8px; margin: 0 !important; font-size: 15px; color: var(--t4) !important; }
.dvojice-val b { font: 500 30px/1.1 var(--mono); letter-spacing: -.03em; color: #fff; }
.dvojice-pole--cold .dvojice-val b { color: var(--cold-ink); }
.dvojice-pole:not(.dvojice-pole--cold) .dvojice-val b { font-size: 22px; padding-top: 6px; }
.dvojice-vs { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 500 12px/1 var(--mono); text-transform: uppercase; color: var(--route-text-5); border: 1px solid var(--hair); }
.dvojice-pozn { grid-column: 1 / -1; margin: 18px 0 0 !important; font-size: 14.5px; line-height: 1.5; color: var(--route-text-5) !important; }

/* ---------- obrazové bloky ---------- */
.obraz { margin: 0; }
.obraz-media { position: relative; overflow: hidden; }
.obraz--feature { position: relative; margin: 112px 0 0; }
.obraz--feature .obraz-media { height: clamp(460px, 56vw, 760px); }
.obraz--feature .obraz-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0A1532 0%, rgba(10, 21, 50, 0) 18%, rgba(10, 21, 50, 0) 55%, rgba(8, 15, 34, .85) 88%, #0A1532 100%); }
.obraz-karta { position: absolute; z-index: 2; left: max(var(--gut), calc((100% - 1080px) / 2)); bottom: 72px; width: min(440px, 100% - 2 * var(--gut));
  display: grid; gap: 8px; padding: 26px 28px; border-radius: 22px; background: rgba(10, 16, 36, .62); border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); font-size: 16px; line-height: 1.6; color: var(--t3); }
.obraz-karta b { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.obraz--feature .ph-tag { top: 110px; }

.obraz--hranice { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; margin: 56px 0; }
.obraz--hranice .obraz-media { aspect-ratio: 4 / 3; border-radius: var(--r-card); border: 1px solid var(--route-line); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95); }
.obraz--hranice .ph-tag { top: 16px; left: 16px; right: auto; max-width: 300px; }
.obraz-text { display: grid; gap: 12px; font-size: 17px; line-height: 1.65; color: var(--t3); }
.obraz-text b { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.obraz-text .graf-kicker { margin: 0 !important; }

/* zástupné scény */
.sc-kb { transform-origin: 62% 62%; animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08) translate(-1.2%, -1%); } }
.sc-rim { fill: none; stroke: var(--amber-2); stroke-width: 2.5; stroke-opacity: .55; filter: drop-shadow(0 0 6px rgba(255, 192, 105, .8)); }
.sc-mist { animation: drift 24s ease-in-out infinite alternate; }
.sc-mist--2 { animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateX(-50px); } to { transform: translateX(60px); } }
.sc-star { fill: #EEF2FB; opacity: .7; }
.sc-star--1 { animation: twinkle 4s ease-in-out infinite; } .sc-star--2 { animation: twinkle 5.5s ease-in-out -2s infinite; }
.sc-grass { fill: none; stroke: #BFD3EE; stroke-opacity: .30; stroke-width: 1.6; stroke-linecap: round; }
.sc-spark { fill: #F6FBFF; filter: drop-shadow(0 0 4px rgba(220, 235, 255, .95)); animation: twinkle 3.2s ease-in-out infinite; }
.sc-spark--1 { animation-delay: -.8s; } .sc-spark--2 { animation-delay: -1.6s; } .sc-spark--3 { animation-delay: -2.4s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.scene--hranice .sc-grass { stroke: #E4F0FF; stroke-opacity: .55; stroke-width: 2.2; }
.sc-tiles rect { fill: none; stroke: #20242D; stroke-width: 4; }
.sc-edge { stroke: rgba(220, 235, 255, .35); stroke-width: 2; }

/* ---------- compare_thermo ---------- */
.graf--ct-n { max-width: 400px; margin: 0 auto; }
.graf--ct-n .ct-name { font-size: 14.5px; }
.graf--ct-n .ct-val { font-size: 18px; }
.ct-diff-html { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--route-line); font-size: 14px !important; color: var(--route-text-5) !important; }
.ct-diff-html b { font: 500 22px/1 var(--mono); color: #fff; }
.ct-note { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.45; color: var(--route-text-5) !important; }
.ct-elev { font: 400 12.5px var(--mono); fill: var(--route-text-5); letter-spacing: .02em; }
.ct-grid { stroke: rgba(255, 255, 255, .07); }
.ct-zero { stroke: rgba(220, 235, 255, .55); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ct-gridlbl { font: 400 14px var(--mono); fill: var(--route-muted); }
.ct-tube { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .12); }
.ct-fill--cold { fill: var(--blue); filter: drop-shadow(0 0 10px rgba(143, 180, 255, .7)); }
.ct-fill--warm { fill: var(--amber); filter: drop-shadow(0 0 10px rgba(255, 180, 84, .6)); }
.ct-cap { stroke-width: 2; }
.ct-cap--cold { stroke: var(--cold-ink); } .ct-cap--warm { stroke: var(--amber-2); }
.ct-val { font: 500 21px var(--mono); letter-spacing: -.02em; }
.ct-val--cold { fill: var(--cold-ink); } .ct-val--warm { fill: var(--amber-2); }
.ct-name { font: 600 15px var(--sans); fill: var(--t2); }
.ct-kind { font: 400 12.5px var(--mono); fill: var(--route-muted); letter-spacing: .06em; text-transform: uppercase; }
.ct-diff path { fill: none; stroke: var(--route-text-5); stroke-width: 1.5; }
.ct-diff-lbl { font: 400 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--route-muted); }
.ct-diff-val { font: 500 22px var(--mono); letter-spacing: -.02em; fill: #fff; }

/* ---------- waffle ---------- */
.wf { display: grid; grid-template-columns: repeat(23, 1fr); gap: 5px; margin: 8px 0 20px; }
.wf-c { display: block; aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .09); }
.wf-c--on { background: var(--blue); box-shadow: 0 0 10px rgba(143, 180, 255, .8); }
.wf-legend { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; }
.wf-legend div { display: flex; align-items: center; gap: 10px; }
.wf-legend dt { display: flex; align-items: center; gap: 8px; }
.wf-legend dt .wf-c { width: 14px; }
.wf-legend b { font: 500 26px/1 var(--mono); letter-spacing: -.03em; }
.wf-legend dd { margin: 0; font-size: 14px; line-height: 1.35; color: var(--route-text-5); max-width: 16ch; }

/* ---------- datový slot (doplní detektor) ---------- */
.data-slot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px 24px; margin: 24px 0 0; padding: 28px; border-radius: var(--r-card);
  border: 1.5px dashed rgba(255, 207, 107, .5); background: repeating-linear-gradient(135deg, rgba(255, 207, 107, .035) 0 14px, transparent 14px 28px); }
.data-slot-head { grid-column: 1 / -1; }
.data-slot h3 { margin: 0 0 4px; font-size: 24px; color: #fff; }
.data-slot-map { display: grid; place-content: center; gap: 8px; min-height: 240px; padding: 20px; text-align: center; border-radius: 18px; background: rgba(10, 16, 36, .5); border: 1px solid rgba(255, 207, 107, .25); }
.data-slot-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ds; }
.data-slot-list li { display: grid; gap: 4px; padding: 14px 16px 14px 48px; position: relative; border-radius: 14px; background: rgba(10, 16, 36, .5); border: 1px solid rgba(255, 207, 107, .2); counter-increment: ds; }
.data-slot-list li::before { content: counter(ds); position: absolute; left: 16px; top: 14px; font: 500 16px/1.3 var(--mono); color: var(--warn-y); }
.ph-data { font: 500 12.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--warn-y-ink); }
.ph-note { font-size: 13px; color: var(--route-muted); }

/* ---------- timeline ---------- */
.graf-card--tl { padding-bottom: 24px; }
.tl-narrow { display: none; }
.tl-month { fill: transparent; }
.tl-month--alt { fill: rgba(255, 255, 255, .025); }
.tl-monthlbl { font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--route-text-5); }
.tl-grid { stroke: rgba(255, 255, 255, .07); }
.tl-zero { stroke: rgba(220, 235, 255, .55); stroke-width: 1.5; }
.tl-gridlbl { font: 400 13px var(--mono); fill: var(--route-muted); }
.tl-band--soft { fill: rgba(143, 180, 255, .20); }
.tl-band--garden { fill: rgba(200, 211, 230, .20); }
.tl-band--cold { fill: rgba(143, 180, 255, .75); filter: drop-shadow(0 0 8px rgba(143, 180, 255, .6)); }
.tl-band--warn { fill: rgba(255, 207, 107, .78); }
.tl-bandlbl { font: 600 14px var(--sans); fill: var(--t3); }
/* značka „letos": svislá čerchovaná čára s popiskem v pásu měsíců; stojí na datu, ne na teplotě, proto bez bodu */
.tl-now { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 10 4 2 4; }
.tl-nowtag rect { fill: rgba(238, 242, 251, .12); stroke: rgba(238, 242, 251, .45); }
.tl-nowtag text { font: 500 13px var(--mono); fill: #fff; }
.tl-stem { stroke: var(--blue); stroke-width: 2; }
.tl-head { fill: var(--blue); stroke: #0B1733; stroke-width: 3; filter: drop-shadow(0 0 10px rgba(143, 180, 255, .9)); }
.tl-rec--forecast .tl-stem { stroke-dasharray: 3 4; stroke: var(--warn-y); }
.tl-rec--forecast .tl-head { fill: #0B1733; stroke: var(--warn-y); stroke-width: 2.5; filter: none; }
.tl-val { font: 500 18px var(--mono); letter-spacing: -.02em; fill: #fff; }
.tl-rec--forecast .tl-val { fill: var(--warn-y-ink); }
.tl-sub { font: 400 13px var(--sans); fill: var(--route-text-5); }
.graf-card--tl figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; }
.graf-card--tl .src { flex-basis: 100%; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.tl-key { display: inline-flex; align-items: center; gap: 8px; }
.tl-key-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(143, 180, 255, .9); }
.tl-key-dot--hollow { background: transparent; border: 2px solid var(--warn-y); box-shadow: none; }
.tl-key-now { width: 16px; border-top: 2px dashed var(--text); }
.tll { position: relative; display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.tll::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(143, 180, 255, .1), rgba(143, 180, 255, .6), rgba(143, 180, 255, .1)); }
.tll-item { position: relative; display: grid; gap: 4px; padding: 10px 0 14px 30px; }
.tll-item::before { content: ""; position: absolute; left: 1px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: #0B1733; border: 2px solid var(--blue); }
.tll-item--cold::before { background: var(--blue); box-shadow: 0 0 8px rgba(143, 180, 255, .8); }
.tll-item--now::before { background: var(--text); border-color: var(--text); }
.tll-year { display: inline-block; margin-left: 10px; padding: 2px 7px; border: 1px solid rgba(238, 242, 251, .45); border-radius: 99px; color: var(--text); letter-spacing: .03em; }
.tll-item--forecast::before { border-color: var(--warn-y); }
.tll-item--garden::before, .tll-item--soft::before { border-color: var(--route-muted); }
.tll-when { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--route-text-5); }
.tll-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; line-height: 1.4; color: var(--t3); }
.tll-val { font: 500 20px/1.1 var(--mono); letter-spacing: -.02em; color: var(--cold-ink); }
.tll-item--forecast .tll-val { color: var(--warn-y-ink); }
.tll-bar { display: block; width: 100%; height: 6px; border-radius: 99px; overflow: hidden; margin-top: 4px; }
.tll-track { fill: rgba(255, 255, 255, .07); }
.tll-fill--cold { fill: var(--blue); } .tll-fill--forecast { fill: var(--warn-y); }

/* ---------- vodorovné pruhy (před/po, tempo, mrazuvzdornost) ---------- */
.hbar { display: block; width: 100%; height: 12px; border-radius: 99px; overflow: hidden; }
.hbar-track { fill: rgba(255, 255, 255, .07); }
.hbar-fill--cold { fill: var(--blue); }
.hbar-fill--soft { fill: rgba(143, 180, 255, .45); }
.hbar-fill--warm { fill: var(--amber); }
.predpo, .tempo, .mraz { display: grid; gap: 18px; margin: 6px 0 4px; }
.predpo-row { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: 14px; }
.predpo-kdy { font: 400 13px/1.3 var(--mono); letter-spacing: .04em; color: var(--route-text-5); }
.predpo-n { font: 500 26px/1 var(--mono); letter-spacing: -.03em; color: var(--t4); text-align: right; }
.predpo-row--now .predpo-n { color: var(--cold-ink); }
.predpo .hbar { height: 26px; border-radius: 8px; }
.predpo-delta { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--route-line); font-size: 15px !important; color: var(--t4) !important; }
.predpo-delta b { font: 500 30px/1 var(--mono); letter-spacing: -.03em; color: var(--cold-ink); }
.tempo-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tempo-row { grid-template-columns: 1fr auto; }
.tempo-row .hbar { grid-column: 1 / -1; grid-row: 2; }
.tempo-co { font-size: 15px; color: var(--t3); }
.tempo-n { font: 500 14px/1.3 var(--mono); color: var(--t2); }
.tempo-flag { margin: 0 0 0 8px; padding: 3px 8px; vertical-align: 1px; }
.tempo-row--sum .tempo-co { color: #fff; font-weight: 600; }
.tempo-row--sum .tempo-n { color: var(--amber-2); }
.mraz-osa, .mraz-row { display: grid; grid-template-columns: 220px 1fr 170px; align-items: center; gap: 18px; }
.mraz-osa-scale { display: flex; justify-content: space-between; font: 400 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--route-muted); }
.mraz-co { font-size: 16px; font-weight: 600; color: #fff; }
.mraz-co small { display: block; font: 400 12px/1.3 var(--mono); color: var(--route-muted); }
.mraz-n { font: 500 14px/1.3 var(--mono); color: var(--t3); }
.mraz .hbar { height: 18px; }
.mraz .hbar-track { fill: rgba(255, 255, 255, .06); }

/* ---------- citát ---------- */
.citat { position: relative; margin: 100px 0 8px; padding: 100px var(--gut) 80px; text-align: center; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, rgba(143, 180, 255, .16), transparent 70%); border-top: 1px solid var(--route-line); border-bottom: 1px solid var(--route-line); }
.citat::before { content: "“"; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font: 700 200px/1 var(--sans); color: rgba(143, 180, 255, .22); }
.citat blockquote { position: relative; max-width: 900px; margin: 0 auto; }
.citat blockquote p { margin: 0 !important; font-size: clamp(24px, 2.8vw, 38px) !important; line-height: 1.3 !important; font-weight: 500; letter-spacing: -.02em; color: #fff !important; text-wrap: balance; }
.citat blockquote p::before { content: "„"; } .citat blockquote p::after { content: "“"; }
.citat figcaption { display: grid; gap: 4px; margin-top: 30px; font-size: 15px; color: var(--t4); }
.citat figcaption b { font-size: 17px; }

/* ---------- kroky ---------- */
.kroky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0 40px; padding: 0; list-style: none; }
.kroky li { position: relative; padding: 26px 24px 24px; border-radius: 22px; background: var(--s9-glass); border: 1px solid var(--route-line); backdrop-filter: blur(12px);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.kroky li:hover { transform: translateY(-3px); border-color: rgba(143, 180, 255, .35); box-shadow: 0 30px 60px -40px rgba(143, 180, 255, .6); }
.kroky-n { position: absolute; top: 24px; right: 24px; font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--route-muted); }
.kroky-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 23px; color: var(--ice); background: rgba(143, 180, 255, .12); border: 1px solid rgba(143, 180, 255, .24); }
.kroky h3 { margin: 18px 0 8px; font-size: 19px; line-height: 1.25; font-weight: 600; color: #fff; }
.kroky p { margin: 0 !important; font-size: 15px; line-height: 1.55; color: var(--t4) !important; }

/* ---------- CTA ---------- */
.cta { display: flex; align-items: center; gap: 20px; margin: 72px 0 40px; padding: 22px 24px; border-radius: 22px; text-decoration: none;
  background: linear-gradient(90deg, rgba(106, 210, 255, .14), rgba(10, 16, 36, .5)); border: 1px solid rgba(106, 210, 255, .35); transition: box-shadow .2s, border-color .2s; }
.cta:hover { border-color: rgba(106, 210, 255, .7); box-shadow: 0 20px 60px -30px rgba(106, 210, 255, .7); }
/* CTA hned za kroky je jejich dokončení: 40 px pod kroky + 72 px nad CTA by dalo 112 px (mřížka okraje
   neslévá) a CTA by vypadala jako ostrov. Součet zpět na 72 px, jaký byl před spodním okrajem kroků
   (17. 10. 2026). Mezera za kroky k fotu zůstává 76 px jako za tabulkou. */
.kroky + .cta { margin-top: 32px; }
.cta-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 24px; color: var(--azur); background: rgba(106, 210, 255, .14); }
.cta-text { display: grid; gap: 2px; font-size: 15.5px; color: var(--t4); }
.cta-text b { font-size: 19px; }
.cta-go { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; color: #06253C; background: var(--azur); white-space: nowrap; }

/* ---------- zdroje ---------- */
.zdroje { margin: 40px 0; border-radius: 22px; background: var(--s9-glass); border: 1px solid var(--route-line); }
.zdroje summary { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px 22px; cursor: pointer; list-style: none; border-radius: 22px; }
.zdroje summary::-webkit-details-marker { display: none; }
.zdroje summary:hover { background: rgba(255, 255, 255, .04); }
.zdroje-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 21px; color: var(--t3); background: rgba(255, 255, 255, .06); }
.zdroje-t { display: grid; gap: 2px; }
.zdroje-t b { font-size: 18px; }
.zdroje-t small { font-size: 13.5px; color: var(--route-text-5); }
.zdroje-chev { margin-left: auto; font-size: 22px; color: var(--route-text-5); transition: transform .22s var(--ease); }
.zdroje[open] .zdroje-chev { transform: rotate(180deg); }
.zdroje-list { display: grid; gap: 2px; margin: 0; padding: 4px 22px 22px; list-style: none; counter-reset: z; }
.zdroje-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--route-line); counter-increment: z; font-size: 15px; }
.zdroje-list li::before { content: counter(z, decimal-leading-zero); font: 400 12px var(--mono); color: var(--route-muted); }
.z-pub { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--route-text-5); }
.zdroje-list li > .z-pub, .zdroje-list li > a, .zdroje-list li > .z-lang { grid-column: 2; }
.zdroje-list li > .z-date { grid-column: 3; grid-row: 1 / 4; }
.zdroje-list a { color: var(--t2); overflow-wrap: anywhere; text-decoration-color: rgba(106, 210, 255, .5); }
.zdroje-list a:hover { color: var(--azur); }
.z-date { font: 400 11.5px var(--mono); color: var(--route-muted); white-space: nowrap; }


/* ---------- hádanka, spektrum ---------- */
.hadanka { margin: 0; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--route-line); }
.sp-long { fill: var(--blue); }
.sp-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 12px; }
.sp-legend div { padding-left: 12px; border-left: 3px solid; }
.sp-legend--warm { border-color: var(--amber) !important; } .sp-legend--cold { border-color: var(--blue) !important; }
.sp-legend dt { font: 500 12.5px/1.3 var(--mono); color: #fff; }
.sp-legend dd { margin: 2px 0 0; font-size: 13.5px; color: var(--route-text-5); }
.sp-axis, .sp-tick { stroke: var(--route-muted); stroke-width: 1.5; }
.sp-lbl { font: 400 15px var(--mono); fill: var(--route-text-5); }
.hadanka-q { margin: 0 0 16px; font-size: 22px; line-height: 1.3; font-weight: 600; color: #fff; text-wrap: balance; }
.hadanka summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill); cursor: pointer; list-style: none;
  font-weight: 600; color: #06253C; background: var(--azur); }
.hadanka summary::-webkit-details-marker { display: none; }
.hadanka details p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--t3); }
.hadanka details[open] summary { background: rgba(106, 210, 255, .16); color: var(--azur); }

.pata { display: flex; justify-content: space-between; width: min(1080px, 100% - 2 * var(--gut)); margin: 60px auto 0; padding: 26px 0 48px; border-top: 1px solid var(--route-line); font-size: 14px; color: var(--route-text-5); }
.pata p { margin: 0; }
.pata-brand { font-weight: 600; color: var(--t3); }

/* Query-selected register. Without JavaScript the normal article remains readable. */
.reg--scientific, .per-reg--scientific { display: none; }
html[data-podani="vedecky"] .reg--normal, html[data-podani="vedecky"] .per-reg--normal { display: none; }
html[data-podani="vedecky"] .reg--scientific { display: block; }
html[data-podani="vedecky"] .per-reg--scientific { display: revert; }
.register-end { display: flex; flex-direction: column; align-items: flex-start; margin: 32px 0 0; }
.register-end a { display: inline-flex; align-items: center; min-height: 44px; color: var(--azur); font-size: 15px; font-weight: 500; text-decoration: none; }
.register-end a:hover { text-decoration: underline; }
#podani { scroll-margin-top: 80px; }
.clanek { display: block; }
.ai-pozn { width: min(680px, 100% - 2 * var(--gut)); margin: 0 auto; padding: 0 0 56px; font-size: 12.5px; line-height: 1.5; color: var(--route-muted); }
.news-test-label { margin: 0; padding: 12px var(--gut) 10px; text-align: center; background: #3B2C0A; border-bottom: 1px solid rgba(255, 207, 107, .5);
  color: var(--warn-y-ink); font: 600 13px/1.4 var(--sans); }

/* ---------- hero: skutečná fotografie, bez štítku ---------- */
.hero-media picture, .hero-media .hero-img { display: block; width: 100%; height: 100%; }
.hero-media .hero-img { object-fit: cover; object-position: 62% 50%; transform-origin: 62% 62%; animation: kenburns 30s ease-in-out infinite alternate; }
/* Jas obrazu pod textem nezná publikátor (nemá knihovnu na čtení obrázků); médium bez změřeného
   `hero_bright: false` proto dostane silnější scrim, aby kontrast textu zůstal ≥ 4,5 : 1. */
.hero--bright .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 10, 24, .6) 0%, rgba(6, 10, 24, .18) 20%, rgba(6, 10, 24, .36) 58%, rgba(6, 10, 24, .84) 86%, #080F22 100%),
    linear-gradient(90deg, rgba(6, 10, 24, .9) 0%, rgba(6, 10, 24, .62) 40%, rgba(6, 10, 24, .12) 72%); }
.hero-meta .per-reg { color: inherit; }

/* ---------- obrazové bloky ---------- */
.obraz-media picture, .obraz-media .obraz-img { display: block; width: 100%; height: 100%; }
.obraz-media .obraz-img { object-fit: cover; }
.obraz--feature .obraz-media .obraz-img { transform-origin: 50% 60%; animation: kenburns 30s ease-in-out infinite alternate; }
.obraz--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.obraz--right .obraz-media { order: 2; }
.obraz-karta .src, .obraz-text .src { margin-top: 2px; }
.schema picture, .schema img { display: block; }

/* ---------- boxy a širší bloky v kapitole ---------- */
.kap > .wide-soft, .kap > .box-row { grid-column: wide; }
.kroky-h { margin: 0 0 18px; font-size: 24px; line-height: 1.2; color: #fff; }
.kroky--2 { grid-template-columns: repeat(2, 1fr); }
.recept--3 { grid-template-columns: repeat(3, 1fr); }
.recept--4 { grid-template-columns: repeat(4, 1fr); }
.hadanka.wide-soft { margin: 44px 0; }

/* ---------- infografiky: stav „soft“ (bez barvy mrazu ani tepla) ---------- */
.chip--soft { color: var(--t3); background: rgba(255, 255, 255, .06); border: 1px solid var(--hair); }
.cislo--cold .cislo-val .n { color: var(--cold-ink); text-shadow: 0 0 28px rgba(143, 180, 255, .45); }
.cislo--warm .cislo-val .n { color: var(--amber-2); text-shadow: 0 0 28px rgba(255, 180, 84, .4); }

/* waffle: počet sloupců je třída, ne `style=` (CSP) */
.wf--c15 { grid-template-columns: repeat(15, 1fr); } .wf--c16 { grid-template-columns: repeat(16, 1fr); }
.wf--c17 { grid-template-columns: repeat(17, 1fr); } .wf--c18 { grid-template-columns: repeat(18, 1fr); }
.wf--c19 { grid-template-columns: repeat(19, 1fr); } .wf--c20 { grid-template-columns: repeat(20, 1fr); }
.wf--c21 { grid-template-columns: repeat(21, 1fr); } .wf--c22 { grid-template-columns: repeat(22, 1fr); }
.wf--c23 { grid-template-columns: repeat(23, 1fr); } .wf--c24 { grid-template-columns: repeat(24, 1fr); }
.wf--c25 { grid-template-columns: repeat(25, 1fr); } .wf--c26 { grid-template-columns: repeat(26, 1fr); }
.wf--c27 { grid-template-columns: repeat(27, 1fr); } .wf--c28 { grid-template-columns: repeat(28, 1fr); }
.wf--c29 { grid-template-columns: repeat(29, 1fr); } .wf--c30 { grid-template-columns: repeat(30, 1fr); }

/* spektrum */
.sp-art { max-width: 640px; }
.sp-r--warm { fill: var(--amber); }
.sp-r--cold { fill: var(--blue); }

/* ==========================================================================
   SCÉNY — animace v článku jsou jen SVG (rozhodnutí vlastníka 1. 10. 2026).
   SVG vzniká v Pythonu (news_blocks/scenes.py), pohyb je CSS. Bez pohybu
   (prefers-reduced-motion, starý prohlížeč) je to hotový obrázek se vším obsahem.
   Základní styl prvku je vždy konečný stav; keyframes z něj jen vycházejí.
   ========================================================================== */
.anim { margin: 44px 0; }
.anim-stage { overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--route-line); background: #070D1C;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95); }
.an-svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.anim figcaption { margin-top: 12px; text-align: center; }
.an-star { fill: #EEF2FB; opacity: .75; animation: twinkle 4s ease-in-out infinite; }
.an-star--1 { animation-duration: 5.2s; animation-delay: -1.3s; }
.an-star--2 { animation-duration: 6.1s; animation-delay: -2.6s; }
.an-moon { fill: #E9F0FF; filter: drop-shadow(0 0 18px rgba(200, 220, 255, .55)); }
.an-lake { animation: an-lake 16s ease-in-out infinite; }
/* hladina jezera: čárkovaná, jemná; jede s jezerem */
.an-surface { stroke: var(--ice); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 7 6; }
.an-rim { fill: none; stroke: #9DB8DC; stroke-opacity: .45; stroke-width: 2.5; }
.an-mist { fill: none; stroke: #E6EEF9; stroke-opacity: .38; stroke-width: 18; stroke-linecap: round; filter: blur(6px); animation: an-drift 14s ease-in-out infinite alternate; }
.an-rise { animation: an-rise 6s ease-out infinite; }
.an-rise path { fill: none; stroke: var(--amber); stroke-opacity: .75; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.an-d1 { animation-delay: -1s; } .an-d2 { animation-delay: -2s; } .an-d3 { animation-delay: -3s; } .an-d4 { animation-delay: -4s; } .an-d5 { animation-delay: -5s; }
.an-flow path { fill: none; stroke: var(--cold-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.an-f0 { animation: an-f0 9s linear infinite; } .an-f1 { animation: an-f1 9s linear -1.5s infinite; } .an-f2 { animation: an-f2 9s linear -3s infinite; }
.an-f3 { animation: an-f3 9s linear -4.5s infinite; } .an-f4 { animation: an-f4 9s linear -6s infinite; } .an-f5 { animation: an-f5 9s linear -7.5s infinite; }
.an-spark { fill: #F6FBFF; filter: drop-shadow(0 0 4px rgba(220, 235, 255, .95)); animation: twinkle 3.2s ease-in-out infinite; }
.an-spark--1 { animation-delay: -.8s; } .an-spark--2 { animation-delay: -1.6s; } .an-spark--3 { animation-delay: -2.4s; }
.an-tag rect { fill: rgba(10, 16, 36, .74); stroke: var(--hair); }
.an-tag--cold rect { stroke: rgba(143, 180, 255, .6); } .an-tag--warm rect { stroke: rgba(255, 192, 105, .55); }
.an-tag-k { font: 500 18px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--route-text-5); }
.an-tag-v { font: 500 36px var(--mono); letter-spacing: -.02em; fill: #fff; }
/* tři slovní štítky scény údolí: přijdou, až jezero vstoupí (bez pohybu jsou vidět hned) */
.an-tag-t { font: 600 40px var(--sans); fill: var(--t2); }
.an-note { animation: an-note 16s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (min-width: 641px) and (max-width: 1199px) { .an-note { scale: .4; } }
@media (min-width: 1200px) { .an-note { scale: .36; } }
.an-tag--warm .an-tag-v { fill: var(--amber-2); } .an-tag--cold .an-tag-v { fill: var(--cold-ink); }
.an-axis { stroke: var(--route-muted); stroke-width: 2; }
.an-zero { stroke: var(--ice); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 7 6; }
.an-zero-lbl { font: 500 18px var(--mono); fill: var(--t4); }
.an-band { animation: an-pulse 6s ease-in-out infinite; }
.an-profile { fill: none; stroke: var(--cold-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 8px rgba(143, 180, 255, .7)); animation: an-draw 10s ease-in-out infinite; }
.an-guide { stroke: var(--route-muted); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 3 7; }
.an-level circle { transform-box: fill-box; transform-origin: center; animation: an-pop 10s ease-out infinite; }
.an-level--warm circle { fill: var(--amber); filter: drop-shadow(0 0 10px rgba(255, 180, 84, .9)); }
.an-level--cold circle { fill: var(--blue); filter: drop-shadow(0 0 10px rgba(143, 180, 255, .9)); }
.an-l1 circle { animation-delay: .9s; } .an-l2 circle { animation-delay: 1.8s; } .an-l3 circle { animation-delay: 2.7s; }
.an-lv-h { font: 500 24px var(--mono); fill: #fff; }
.an-lv-t { font: 600 24px var(--sans); fill: var(--t2); }
.an-verdict { font: 600 24px var(--sans); fill: var(--t3); }
@keyframes an-lake { 0% { transform: translateY(120px); opacity: 0; } 10% { opacity: 1; } 52%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes an-note { 0%, 40% { opacity: 0; } 54%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes an-drift { from { transform: translateX(-34px); } to { transform: translateX(34px); } }
@keyframes an-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(-44px); } }
@keyframes an-pulse { 50% { opacity: .45; } }
@keyframes an-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes an-pop { 0% { transform: scale(0); opacity: 0; } 6% { transform: scale(1.35); opacity: 1; } 12% { transform: scale(1); } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes an-f0 {
  0% { transform: translate(90px, 260px) rotate(20deg); opacity: 0; }
  12% { transform: translate(140px, 280px) rotate(24deg); opacity: 1; }
  30% { transform: translate(213px, 315px) rotate(27deg); opacity: 1; }
  50% { transform: translate(291px, 356px) rotate(27deg); opacity: 1; }
  70% { transform: translate(368px, 392px) rotate(23deg); opacity: 1; }
  88% { transform: translate(435px, 417px) rotate(15deg); opacity: 1; }
  100% { transform: translate(480px, 426px) rotate(8deg); opacity: 0; }
}
@keyframes an-f1 {
  0% { transform: translate(170px, 294px) rotate(26deg); opacity: 0; }
  12% { transform: translate(209px, 313px) rotate(27deg); opacity: 1; }
  30% { transform: translate(266px, 343px) rotate(28deg); opacity: 1; }
  50% { transform: translate(328px, 374px) rotate(26deg); opacity: 1; }
  70% { transform: translate(389px, 401px) rotate(21deg); opacity: 1; }
  88% { transform: translate(444px, 419px) rotate(14deg); opacity: 1; }
  100% { transform: translate(480px, 426px) rotate(8deg); opacity: 0; }
}
@keyframes an-f2 {
  0% { transform: translate(260px, 339px) rotate(28deg); opacity: 0; }
  12% { transform: translate(287px, 353px) rotate(27deg); opacity: 1; }
  30% { transform: translate(327px, 374px) rotate(26deg); opacity: 1; }
  50% { transform: translate(371px, 394px) rotate(23deg); opacity: 1; }
  70% { transform: translate(415px, 411px) rotate(18deg); opacity: 1; }
  88% { transform: translate(454px, 421px) rotate(12deg); opacity: 1; }
  100% { transform: translate(480px, 426px) rotate(8deg); opacity: 0; }
}
@keyframes an-f3 {
  0% { transform: translate(870px, 245px) rotate(157deg); opacity: 0; }
  12% { transform: translate(820px, 268px) rotate(154deg); opacity: 1; }
  30% { transform: translate(747px, 307px) rotate(151deg); opacity: 1; }
  50% { transform: translate(669px, 351px) rotate(151deg); opacity: 1; }
  70% { transform: translate(592px, 391px) rotate(155deg); opacity: 1; }
  88% { transform: translate(525px, 416px) rotate(164deg); opacity: 1; }
  100% { transform: translate(480px, 426px) rotate(172deg); opacity: 0; }
}
@keyframes an-f4 {
  0% { transform: translate(790px, 283px) rotate(152deg); opacity: 0; }
  12% { transform: translate(751px, 304px) rotate(151deg); opacity: 1; }
  30% { transform: translate(694px, 337px) rotate(150deg); opacity: 1; }
  50% { transform: translate(632px, 371px) rotate(152deg); opacity: 1; }
  70% { transform: translate(571px, 400px) rotate(158deg); opacity: 1; }
  88% { transform: translate(516px, 419px) rotate(165deg); opacity: 1; }
  100% { transform: translate(480px, 426px) rotate(172deg); opacity: 0; }
}
@keyframes an-f5 {
  0% { transform: translate(700px, 333px) rotate(150deg); opacity: 0; }
  12% { transform: translate(673px, 349px) rotate(151deg); opacity: 1; }
  30% { transform: translate(633px, 371px) rotate(152deg); opacity: 1; }
  50% { transform: translate(589px, 392px) rotate(156deg); opacity: 1; }
  70% { transform: translate(545px, 410px) rotate(161deg); opacity: 1; }
  88% { transform: translate(506px, 421px) rotate(167deg); opacity: 1; }
  100% { transform: translate(480px, 426px) rotate(172deg); opacity: 0; }
}
/* scéna se rozběhne, až se odhalí (s JS); bez JS běží hned */
.js [data-reveal]:not(.is-in) .an-svg * { animation-play-state: paused; }

/* ---------- archiv novinek (vlastník 3. 10. 2026: redakční titulka jako z novin) ----------
   Velký hlavní článek, pod ním mřížka karet se stejným poměrem obrázků 16 : 9. Barva rubriky jen
   jako tečka u štítku. Karta bez fotky má tónovanou plochu s ikonou rubriky, nikdy prázdno. */
.archiv { width: min(1180px, 100% - 2 * var(--gut)); margin: 0 auto; padding: 56px 0 64px; }
.archiv-head { margin: 0 0 28px; }
.archiv h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; color: #fff; }
.archiv-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--t3, #C4CEE0); }
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.news-filter[hidden] { display: none; }
.news-filter-pill { min-height: 40px; padding: 0 16px; border: 1px solid var(--route-line, rgba(255,255,255,.14)); border-radius: 999px; background: transparent;
  color: var(--t2, #E4EAF5); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.news-filter-pill:hover { border-color: rgba(201, 191, 255, .5); }
.news-filter-pill[aria-pressed="true"] { background: #EEF2FB; border-color: #EEF2FB; color: #0B1226; }
.news-filter-pill:focus-visible { outline: 2px solid #A99BEA; outline-offset: 3px; }
.news-archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; margin: 0; padding: 0; list-style: none; }
.news-archive-card { --cat: #B9C6DA; min-width: 0; }
.news-archive-card[hidden] { display: none; }
.news-archive-card[data-category="pocasi"] { --cat: #6AD2FF; }
.news-archive-card[data-category="vystrahy"] { --cat: #FFA070; }
.news-archive-card[data-category="vesmir"] { --cat: #AB95FF; }
.news-archive-card[data-category="priroda"] { --cat: #7CF5B9; }
.news-archive-card[data-category="klima"] { --cat: #F7A1B5; }
.news-archive-card[data-category="sucho"] { --cat: #E8C07A; }
.news-archive-card[data-category="zemedelstvi"] { --cat: #B8DB6E; }
.news-archive-card[data-category="zeme"] { --cat: #D2AE8A; }
.news-archive-card[data-category="obloha"] { --cat: #FFC069; }
.news-archive-card > a { display: flex; flex-direction: column; gap: 16px; height: 100%; color: inherit; text-decoration: none; border-radius: 16px; }
.news-archive-card > a:focus-visible { outline: 2px solid #A99BEA; outline-offset: 6px; }
.news-archive-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #121A35; }
.news-archive-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease, ease); }
.news-archive-card > a:hover .news-archive-media img { transform: scale(1.035); }
.news-archive-media--placeholder { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(90% 80% at 28% 18%, color-mix(in srgb, var(--cat) 26%, transparent), transparent 62%), linear-gradient(160deg, #1A2347, #0E1531); }
.news-archive-media--placeholder svg { width: 56px; height: 56px; padding: 14px; box-sizing: border-box; border-radius: 16px; background: rgba(255,255,255,.06);
  fill: none; stroke: var(--cat); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.news-archive-body { display: grid; gap: 10px; align-content: start; }
.news-archive-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--t3, #C4CEE0); }
.news-archive-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat); }
.news-archive-title { font-size: 21px; font-weight: 500; line-height: 1.28; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.news-archive-card > a:hover .news-archive-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.news-archive-teaser { font-size: 15.5px; line-height: 1.55; color: var(--t3, #C4CEE0); }
.news-archive-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13px; line-height: 1.5; color: var(--route-text-5, #9FAFC8); }
.news-archive-meta > span { white-space: nowrap; }
.news-archive-time, .news-archive-read, .news-archive-data { font: inherit; color: inherit; }
.news-archive-card--lead { grid-column: 1 / -1; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.09); }
.news-archive-card--lead > a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.news-archive-card--lead .news-archive-title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
.news-archive-card--lead .news-archive-teaser { font-size: 18px; }
.news-archive.is-filtered .news-archive-card--lead { grid-column: auto; padding-bottom: 0; border-bottom: 0; }
.news-archive.is-filtered .news-archive-card--lead > a { display: flex; gap: 16px; }
.news-archive.is-filtered .news-archive-card--lead .news-archive-title { font-size: 21px; line-height: 1.28; }
.news-archive.is-filtered .news-archive-card--lead .news-archive-teaser { font-size: 15.5px; }
@media (max-width: 1023px) {
  .news-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-archive-card--lead > a { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 639px) {
  .archiv { padding-top: 32px; }
  .news-archive { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .news-archive-card--lead { padding-bottom: 36px; }
  .news-archive-card--lead .news-archive-title { font-size: 28px; }
  .news-archive-card--lead .news-archive-teaser { font-size: 16.5px; }
}
.news-archive-empty p { margin: 0 0 8px; }
.news-archive-empty a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--route-line); border-radius: 999px; background: var(--s9-glass); color: var(--azur); font-size: 15px; font-weight: 600; text-decoration: none; }
.news-archive-empty a:hover { border-color: rgba(106, 210, 255, .6); }
.news-data-note { max-width: 58ch; margin: 14px 0 0; color: var(--route-text-5); font: 500 13px/1.5 var(--mono); }

/* ---------- odstavcové prvky publikačního rendereru ---------- */
.news-legacy { width: min(760px, 100% - 2 * var(--gut)); margin: 0 auto; padding: 40px 0 40px; }
.news-legacy h1 { margin: 12px 0 10px; font-size: clamp(2.1rem, 4.5vw, 3.35rem); line-height: 1.08; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.news-legacy .news-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--azur); text-decoration: none; }
.news-legacy .news-time { margin: 0; color: var(--route-text-5); font: 400 13px/1.5 var(--mono); }
.news-legacy .news-register { scroll-margin-top: 72px; margin: 42px 0; padding-top: 32px; border-top: 1px solid var(--hair); }
.news-legacy .news-register h2 { margin: 0 0 14px; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.16; color: #fff; text-wrap: balance; }
.news-legacy .news-register h3 { margin: 32px 0 10px; font-size: 1.25rem; line-height: 1.3; color: #fff; }
.news-legacy .news-register p { max-width: 68ch; margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.68; color: var(--text); }
.news-legacy .news-register .news-lead { font-size: 1.2rem; line-height: 1.55; color: var(--t3); }
.news-legacy .news-aside, .news-legacy .news-sources { margin: 32px 0; padding: 22px 24px; border: 1px solid var(--hair); border-radius: 18px; background: var(--s9-glass); }
.news-legacy .news-sources ul { margin: 0; padding-left: 1.3em; }
.news-legacy figure { margin: 32px 0; }
.news-legacy figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
.news-legacy .news-alternates-title { margin: 48px 0 0; font-size: 1.35rem; color: var(--t3); }

/* ==========================================================================
   POHYB — vstup hero, odhalení při posunu, růst grafů
   ========================================================================== */
.hero-kicker, .hero-title, .hero-perex, .hero-meta { animation: rise 1s var(--ease) both; }
.hero-title { animation: rise 1.1s var(--ease) .08s both, glint 3.2s ease-in-out 1.1s both; }
.hero-perex { animation-delay: .2s; } .hero-meta { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hero-scroll { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

.js [data-reveal] { transform: translateY(30px); transition: transform .9s var(--ease); }
.js [data-reveal].is-in { transform: none; }
/* Nadpis má pod sebou jen 18 px; posun o 30 px by překryl následující odstavec. */
.js .kap .kap-subheading[data-reveal] { transform: none; }
.grow-x { transform-box: fill-box; transform-origin: 0 50%; transition: transform 1.3s var(--ease) .25s; }
.grow-up { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.3s var(--ease) .25s; }
.grow-down { transform-box: fill-box; transform-origin: 50% 0; transition: transform 1.3s var(--ease) .25s; }
.js [data-reveal]:not(.is-in) .grow-x { transform: scaleX(0); }
.js [data-reveal]:not(.is-in) :is(.grow-up, .grow-down) { transform: scaleY(0); }
.drop { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal]:not(.is-in) .drop { opacity: 0; transform: translateY(-14px); }
.drop[data-i="1"] { transition-delay: .1s; } .drop[data-i="2"] { transition-delay: .2s; } .drop[data-i="3"] { transition-delay: .3s; } .drop[data-i="4"] { transition-delay: .4s; } .drop[data-i="5"] { transition-delay: .5s; }
.wf-c--on { transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s; }
.js [data-reveal]:not(.is-in) .wf-c--on { opacity: 0; transform: scale(.3); }
.recept > li:nth-child(2) { transition-delay: .12s; } .recept > li:nth-child(3) { transition-delay: .24s; } .recept > li:nth-child(4) { transition-delay: .36s; }
.kroky li:nth-child(3n + 2) { transition-delay: .1s; } .kroky li:nth-child(3n) { transition-delay: .2s; }
.cisla .cislo:nth-child(3) { transition-delay: .08s; } .cisla .cislo:nth-child(4) { transition-delay: .16s; } .cisla .cislo:nth-child(5) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-title { background-position: 0 0; }
  .progress { display: none; }
}

/* ==========================================================================
   RESPONSIVITA
   ========================================================================== */
/* The switch of the registers is the first control of the page and must not sit under the bottom bar on
   the first screen (it did at 390 x 844 and 1024 x 768, WP-A2 evidence): where the bottom bar exists
   (under 1200 px) the hero is as tall as what is left between the top bar (76 px on a tablet, 60 px on a
   phone) and the bottom bar, and its paddings are smaller so the text fits. The key numbers overlap the
   hero by less than its bottom padding, or they would cover the switch. A screen shorter than the text
   just scrolls. */
@media (max-width: 1199px) {
  .hero { min-height: auto; }
  .hero-body { padding: 28px 0 56px; }
  .cisla { margin-top: -36px; }
}
/* Počet dlaždic je třída (`cisla--n3`, `cisla--n4`), protože se mřížka liší (review designu, 1. 10. 2026:
   při třech položkách zůstávala v řadě čtyř díra). Nad 1100 px N vedle sebe; 641–1100 px čtyři jako 2 × 2
   a tři jako 3 × 1; do 640 px čtyři jako 2 × 2 a tři jako 2 + 1 (poslední přes celou šířku). */
@media (min-width: 1101px) {
  .cisla--n3 { grid-template-columns: repeat(3, 1fr); }
  .cisla--n4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .cisla { gap: 12px; }
  .cisla--n3 { grid-template-columns: repeat(3, 1fr); }
  .cisla--n4 { grid-template-columns: repeat(2, 1fr); }
  .cislo-val .n { font-size: clamp(34px, 3.9vw, 44px); }
}
@media (max-width: 1100px) {
  .kroky { grid-template-columns: repeat(2, 1fr); }
  .mraz-osa, .mraz-row { grid-template-columns: 170px 1fr 150px; }
}
@media (max-width: 860px) {
  .graf-row, .box-row, .obraz--hranice, .data-slot { grid-template-columns: 1fr; }
  .tl-wide { display: none; }
  .tl-narrow { display: block; }
}
@media (max-width: 640px) {
  .clanek, .archiv, .news-legacy { font-size: 17px; }
  .hero { min-height: auto; }
  .hero-media .hero-img { object-position: 35% 50%; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(6, 10, 18, .55) 0%, rgba(6, 10, 24, .18) 20%, rgba(6, 10, 24, .48) 58%, rgba(6, 10, 24, .84) 86%, #080F22 100%),
      linear-gradient(90deg, rgba(6, 10, 24, .82) 0%, rgba(6, 10, 24, .52) 62%, rgba(6, 10, 24, .28) 100%);
  }
  .hero--bright .hero-media::after {
    background:
      linear-gradient(180deg, rgba(6, 10, 18, .7) 0%, rgba(6, 10, 24, .32) 20%, rgba(6, 10, 24, .58) 58%, rgba(6, 10, 24, .9) 86%, #080F22 100%),
      linear-gradient(90deg, rgba(6, 10, 24, .9) 0%, rgba(6, 10, 24, .7) 62%, rgba(6, 10, 24, .4) 100%);
  }
  .hero-body { padding: 28px 0 36px; }
  .hero-kicker { margin-bottom: 14px; }
  .hero-title { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.02; }
  .hero-perex { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  .hero-meta { margin-top: 12px; font-size: 11px; letter-spacing: 0; gap: 5px 0; }
  .hero-meta .meta-full, .hero-meta .meta-long { display: none; }
  .hero-meta .meta-dates { flex-basis: 100%; }
  .hero-meta .meta-sep--dates { display: none; }
  .hero-meta .meta-short { display: inline; }
  .hero-meta .meta-date { display: inline; }
  .hero-meta .meta-sep--full { display: none; }
  .hero-meta .meta-sep--short { display: inline; }
  /* Jen odkaz na druhý jazyk jde na vlastní řádek. Dřív to byla „poslední položka", takže článek bez
     anglické verze zalomil „6 min" a „5 zdrojů" na dva řádky a skryl mezi nimi tečku (17. 10. 2026). */
  .hero-meta .meta-sep--lang { display: none; }
  .hero-meta .meta-item--lang { flex-basis: 100%; }
  .graf-card--tl .tl-key--now { display: none; }
  .hero-scroll { display: none; }
  .ph-tag { top: 62px; left: var(--gut); right: var(--gut); max-width: none; font-size: 12px; padding: 10px 12px; }
  .cisla { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -16px; }
  /* tři dlaždice: dvě vedle sebe a třetí přes celou šířku, uvnitř ikona vlevo a číslo s popiskem vpravo */
  .cisla--n3 .cislo:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; }
  .cisla--n3 .cislo:last-child .cislo-ic { grid-row: 1 / 3; }
  .cisla--n3 .cislo:last-child .cislo-val { grid-column: 2; margin: 0; }
  .cisla--n3 .cislo:last-child .cislo-lbl { grid-column: 2; margin: 0; }
  .cisla--n3 .cislo:last-child .cislo-src { grid-column: 1 / -1; margin-top: 10px; }
  .cislo { padding: 16px 14px 14px; border-radius: 18px; }
  .cislo-ic { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
  .cislo-val { margin: 12px 0 6px; }
  .cislo-val .n { font-size: 34px; }
  .cislo-val .u { font-size: 15px; }
  .cislo-lbl { font-size: 13px; }
  .cislo-src { font-size: 9.5px; }
  .lede { margin-top: 56px !important; }
  .kap { margin-top: 76px; }
  .kap h2 { font-size: 32px; }
  .graf-card { padding: 22px 18px; border-radius: 22px; }
  .cisla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cislo { min-width: 0; }
  .cislo-val { flex-wrap: wrap; white-space: normal; }
  .recept { grid-template-columns: 1fr; gap: 26px; }
  .recept > li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 18px; }
  .recept > li .recept-ic { grid-row: 1 / 3; }
  .recept h3 { margin: 4px 0 0; }
  .recept > li:not(:last-child)::after { content: "+"; top: auto; bottom: -24px; right: auto; left: 50%; margin: 0 0 0 -11px; }
  .recept > li:nth-child(2)::after { content: "+"; }
  .recept > li:nth-last-child(2)::after { content: "="; }
  .box { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .box--vy { padding: 24px 20px; }
  .box--vy h3 { font-size: 24px; }
  .dvojice { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; }
  .dvojice-vs { justify-self: center; }
  .obraz--feature { margin-top: 84px; }
  .obraz--feature .obraz-media { height: 440px; }
  .obraz--feature .ph-tag { top: 80px; }
  .obraz-karta { position: relative; left: auto; bottom: auto; width: auto; margin: -110px var(--gut) 0; }
  .obraz--hranice { gap: 20px; }
  .data-slot { padding: 20px 18px; }
  .kroky { grid-template-columns: 1fr; gap: 12px; }
  .kroky li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 18px 18px 18px 16px; }
  .kroky-ic { grid-row: 1 / 3; width: 44px; height: 44px; font-size: 21px; }
  .kroky h3 { margin: 2px 40px 4px 0; font-size: 17.5px; }
  .kroky-n { top: 18px; right: 16px; }
  .sp-legend { grid-template-columns: 1fr; }
  .citat::before { top: -6px; font-size: 150px; }
  .mraz-osa { display: none; }
  .mraz-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .mraz-row .hbar { grid-column: 1 / -1; grid-row: 2; }
  .predpo-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .predpo-row .hbar { grid-column: 1 / -1; grid-row: 2; }
  .wf { gap: 3px; }
  .citat { margin-top: 90px; padding: 70px var(--gut) 60px; }
  .cta { flex-wrap: wrap; }
  .cta-go { margin-left: 0; width: 100%; justify-content: center; min-height: 48px; }
  .zdroje-list { padding: 4px 18px 18px; }
  .zdroje-list li { grid-template-columns: 28px 1fr; gap: 2px 10px; }
  .zdroje-list li > * { grid-column: 2; }
  .zdroje-list li > .z-date { grid-column: 2; grid-row: auto; }
  .zdroje-list li::before { grid-row: 1 / 4; }
}

/* ---------- responzivita: doplňky ---------- */
/* Recept se třemi podmínkami a výsledkem: na tabletu tři podmínky v řadě se „+" mezi nimi a výsledek pod nimi
   přes celou šířku se „=" nad sebou (2 × 2 dávalo „=" doprostřed řádku a spojky měnily význam: výsledek
   vypadal jako čtvrtá podmínka). */
@media (min-width: 641px) and (max-width: 1100px) {
  .recept--4 { grid-template-columns: repeat(3, 1fr); row-gap: 42px; }
  .recept--4 > li:last-child { grid-column: 1 / -1; }
  .recept--4 > li:nth-child(3)::after { content: none; }
  .recept--4 > li:last-child::before { content: "="; position: absolute; z-index: 1; top: -32px; left: 50%; width: 22px; height: 22px; margin-left: -11px;
    display: grid; place-items: center; border-radius: 50%; font: 500 15px/1 var(--mono); color: var(--ice); background: #0D1838; border: 1px solid rgba(143, 180, 255, .5); }
}
@media (max-width: 860px) {
  .obraz--right { grid-template-columns: 1fr; }
  .obraz--right .obraz-media { order: 0; }
}
@media (max-width: 640px) {
  .reg { scroll-margin-top: 300px; }
  .recept--3, .recept--4 { grid-template-columns: 1fr; }
  .kroky--2 { grid-template-columns: 1fr; }
  .an-tag-t { font-size: 36px; }
  .an-tag-k { font-size: 24px; } .an-tag-v { font-size: 44px; }
  .an-lv-h, .an-lv-t, .an-verdict { font-size: 30px; }
  .an-zero-lbl { font-size: 24px; }
  .archiv { padding-top: 40px; }
  #podani { scroll-margin-top: 72px; }
}


@media (max-width: 640px) { .tempo-row { grid-template-columns: 1fr; gap: 5px; } .tempo-co { grid-row: 1; font-size: 15px; font-weight: 600; } .tempo-n { grid-row: 2; } .tempo-row .hbar { grid-row: 3; } }
@media (max-height: 700px) and (max-width: 640px) {
  .hero-title { font-size: 34px; line-height: 1.02; }
  .hero-perex { font-size: 16px; line-height: 1.45; }
  .hero-body { padding-top: 20px; padding-bottom: 24px; }
  .hero-meta { margin-top: 10px; }
}

.article-footer { width: min(680px, 100% - 2 * var(--gut)); margin: 0 auto; padding: 0 0 56px; }
.article-footer .ai-pozn { width: 100%; padding: 0; }
.article-footer .news-data-note { max-width: none; }

/* Odkaz článku na stránku jevu (NS 7, 5. 10. 2026): vazbu určuje config/news/souvislosti.json. */
.souvislosti { width: min(680px, 100% - 2 * var(--gut)); margin: 0 auto 40px; }
.souvislosti-nadpis { margin: 0 0 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--route-text-5); }
.souvislosti-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.souvislosti-odkaz { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 18px 22px; border-radius: 22px; background: var(--s9-glass); border: 1px solid var(--route-line); color: var(--text); text-decoration: none; }
.souvislosti-odkaz:hover, .souvislosti-odkaz:focus-visible { border-color: rgba(106, 210, 255, .5); background: rgba(106, 210, 255, .06); }
.souvislosti-nazev { grid-column: 1; font-size: 18px; font-weight: 600; }
.souvislosti-popis { grid-column: 1; font-size: 15px; line-height: 1.45; color: var(--t2); }
.souvislosti-sipka { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; color: var(--azur); }
/* Odkaz v textu článku: první výskyt pojmu (pravidla terms v config/news/souvislosti.json). */
.telo .v-textu { color: inherit; text-decoration: underline; text-decoration-color: rgba(106, 210, 255, .6); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.telo .v-textu:hover, .telo .v-textu:focus-visible { color: var(--azur); text-decoration-color: var(--azur); }
/* Recenze 5. 10. (P2-3): odkaz v textu výrazněji, azur a plné podtržení 2 px. */
.telo .v-textu { color: var(--azur); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.telo .v-textu:hover, .telo .v-textu:focus-visible { color: var(--text); }

/* Široký článek: fotografie vystoupí ze středového main, čtecí šířka zůstává.
   Pod 1440 px pravidla neplatí; focal point široké fotografie je uprostřed. */
@media (min-width: 1440px) {
  body.subpage[data-page-route="novinky"] .clanek .hero {
    width: 100vw; max-width: none; margin-inline: calc(50% - 50vw);
  }
  body.subpage[data-page-route="novinky"] .clanek .hero-body {
    width: min(calc(var(--content-width) - 2 * var(--content-gutter)), 100% - 2 * var(--gut));
  }
  body.subpage[data-page-route="novinky"] .clanek .hero-img {
    object-position: 50% 50%; transform-origin: 50% 50%;
  }
}

/* Subscription entry remains visible in the archive heading at every width. */
.news-rss-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-underline-offset: 4px; }
.news-rss-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }