/* SIMAR — editorial data-hub design system.
   Content-forward, tag/panel-driven, full-width. No narrow centered text
   columns: `.wrap` only constrains an inner max-width, `.section` is always
   full-bleed. Breakpoints: 900px (tablet), 600px (mobile). */

/* ---------- reset / base ---------- */
/* [hidden] MUST WIN. The UA rule is a single attribute selector, so any class
   that sets `display` outranks it — `.pdfview__lb { display: grid }` did, and a
   hidden full-screen overlay sat over the whole page swallowing every click on
   the standard beneath it. Same bug the panel had; a reset here rather than a
   rule per component, because the next component to set `display` reopens it. */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The header is sticky and 126px tall (161px at tablet, 123px at phone), so a
   #fragment jump lands the target UNDER it: you arrive mid-answer and read it
   as having been sent to the next question, which is exactly what the seven
   questions on /verejne-mineni/sedm-otazek-a-odpovedi-o-vvm/ did.

   scroll-padding-top on the scroll container fixes every anchor at once —
   in-page links, :target, scrollIntoView, and the browser restoring a
   fragment on reload — instead of a scroll-margin-top per element, which is
   how .standard ended up with a hardcoded 96px that stopped matching the
   header. Derived from --head-h, so it follows the breakpoints on its own. */
html{scroll-padding-top:calc(var(--head-h) + var(--space-md))}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.15; margin:0 0 .4em; font-weight:800; letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.15rem; font-weight:700}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.wrap--wide{max-width:var(--maxw-wide); padding-inline:40px}
.section{width:100%; padding-block:var(--space-xl)}
.section--tight{padding-block:var(--space-md) var(--space-lg)}
.section--surface{background:var(--surface)}
.section--band{background:var(--ink); color:#fff}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-md);
  margin-bottom:var(--space-md); border-bottom:1px solid var(--line); padding-bottom:var(--space-xs);
}
.section-head h2{margin:0}
.eyebrow{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-ink); margin-bottom:.5em;
}

/* ---------- header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line);
}
/* Row 1 — utility: brand, tagline, search, language. Renamed from .head-inner
   when the header became two-tier; the footer's own `ul.nav` is unaffected. */
.head-utility{display:flex; align-items:center; gap:var(--space-md); padding-block:14px; flex-wrap:wrap}
.brand{display:flex; align-items:flex-end; gap:10px; margin-right:auto}
/* 36 -> 44px, Marek's "like 20% bigger". The header's height is a measured
   constant (--head-h) that sticky rails and html{scroll-padding-top} offset
   against, so the three --head-h values below were re-measured after this
   change rather than left to drift. */
.brand img{height:44px; width:auto}
.brand-tag{font-size:.82rem; font-weight:500; color:var(--blue-ink); letter-spacing:.01em; line-height:1; padding-bottom:2px}
/* Hidden below 700px, not 640px. With the tagline visible the utility row
   crossed the container at ~650-700px and wrapped, spiking the sticky header
   from 123px to 182px at 641px. The tagline is brand decoration; a header
   whose height jumps as you narrow the window is not. */
@media (max-width:700px){.brand-tag{display:none}}

/* Row 2 — the eight sections. A hairline separates it from the utility row;
   .site-head already supplies the outer border-bottom. */
.head-sections{border-top:1px solid var(--line)}
.head-sections .nav{padding-block:9px}

/* --- the phone menu (ported from helena-singerova, 2026-09-18) -------------
   Wide: the disclosure is not a box. `display: contents` drops both it and
   its panel out of the layout, so `.nav` is still a direct child of this row
   and nothing about the desktop header changes. */
.menu, .menu__panel{display:contents}
.menu__toggle{display:none}
/* `display: contents` is NOT enough to show a CLOSED <details>' content.
   Firefox and WebKit hide it with `display:none`, which the line above
   overrides — but Chrome hides it with `content-visibility:hidden` on
   ::details-content, and no `display` can beat that. On Helena's site that
   shipped as a desktop header with no navigation at all, while the nav still
   existed and still reported its links as visible. Only its WIDTH showed it:
   0px. The script in base.html is the belt to this pair of braces. */
.menu::details-content{content-visibility:visible; display:contents}

.nav{display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap}
.nav__group{display:flex; align-items:center; gap:var(--space-md)}
/* Audience grouping made visible: a hairline between clusters, matching the
   thin-rule language used across the site. Not applied to the first group. */
.nav__group + .nav__group{border-left:1px solid var(--line); padding-left:var(--space-md)}

/* The accent is inherited, not selected for. Each group sets --nav-accent and
   the single ::after rule below reads it, so adding a section never means
   another colour selector that could lose a specificity fight (a bare-tag
   selector silently overriding a component class has bitten this codebase
   before). .nav's own default covers Kontakt, which is deliberately neutral. */
.nav{--nav-accent:var(--ink)}
.nav__group--spolek{--nav-accent:var(--blue-ink)}
.nav__group--obor{--nav-accent:var(--green-ink)}
.nav__group--verejnost{--nav-accent:var(--red-text)}

.nav a{
  font-family:var(--font-head); font-size:.94rem; font-weight:600; color:var(--ink); padding-block:6px; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--nav-accent);
  transform:scaleX(0); transform-origin:left; transition:transform .18s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a.is-active::after{transform:scaleX(1)}
/* The current section stays lit without relying on colour alone. */
.nav a.is-active{color:var(--nav-accent)}
@media (prefers-reduced-motion:reduce){.nav a::after{transition:none}}
.lang{display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:2px; background:var(--surface)}
.lang button{
  border:0; background:transparent; font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.03em;
  color:var(--muted); padding:5px 11px; border-radius:999px; cursor:pointer; transition:background .15s var(--ease),color .15s var(--ease);
}
.lang button.on{background:var(--blue-ink); color:#fff}
.lang button:not(.on):hover{color:var(--ink)}

/* ---------- hero ---------- */
/* PADDING-TOP A ŠÍŘKA FOTKY DRŽÍ BÍLOU PLOCHU NAD LOGEM. Člen předsednictva
   přes Kateřinu, 2026-10-19: "na HP je příliš volné bílé plochy nahoře".
   Změřeno na 1500 px: od spodní hrany hlavičky k hornímu okraji wordmarku
   bylo 142 px, z toho jen 40 px byl tenhle padding. Zbylých 102 px dělalo
   `align-items:center` — textový sloupec je 486 px vysoký, obrázkový 689,
   a centrování ten rozdíl rozpůlí nad a pod text.

   Proto se nemění zarovnání (na `start` text visí hned pod menu a pod
   tlačítkem zůstane 200 px prázdna) ani poměr stran fotky (4:5 je poměr,
   NA KTERÝ JSOU PŘEDŘÍZNUTÉ renderované varianty — viz home.html; jiný
   poměr by je zase nechal dopočítávat zvětšením). Zmenší se SLOUPEC
   s fotkou, takže se s ním posune i červený klín a zelená tečka, které jsou
   v něm pozicované. Výsledek měřený stejně: 77 px nad logem místo 142. */
.hero{padding-block:var(--space-md) var(--space-xl); overflow:hidden}
.hero-inner{
  display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-xl); align-items:center;
}
.hero-wordmark-wrap{margin:0 0 var(--space-md)}
.hero-wordmark{width:clamp(220px,30vw,520px); height:auto; display:block}
.hero-lede{font-size:1.2rem; color:var(--muted); max-width:44ch; margin-bottom:var(--space-md)}
.hero-ctas{display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-bottom:var(--space-md)}
.btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);
}
.btn--primary{background:var(--blue-ink); color:#fff}
.btn--primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-card-hover)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue-ink); color:var(--blue-ink)}

.hero-visual{position:relative; padding:22px 18px 18px 0; width:100%; max-width:460px; justify-self:end}
.hero-photo-frame{
  position:relative; z-index:2; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card-hover); aspect-ratio:4/5;
}
.hero-photo-frame img{width:100%; height:100%; object-fit:cover; display:block}
.hero-accent-dot{
  position:absolute; z-index:1; left:-14px; bottom:6px; width:58px; height:58px;
  border-radius:50%; background:var(--green);
}
.hero-accent-wedge{
  position:absolute; z-index:0; right:0; top:0; width:64%; height:52%;
  background:var(--red); border-radius:0 var(--radius) 0 var(--radius);
  clip-path:polygon(28% 0,100% 0,100% 100%);
}

/* ---------- grid ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- card ---------- */
.card{
  display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line);
  border-radius:0; overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
  height:100%;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:transparent}
.card__media{
  aspect-ratio:16/9; background:linear-gradient(135deg,var(--blue-tint),var(--green-tint));
  display:flex; align-items:center; justify-content:center; color:var(--blue-soft);
  font-family:var(--font-head); font-weight:800; letter-spacing:.02em; position:relative;
}
.card__media--logo{
  aspect-ratio:auto; height:104px; background:#fff; padding:var(--space-md);
}
.card__media--news{
  aspect-ratio:auto; height:180px;
}
.card__media--logo img{width:100%; height:100%; object-fit:contain}
.card__media--cover img{width:100%; height:100%; object-fit:cover}
/* Keyed on the REAL genre slug. These were --tz/--clanek while the templates
   emitted `{{ genre.slug|slice:':8' }}` ("tiskova_", "vlastni_"), so no tint
   ever matched and every placeholder fell back to the base gradient. Fixed
   2026-09-17 when the listing gained the same box. */
.card__media--tiskova_zprava{background:linear-gradient(135deg,var(--blue-tint),var(--bg)); color:var(--blue-ink)}
.card__media--vlastni_clanek{background:linear-gradient(135deg,var(--green-tint),var(--bg)); color:var(--green-ink)}
.card__media--podcast{background:linear-gradient(135deg,var(--ink),#2c3a48); color:#fff}
.card__media--none{background:linear-gradient(135deg,var(--blue-tint),var(--green-tint)); color:var(--blue-ink)}
.card__media__mark{font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6}
.play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);
}
.play-badge::after{
  content:""; position:absolute; top:50%; left:56%; transform:translate(-50%,-50%);
  border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff;
}
.card__body{padding:var(--space-sm); display:flex; flex-direction:column; gap:var(--space-2xs); flex:1}
.card__tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px}
.card__title{font-size:1.05rem; margin:0}
.card__excerpt{color:var(--muted); font-size:.92rem; margin:0}
.card__spec{color:var(--muted); font-size:.82rem; line-height:1.45; white-space:normal; margin:auto 0 0; padding-top:var(--space-2xs)}
.card__meta{margin-top:auto; padding-top:var(--space-2xs); font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; gap:var(--space-2xs)}

/* ---------- pills / tags ---------- */
.pill{
  display:inline-flex; align-items:center; font-size:.76rem; font-weight:700; letter-spacing:.02em;
  padding:4px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted);
  white-space:nowrap;
}
.pill--genre{background:var(--blue-tint); color:var(--blue-ink); border-color:transparent}
.pill--topic{background:var(--green-tint); color:var(--green-ink); border-color:transparent}
/* Task 5 (plan 6): free/paid distinction on Volně prodejné studie. Reuses
   the existing .pill component as-is (same precedent as .pill--genre/
   --topic above) rather than a new box shape — no new border-radius is
   introduced, the modifier only ever changes colour. */
.pill--free{background:var(--green-tint); color:var(--green-ink); border-color:transparent}
.pill--paid{background:var(--surface); color:var(--muted); border-color:var(--line)}

/* ---------- news / aktuality (výběrový kousek + barred lead cards) ---------- */
.section-head--news{display:block; border-bottom:0; padding-bottom:0}
/* h1 AND h2. The flex rule named h2 alone, and the homepage is the only place
   that uses one — every section page puts the same markup inside an <h1>,
   where the icon stayed an empty inline <span> with no width and drew nothing.
   Thirteen pages carried the element and none of them showed it. Marek,
   2026-09-24, on Veřejné mínění: "chybí ikonka". display:inline-block on the
   icon itself is the belt to that braces: it now has a box wherever it lands,
   flex parent or not. */
.section-head--news h1,
.section-head--news h2{display:flex; align-items:center; gap:.55em; margin-bottom:.6em}
.section-head__icon{
  display:inline-block; vertical-align:middle;
  width:26px; height:26px; border-radius:50%; flex:none;
  background:conic-gradient(var(--blue),var(--green),var(--red),var(--blue));
}
.news-head__rule{display:block; width:72px; height:4px; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--green) 50%,var(--red))}

.readmore{display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:700; font-size:.92rem; transition:opacity .15s var(--ease)}
.readmore:hover{opacity:.7}
.readmore__icon{position:relative; width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor; flex:none}
.readmore__icon::after{
  content:""; position:absolute; top:50%; left:57%; transform:translate(-50%,-50%);
  border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor;
}
.readmore--red{color:var(--red-text)}
.readmore--green{color:var(--green-ink)}
.readmore--blue{color:var(--blue-ink)}

.vyber{border-top:3px solid var(--red); padding-top:var(--space-lg); margin-bottom:var(--space-xl)}
.vyber__head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-sm)}
.vyber__eyebrow{font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--red-text)}
.vyber__date{font-size:.85rem; color:var(--muted); white-space:nowrap}
.vyber__rule{display:block; height:2px; background:var(--red); margin-bottom:var(--space-lg)}
.vyber__body{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:var(--space-xl); align-items:center}
.vyber__media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card)}
.vyber__media img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.vyber__title{color:var(--red-text); font-size:clamp(1.4rem,2.4vw,2rem); margin-bottom:.4em}
.vyber__excerpt{color:var(--muted); font-size:1.02rem; max-width:52ch; margin-bottom:1em}

.news-leads{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg) var(--space-xl); margin-bottom:var(--space-xl)}
.news-card{position:relative; padding-left:var(--space-md); border-left:4px solid var(--line); overflow:hidden}
.news-card--green{border-left-color:var(--green-ink)}
.news-card--blue{border-left-color:var(--blue-ink)}
.news-card--red{border-left-color:var(--red-text)}
/* 16:9 — the middle ground. A fixed 150px made the picture a 3:1 letterbox on
   the listing's ~475px cards ("ten obrázek úplně zbytečně hrozně
   zplašťujeme"); 4:3 fixed that and made the tiles too tall ("ty dlaždice
   jsou až moc vysoké, zejména ten obrázek"). Both Marek, 2026-09-17. A ratio
   rather than a height, so it holds at every column width. */
.news-card__media{position:relative; z-index:1; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:var(--space-sm)}
/* The PHOTO, as a direct child. Written as `.news-card__media img` it also
   caught the logo inside the no-photo placeholder — one specificity step above
   `.card__media__logo{width:110px}` — so that logo was blown up to fill the
   box and cropped by object-fit:cover. Marek, 2026-09-25: "to SIMAR logo u
   Děje se v oboru je špatně zacentrované, není uprostřed toho modrého
   placeholderu." It was not off-centre, it was five times too big; the flex on
   .card__media had been centring it correctly all along. */
.news-card__media > img{width:100%; height:100%; object-fit:cover; display:block}
/* The placeholder fills the box like an image would. */
.news-card__media > .card__media{aspect-ratio:auto; width:100%; height:100%}
/* Štítky over the top-left corner of the media box (Marek, 2026-09-17). Dark
   translucent chips so they hold contrast over a photograph and over every
   placeholder tint alike. */
/* ---------- The Děje se v oboru tile (2026-09-17) ----------
   Rebuilt from the aka.cz card Marek sent, after "ta stránka teď působí
   šíleně přeplácaně a nepřehledně". A white surface, the picture filling its
   top, the labels and the date OVER the picture, then a headline that is the
   biggest thing on the card. No perex, no cycling left bar, no meta row.
   Scoped to --tile so the homepage's own news cards are untouched. */
.news-card--tile{
  padding-left:0; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  box-shadow:var(--shadow-card);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
/* The colour bar is back, and the card's accent runs through the "Přečíst"
   link too — Marek, 2026-09-17: a red type chip on every card left the page
   "hrozně moc červené", so the accent cycles green/blue/red instead. */
.news-card--tile{border-left-width:4px; border-left-style:solid}
.news-card--tile:hover{border-color:transparent}
.news-card--tile.news-card--green{border-left-color:var(--green-ink)}
.news-card--tile.news-card--blue{border-left-color:var(--blue-ink)}
.news-card--tile.news-card--red{border-left-color:var(--red-ink)}
.news-card--tile.news-card--green:hover{border-left-color:var(--green-ink)}
.news-card--tile.news-card--blue:hover{border-left-color:var(--blue-ink)}
.news-card--tile.news-card--red:hover{border-left-color:var(--red-ink)}
.news-card--tile.news-card--green .news-card__more{color:var(--green-ink)}
.news-card--tile.news-card--blue .news-card__more{color:var(--blue-ink)}
.news-card--tile.news-card--red .news-card__more{color:var(--red-ink)}
.news-card--tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover); border-color:transparent}
.news-card--tile .news-card__media{border-radius:0; margin-bottom:0}
.news-card--tile .news-card__body{
  padding:var(--space-md); display:flex; flex-direction:column; gap:var(--space-2xs); flex:1;
}
.news-card--tile .news-card__title{
  font-family:var(--font-head); font-size:1.22rem; line-height:1.28; font-weight:700; margin:0;
}
.news-card--tile .news-card__title a{color:var(--ink); text-decoration:none}
.news-card--tile .news-card__title a:hover, .news-card--tile .news-card__title a:focus-visible{color:var(--blue-ink)}
.news-card--tile .news-card__excerpt{margin:0; color:var(--muted); font-size:.92rem; line-height:1.5}
.news-card__by{
  margin:0; font-size:.8rem; color:var(--muted);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0;
}
/* The agency's name reads as text beside the labels, not as another chip. */
/* WHO PUBLISHED IT. The colour bar down the card's edge said this and nobody
   read it — Marek, 2026-09-25. These two badges say it in words: SIMAR's own
   pieces wear the association's mark on a solid field, an agency's wear its
   name on a plain one. They differ in fill, in weight and in content, so they
   are still telling them apart in greyscale, on a phone, and for a reader who
   has never seen the site before. */
/* Inset in the media box's top-left corner. Marek, 2026-09-25: "ten SIMAR dej
   jako ten zakulacený placeholder v levém horním rohu, ať to odlišíme co
   nejvíc" — so SIMAR's own badge is a small rounded tile, the no-photo
   placeholder in miniature, floated off the corner rather than welded to it.
   An agency's stays a plain flush chip: the point is that the two should NOT
   look like variants of one thing. */
.source{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; flex:none; line-height:1;
}
.source--simar{
  left:12px; top:12px; padding:9px 15px;
  background:var(--blue-ink); border-radius:var(--radius-sm);
  box-shadow:0 3px 12px rgba(22,32,43,.28);
}
/* The real mark, not the word set in our type — and white, because the logo's
   own blue on the badge's blue would disappear.

   THE NUDGE IS NOT A FUDGE. simar-logo.svg has a viewBox of 0 0 143 59 whose
   ink starts at y=15.59 and ends at y=58.48 — measured with getBBox(), not
   guessed — so a quarter of the file's height is empty space above the
   wordmark and almost none below it. The <img> element centres perfectly
   (15/15 left and right, 9/9 top and bottom, measured on the live page) while
   the MARK inside it sits about 4px low, which is what reads as "není to
   uprostřed". Half the asymmetry is (15.59-0.52)/2/59 = 12.8% of the image's
   height, and expressed as a percentage it stays correct if the logo is
   resized. Fixing it here rather than in the asset: that file is the brand
   logo and is used at its natural size elsewhere. */
.source--simar img{
  height:19px; width:auto; display:block;
  filter:brightness(0) invert(1);
  transform:translateY(-12.8%);
}
.source--agency{
  left:0; top:0; padding:7px 14px 6px; background:var(--bg);
  font-family:var(--font-head); font-weight:700; font-size:.74rem;
  letter-spacing:.04em; color:var(--ink); max-width:70%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}
/* The kind of piece is a different question from who wrote it, so it stops
   competing with the badge for the same emphasis. */
.news-card__kind{font-size:.76rem; color:var(--muted)}
.news-card__agency{min-width:0; overflow-wrap:anywhere}
/* Štítky sit on this row now (2026-09-23) rather than over the picture, so
   they take the row's scale instead of the overlay's. */
.news-card__by .pill--tag{font-size:.72rem; padding:3px 9px; text-decoration:none}
.news-card__more{
  margin-top:auto; padding-top:var(--space-2xs); align-self:flex-start;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--red-text); text-decoration:none;
}
.news-card__more span{display:inline-block; transition:transform .15s var(--ease)}
.news-card__more:hover span, .news-card__more:focus-visible span{transform:translate(2px,-2px)}

/* Štítky over the picture — back to the rounded dark pills, which Marek
   preferred to the square uppercase chips. The TYPE is not here: it is a pill
   in the body, so the picture carries only what the client tagged. */
.news-card__tags{
  position:absolute; top:10px; left:10px; right:10px; z-index:2; margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:5px; max-height:calc(100% - 52px); overflow:hidden;
}
.news-card__tags a{
  display:inline-block; max-width:100%; padding:4px 11px; border-radius:999px;
  background:rgba(20,26,33,.78); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.01em; text-decoration:none; backdrop-filter:blur(3px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.news-card__tags a:hover, .news-card__tags a:focus-visible{background:var(--blue)}

/* The date as a white notch over the picture's bottom edge — the one piece
   that ties the picture to the body, straight from the reference. */
.news-card__date{
  position:absolute; left:0; bottom:0; z-index:2; padding:7px 14px 6px;
  background:var(--bg); color:var(--muted);
  font-size:.74rem; font-weight:600; letter-spacing:.09em; white-space:nowrap;
}

/* No image: a flat tint keyed to the genre, with the mark quietly in it. The
   type is already a chip, so repeating the word here would say it twice. */
.card__media__logo{width:110px; height:auto; opacity:.22}
.news-card__body{position:relative; z-index:1}
.watermark-num{
  position:absolute; top:-10px; right:0; z-index:0; font-family:var(--font-head); font-weight:800;
  font-size:4.4rem; line-height:1; color:rgba(51,54,59,.09); pointer-events:none; user-select:none;
}
.news-card__title{position:relative; z-index:1; font-size:1.05rem; margin-bottom:.35em}
.news-card__excerpt{color:var(--muted); font-size:.9rem; margin-bottom:.7em}
.news-card__meta{display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); flex-wrap:wrap}
.news-card__meta > span{font-size:.8rem; color:var(--muted)}

.btn-pill-rule{position:relative; display:flex; justify-content:center}
.btn-pill-rule::before{content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line); z-index:0}
.btn-pill-rule__btn{position:relative; z-index:1}

/* ---------- stat strip (legacy, kept for _components.html reuse) ---------- */
.stat-strip{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat{
  flex:1 1 160px; padding:var(--space-md) var(--space-md) var(--space-md) 0;
  border-left:1px solid var(--line); padding-left:var(--space-md);
}
.stat:first-child{border-left:0; padding-left:0}
.stat__value{display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(1.5rem,2.6vw,2.3rem); color:var(--ink)}
.stat__label{display:block; font-size:.85rem; color:var(--muted); margin-top:4px}

/* ---------- stats grid (sharp, barred — sibling of .news-card) ---------- */
.section--stats{padding-block:var(--space-lg) var(--space-2xl); background:var(--bg)}
.section--stats .section-head{margin-bottom:var(--space-lg)}
.stats-intro__lede{color:var(--muted); font-size:1.02rem; max-width:60ch; margin:.6em 0 0}

/* split layout: photo + intro on the left, stat grid on the right — mirrors
   the hero's photo-on-the-right rhythm in reverse */
.stats-split{display:grid; grid-template-columns:.86fr 1.14fr; gap:var(--space-xl); align-items:start}
.stats-visual{display:flex; flex-direction:column; gap:var(--space-lg); height:100%}
.stats-visual .section-head{margin-bottom:0; flex:none}
.stats-photo{position:relative; margin-top:auto}
.stats-photo-frame{
  position:relative; z-index:1; overflow:hidden; border-radius:0;
  box-shadow:var(--shadow-card-hover); aspect-ratio:4/5;
}
.stats-photo-frame img{width:100%; height:100%; object-fit:cover; display:block}
.stats-photo-mark{
  position:absolute; z-index:2; left:-12px; top:-12px; width:34px; height:34px;
  border-radius:0; background:var(--green);
}
.stats-photo-rule{
  display:block; height:6px; margin-top:-6px; position:relative; z-index:2;
  background:linear-gradient(90deg,var(--blue),var(--green) 50%,var(--red));
}

.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg) var(--space-lg); align-self:end}
.stat-tile{
  position:relative; min-width:0; overflow:hidden;
  background:var(--bg); border-radius:0; box-shadow:none;
  border-left:4px solid var(--line); padding:var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  transition:transform .18s var(--ease);
}
.stat-tile:hover{transform:translateY(-2px)}
/* Icon primitive. Shared by the stat tiles and the homepage pillars: a flat
   filled glyph in the tricolor, no tinted chip and no stroke-only outline —
   both of those were tried on the stats block and rejected as reading soft.
   Sizes differ (the pillars' glyph is that block's main graphic, not a bullet)
   but the treatment must not diverge. Deleting this rule silently un-sized the
   stat icons once; it lives here, beside the stat colour rules, so a change to
   the pillars cannot take it away again. */
.stat-ico, .pillar-ico{display:block; position:relative; z-index:1}
.stat-ico svg, .pillar-ico svg{width:100%; height:100%; display:block}
.stat-ico{width:36px; height:36px; margin-bottom:var(--space-sm)}
.pillar-ico{width:52px; height:52px; margin-bottom:var(--space-md)}
.stat-ico--blue{color:var(--blue-ink)}
.stat-ico--green{color:var(--green-ink)}
.stat-ico--red{color:var(--red-text)}
/* Kept beside the stat modifiers, not in the pillars block: rewriting that block
   wholesale has now silently deleted these once (icons rendered --ink) and the
   sizing rule once before that. Colocating the whole primitive makes it one
   thing to move, not four scattered rules to remember. */
.pillar-ico--blue{color:var(--blue-ink)}
.pillar-ico--green{color:var(--green-ink)}
.pillar-ico--red{color:var(--red-text)}
.stat-tile__value{
  position:relative; z-index:1; display:block; font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.05; white-space:nowrap;
}
.stat-tile--blue .stat-tile__value{color:var(--blue-ink)}
.stat-tile--green .stat-tile__value{color:var(--green-ink)}
.stat-tile--red .stat-tile__value{color:var(--red-text)}
/* colored left-bar like the news lead cards (overrides the grey --line from .stat-tile) */
.stat-tile--blue{border-left-color:var(--blue-ink)}
.stat-tile--green{border-left-color:var(--green-ink)}
.stat-tile--red{border-left-color:var(--red-text)}
.stat-tile__label{
  position:relative; z-index:1; display:block; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); margin-top:.5em; max-width:26ch;
}

/* ---------- member wall (ascopa-style full-width logo spread) ---------- */
.section--members{padding-block:var(--space-md) var(--space-2xl)}
.member-wall-head{max-width:640px; margin:0 auto var(--space-xl); text-align:center}
.member-wall-head .eyebrow{justify-content:center}
.member-wall-head h2{margin-bottom:.45em}
.member-wall-head p{color:var(--muted); font-size:1.05rem; margin:0}
.member-wall-rule{
  display:block; width:56px; height:4px; margin:var(--space-md) auto 0; border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--green) 50%,var(--red));
}
.member-wall{
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  column-gap:var(--space-xl); row-gap:var(--space-lg);
}
.member-wall a{
  display:flex; align-items:center; justify-content:center; height:74px;
  opacity:.9; filter:grayscale(0); transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.member-wall a:hover, .member-wall a:focus-visible{opacity:1; transform:translateY(-2px)}
.member-wall img{width:100%; height:100%; object-fit:contain}

/* ---------- logo grid ---------- */
.logo-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.logo-grid .logo-box{
  background:var(--bg); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  padding:var(--space-md); transition:background .15s var(--ease);
}
.logo-grid .logo-box:hover{background:var(--surface)}
.logo-grid .logo-box img{width:100%; height:100%; object-fit:contain}

/* ---------- panel ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:var(--radius-sm); padding:var(--space-md);
}
.panel h3{margin-bottom:.35em}
.panel--accent{border-left-color:var(--green-ink); background:var(--green-tint)}

/* Each Standardy branch carries one brand colour, set by the view and threaded
   through the rule under the heading, the rail's current item, the perex and
   the downloads block. Marek: the standalone pages were "missing a lot of
   basically any colour" — and they were, more than their neighbours, because
   the client's bodies here are numbered paragraphs with no <h2> in them, so
   the coloured heading bars that carry .zad-prose on Respondenti never fire.

   Colour that says WHICH of the four parts you are in, rather than decoration.
   Square and flat, not the rounded .news-head__rule: this client has rejected
   rounded treatments twice. */
.std-branch--blue{--std:var(--blue)}
.std-branch--green{--std:var(--green)}
.std-branch--red{--std:var(--red)}
.std-rule{display:block; width:56px; height:5px; background:var(--std); margin:0 0 var(--space-md)}
.std-branch .zad-rail__parent{color:var(--std)}
.std-branch .zad-rail__link.is-current{color:var(--std); border-left-color:var(--std)}
.std-article .article-perex{
  border-left:3px solid var(--std); padding-left:var(--space-sm); color:var(--ink);
}
.std-article .article-attachments{border-top-color:var(--std)}
.std-article .article-attachments h2{color:var(--std)}
/* The prose accents follow the branch too. Site-wide these are a fixed green
   square and a blue ordered-marker, which is right everywhere else and wrong
   here the moment the page has a colour of its own — a red Kodex page with
   green bullets reads as two unrelated decisions rather than one. */
.std-article .prose ul > li::before{background:var(--std)}
.std-article .prose ol > li::marker{color:var(--std)}

/* The compact wall above the footer: the same logo grid, a plain label instead
   of the homepage's heading block, and less air — it is a footer strip, not a
   section making a case. id="clenove" is deliberately NOT repeated here; the
   homepage's wall owns that anchor and two elements sharing it would break
   every "#clenove" link on the site. */
.section--members-compact{padding-block:var(--space-lg)}
.member-wall-label{
  font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--space-md);
}

/* Soubory ke stažení reuses the .facet component, plus three additions it
   needs and the other finders do not.

   The search box is a facet-shaped box that never collapses: it is a <div>,
   not a <details>, so it has no summary marker and no cursor:pointer — typing
   is the interaction, and hiding a search field behind a disclosure would be
   the one control here that is worse closed than open. It keeps the same
   height and top border as its neighbours so the row still reads as one set.

   .facet__note carries the "standards have no date or agency" caveat inside
   the Období facet it is about, rather than under the whole form where it read
   as a note about the page. */
.facet--search .facet__body{padding-top:0}
.facet__head--static{cursor:default}
.facet__head--static .facet__name{color:var(--muted)}
.facet--search input[type="text"]{
  width:100%; font:inherit; padding:8px 10px;
  border:1px solid var(--line); border-radius:0; background:var(--bg);
}
.facet--search input[type="text"]:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.facet__note{margin:var(--space-2xs) 0 0; font-size:.8rem; line-height:1.4; color:var(--muted)}

/* The newsletter band above the footer, on every page. These four rules were
   inline `style` attributes in home.html while the band lived there and was
   rendered once; as site chrome they would have shipped an inline style on
   every page. The pill on the input is deliberate and stays — it matches the
   pill button beside it and the CZ/EN toggle; the square-corner rule this
   client insisted on twice is about cards and boxes, not controls. */
.nl-band{display:grid; align-items:center; gap:var(--space-lg)}
@media (min-width:900px){.nl-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nl-band__eyebrow{color:var(--green)}  /* on-dark: brand green on the --ink band is 5:1; the text token is 1.9 */
.nl-band__lede{color:#c9d4de}
.nl-band__input{
  flex:1 1 240px; padding:12px 18px; border-radius:999px;
  border:1px solid var(--line); font:inherit;
}

/* Loga ke stažení. One row per logo set: the artwork on the left links to the
   file, the title beside it links to the folder of every variant. */
.logo-downloads{list-style:none; margin:var(--space-lg) 0 0; padding:0; display:grid; gap:var(--space-lg)}
.logo-download{
  display:flex; align-items:center; gap:var(--space-lg); flex-wrap:wrap;
  padding-bottom:var(--space-lg); border-bottom:1px solid var(--line);
}
.logo-download:last-child{border-bottom:0}
.logo-download__art img{max-width:220px; height:auto; display:block}
.logo-download__meta{display:flex; flex-direction:column; gap:2px}
.logo-download__title{font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--blue-ink)}
.logo-download__note{font-size:.9rem; color:var(--muted)}

/* ---------- standardy ---------------------------------------------------
   .standards-shell / .standards-nav are gone: the detail pages now use the
   .zad-detail + .zad-rail component the other three sections share. Their
   min-width:0 note lives on in .zad-rail/.zad-article above, which carries it
   for the same reason — the standards cite ESOMAR by full URL, 110 characters
   with nothing to break on, and a grid item defaults to min-width:auto. */

/* ---------- prohlížeč standardů (the PDFs, turned on the page) ----------
   Colours are sampled from the documents themselves rather than taken from the
   site palette: the point of this block is that a reader recognises it as
   SIMAR's own standard sitting inside the site, not a restyled copy of it. */
.pdfview{
  --pv-blue:#009fe3; --pv-blue-text:#0a6f9c; --pv-green:#94c356; --pv-ground:#eeeeee; --pv-rule:#dcdcdc;
}

/* The row of standards. Horizontal on purpose — vertically it was a list of
   thirteen links using a column of the page and telling the reader nothing;
   across the top it fits on one line and each standard shows its own seal. */
.pdfview__picker{
  /* Wraps rather than scrolls: in the main column (915px) twelve chips need
     about 1300px, and a row you have to drag sideways hides the standards at
     the end of it. Two tidy rows show all twelve at once. */
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:var(--space-2xs); align-items:stretch;
  padding-bottom:var(--space-2xs); margin-bottom:var(--space-sm);
}
.pdfview__chip{
  display:flex; flex-direction:column;
  align-items:center; gap:4px; padding:6px 6px 8px;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  color:var(--muted); text-align:center; line-height:1.25;
  transition:border-color .15s var(--ease), color .15s var(--ease),
             background-color .15s var(--ease);
}
.pdfview__chip:hover, .pdfview__chip:focus-visible{
  border-color:var(--pv-blue); color:var(--ink);
}
.pdfview__chip.is-current{
  border-color:var(--pv-blue); background:#fff; color:var(--ink);
  box-shadow:inset 0 -3px 0 var(--pv-blue);
}
.pdfview__seal{width:34px; height:auto; flex:none}
.pdfview__book{
  width:34px; height:34px; display:grid; place-items:center; color:var(--pv-blue);
}
.pdfview__book svg{width:22px; height:22px}
/* no hyphens: auto-hyphenation broke "Kniha standardů SIMAR" as "Kniha stan-
   dardů", which reads as a typo in a row of otherwise clean labels */
.pdfview__chiplabel{font-size:.7rem; font-weight:600; line-height:1.2; hyphens:none}

/* The page itself. The stage hugs it exactly — no frame, no gutters — and the
   arrows are laid over its edges. They used to sit in grid columns of their own,
   which meant ~56px of grey either side of every page on top of the grey the
   document already has in its own design; the two read as one large empty
   margin. Over the page they cost nothing and stay pinned to its edges at any
   size. */
.pdfview__stage{
  position:relative; width:fit-content; max-width:100%; margin-inline:auto;
  line-height:0;                   /* no descender gap under the image */
}
.pdfview__page{
  /* Capped to the viewport, not to the column: this is a page being turned, so
     the whole of it and both arrows have to be visible at once. Full-width on a
     wide screen made an A4 landscape page 940px tall — taller than the window,
     so every turn started with a scroll back to the top. */
  display:block; margin-inline:auto; border-radius:3px;
  /* height:auto is not optional: the height="2183" attribute is a presentational
     height, so without it max-height below became THE height (558px on a phone)
     while max-width capped the width — a landscape page shown at 380x558,
     squashed. With both axes auto the width/height attributes only feed the
     aspect ratio and the two max-* caps scale it proportionally. */
  width:auto; height:auto; max-width:100%;
  /* Still bounded by the window so a page is readable without scrolling, but
     only just — with the arrows no longer taking columns the page can now use
     the full width of its own column, which is the largest it can usefully be. */
  max-height:clamp(340px, calc(100vh - var(--head-h) - 96px), 1000px);
  background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.12);
}
.pdfview__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--pv-blue);
  box-shadow:0 1px 6px rgba(0,0,0,.22);
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.pdfview__arrow--prev{left:10px}
.pdfview__arrow--next{right:10px}
.pdfview__arrow svg{width:22px; height:22px}
.pdfview__arrow:hover, .pdfview__arrow:focus-visible{background:var(--pv-blue); color:#fff}
.pdfview__bar{line-height:1.4}
/* Keep the arrow's space when it is unavailable, rather than removing it: the
   stage hugs its contents, so collapsing the column slid the whole page
   sideways every time you turned off the first page or onto the last.
   visibility:hidden still takes it out of the accessibility tree. */
.pdfview__arrow[hidden]{visibility:hidden; pointer-events:none}

/* ---------- the standard, full screen -------------------------------------
   Inside the column a slide is capped by the window height, so on a laptop it
   sits around 768px wide in a 915px column with the type too small to read.
   This is where it is READ: the page fills the viewport, the arrows turn it,
   Esc or the backdrop closes it. */
.pdfview__zoom{
  position:absolute; right:10px; bottom:10px; z-index:3;
  display:flex; align-items:center; gap:6px; padding:7px 11px;
  border-radius:999px; background:rgba(255,255,255,.92); color:var(--pv-blue);
  box-shadow:0 1px 6px rgba(0,0,0,.22); font-size:.8rem; font-weight:700;
  line-height:1; cursor:pointer; border:0;
}
.pdfview__zoom svg{width:16px; height:16px}
.pdfview__zoom:hover, .pdfview__zoom:focus-visible{background:var(--pv-blue); color:#fff}

/* The page behind must not scroll under the overlay. */
html.pdfview-lb-open{overflow:hidden}

.pdfview__lb{
  --pv-pad:clamp(8px, 2vw, 28px);
  --pv-bar:44px;                     /* the page counter along the bottom */
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center; padding:var(--pv-pad);
  background:rgba(17,17,17,.92);
}
.pdfview__lbpage{
  display:block; width:auto; height:auto; object-fit:contain;
  /* VIEWPORT UNITS, not percentages. `max-height:100%` inside a grid whose row
     is auto-sized has no definite height to resolve against, so browsers drop
     it — the page rendered 979px tall in an 800px window and ran off the
     bottom. These are definite whatever the container does. */
  max-width:calc(100vw - var(--pv-pad) * 2);
  max-height:calc(100vh - var(--pv-pad) * 2 - var(--pv-bar));
  background:#fff; border-radius:3px; box-shadow:0 6px 30px rgba(0,0,0,.5);
}
.pdfview__lbarrow, .pdfview__lbclose{
  position:absolute; display:grid; place-items:center; cursor:pointer; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--pv-blue);
  box-shadow:0 1px 6px rgba(0,0,0,.3);
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.pdfview__lbarrow{top:50%; transform:translateY(-50%); width:52px; height:52px}
.pdfview__lbarrow svg{width:26px; height:26px}
.pdfview__lbarrow--prev{left:clamp(8px, 2vw, 26px)}
.pdfview__lbarrow--next{right:clamp(8px, 2vw, 26px)}
.pdfview__lbclose{top:clamp(8px, 2vw, 26px); right:clamp(8px, 2vw, 26px); width:44px; height:44px}
.pdfview__lbclose svg{width:22px; height:22px}
.pdfview__lbarrow:hover, .pdfview__lbarrow:focus-visible,
.pdfview__lbclose:hover, .pdfview__lbclose:focus-visible{background:var(--pv-blue); color:#fff}
/* Disabled at the first and last page — kept in place so nothing shifts. */
.pdfview__lbarrow:disabled{opacity:.3; cursor:default; pointer-events:none}
.pdfview__lbbar{
  position:absolute; left:0; right:0; bottom:clamp(6px, 1.6vw, 18px);
  margin:0; display:flex; gap:var(--space-sm); justify-content:center;
  color:#fff; font-size:.85rem; opacity:.85; pointer-events:none;
}
/* The inline bar pushes its counter to the right with margin-left:auto; here
   the two belong together under the middle of the page, so that is undone. */
.pdfview__lbbar .pdfview__count{margin-left:0}
@media (max-width:700px){
  /* No room for arrows beside the page on a phone — swipe-free fallback is the
     bar's page count plus the buttons moved to the bottom corners. */
  .pdfview__lbarrow{top:auto; bottom:12px; transform:none; width:44px; height:44px}
  .pdfview__lbbar{bottom:70px}
}

/* THE SHORT VERSION, above the document, wearing the old site's clothes.

   A tinted blue panel was my second wrong answer here — Marek: "vykašli se
   prosím na ten design s tím modrým pozadím". simar.cz sets a summary with a
   green arrow and the word SHRNUTÍ, the points under it as green ticks and
   blue type, and a hairline to close. No box, no fill: the emphasis comes
   from the marks and the colour, which is why it reads at a glance without
   shouting. Colours go through the -ink pairs, because #368cbf and #7ebc59 as
   TEXT are 3.7:1 and 2.3:1 on white and fail AA. */
.pdfview__summary{
  margin:0 0 var(--space-lg); padding-bottom:var(--space-md);
  border-bottom:1px solid var(--line);
}
.pdfview__summary-label{
  display:flex; align-items:center; gap:.5em; margin:0 0 .55em;
  font-family:var(--font-head); font-weight:700; font-size:1.05rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--green-ink);
}
/* The old site's marker: a flag with a pointed end, not an icon font. */
.pdfview__summary-mark{
  flex:none; width:28px; height:15px; background:var(--green);
  clip-path:polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%);
  border-radius:3px 0 0 3px;
}
.pdfview__summary-body{font-size:1rem; line-height:1.6; color:var(--ink)}
.pdfview__summary-body :is(p,ul,ol){margin:0 0 .5em}
/* Poznámka, že dokument je česky — pod nadpisem Shrnutí, jen na /en/. */
.pdfview__note{margin:-.2em 0 .7em; font-size:.86rem; color:var(--muted); font-style:italic}
.pdfview__summary-body :is(p,ul,ol):last-child{margin-bottom:0}
.pdfview__summary-body ul{list-style:none; padding-left:0}
.pdfview__summary-body li{
  position:relative; padding-left:1.7em; margin:0 0 .3em;
  color:var(--blue-ink); font-weight:600;
}
.pdfview__summary-body li::before{
  content:"✓"; position:absolute; left:.15em; top:0;
  color:var(--green-ink); font-weight:700;
}
.pdfview__summary-body li:last-child{margin-bottom:0}
@media (max-width:700px){
  .pdfview__summary-label{font-size:.95rem}
  .pdfview__summary-body{font-size:.95rem}
}

.pdfview__bar{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2xs) var(--space-md);
  margin:var(--space-2xs) 0 0; font-size:.86rem; color:var(--muted);
}
.pdfview__title{font-weight:600; color:var(--ink)}
.pdfview__count{margin-left:auto; font-variant-numeric:tabular-nums}
.pdfview__bar .pdfview__link + .pdfview__link{margin-left:0}
.pdfview__link{color:var(--pv-blue-text); text-decoration:underline; text-underline-offset:.16em}

@media (max-width:700px){
  /* On a phone there is no width to wrap into — six rows of two would push the
     document off the screen — so the row goes back to scrolling sideways. */
  .pdfview__picker{
    display:flex; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;
  }
  .pdfview__chip{flex:0 0 auto; width:104px}
  .pdfview__seal, .pdfview__book{width:34px; height:auto}
}

/* Blocker 2 defense-in-depth (final-fix-brief.md): the panel's Quill editor
   still can, on some future edit, leave a long run of non-breaking spaces
   in a body (see content/manager/forms.py's _strip_quill_nbsp for the
   primary fix, applied on save). A run of &nbsp; never breaks, so without
   this the run becomes one unbreakable "word" that overflows its container
   on narrow viewports instead of wrapping. */
.prose{overflow-wrap:break-word}
.prose p{margin:0 0 1em}
.prose ul{list-style:disc; padding-left:1.2em; margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose strong{font-weight:700}

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:#c9d4de; padding-block:var(--space-lg)}
/* The newsletter band and the footer are both --ink, so where they meet the
   two paddings read as ONE empty block, not as a boundary — Marek, 2026-10-19:
   "zbytečně velká mezera". Measured on the live homepage at 1500 px: 120 px
   between the band's last line and the association's name. Tightened only for
   that junction, because /newsletter/, /newsletter/dekujeme/ and
   /newsletter/potvrzeni/ switch the band off (block prefooter_newsletter) and
   there the footer's full padding is what separates it from light content. */
.section--band:has(+ .site-foot){padding-bottom:var(--space-md)}
.section--band + .site-foot{padding-top:var(--space-md)}
.site-foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-md); align-items:flex-end}
.site-foot p{margin:0}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--blue-soft)}
.credit{font-size:.8rem; color:#98a4b0}
/* Social profiles in the footer (Kateřina, 2026-09-14). 44px hit area — the
   icon is 20px, the padding carries the rest, so a thumb has a real target
   without the row looking heavy. */
/* The type badge on a hub card sits above the meta row, aligned with the
   title's left edge (Kateřina, 2026-09-14). */
.news-card__type{margin:0 0 var(--space-2xs)}   /* .pill is inline-flex, so this sits on its own line above the meta row */
.social{list-style:none; display:flex; gap:var(--space-2xs); margin:var(--space-2xs) 0 var(--space-xs); padding:0}
.social a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  margin-left:-12px; border-radius:50%; color:#c9d4de; transition:color .15s var(--ease), background .15s var(--ease)}
.social li:first-child a{margin-left:-12px}
.social a:hover, .social a:focus-visible{color:#fff; background:rgba(255,255,255,.1)}
.social svg{width:20px; height:20px; display:block}

/* ---------- responsive ---------- */
/* The section row becomes a scroll strip at 1080px, not at the 900px layout
   breakpoint. Eight Czech labels measure ~965px of content, so between 901px
   and ~1010px they wrapped to a second line and the header jumped 123px ->
   185px. 1080 clears that with margin. English labels are shorter, so this is
   the wide case; if a third language is ever added, re-measure. */
@media (max-width:1080px){
  /* Header loses the wrapped nav row here: measured 124px. */
  :root{--head-h:124px}

  /* WHAT WAS HERE: the eight links as a sideways-scrolling strip with a fade
     at the right edge. On a 390px phone that was 858px of links in a 358px
     window — three sections reachable only by dragging sideways, which nobody
     does. Marek found it on his own phone, 2026-09-18. A disclosure shows all
     eight instead. */
  .menu{display:block; position:relative}
  .menu__toggle{
    display:flex; align-items:center; gap:var(--space-2xs);
    padding:10px 0; cursor:pointer; list-style:none; user-select:none;
    font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--ink);
  }
  .menu__toggle::-webkit-details-marker{display:none}
  .menu[open] .menu__toggle, .menu__toggle:hover{color:var(--blue-ink)}
  /* A box the height of the label with the middle bar painted as a background,
     so the box sets the height rather than the bar. */
  .menu__bars{
    position:relative; display:block; width:1.15rem; height:1.15rem;
    background:linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat;
    transition:background-image .28s ease;
  }
  .menu__bars::before, .menu__bars::after{
    content:""; position:absolute; left:0; width:100%; height:2px; top:calc(50% - 1px);
    background:currentColor;
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .menu__bars::before{transform:translateY(-6px)}
  .menu__bars::after{transform:translateY(6px)}
  /* Open: the bars become a cross, so the control says how to close itself. */
  .menu[open] .menu__bars{background-image:none}
  .menu[open] .menu__bars::before{transform:rotate(45deg)}
  .menu[open] .menu__bars::after{transform:rotate(-45deg)}

  /* An explicit display on the panel overrides the UA rule that hides a closed
     disclosure's children, so say the closed case ourselves. */
  .menu:not([open]) .menu__panel{display:none}
  .menu__panel{
    display:block; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:120;
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
    box-shadow:0 14px 30px rgba(22,32,43,.16); padding:6px;
    animation:menu-open .24s cubic-bezier(.22,.61,.36,1) both; transform-origin:top center;
  }
  @keyframes menu-open{
    from{opacity:0; transform:translateY(-6px) scale(.99)}
    to{opacity:1; transform:none}
  }
  /* One column, the audience groups kept as groups but stacked: the hairline
     that separates them sideways on a wide screen becomes a rule between
     blocks here. */
  .menu__panel .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding-block:0; overflow:visible; mask-image:none; -webkit-mask-image:none;
  }
  .menu__panel .nav__group{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    border-left:0; padding-left:0;
  }
  /* (0,3,0) so it actually beats `.nav__group + .nav__group`, which carries
     the sideways hairline and its 16px indent — same specificity as a plain
     `.menu__panel .nav__group` reset, and it was winning. Measured: groups 2
     to 4 sat 16px in while the first did not. */
  .menu__panel .nav__group + .nav__group{
    border-top:1px solid var(--line); border-left:0; padding-left:0;
  }
  .menu__panel .nav a{
    padding:13px 12px; font-size:1rem; white-space:normal; border-radius:4px;
  }
  .menu__panel .nav a:hover, .menu__panel .nav a:focus-visible,
  .menu__panel .nav a.is-active{background:var(--surface)}
}
@media (prefers-reduced-motion:reduce){
  .menu__panel{animation:none}
  .menu__bars, .menu__bars::before, .menu__bars::after{transition:none}
}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .member-wall{grid-template-columns:repeat(3,1fr); column-gap:var(--space-lg)}
  .vyber__body{grid-template-columns:1fr}
  .news-leads{grid-template-columns:repeat(2,1fr)}
  .wrap--wide{padding-inline:24px}
  .hero-inner{grid-template-columns:1fr; gap:var(--space-md)}
  .hero-wordmark{width:clamp(180px,52vw,320px)}
  .hero-visual{padding:18px 14px 14px 0; margin-top:0; max-width:none}
  .hero-photo-frame{aspect-ratio:4/3}
  .stat{flex:1 1 45%}
  .stats-intro__lede{max-width:none}
  .stats-split{grid-template-columns:1fr; gap:var(--space-lg)}
  .stats-visual{gap:var(--space-md)}
  .stats-photo-frame{aspect-ratio:16/9}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  /* Utility row becomes two deterministic rows here: measured 169px. */
  :root{--head-h:169px}
  .wrap{padding-inline:16px}
  .section{padding-block:var(--space-lg)}
  .grid, .grid--2{grid-template-columns:1fr}
  .news-leads{grid-template-columns:1fr}
  .vyber__head{flex-direction:column; align-items:flex-start; gap:4px}
  .watermark-num{font-size:4rem}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .member-wall{grid-template-columns:repeat(2,1fr); column-gap:var(--space-md); row-gap:var(--space-md)}
  .member-wall a{height:56px}
  .wrap--wide{padding-inline:16px}
  /* Explicit two-row grid instead of letting flex-wrap decide. Wrapping made
     the sticky header's height depend on where the row happened to break —
     measured 115px, 174px and 234px at 600/480/360, i.e. a third of a small
     phone screen, and no single --head-h could be correct for a sub-nav to
     stick below. Brand and language share the top row, search takes the full
     width beneath: two rows, always, at every width in this range. */
  .head-utility{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"brand lang" "search search";
    gap:10px var(--space-sm); align-items:center; padding-block:10px;
  }
  .brand{grid-area:brand; margin-right:0}
  .lang{grid-area:lang; justify-self:end}
  .search-box{grid-area:search; flex:1 1 auto; max-width:none}
  .nav__group{gap:var(--space-sm)}
  .nav__group + .nav__group{padding-left:var(--space-sm)}
  .site-foot .wrap{flex-direction:column; align-items:flex-start}
  .stat{flex:1 1 100%; border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:var(--space-sm)}
  .stat:first-child{border-top:0; padding-top:0}
  .stats-grid{grid-template-columns:1fr}
  .stat-tile{padding:var(--space-sm) var(--space-md)}
}

/* --- hub + article pages -------------------------------------------------
   Deliberately sharp: square corners, thin rules, no soft shadows. The client
   rejected rounded chips and drop-shadows twice as reading "AI-generic"; the
   news card is the reference standard for this site's visual language. */
.news-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .news-grid { grid-template-columns: 1fr 1fr; } }

.breadcrumb { font-size: .875rem; margin-bottom: 1rem; }
.breadcrumb a { color: var(--blue-ink); text-decoration: none; }
/* Only the ">" separators, which are the aria-hidden spans. Was `.breadcrumb
   span`, which also caught .breadcrumb__current and — at 0-1-1 against its
   0-1-0 — painted the current page in --line (#e6ebf0) on white, i.e. very
   nearly invisible. Style by what the element IS, never by a bare tag inside a
   container that also holds components. */
.breadcrumb span[aria-hidden] { color: var(--line); margin: 0 .4rem; }

.article-title { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 .5rem; }
.article-meta { color: var(--muted); font-size: .9375rem; margin-bottom: 1.25rem; }
.article-perex { font-weight: 600; font-size: 1.0625rem; margin: 0 0 1.25rem; }

.article-attachments { margin-top: 2rem; border-top: 2px solid var(--line); padding-top: 1rem; }
.article-attachments h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.article-attachments ul { list-style: none; padding: 0; }
.article-attachments li { border-left: 4px solid var(--blue); padding-left: .75rem; margin-bottom: .5rem; }

/* .filter-bar deliberately has NO padding/background/border/border-radius.
   An earlier rounded/padded/surface-tinted version (with a .chip pill inside)
   lived here — the client rejected that rounded-box treatment twice. It was
   dead CSS by the time this hub was built (no template referenced it) and
   was removed outright rather than left to silently win the cascade against
   this rule. Do not reintroduce a box treatment on this selector. */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filter-bar--topics { margin-bottom: 1.5rem; }
.pill__count { opacity: .6; font-variant-numeric: tabular-nums; margin-left: .25rem; }
.pill--active { background: var(--blue); color: #fff; }
.filter-reset { margin: 0 0 1.5rem; }
.filter-reset a { color: var(--red-text); }

.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center;
              margin-top: 2rem; border-top: 2px solid var(--line); padding-top: 1rem; }
.pagination a { color: var(--blue-ink); text-decoration: none; font-weight: 600; }

/* --- Členové directory + finder -----------------------------------------
   Sharp and line-driven, matching the news cards: square corners, thin rules,
   no drop-shadows. The client rejected rounded/soft treatments twice. */
.agency-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .agency-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .agency-grid { grid-template-columns: 1fr 1fr 1fr; } }

.agency-card { display: flex; flex-direction: column; gap: .75rem;
               border-left: 4px solid var(--blue); padding-left: 1rem; }
/* One fixed box for every logo. Left to themselves these render at their own
   proportions and the member logos span 64px to 361px wide — a 5.6x spread that
   made a tidy grid look accidental. Capping the WIDTH as well as the height
   fits each mark inside the same rectangle, left-aligned so the cards share a
   baseline. */
/* VÝŠKA ŘÁDKU UŽ LOGA NEMĚŘÍ. Měřila je, dokud byla všechna nápisy; čtvercová
   značka v ní vyšla 56x56 vedle nápisů 180x26 až 180x44 a vypadala rozbitě
   (Kateřina, 2026-10-07, o novém logu SC&C). Rozměr každého loga teď počítá
   server na stejnou optickou plochu — Agency.logo_box — a tohle je už jen
   schránka, která je svisle vystředí a drží řádek jednotně vysoký. */
.agency-card__logo { display: flex; align-items: center; min-height: 72px; }
.agency-card__logo img { max-width: 180px; max-height: 80px;
                         object-fit: contain; object-position: left center; }
.agency-card__title { font-family: var(--font-head); font-size: 1.125rem; margin: 0; }
.agency-card__title a { color: var(--ink); text-decoration: none; }
.agency-card__type { color: var(--muted); font-size: .875rem; margin: 0;
                     text-transform: uppercase; letter-spacing: .04em; }
.agency-card__perex { margin: 0; font-size: .9375rem; }

/* Wraps, and the logo is capped against the viewport as well as in pixels.
   A 220px logo beside the name could not fit a 358px phone column, so this page
   — and only this page — scrolled sideways by 27px. Pre-existing; found while
   rebuilding the profile. */
.agency-head { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;
               margin-bottom: 1.5rem; }
/* SVISLÁ LINKA MEZI ZNAČKOU A NÁZVEM. Kateřina za členské agentury,
   2026-10-28: "bylo by možné nějakým způsobem graficky oddělit logo a název
   agentury, aby nebyly zarovnány nastejno (například mezerou či odrážkou)?
   Jedná se například o Confess nebo Norstat."

   Ty dvě jmenuje právem a je to měřitelné: mezera mezi logem a názvem byla
   u všech patnácti stejná (24 px), ale u loga, které je jen nápis, končí
   tahy písmen přesně na hraně obrázku — Norstat i Confess mají logo široké
   celých 220 px (strop `max-width`), takže "norstat" končilo na 594 px a
   "Norstat" začínalo na 618. Dvakrát totéž slovo, stejně tmavé, stejně
   tučné, 24 px od sebe: čte se to jako jeden nápis. U značky se symbolem
   (Ipsos má 84 px) dělá odstup prázdné plátno kolem symbolu, proto tam
   problém nebyl vidět.

   Mezera sama ho tedy nevyřeší spolehlivě — její účinek závisí na tom, jak
   je které logo široké. Linka ano: je stejná u všech patnácti a říká, kde
   končí značka agentury a začíná náš text. Mezera je přesto větší (2rem),
   linka bez vzduchu kolem sebe je jen další svislý tah vedle písmen.

   Padá při zalomení: pod 600 px se logo a název octnou pod sebou a svislá
   linka by visela nad názvem napříč. Tam odděluje samo zalomení.

   Selektor je `__logo + div`, ne `> div`: logo je v šabloně podmíněné
   (`{% if agency.logo_url %}`) a agentura bez něj by jinak dostala svislou
   linku před názvem, která by neoddělovala nic. Dnes má logo všech patnáct,
   takže by si toho nikdo nevšiml — až u té šestnácté. */
.agency-head > div { min-width: 0; }
.agency-head__logo + div { border-left: 2px solid var(--line);
                           padding-left: 2rem; }
@media (max-width: 600px) {
  .agency-head { gap: 1rem; }
  .agency-head__logo + div { border-left: 0; padding-left: 0; }
}
.agency-head__logo { max-height: 88px; max-width: min(220px, 55vw); object-fit: contain; }
.agency-head__type { color: var(--muted); text-transform: uppercase;
                     letter-spacing: .04em; margin: .25rem 0 0; }

.finder { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
          padding: 1.25rem 0; margin-bottom: 2rem; display: grid; gap: 1.25rem;
          grid-template-columns: 1fr; }
@media (min-width: 900px) { .finder { grid-template-columns: repeat(4, 1fr); } }
.finder__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.finder__group legend { font-size: .8125rem; font-weight: 700; text-transform: uppercase;
                        letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; padding: 0; }
.finder__group label { display: block; font-size: .875rem; margin-bottom: .25rem; }
.finder__actions { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; }
.finder__actions button { font: inherit; font-weight: 700; padding: .5rem 1.25rem;
                          background: var(--blue); color: #fff; border: 0; cursor: pointer;
                          -webkit-appearance: none; appearance: none; border-radius: 0; }
.finder__actions a { color: var(--red-text); }

/* Task 3 (plan 8): text/date inputs added to the finder — studies, hub,
   Vzdělávání. Same square-corner language as .search-form's input above
   (no border-radius set here either, matching every other Task-3+ addition
   in this file — the client rejected the rounded-box treatment twice).
   `appearance: none` on the date input strips Safari's default rounded
   spinner chrome without touching layout. */
.finder__group input[type="text"], .finder__group input[type="date"] {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); width: 100%;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.finder__group input[type="text"]:focus-visible,
.finder__group input[type="date"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* --- Standardy library (Task 3) ------------------------------------------
   Sharp and line-driven, matching the news/agency cards: tricolor left-bars,
   square corners, thin rules, no drop-shadows. Deliberately NOT reusing the
   pre-existing .panel/.panel--accent classes above — they carry
   border-radius:var(--radius-sm), exactly the "AI-generic" rounded-box
   treatment the client rejected twice, and would silently reintroduce a
   radius on every element built from them. Every selector below is checked
   to compute a real 0px border-radius (Playwright), not just reviewed as a
   CSS diff — see the .filter-bar comment above for why a diff review isn't
   enough. .btn/.pill/.readmore below ARE reused as-is: they are the site's
   existing, already-shipped affordances (hero CTA, nav toggle, "read more"
   links) rather than a new box shape, and the approved demo used .btn on
   this very page's member/non-member panel. */

.standardy-notice { border-top: 2px solid var(--green); padding-top: 1.25rem; margin: 2rem 0 2.5rem; }
.standardy-notice h2 { margin: 0 0 .25rem; }
.standardy-notice__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 720px) { .standardy-notice__grid { grid-template-columns: 1fr 1fr; } }
.standardy-notice__col { border-left: 4px solid var(--line); padding-left: 1rem; }
.standardy-notice__col--member { border-left-color: var(--green); }
.standardy-notice__col--nonmember { border-left-color: var(--red); }
.standardy-notice__col h3 { font-size: .9375rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5rem; }
.standardy-notice__col p { margin: 0 0 .75rem; }

.standardy-arrow { color: var(--blue-ink); font-size: .6em; }


/* --- Předvolební výzkumy (Task 4) -----------------------------------------
   The pasport checklists and "Související semináře a články" reuse Task 3's
   .standardy-* cards and the existing .news-grid/.news-card exactly as-is —
   see that block's comment above for why .panel/.panel--accent are avoided.
   Only the "Aktuální volební modely" table is a genuinely new shape (nothing
   existing renders member -> what-they-publish -> link rows), so only .vm-*
   below is new. No selector sets border-radius, matching the rest of this
   file's Task-3 additions — verified 0px computed via a real headless
   render (Task-4 report), not just reviewed as a CSS diff. */
.vm-table-wrap { overflow-x: auto; margin: 1.25rem 0 var(--space-lg); }
.vm-table { width: 100%; border-collapse: collapse; }
.vm-table th, .vm-table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.vm-table thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--ink); }
.vm-table__name { font-weight: 700; white-space: nowrap; }
.vm-table__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.vm-table__external { color: var(--blue-ink); }
.vm-table__external:hover, .vm-table__external:focus-visible { text-decoration: underline; }

/* --- Volně prodejné studie / Volná místa (Task 5) -------------------------
   Both listings reuse .news-grid/.news-card/.watermark-num/.readmore/
   .pagination as-is (see section_list.html, the pre-existing generic
   editorial listing) rather than a parallel set of card classes — same
   "shared listing language" the brief asks for. .pill--free/--paid above is
   the only other new visual piece; .catalog-empty below is the one
   genuinely new shape (a plain "there is nothing here" message, not a box)
   for /volna-mista/ when no posting is published. No selector here sets
   border-radius, matching every other Task-3/4/5 addition in this file. */
.catalog-empty { color: var(--muted); font-size: 1.0625rem; border-top: 2px solid var(--line); padding-top: 1.25rem; margin-top: .5rem; }

/* Standard visually-hidden-but-accessible utility — not previously needed on
   this site. Zero visual footprint (no border-radius concern: it renders
   nothing, at 1x1px, clipped). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Site search (Task 2, plan 8) ------------------------------------------
   Header search box (base.html, every page): plain input + button, square
   corners — no selector below sets border-radius, matching every other
   Task-3/4/5 addition in this file (the client rejected the rounded-box
   treatment twice; verified 0px computed via a real headless render, same
   as those). The /hledani/ results page itself (web/search.html) reuses
   .news-grid/.news-card/.watermark-num/.readmore/.pagination as-is — same
   "shared listing language" as section_list.html/catalog_list.html, not a
   parallel card design — so only the form and the empty/meta lines below
   are genuinely new shapes; .search-empty mirrors .catalog-empty's "plain
   message, not a box" for the zero-results state. */
/* Shrinks rather than wraps. A fixed 160px input made the utility row's total
   width cross the container at unpredictable points, so the header silently
   grew a line: measured 126px at 1100px wide but 185px at 901px, and 123px at
   640px but 182px at 641px. A sticky header whose height depends on where the
   text happens to break cannot be offset against reliably (every sticky rail
   offsets against it), so the row is made to shrink instead. */
.search-box { display: flex; gap: 0; flex: 0 1 260px; min-width: 0; }
.search-box input[type="search"] {
  font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-right: 0;
  background: var(--surface); color: var(--ink); width: 100%; min-width: 0;
}
.search-box input[type="search"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.search-box button {
  font: inherit; padding: 8px 14px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer;
}
.search-box button:hover, .search-box button:focus-visible { background: var(--blue); border-color: var(--blue); }

.search-form { display: flex; gap: 0; max-width: 520px; margin: 0 0 var(--space-lg); }
.search-form input[type="search"] {
  font: inherit; font-size: 1.0625rem; padding: 12px 16px; border: 1px solid var(--line);
  border-right: 0; background: var(--surface); color: var(--ink); flex: 1 1 auto; min-width: 0;
}
.search-form input[type="search"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.search-form button {
  font: inherit; font-weight: 700; padding: 12px 22px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer;
}
.search-form button:hover, .search-form button:focus-visible { background: var(--blue); border-color: var(--blue); }

.search-meta { color: var(--muted); margin: 0 0 var(--space-md); }
.search-empty { color: var(--muted); font-size: 1.0625rem; border-top: 2px solid var(--line); padding-top: 1.25rem; margin-top: .5rem; }

/* --- Soubory ke stažení (Task 4, plan 8) -----------------------------------
   A file listing is a table of names, not editorial cards, so /soubory/ does
   NOT reuse .news-grid/.news-card the way the other listings do — a
   watermark number and a "Přečtěte si více" link say nothing about a PDF.
   It reuses .finder (the shared filter form), .search-meta, .catalog-empty
   and .pagination unchanged, and adds one new shape: a rule-separated row.
   No selector below sets border-radius — same as every other Task-2/3/4/5
   addition in this file; verified 0px computed on a real headless render,
   not by reading this comment. */
.file-list { list-style: none; margin: 0 0 var(--space-lg); padding: 0;
             border-top: 2px solid var(--line); }
.file-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
            padding: .875rem 0; border-bottom: 1px solid var(--line); }
.file-row__name { font-weight: 700; flex: 1 1 22rem; min-width: 0;
                  overflow-wrap: anywhere; }
.file-row__ext { font-size: .75rem; font-weight: 700; letter-spacing: .06em;
                 padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); }
/* One colour per format, so the list can be scanned by what a thing IS. The
   set is closed on purpose — 1130 PDFs, 8 DOCX, 1 DOC and nothing else in the
   archive — and anything outside it keeps the neutral outline above rather
   than being given a colour that would mean nothing. */
.file-row__ext--pdf{border-color:var(--red-text); color:var(--red-text)}
.file-row__ext--doc, .file-row__ext--docx{border-color:var(--blue-ink); color:var(--blue-ink)}
.file-row__ext--xls, .file-row__ext--xlsx, .file-row__ext--csv{border-color:var(--green-ink); color:var(--green-ink)}
/* The whole row lifts on hover, not just the link — the file name, the format
   and the page it came from are one target to the eye even though only the
   name is clickable. */
.file-row{transition:background-color .15s var(--ease)}
.file-row:hover{background:var(--surface)}
.file-row__name a, .file-row__name{color:var(--ink)}
.file-row:hover .file-row__name{color:var(--blue-ink)}
.file-row__meta { flex: 1 1 20rem; min-width: 0; display: flex; flex-wrap: wrap;
                  gap: .25rem .75rem; font-size: .875rem; color: var(--muted); }
.file-row__date, .file-row__agency { white-space: nowrap; }
/* Sits INSIDE a .finder__group fieldset (not a direct grid child of .finder),
   so no grid-column here — it simply flows under the date input it warns
   about. */
.finder__note { margin: .5rem 0 0; font-size: .8125rem; color: var(--muted); }

/* --- English content gaps (Task 5, plan 8) ---------------------------------
   Two flat notices, no new box shape: `.en-pending` marks a place where the
   English text does not exist yet (rendered by web/templates/web/_en_pending.html
   and by the "available in Czech only" markers), `.en-note` is the one
   page-level pointer at the full Czech section on an /en/ summary page.
   Both are a left rule plus muted text — the same line-driven vocabulary as
   .search-empty above. No selector here sets border-radius; verified 0px
   computed on a real headless render, not by reading this comment. */
.en-pending { display: block; color: var(--muted); font-size: .9375rem;
              border-left: 3px solid var(--line); padding: .25rem 0 .25rem .75rem;
              margin: 0 0 var(--space-sm); }
.en-note { color: var(--muted); font-size: .9375rem; border-top: 2px solid var(--line);
           padding-top: 1.25rem; margin-top: var(--space-lg); }
/* Global `a` is `color:inherit; text-decoration:none` (line 15), so a link
   inside either notice would be indistinguishable from the muted text around
   it — caught on a real render, not by reading the CSS. */
.en-pending a, .en-note a { color: var(--blue-ink); text-decoration: underline; }

/* ---------- homepage: Aktivity SIMAR / Náš cíl (three pillars) ----------
   Built to have PRESENCE and its own identity. Two things made the first pass
   fade into the page: it sat in .wrap (1240px) directly beneath a .wrap--wide
   (1560px) member wall, so it was visibly the narrower block; and it wore
   .section-head--news, i.e. Aktuality's conic-gradient circle.

   The columns are no longer cards. Every other block on this site is a bordered
   card with a coloured LEFT bar (news leads, stat tiles) — repeating that shape
   is precisely what made this read as more of the same. Here the colour is a
   thick SQUARE rule across the TOP of each column, the box is gone entirely, and
   hairlines run between the columns. Three columns standing under three coloured
   rules is a portico: the structure draws the metaphor, so nothing has to be
   decorated to carry it. Vocabulary is unchanged — thick rules, flat tricolor,
   filled glyphs, square corners, light ground. */
.section--pillars{padding-block:var(--space-2xl)}

.pillars-head{margin-bottom:var(--space-lg)}
.pillars-head h2{margin:0 0 .5em; font-size:clamp(1.9rem,3.4vw,2.9rem)}
/* One square segment per pillar below — the mark says "three", it does not
   merely decorate. Square, unlike .news-head__rule's border-radius:999px. */
.pillars-head__rule{display:flex; gap:5px}
.pillars-head__rule i{display:block; width:30px; height:5px}
.pillars-head__rule i:nth-child(1){background:var(--blue)}
.pillars-head__rule i:nth-child(2){background:var(--green)}
.pillars-head__rule i:nth-child(3){background:var(--red)}

.pillars-lede{
  max-width:70ch; color:var(--muted); font-size:1.1rem;
  margin:0 0 var(--space-xl);
}

/* Rows are declared on the CONTAINER and inherited by each column via subgrid,
   so icon / heading / body line up across all three however the headings wrap.
   A guessed `min-height` on the heading was the first attempt and it broke the
   moment the type got bigger and a heading took a third line. Without subgrid
   support the columns simply fall back to their natural heights — the previous
   behaviour, not a broken one. */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl);
  grid-template-rows:auto auto auto;
}
.pillar{
  background:transparent; border:0; border-radius:0;
  border-top:7px solid var(--line);      /* colour set per modifier below */
  padding:var(--space-md) 0 0;
  display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0;
}
/* Hairlines BETWEEN columns only, and they must not collide with the coloured
   top rule — hence a separate padding-left rather than a shorthand border. */
.pillar + .pillar{border-left:1px solid var(--line); padding-left:var(--space-xl)}

.pillar h3{
  font-family:var(--font-head); font-size:1.3rem; font-weight:800;
  margin:0 0 .45em; color:var(--ink);
}
.pillar p{margin:0; color:var(--muted); font-size:.98rem; line-height:1.65}

/* Declared AFTER .pillar so the colour wins over its border-top shorthand — the
   same source-order trap that once painted the stat tiles' bars grey. */
.pillar--blue{border-top-color:var(--blue-ink)}
.pillar--green{border-top-color:var(--green-ink)}
.pillar--red{border-top-color:var(--red-text)}

@media (max-width:900px){
  .pillars{grid-template-columns:1fr 1fr; gap:var(--space-lg)}
  /* The divider belongs between side-by-side columns; at two-up the third wraps
     onto a new row where a left border would be a stray mark. */
  .pillar + .pillar{padding-left:var(--space-lg)}
  .pillar:nth-child(odd){border-left:0; padding-left:0}
}
@media (max-width:600px){
  .section--pillars{padding-block:var(--space-xl)}
  .pillars{grid-template-columns:1fr; gap:var(--space-lg)}
  .pillar + .pillar{border-left:0; padding-left:0}
  .pillar h3{min-height:0}
}

/* --- Newsletter signup (plan 10, task 3) ---------------------------------
   Three small rules, no new box shape. The form itself reuses .search-form
   (the sitewide input + button pair, already square and already square-
   cornered); nothing here sets border-radius, and nothing here paints a
   panel — same rule every addition since the client rejected the rounded-box
   treatment twice. */

/* The honeypot wrapper (web/forms_newsletter.py explains why the field
   exists). Off-screen rather than display:none or visibility:hidden — both
   of those are exactly what a form-filling bot tests for before deciding to
   skip a field, and the point is that the bot fills it in. Same off-screen
   technique as .sr-only above; it is NOT .sr-only itself because that class
   is for content a screen reader SHOULD read, and this field must be hidden
   from assistive tech too (the input carries tabindex="-1" and its wrapper
   aria-hidden="true"). */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px;
            overflow: hidden; }

/* Form validation messages. A flat red list, no box: the error text is the
   signal, and a tinted panel would be a new shape. */
.form-errors { list-style: none; margin: 0 0 1rem; padding: 0;
               color: var(--red-text); font-weight: 700; }

.form-note { color: var(--muted); font-size: .9375rem; }
.form-note a { color: var(--blue-ink); }

/* Cross-links to a listing that belongs to this section per the brief —
   /volna-mista/ under Děje se v oboru, /volne-prodejne-studie/ under
   Zadavatelé. Both were built and then linked from nowhere. Plain .readmore,
   deliberately: these are navigation, not a call to action, and the site
   already has one arrow-link idiom. */
.hub-related, .section-related{margin:0 0 var(--space-md)}

/* ---------- /o-simar/ ----------------------------------------------------
   Three columns on a wide screen: rails either side of a deliberately slim
   main column. A single centred column left most of a desktop empty.

   The middle column is narrow ON PURPOSE. It sets the prose measure AND it is
   what sizes the photograph — the picture was overpowering the text beneath
   it, and constraining the column fixes both at once. */
/* .osimar-statement__title and .osimar-rule are gone: the client's statement
   is now a lede under the standard section heading, styled by .article-perex
   like every other section index, and the heading brings .news-head__rule with
   it. The old tricolor bars were square because "this client has rejected
   rounded treatments twice" — worth remembering if the pill rule is ever
   questioned, but it is the site-wide one now and consistency is the point. */
.osimar-statement__lede{
  font-size:1.1rem; color:var(--muted); margin:0 0 var(--space-md);
}

.osimar-layout{padding-block:var(--space-lg) var(--space-xl)}
/* Content, then the rail. Source order IS visual order now, so nothing here
   re-orders anything — the three-column version had to, because the rail it
   put first in the grid came second in the markup.

   Same shape and same 320px rail as .vm-layout on /verejne-mineni/, which is
   the point: this page was built first and had its own proportions
   (0.7 / 1.85 / 0.85), and matching the section the rest of the site settled
   on is exactly what Marek asked for. */
.osimar-cols{display:grid; gap:var(--space-lg)}
/* Míra čtení pro tenhle sloupec. Je to zároveň šířka jeho grid stopy — viz
   komentář u `grid-template-columns` níž, kde je i historie toho, proč zbylé
   místo nedostává ani jeden ze sloupců.

   860px is NOT carried over from .zad-article as a known-good measure — it
   measures 78ch there and 95ch here, because this page's prose sits at 16px
   rather than that column's larger face. Same trap as the `ch` note above, one
   level up: a pixel value is only a measure for the font it was measured
   against. 860 is kept because it is a real improvement on the 113ch the full
   column gave, not because it is the right number twice.

   Outside the media query on purpose: below 1100px the rail stacks under the
   content and the column goes full width, which is where the longest lines
   actually were. A max-width does nothing on a phone and everything at tablet. */
.osimar-cols{--measure:860px}
.osimar-main > *{max-width:var(--measure)}
@media (min-width:1100px){
  .osimar-cols{
    /* LIŠTA NAVAZUJE NA TEXT, ZBYTEK LEŽÍ VPRAVO. Marek, 2026-10-28: "na
       strance o SIMar bych soupnul to prave menu doleva, at navazuje na ten
       text."

       Zbylé místo nedostává ani jeden ze sloupců — to byla ta chyba, kterou
       tahle sekce prošla v obou krajnostech: dal-li se obsahu, vznikla mezi
       textem a lištou díra ("the huge empty gap between the content and the
       navbar"); dal-li se liště, vypadala roztaženě. `justify-content:start`
       nedá zbytek nikomu: text drží svou míru, lišta svých 320 px, mezi nimi
       je jenom `gap` a zbytek zůstane za lištou.

       ČÍM SE TO PLATÍ, ZMĚŘENO: na ostatních stránkách s lištou
       (/verejne-mineni/, /standardy/, /deje-se-v-oboru/) lišta při 1920 px
       končí na 1700 px, tedy u pravé hrany rámu, protože tam zbytek dostává
       OBSAH — jejich sloupec má 1096 px. Tady ho mít nemůže: míra čtení je
       860 px, širší sloupec je ta 113ch řádka, kvůli které se sem míra psala.
       Lišta tedy končí na 1464 a s lištami zbylých stránek nelícuje. Levé
       hrany nadpisů, na kterých stála celá úprava z 10-28, se tím nemění —
       text začíná pořád na 220 px jako na zbylých sedmi stránkách.

       Při 1920 px: rám 1560 vnitřních, text 860, mezera 64, lišta 320,
       za lištou 276. Pod 1360 se text začne zužovat, protože stopa je
       minmax(0,860). */
    grid-template-columns:minmax(0,var(--measure)) 320px;
    justify-content:start;
    gap:var(--space-xl); align-items:start;
  }
  /* The rail tracks the page rather than running away from a long article. */
  .osimar-rail{position:sticky; top:calc(var(--head-h) + var(--space-md))}
}

/* --- middle --- */
.osimar-figure{margin:0 0 var(--space-md)}
/* height:auto, never object-fit:cover — the whole frame is shown at its own
   3:2 ratio. Cropping a room shot to a letterbox removes the thing that makes
   it worth using: how full the room is. */
.osimar-figure img{width:100%; height:auto; display:block}
.osimar-figure figcaption{
  display:flex; justify-content:space-between; gap:var(--space-sm); flex-wrap:wrap;
  padding-top:var(--space-2xs); font-size:.82rem; color:var(--muted);
}
.osimar-figure__credit{color:var(--muted)}
/* Text sized UP against the photograph, not just the photograph sized down —
   the imbalance was both. */
.osimar-prose{font-size:1.06rem; line-height:1.68}
.osimar-prose p{margin:0 0 1.1em}
.osimar-prose p:last-child{margin-bottom:0}

.osimar-goals{margin:var(--space-lg) 0; padding:var(--space-md) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.osimar-goals h2{margin:0 0 var(--space-sm); font-size:1.5rem}
.osimar-goal-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-sm)}
.osimar-goal{
  border-left:4px solid var(--line); padding-left:var(--space-sm);
  font-family:var(--font-head); font-weight:600; font-size:1.02rem; line-height:1.35;
}
.osimar-goal--blue{border-left-color:var(--blue-ink)}
.osimar-goal--green{border-left-color:var(--green-ink)}
.osimar-goal--red{border-left-color:var(--red-text)}

/* --- rails --- */
/* No .section-head__icon: the tricolor circle is a homepage section marker and
   reads as decoration on a sidebar heading. A hairline does the job. */
.osimar-rail__title{
  font-size:1.12rem; margin:0 0 var(--space-sm); padding-bottom:var(--space-2xs);
  border-bottom:2px solid var(--ink);
}
.osimar-links{list-style:none; margin:0 0 var(--space-lg); padding:0}
.osimar-links li{border-bottom:1px solid var(--line)}
.osimar-links a{
  display:block; padding:9px 0; font-family:var(--font-head); font-weight:600;
  font-size:.95rem; line-height:1.3;
}
.osimar-links a:hover, .osimar-links a:focus-visible{color:var(--blue-ink)}
/* The page you are on. Marked with weight and a bar, not colour alone —
   colour by itself is not an accessible way to say "you are here", and
   aria-current in the markup carries the same fact non-visually. */
.osimar-links li.is-current{
  border-left:3px solid var(--blue); margin-left:calc(-1 * var(--space-2xs));
  padding-left:var(--space-2xs); background:var(--surface);
}
.osimar-links li.is-current a{color:var(--blue-ink); font-weight:800}
.osimar-links__empty{padding:9px 0; color:var(--muted); font-size:.92rem}

.osimar-facts{margin:0 0 var(--space-sm)}
.osimar-fact{
  border-left:4px solid var(--line);
  padding:var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
  margin-bottom:var(--space-sm);
}
.osimar-fact dt{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.osimar-fact dd{margin:2px 0 0; font-family:var(--font-head); font-weight:800; font-size:1.35rem; line-height:1.1}
.osimar-fact--blue{border-left-color:var(--blue-ink)} .osimar-fact--blue dd{color:var(--blue-ink)}
.osimar-fact--green{border-left-color:var(--green-ink)} .osimar-fact--green dd{color:var(--green-ink)}
.osimar-fact--red{border-left-color:var(--red-text)} .osimar-fact--red dd{color:var(--red-text)}
.osimar-facts__note{font-size:.85rem; color:var(--muted); margin:0}


/* ---------- links inside migrated article bodies -------------------------
   The global reset is `a{color:inherit; text-decoration:none}`, which is right
   for cards and nav (the whole card is the target) and WRONG for prose: a link
   inside a paragraph was rendering as plain black text, indistinguishable from
   the sentence around it. Every link in all 1,837 migrated bodies was invisible.

   Underline rather than colour alone — colour is not on its own an accessible
   way to mark a link, and these paragraphs carry no other cue. Offset so Czech
   diacritics are not struck through by the rule. */
.prose a,
.osimar-prose a,
.article-perex a,
.article-attachments a{
  color:var(--blue-ink);
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:1px;
}
.prose a:hover, .prose a:focus-visible,
.osimar-prose a:hover, .osimar-prose a:focus-visible,
.article-perex a:hover, .article-perex a:focus-visible,
.article-attachments a:hover, .article-attachments a:focus-visible{
  color:var(--ink);
  text-decoration-thickness:2px;
}
/* A link that opens a file rather than a page should say so before the click. */
.prose a[href$=".pdf"]::after,
.article-attachments a[href$=".pdf"]::after{
  content:" (PDF)"; font-size:.82em; color:var(--muted); text-decoration:none;
}

/* ---------- předsednictvo (o-simar/organizacni-struktura) ---------------- */
.people{list-style:none; margin:var(--space-md) 0 var(--space-lg); padding:0;
        display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md)}
.person{border-top:4px solid var(--line); padding-top:var(--space-sm)}
.person--blue{border-top-color:var(--blue-ink)}
.person--green{border-top-color:var(--green-ink)}
.person--red{border-top-color:var(--red-text)}
/* Square, flat, no border-radius — this client rejected rounded twice, and a
   circular avatar would crop the shoulders the build-time crop kept. */
.person__photo{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
               display:block; margin-bottom:var(--space-2xs); border-radius:0}
.person__role{display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
              text-transform:uppercase; color:var(--muted)}
.person__name{display:block; font-family:var(--font-head); font-weight:800;
              font-size:1.08rem; line-height:1.25; margin-top:2px}
@media (max-width:600px){
  .people{grid-template-columns:1fr 1fr; gap:var(--space-sm)}
}

/* ---------- life in the migrated prose -----------------------------------
   Marek: "most of ours just look like pure html" — the legacy pages carried
   colour and ours rendered as unstyled markup. These rules dress what the
   ARCHIVE actually contains (h2/h3, ul, ol, blockquote, hr, table, figure),
   using the same tricolor + thin-rule language as the rest of the site rather
   than inventing a second one. Nothing here changes a single word of content. */
.prose > h2, .osimar-prose > h2{
  font-size:1.42rem; margin:1.6em 0 .5em; padding-left:var(--space-sm);
  border-left:4px solid var(--blue);
}
.prose > h3, .osimar-prose > h3{
  font-size:1.12rem; margin:1.4em 0 .4em; padding-left:var(--space-sm);
  border-left:3px solid var(--green);
}
/* The fourth level is a GROUP LABEL over a list, not a smaller heading.

   It was .8rem in --muted, which made it the smallest and faintest thing in its
   own section: on Řízení výzkumného projektu it sits above questions whose bold
   sub-labels are a full 1rem in --ink, so the label read as a caption under the
   thing it introduces. Kateřina, 2026-09-30: "chtěla jsem je trochu zvětšit,
   aby byly větší než nadpisy pod nimi". Uppercase at 1.02rem with the letter
   spacing kept is unmistakably larger than 1rem sentence case while staying
   clearly below h3 — and the red rule completes the h2-blue / h3-green family
   instead of inventing a fourth signal. (The rule had two font-size
   declarations, .8rem winning over 1rem; there is one now.) */
.prose > h4{
  margin:1.8em 0 .5em; padding-left:var(--space-sm);
  border-left:2px solid var(--red);
  font-family:var(--font-head); font-size:1.02rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
}
/* Markers in brand colour, and the text kept off the bullet. */
.prose ul, .osimar-prose ul{list-style:none; padding-left:0; margin:0 0 1.1em}
.prose ul > li, .osimar-prose ul > li{position:relative; padding-left:1.35em; margin-bottom:.42em}
.prose ul > li::before, .osimar-prose ul > li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--green);
}
/* A sub-list indents under the item it belongs to and takes a smaller marker
   in the second brand colour, so a label and the questions beneath it stop
   looking like the same kind of line. Kateřina, 2026-09-23, on the question
   menu in Řízení výzkumného projektu — see fix_question_menu.py, which is what
   puts the nesting into the 2016 body these rules then render. */
.prose li > ul, .osimar-prose li > ul{margin:.5em 0 .1em; padding-left:1.3em}
.prose li > ul > li::before, .osimar-prose li > ul > li::before{
  width:6px; height:6px; top:.66em; background:var(--blue);
}
.prose ol, .osimar-prose ol{padding-left:1.4em; margin:0 0 1.1em}
.prose ol > li, .osimar-prose ol > li{margin-bottom:.42em}
.prose ol > li::marker{color:var(--blue-ink); font-family:var(--font-head); font-weight:800}
.prose blockquote{
  margin:1.4em 0; padding:var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  border-left:4px solid var(--red); color:var(--ink); font-size:1.06rem;
}
.prose blockquote p:last-child{margin-bottom:0}
/* TEXT V RÁMEČKU — tlačítko v editoru, které si Kateřina vyžádala 2026-10-28
   ("něco jako zde: … dole rámeček se stanoviskem", mediaguru.cz).

   TVAR JE PŘEVZATÝ Z `.panel` O PÁR SET ŘÁDKŮ VÝŠ: orámování dokola, modrá
   levá hrana, `--radius-sm`, odsazení `--space-md`. Druhý vzhled pro totéž by
   byl jen další věc, kterou je potřeba držet v souladu. První verze měla jen
   plochu a pruh vlevo a Marek k tomu nad předlohou napsal: "Tady to pusobi
   opravdu jako takovy odsazeny ramecek. u nas jsme ten text jen dali na modre
   pozadi."
   PLOCHU `.panel` ale rámeček NEMÁ — Marek, 2026-10-28: "Zkusme dat pryc ten
   modry podklad." Drží ho tedy samo orámování, stejně jako v předloze.
   (Zaoblení si klient odmítl u LINEK a pruhů, ne u karet — `.panel` i karty
   novinek zaoblené jsou.)

   NEUKLÁDÁ SE ŽÁDNÝ OBAL. Značku nese každý řádek uvnitř jako třídu navíc ke
   svému typu, aby uvnitř fungoval nadpis, seznam i obrázek — Marek: "Meli by
   do nej jit vkladat normalne vsechny ostatni elementy, co jdou jinde, jen je
   okolo toho ramecek." Rámeček se proto skládá ze SOUSEDÍCÍCH řádků: svislé
   hrany nese každý z nich, vodorovné a zaoblení jen první a poslední v řadě.
   Bez toho by se mezi odstavci kreslily linky napříč.

   Svislý rytmus uvnitř dělá ODSAZENÍ, ne okraje: okraj mezi dvěma řádky by
   plochu přerušil a rámeček by se rozpadl na proužky. */
.prose .mm-callout-box,
.osimar-prose .mm-callout-box{
  border-left:3px solid var(--blue); border-right:1px solid var(--line);
  padding:.45em var(--space-md);
  margin:0;
}
.prose h2.mm-callout-box, .prose h3.mm-callout-box, .prose h4.mm-callout-box,
.osimar-prose h2.mm-callout-box, .osimar-prose h3.mm-callout-box,
.osimar-prose h4.mm-callout-box{padding-top:1em}

/* Položka seznamu si nechává SVOJE odsazení — `.prose ul > li` má
   `padding-left:1.35em` a odrážka je `::before` na `left:0`. Vynulovat ho by
   znamenalo, že čtverec leze do písmen; stalo se to a bylo to vidět až na
   vykresleném snímku. Odebírá se jen plocha a hrany, které kreslí obal. */
.prose li.mm-callout-box,
.osimar-prose li.mm-callout-box{background:none; border:0; padding-right:0}

/* První a poslední v řadě. Řada není jeden prvek, takže jí nejde dát odsazení
   ani zaoblení jako celku. V uloženém HTML nese značku i obal seznamu (mm-cms
   richtext.js, restoreCalloutMarks), takže si tu vystačíme s plochým
   `.mm-callout-box` a nemusíme do `:has()` zanořovat další — to je neplatné
   a prohlížeč takové pravidlo zahodí. Stalo se: spodní hrana se nevykreslila. */
.prose > .mm-callout-box:first-child,
.prose > :not(.mm-callout-box) + .mm-callout-box,
.osimar-prose > .mm-callout-box:first-child,
.osimar-prose > :not(.mm-callout-box) + .mm-callout-box{
  border-top:1px solid var(--line);
  border-top-left-radius:var(--radius-sm); border-top-right-radius:var(--radius-sm);
  padding-top:var(--space-md); margin-top:1.8em;
}
.prose > .mm-callout-box:last-child,
.prose > .mm-callout-box:has(+ :not(.mm-callout-box)),
.osimar-prose > .mm-callout-box:last-child,
.osimar-prose > .mm-callout-box:has(+ :not(.mm-callout-box)){
  border-bottom:1px solid var(--line);
  border-bottom-left-radius:var(--radius-sm);
  border-bottom-right-radius:var(--radius-sm);
  padding-bottom:var(--space-md); margin-bottom:1.8em;
}
/* A rule in the source becomes the site's tricolor divider rather than a
   default 1px inset groove. */
.prose hr{
  border:0; height:5px; margin:1.8em 0;
  background:linear-gradient(to right,var(--blue) 0 34px,var(--green) 34px 73px,var(--red) 73px 112px,var(--line) 112px 100%);
}
.prose table{border-collapse:collapse; width:100%; margin:1.4em 0; font-size:.92rem}
.prose thead th{background:var(--surface); text-align:left; font-family:var(--font-head)}
.prose th, .prose td{border:1px solid var(--line); padding:7px 10px; vertical-align:top}
.prose img{margin:1.2em 0}
.prose figure{margin:1.4em 0}
.prose figcaption{font-size:.84rem; color:var(--muted); padding-top:var(--space-3xs)}
/* Tables and wide media must scroll inside the column, never widen the page. */
.prose{overflow-wrap:break-word}
.prose table{display:block; overflow-x:auto}

/* The section's own front page, sitting above its children in the rail. */
.osimar-links__parent{border-bottom:2px solid var(--ink)}
.osimar-links__parent a{font-weight:800}
.breadcrumb__current{color:var(--muted)}   /* the page you are on */

/* Their partner logos (ESOMAR, HK ČR) sit beside the paragraph they belong to,
   as they do on simar.cz. Fixed column so both align regardless of the very
   different source proportions (372x123 vs 591x593). */
.osimar-partner{display:grid; grid-template-columns:150px 1fr; gap:var(--space-md);
                align-items:start; margin:var(--space-md) 0}
.osimar-partner img{width:100%; height:auto; object-fit:contain}
@media (max-width:600px){
  .osimar-partner{grid-template-columns:110px 1fr; gap:var(--space-sm)}
}

/* ---------- reading copy in the client's serif -----------------------------
   Applied ONLY to long-form prose: article bodies, ledes and perexes. Nav,
   cards, rails, buttons, tables of links and every UI label stay in Rubik,
   which is what simar.cz does — their paragraphs compute to Libre Baskerville
   16px/26px while their nav and headings are Rubik.

   Libre Baskerville runs large for its point size (tall x-height), so 16px here
   sits optically alongside Rubik at the same value rather than shouting. */
.prose,
.osimar-prose,
.article-perex,
.osimar-statement__lede,
.pillars-lede{
  font-family:var(--font-read);
  font-size:1rem;
  line-height:1.65;
}
.prose em, .osimar-prose em{font-style:italic}
.prose strong, .osimar-prose strong{font-weight:700}

/* A section's own introduction, above its list of pages. */
.section-lede{font-family:var(--font-read); font-size:1.08rem; color:var(--muted); max-width:70ch; margin:0 0 var(--space-sm)}
.section-intro{max-width:74ch; margin-bottom:var(--space-lg)}

/* ---------- section intro: presentation of the client's own markup ---------
   The copy lives in Section.body and is theirs. These rules only style what is
   already there — no words, links or order are changed by them.

   Goals list: normalise_pseudo_lists turns their <br>-and-hyphen paragraph into
   <h2> + <ol>, so the tricolor bars can be applied per item instead of the list
   reading as one grey blob. */
.osimar-prose > h2{
  font-family:var(--font-body); font-size:1.5rem; margin:1.6em 0 .6em;
  padding-left:0; border-left:0;
}
.osimar-prose > ol{list-style:none; margin:0 0 1.4em; padding:0; display:grid; gap:var(--space-sm)}
.osimar-prose > ol > li{
  border-left:4px solid var(--line); padding-left:var(--space-sm);
  font-family:var(--font-body); font-weight:500; font-size:1.02rem; line-height:1.35;
}
.osimar-prose > ol > li:nth-child(3n+1){border-left-color:var(--blue-ink)}
.osimar-prose > ol > li:nth-child(3n+2){border-left-color:var(--green-ink)}
.osimar-prose > ol > li:nth-child(3n+3){border-left-color:var(--red-text)}

/* Partner logos float left so their text sits beside them, which restores the
   client's OWN layout — their markup carried style="float:left" and the
   sanitiser strips inline styles — and is the arrangement Marek approved.

   CO FLOATUJE JE RÁMEČEK PEVNÉ ŠÍŘKY, NE OBRÁZEK. Dokud floatoval obrázek,
   rozhodovaly o sazbě PIXELY nahraného souboru, a tak stačilo v editoru
   vyměnit logo a stránka se rozsypala — Kateřina, 2026-10-19: "vyměnila jsem
   logo Esomaru za nové a nějak se mi ta loga a text rozhodily". Změřeno na
   živém webu: nové logo ESOMAR (572×313) se kreslilo 180×98 a jeho float
   sahal po y=981; logo Hospodářské komory mělo začít na y=980, tedy o pixel
   dřív, než float skončil — pod něj se tím pádem nevešlo a odskočilo VEDLE
   něj, na x=358 místo do levého okraje na x=154. Staré logo bylo nižší, float
   končil dřív a totéž uspořádání vycházelo. Na výšce souboru tedy záviselo,
   jestli druhé logo stojí v levém okraji, nebo uprostřed textu.

   `clear:left` tuhle závislost ruší: každá figura začíná pod předchozím
   floatem, ať je jakkoli vysoký. Pevná `width` zase srovná levý okraj textu,
   který se jinak lišil podle šířky loga (180 px u ESOMAR, 120 u komory).
   Obrázek se dovnitř jen vejde — `max-width`/`max-height` ho zmenší, nikdy
   nezvětší, a `width:auto` přebije atributy width/height v HTML, takže
   stejně vypadá logo nahrané přes knihovnu i logo zděděné z migrace. */
.osimar-prose figure{
  float:left; clear:left; width:160px; margin:.3em var(--space-md) var(--space-sm) 0;
}
/* Blok, ne flex: odkaz kolem loga komory je `a > img`, a jako blok dědí
   šířku figury, takže `max-width:100%` na obrázku měří proti 160 px figury
   a ne proti vlastní velikosti souboru. */
.osimar-prose figure a{display:block}
.osimar-prose figure img{
  float:none; margin:0; display:block;
  width:auto; height:auto; max-width:100%; max-height:96px;
}
/* Obrázek, který z nějakého důvodu není ve figuře (sanitizer i knihovna
   obrázků dnes balí všechno do <figure>, ale tohle je text od klienta).
   Stejné chování, jen bez rámečku. */
.osimar-prose > p > img{float:left; clear:left; margin:.3em var(--space-md) var(--space-sm) 0;
  max-width:160px; max-height:96px; width:auto; height:auto}
/* NOTE: do NOT give these paragraphs overflow:hidden to tidy the wrap. It makes
   each one a block formatting context, which CLEARS the float instead of
   wrapping beside it — tried, and it pushed the ESOMAR text below its logo
   rather than beside it. The last line slipping under a short float is correct
   float behaviour and is what the client's own page does. */
.osimar-prose::after{content:""; display:block; clear:both}
@media (max-width:600px){
  /* Too narrow to wrap text beside a logo — stack instead. */
  .osimar-prose figure,
  .osimar-prose > p > img{float:none; width:auto; margin:var(--space-sm) 0}
}


/* ---------- Standardy: the library, opening in place -----------------------
   One column, not a card grid. The four branches hold 1, 2, 13 and 12 children,
   so a grid stretched the short cards to match the tall ones and left large
   voids down the page — the branches are different lengths because they are
   different things, and a full-width stack lets each be its own length. */
.standardy-branches{display:grid; gap:var(--space-xl); margin-top:var(--space-lg)}
.standardy-branch{border-top:4px solid var(--line); padding-top:var(--space-sm)}
.standardy-branch--blue{border-top-color:var(--blue-ink)}
.standardy-branch--green{border-top-color:var(--green-ink)}
.standardy-branch--red{border-top-color:var(--red-text)}
.standardy-branch__title{font-size:1.5rem; margin:0 0 var(--space-2xs)}
.standardy-branch__perex{color:var(--muted); margin:0 0 var(--space-sm); max-width:70ch}
.standardy-branch__body{max-width:74ch}

.standardy-list{display:grid; gap:0}
.std{border-bottom:1px solid var(--line)}
.std__head{
  display:flex; align-items:center; gap:var(--space-sm); cursor:pointer;
  padding:12px 0; list-style:none; font-family:var(--font-body); font-weight:600;
}
/* The default disclosure marker differs per browser and sits badly against a
   flex row; replaced with our own so it matches the site's ▸ language. */
.std__head::-webkit-details-marker{display:none}
.std__head::marker{content:""}
.std__title{flex:1; min-width:0}
.std__hint{
  flex:0 0 auto; width:0; height:0; border-style:solid;
  border-width:5px 0 5px 7px; border-color:transparent transparent transparent var(--muted);
  transition:transform .15s var(--ease);
}
.std[open] > .std__head .std__hint{transform:rotate(90deg)}
.std__head:hover .std__title, .std__head:focus-visible .std__title{color:var(--blue-ink)}
.std[open] > .std__head{color:var(--ink)}
.std[open] > .std__head .std__title{font-weight:700}
/* No reading measure here. A 74ch cap left ~175px of empty column beside every
   open panel, which read as the text being cut off rather than as a margin —
   Marek: "make sure the text spreads across the full width of the column". */
.std__body{padding:0 0 var(--space-md)}
.std__body .prose{margin-bottom:var(--space-sm)}
/* Several bodies open with an empty heading or paragraph the old editor left
   behind; collapsing them stops a panel opening onto blank space. */
.std__body .prose > h3:empty,
.std__body .prose > p:empty{display:none}
@media (prefers-reduced-motion:reduce){.std__hint{transition:none}}

/* ---------- Standardy: lead row + two columns ---------------------------- */
.standardy-hero{padding-block:var(--space-lg) var(--space-md)}
/* Headline + quote on the left, banner on the right spanning the height of
   both. align-items:stretch is what makes the banner span rather than sit on
   one line of the copy. */
.standardy-lead{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
                gap:var(--space-xl); align-items:stretch}
.standardy-lead__copy{display:flex; flex-direction:column; justify-content:center}
.standardy-lead__copy .section-head{margin-bottom:var(--space-md)}
/* contain, never cover — the banner is text and cropping would cut the words.
   Right-aligned so it reads as anchored to the edge rather than adrift. */
.standardy-lead__banner{
  width:100%; height:100%; min-height:0; object-fit:contain; object-position:center;
  display:block; align-self:stretch;
  /* The height of the quote beside it — Marek, 2026-09-10, second pass, after
     the contents list moved out of that column and below the grid. The
     artwork is 2.83:1 and the column is squarer, so `contain` leaves a little
     ground above and below; painting it in the banner's OWN background
     (#e8e8e8, sampled from its corners) reads as one panel, and `cover` would
     cut the words off. */
  background:#e8e8e8;
}
/* RÁM JE MŘÍŽKOVÁ POLOŽKA, NE OBRÁZEK. Vedle citátu se roztáhne na jeho
   výšku a obrázek v něm leží mimo tok, takže to, co klient nahraje, nemůže
   o výšce tohohle bloku rozhodovat. Změřeno 2026-10-30 při 1440 px, než to
   tak bylo: fotka 600×900 natáhla řádek na 971 px a odtáhla s sebou sloupec
   s citátem, fotka 2000×500 ho zmáčkla na 262. Táž nemoc jako v hero na
   /respondenti/, jen jinak projevená — tam strop podle pixelů našeho
   souboru, tady výška podle pixelů klientova.

   Jen od 1000 px, kde jsou dva sloupce. Pod tím leží banner pod textem jako
   běžný obrázek a absolutní pozice by mu sebrala výšku úplně. */
.standardy-lead__frame{min-width:0}
@media (min-width:1000px){
  .standardy-lead__frame{position:relative}
  .standardy-lead__banner{position:absolute; inset:0}
}
/* Klientova fotka se naopak oříznout SMÍ a podmalbu nepotřebuje: šedý lem
   kolem fotky čte jako vada, zatímco u plakátu je to plocha, na které
   stojí. Rozlišuje `data-mmadm-replaced` od mm_cms — viz tatáž dvojice
   pravidel u `.resp-hero__art`. */
.standardy-lead__banner[data-mmadm-replaced]{object-fit:cover; background:none}
/* No left bar or indent here: Marek wants the quote's text on the SAME left
   edge as the "Standardy" headline, and a border plus padding would push it in
   by its own width. The red bar earned its keep when the quote stood alone;
   beside a headline it only breaks the alignment. */
/* The contents list, full width under the two columns. Three entries as
   three columns on a wide screen, one under another on a phone. */
.standardy-toc{margin-top:var(--space-lg)}
.standardy-toc h2{margin:0 0 var(--space-xs); font-size:1.15rem; font-weight:700}
.standardy-toc__items{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-xs) var(--space-lg)}
.standardy-toc__items p{margin:0}
.standardy-lead__quote blockquote{
  margin:0; padding:0; border:0;
  font-size:1.04rem; line-height:1.6;
}
.standardy-lead__quote blockquote p{margin:0 0 .7em}
.standardy-lead__quote blockquote p:last-child{margin-bottom:0}
.standardy-lead__quote p:not(blockquote p){margin:.7em 0 0; color:var(--muted); font-size:.92rem}
/* The quote is a single textarea slot now, not a Quill body, so its two
   paragraphs are one blank line in the field rather than two <p><em>. pre-line
   renders that break with no markup for the client to get wrong, and the
   italics move here from the <em> that used to carry them. */
.standardy-lead__cite{font-style:italic; white-space:pre-line; margin:0 0 .7em}

.standardy-body{padding-block:0 var(--space-xl)}
.standardy-cols{display:grid; gap:var(--space-xl)}
/* The inspection reports as a rail box. Same shape as the Certifikace box above
   them, with the year panels kept as panels — the titles are short enough to
   sit in a narrow column, and the bodies are a line or two each. */
.standardy-checks{border-top:3px solid var(--blue); padding-top:var(--space-sm)}
.standardy-checks > h2{margin:var(--space-3xs) 0 var(--space-2xs); font-size:1.05rem}
.standardy-checks > p{margin:0 0 var(--space-2xs); font-size:.9rem; color:var(--muted)}
.standardy-list--rail .std__head{padding-block:8px}
.standardy-list--rail .std__title{font-size:.9rem}
/* A child that is a whole page renders as a link row in the same shape as the
   report accordions around it (see standardy_overview.html). */
.std--link{display:flex; align-items:center; gap:var(--space-xs); padding-block:8px;
  color:inherit; text-decoration:none; font-weight:600}
.std--link:hover .std__title, .std--link:focus-visible .std__title{color:var(--blue-ink)}
.std__hint--go{border-color:transparent transparent transparent var(--blue)}
/* A grid item will not shrink below its widest content, so the scrolling chip
   row (twelve chips, ~1300px) stretched this column and put a metre of
   horizontal scroll on the whole page. Same trap as .zad-rail/.zad-article. */
.standardy-main, .standardy-aside{min-width:0}
@media (min-width:1000px){
  /* The standards get the width; the member/non-member note is context. */
  .standardy-cols{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr); align-items:start}
  /* NOT sticky. The rail is three boxes and taller than a viewport (1328 px
     at 1440 wide), so sticking gained nothing — and cost a jump: a sticky
     element is clamped to the end of its row, and the moment the main column
     grows (unfolding Kodex v sedmi bodech) the clamp releases and the whole
     rail drops to its `top` offset. Marek, 2026-09-10: "the whole right
     column shifts down". Measured: 550 px with sticky, 0 without. */
}
.standardy-branch + .standardy-branch{margin-top:var(--space-xl)}

/* Side rail: quieter than the library it sits beside. */
.standardy-notice{border:1px solid var(--line); padding:var(--space-md)}
.standardy-notice h2{font-size:1.12rem; margin:0 0 var(--space-sm)}
.standardy-notice h3{font-size:.74rem; font-weight:700; letter-spacing:.08em;
                     text-transform:uppercase; color:var(--muted); margin:0 0 4px}
.standardy-notice p{font-size:.92rem; line-height:1.5; margin:0 0 var(--space-2xs)}
.standardy-notice__col{border-left:3px solid var(--line); padding-left:var(--space-sm)}
.standardy-notice__col + .standardy-notice__col{margin-top:var(--space-md)}
.standardy-notice__col--member{border-left-color:var(--green-ink)}
.standardy-notice__col--nonmember{border-left-color:var(--red-text)}
.standardy-contents{margin-top:var(--space-md); font-size:.92rem; color:var(--muted)}
.standardy-contents p{margin:0 0 .6em}

@media (max-width:999px){
  .standardy-lead{grid-template-columns:1fr; gap:var(--space-md)}
}

/* Certifikace SIMAR in the side rail, above the členská/nečlenská note. */
.standardy-cert{border:1px solid var(--line); border-top:4px solid var(--blue);
                padding:var(--space-md); margin-bottom:var(--space-md)}
.standardy-cert h2{font-size:1.12rem; margin:0 0 var(--space-2xs)}
.standardy-cert h2 a:hover, .standardy-cert h2 a:focus-visible{color:var(--blue-ink)}
.standardy-cert p{font-size:.92rem; line-height:1.5; color:var(--muted); margin:0 0 var(--space-2xs)}

/* ---------- Zadavatelé: the three tiles ---------------------------------- */
/* Three abreast, which is what the copy was written for — stacked full-width
   they left the right half of the page empty and pushed everything else below
   the fold. auto-fit rather than a fixed 3, so the row reflows on its own
   instead of needing a breakpoint per width. */
.zad-tiles{
  list-style:none; margin:var(--space-lg) 0 0; padding:0;
  display:grid; gap:var(--space-md);
  /* Three across is the arrangement this row was designed for, so the minimum
     is set from the narrowest column that ever holds it: the rail appears at
     1100, where it leaves 675px, and 3 x 200 + 2 x 24 = 648 fits inside that.
     (210 missed it by three pixels and dropped a tile to a second row.) */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.zad-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2xs);
  min-width:0; padding:var(--space-md);
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
}
/* The icons are the client's own SVGs, already carrying the section's green,
   blue and red — nothing here recolours them. */
.zad-tile__icon{width:72px; height:72px; flex:none}
.zad-tile__title{margin:var(--space-2xs) 0 0; font-size:1.12rem; line-height:1.25}
.zad-tile__title a{color:var(--ink)}
.zad-tile__title a:hover, .zad-tile__title a:focus-visible{color:var(--blue-ink)}
/* The blurb is a richtext slot now, so it is a <div> holding a <p>. Both the
   wrapper and the paragraph inside it take the type, and the <p> loses the
   browser's default margins so a one- or two-line tile sits where it did. */
.zad-tile__text, .zad-tile__text p{margin:0; font-size:.94rem; line-height:1.6; color:var(--muted)}
.zad-tile__text p + p{margin-top:.6em}
.zad-tile__text a{color:var(--blue-ink); text-decoration:underline; text-underline-offset:.16em}
/* pinned to the bottom so the three links line up whatever the copy length */
.zad-tile__more{margin-top:auto; padding-top:var(--space-2xs)}
.zad-next{
  list-style:none; margin:var(--space-md) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-2xs) var(--space-lg);
}
.zad-finder-head{
  margin:var(--space-2xl) 0 var(--space-md); font-size:1.5rem;
  padding-top:var(--space-lg); border-top:1px solid var(--line);
}

/* ---------- the agency finder: four facets as dropdowns ------------------
   The four dimensions hold 9, 21, 15 and 4 options. As open columns they were
   four lists of wildly different heights that read as unrelated; closed, they
   are four identical rows. <details>, so this needs no JavaScript. */
.finder--facets{
  display:block; border:0; padding:0; margin:var(--space-md) 0 var(--space-lg);
}
.facets{
  display:grid; gap:var(--space-2xs);
  /* 210px, not 250: in the main column beside the rail (915px) a 250px
     minimum fits only three, leaving the fourth dropdown alone on a second
     row. Four fit at 210. */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items:start;
}
.facet{
  --facet:var(--blue);
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
  border-top:3px solid var(--facet);
}
.facet--blue{--facet:var(--blue)}
.facet--green{--facet:var(--green)}
.facet--red{--facet:var(--red)}
.facet--slate{--facet:var(--muted)}
.facet__head{
  /* Fixed height, so a name that wraps to two lines — which "Typy výzkumů a
     další služby" does as soon as its badge appears — does not make one
     dropdown taller than the other three. Equal rows are the whole point. */
  display:flex; align-items:center; gap:var(--space-2xs); cursor:pointer;
  min-height:52px; padding:8px var(--space-xs); list-style:none;
  font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink);
}
.facet__head::-webkit-details-marker{display:none}
.facet__head::marker{content:""}
.facet__name{min-width:0}
.facet__badge{
  flex:none; min-width:1.4em; padding:1px 6px; border-radius:999px;
  background:var(--facet); color:#fff; font-size:.72rem; text-align:center;
}
.facet__chevron{
  flex:none; margin-left:auto; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s var(--ease);
}
.facet[open] > .facet__head .facet__chevron{transform:rotate(-135deg) translate(-2px,-2px)}
.facet[open] > .facet__head{color:var(--facet)}
/* An open facet takes the whole row and lays its options in aligned columns.

   Confined to its own quarter-width box they were pills of every different
   length wrapping wherever they fitted — 46 of them in "Oblasti výzkumu" — with
   no line for the eye to follow. The legacy filter gives each block the full
   width and reads its options down columns, which is the structure worth
   copying. */
.facet[open]{grid-column:1 / -1}
.facet__body{
  display:grid; align-content:start;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap:0 var(--space-lg);
  padding:var(--space-2xs) var(--space-xs) var(--space-sm);
  /* No inner scrollbar: across the full width even the 40-option facet is
     fourteen rows, and a list you have to scroll inside a page you also have to
     scroll is worse than a tall one. */
}

/* Each option is a chip that fills with its facet's colour when chosen, rather
   than a bare checkbox — the state is then readable at a glance across a form
   holding forty-nine of them. The input stays in the DOM and keeps working;
   it is only visually replaced, so keyboard and screen readers are unaffected. */
/* One option per row: a box, a label, and its count.

   THE COUNT SITS RIGHT AFTER THE LABEL, not at the far edge of the cell. It
   used to stretch to a common right edge, which reads well in a single narrow
   column and badly in the five-column grid these facets actually use: the
   Sekce facet has three short labels in 235px cells, so "Články SIMAR" and its
   "1" ended up an inch apart — Marek, 2026-10-04: "je mezi tím názvem a číslem
   šílená mezera." */
.chip{
  display:grid; grid-template-columns:16px auto auto; justify-content:start;
  align-items:center; gap:var(--space-2xs); cursor:pointer;
  padding:7px var(--space-2xs); border-radius:4px;
  font-size:.88rem; line-height:1.3; color:var(--ink);
  transition:background-color .12s var(--ease);
}
.chip::before{
  content:""; width:16px; height:16px; border-radius:3px;
  border:1.5px solid var(--line); background:var(--bg);
  transition:background-color .12s var(--ease), border-color .12s var(--ease);
}
.chip input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%);
}
.chip__count{color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums}
/* Aktivní sekce, ve které zatím nic není: vidět, ale ne k zakliknutí. */
.chip--empty{color:var(--muted); cursor:default}
.chip--empty::before{opacity:.45}
.chip--empty:hover{background:none}
.chip--empty:hover::before{border-color:var(--line)}
.chip:hover{background:var(--surface)}
.chip:hover::before{border-color:var(--facet)}
.chip:has(input:checked){background:var(--surface); font-weight:600}
.chip:has(input:checked)::before{
  background:var(--facet); border-color:var(--facet);
  /* the tick, drawn rather than typed so it cannot pick up a fallback font */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size:contain;
}
.chip:has(input:focus-visible){outline:2px solid var(--facet); outline-offset:2px}

/* The hub's free-text box, stacked above the facet grid (.finder--facets is
   display:block, so it needs only the gap). Inherits .finder__group's legend
   and input styling — same control as the one it replaced on /vzdelavani/. */
.hub-filter__q{margin-bottom:var(--space-sm)}
.finder--facets .finder__actions{margin-top:var(--space-md)}
.finder--facets .finder__actions button{
  background:var(--blue-ink); color:#fff; border:0; border-radius:4px;
  padding:.6rem 1.4rem; cursor:pointer;
}
.finder--facets .finder__actions button:hover{background:var(--ink)}

.agency-gate, .agency-count{
  margin:0 0 var(--space-md); color:var(--muted); font-size:.94rem;
}
.agency-gate{
  padding:var(--space-md); border:1px dashed var(--line); border-radius:6px;
  text-align:center;
}

/* ---------- Chci průzkum: what to read before briefing anyone ------------
   A bare link to "Dotazník na pohodu" told a reader nothing, so each of these
   gets room for a real description in the client's own words. Between the tiles
   and the finder, which is where they are useful. */
.zad-more{margin:var(--space-2xl) 0 0; padding-top:var(--space-lg); border-top:1px solid var(--line)}
.zad-more__head{margin:0 0 var(--space-md); font-size:1.5rem}
.zad-more__grid{
  /* No align-items:start — the cards stretch to the tallest, so the row has one
     baseline top and bottom instead of three cards of three different heights.
     The links are pinned to the bottom of each card (below), so the extra space
     falls between the copy and the link rather than under the link. */
  display:grid; gap:var(--space-md);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.resource{
  --res:var(--blue);
  display:flex; flex-direction:column; gap:var(--space-2xs); min-width:0;
  padding:var(--space-md); border:1px solid var(--line); border-radius:6px;
  border-top:3px solid var(--res); background:var(--bg);
}
.resource--green{--res:var(--green)}
.resource--red{--res:var(--red)}
.resource--blue{--res:var(--blue)}
.resource > h2{margin:0; font-size:1.15rem; font-weight:700; line-height:1.3}
.resource > h2 a{color:var(--ink)}
.resource > h2 a:hover, .resource > h2 a:focus-visible{color:var(--res)}
.resource__lead{margin:0; font-size:.92rem; line-height:1.6; color:var(--muted)}
/* The selector covers the <ul> itself AND a <ul> nested one level down: the
   Doporučení card's list is a richtext slot now, so its <ul> sits inside the
   slot's wrapper. Every other card still passes a bare <ul>. */
.resource__list, .resource__list ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
/* The card body is one richtext field, so it can hold an intro paragraph above
   the list. It reads as the lede it replaces, and keeps the card's OWN gap
   between itself and the list — inside the wrapper it would otherwise inherit
   the 6px list gap and sit 2px tighter than it used to. */
.resource__list p{margin:0; font-size:.92rem; line-height:1.6; color:var(--muted)}
.resource__list p + ul{margin-top:calc(var(--space-2xs) - 6px)}
.resource__list li{
  position:relative; padding-left:1.1rem; font-size:.9rem; line-height:1.45;
}
.resource__list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border-radius:50%; background:var(--res);
}
.resource__list--links li{display:flex; gap:var(--space-2xs); justify-content:space-between}
.resource__list a{color:var(--ink)}
.resource__list a:hover, .resource__list a:focus-visible{color:var(--res)}
.resource__date{flex:none; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums}
/* the links sit at the bottom whatever each card's copy length */
.resource > .readmore{margin-top:auto; padding-top:var(--space-2xs)}


/* ---------- Chci průzkum: a tile's own page ------------------------------ */
.zad-detail{display:grid; gap:var(--space-xl); margin-top:var(--space-md)}
.zad-rail, .zad-article{min-width:0}
@media (min-width:900px){
  .zad-detail{grid-template-columns:minmax(0,290px) minmax(0,1fr); align-items:start}
  .zad-rail{position:sticky; top:calc(var(--head-h) + var(--space-md))}
}
/* A panel rather than a hairline list: this is the section's navigation on
   every page in it, and at 0.92rem against a 2px rule it read as a footnote. */
.zad-rail, .agency-rail{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--space-sm); border:1px solid var(--line); border-radius:6px;
  background:var(--surface);
}
.zad-rail__parent{
  margin:0 0 var(--space-2xs); padding:0 var(--space-2xs) var(--space-2xs);
  border-bottom:1px solid var(--line);
  font-size:.82rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.zad-rail__parent:hover, .zad-rail__parent:focus-visible{color:var(--blue-ink)}
.zad-rail__link{
  padding:10px var(--space-2xs); border-radius:4px;
  border-left:3px solid transparent; color:var(--ink); font-size:1rem; line-height:1.3;
  transition:color .15s var(--ease), background-color .15s var(--ease),
             border-color .15s var(--ease);
}
.zad-rail__link:hover, .zad-rail__link:focus-visible{color:var(--blue-ink); background:var(--bg)}
.zad-rail__link.is-current{
  color:var(--blue-ink); font-weight:700;
  background:var(--bg); border-left-color:var(--blue-ink);
}

/* ONE content edge, and as far right as a reading measure allows.

   Every block of article content — the prose, the date, the cross-link row —
   is capped at the same 78ch, so they all end in the same place (1252 at
   desktop). Three different endings is what made these pages feel unsettled:
   text stopped at 1252, the cross-links ran to 1400.

   The cap is on the blocks rather than on .zad-article itself. Capping the
   column looked tidier in the markup but pushed the edge in to 1174 and left
   226px of dead space beside it — same consistency, more emptiness. */
/* ONE number, in pixels, not 78ch on each block. `ch` is relative to the
   element's OWN font-size, so the same "78ch" resolved to 1252 on the prose,
   1174 on the cross-links and 1018 on the date line — three different edges
   from what looked like one rule, which is exactly the raggedness this is
   meant to remove. 860px is what 78ch of the body face measures. */
.zad-article{--measure:860px}
.zad-article > *{max-width:var(--measure)}

/* Kontakt is a single card of contact details on a full-width page. Matching
   the other nav entries with .wrap--wide is what stops the page changing width
   as you move along the nav — but it also stretched that card to ~1360px
   around one narrow column of six short lines. Same consistency, more
   emptiness: exactly the trade the .zad-article note above describes.

   So the frame is wide and the card keeps the site's reading measure. Same
   860px, same reason it is a pixel value and not 78ch. */
.kontakt-card{max-width:860px}

/* Kateřina, 2026-09-23: "u kontaktu chybí mezera mezi mým kontaktem a adresou
   SIMARu". She had tried to make one by typing three empty paragraphs into the
   richtext — but an empty block has no height and its margins collapse through
   the ones around it, so all three together bought exactly the same single line
   as none. Spacing is the stylesheet's job, not something the client should
   have to type: the empty paragraphs are dropped (the rule .std__body already
   carries, for the same reason), and a second heading in the card opens a new
   contact block with a hairline above it. The lines within one contact close
   up at the same time, so each block reads as one address instead of four
   unrelated paragraphs — which is what made the two run together. */
.kontakt-card .prose > p:empty{display:none}
.kontakt-card .prose > p{margin:0 0 .3em}
.kontakt-card .prose > h2{margin:0 0 .6em}
.kontakt-card .prose > h3{margin:1.2em 0 .45em; font-size:1rem}
.kontakt-card .prose > h3:first-child,
.kontakt-card .prose > h2 + h3{margin-top:0}
/* The separating hairline is drawn by a pseudo-element, NOT by padding-top on
   the heading. .prose > h3 carries a green border-left, and padding grows that
   border upwards: the bar beside "Kontakt na manažerku SIMAR" ran the full
   height of the gap and was several times longer than the one beside "Sídlo:".
   Marek, 2026-09-24: "ta čára zelená je mnohem delší než by měla být." */
.kontakt-card .prose > h3 ~ h3{position:relative; margin-top:var(--space-xl)}
.kontakt-card .prose > h3 ~ h3::before{
  content:""; position:absolute; left:calc(var(--space-sm) * -1); right:0;
  top:calc(var(--space-md) * -1); border-top:1px solid var(--line);
}


/* The client's own cross-links at the foot of each page, side by side rather
   than stacked — the row they were written for lived in the old stylesheet. */
.zad-next{
  display:grid; gap:var(--space-md); margin-top:var(--space-xl);
  padding-top:var(--space-lg); border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.zad-next__card{
  display:flex; align-items:center; gap:var(--space-sm);
  padding:var(--space-sm); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); font-weight:600; line-height:1.3;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.zad-next__card:hover, .zad-next__card:focus-visible{border-color:var(--blue-ink); color:var(--blue-ink)}
.zad-next__card img{width:64px; height:64px; flex:none}

/* Dates inside a facet: the two inputs sit side by side rather than as two
   dropdowns of their own, which would have made "od" and "do" look like
   separate filters instead of one range. */
.facet__body--dates{display:flex; flex-wrap:wrap; gap:var(--space-2xs)}
.facet__date{display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--muted)}
.facet__date input{
  font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:4px;
  background:var(--bg); color:var(--ink);
}
.facet__date input:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}

/* No watermark numeral on a study card. It counted position within the current
   page of results, which changes with every filter and every page — Marek: "it
   seems a little useless". Scoped to .zad-detail, which only the studies
   catalogue has: Volná místa shares this template and was not asked about. */
.zad-detail .watermark-num{display:none}

/* ---------- one member agency ------------------------------------------- */
/* The profile keeps the legacy page's titled-block shape for the two things
   you read -- what the agency says about itself, and what it offers. How to
   reach it and what it has published are reference, and live in the aside. */
/* Three columns: members rail | profile | that agency's articles.

   A profile is one short medailonek and a few lists of terms, so on a full
   width page most of the row was white. The two things a visitor actually
   wants next -- another member to compare against, and what this one has
   published -- were a page-length scroll apart (the directory, then back) or
   at the very bottom. Putting them either side turns dead margin into the
   page's navigation.

   250px is enough for the longest member name on one line ("STEM Ustav
   empirickych vyzkumu" wraps to two, which is fine); 320px keeps a headline
   in the aside to a readable three or four lines. */
.agency-layout{display:grid; gap:var(--space-xl); margin-top:var(--space-md)}
.agency-aside{display:grid; gap:var(--space-md); align-content:start}
.agency-rail, .agency-main, .agency-aside{min-width:0}
@media (min-width:1080px){
  .agency-layout{
    grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,320px);
    align-items:start;
  }
  /* Both flanks stay put while the profile scrolls -- the rail is navigation
     and the feed is a list you dip into, neither is read top to bottom. */
  .agency-rail, .agency-aside{position:sticky; top:calc(var(--head-h) + var(--space-md))}
  /* No articles, no third column: the grid must not keep the empty track. */
  .agency-layout--noaside{grid-template-columns:minmax(0,250px) minmax(0,1fr)}
}
/* Between the rail appearing and the aside fitting, the feed goes full width
   under the profile rather than squeezing three columns into 900px. */
@media (min-width:900px) and (max-width:1079.98px){
  .agency-layout{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
  /* Full width, so the two panels go side by side rather than stacking into
     one very wide contact card above one very wide feed. */
  .agency-aside{
    grid-column:1 / -1;
    grid-template-columns:minmax(0,280px) minmax(0,1fr);
    gap:var(--space-lg); align-items:start;
  }
  .agency-rail{position:sticky; top:calc(var(--head-h) + var(--space-md))}
}
/* Stacked: the profile first, then its articles. The rail is a directory of
   OTHER agencies -- useful, but not before the page you asked for, so it goes
   last rather than pushing the profile below the fold. */
@media (max-width:899.98px){
  .agency-main{order:1}
  .agency-aside{order:2}
  .agency-rail{order:3}
}

/* The aside's panels. Each takes one brand colour as --pc and wears it as a
   flat tinted header strip -- no gradient, no glow, the colour is the block.
   Grey-on-grey, the two cards read as one undifferentiated slab of small text
   beside a page that has three colours in it everywhere else. */
.agency-panel{
  border:1px solid var(--line); border-radius:6px;
  background:var(--surface); overflow:hidden;
}
.agency-panel--blue{--pc:var(--blue); --pc-tint:var(--blue-tint); --pc-ink:#1f5c82}
.agency-panel--green{--pc:var(--green); --pc-tint:var(--green-tint); --pc-ink:var(--green-ink)}
.agency-panel__title{
  margin:0; padding:var(--space-xs) var(--space-md);
  background:var(--pc-tint, var(--surface));
  border-bottom:2px solid var(--pc, var(--line));
  font-size:.84rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}
.agency-panel--red{--pc:var(--red); --pc-tint:var(--red-tint); --pc-ink:var(--red-ink)}
.agency-panel__body{padding:var(--space-md)}

/* The director's box, under the contact. Kateřina, 2026-09-23.

   A portrait, a name, and something the person said — so the layout is the
   person first and the words under them, not a quote with a stamp beside it.
   The photograph is cropped square by the frame rather than trusted to arrive
   square: an agency will send whatever its website uses, and a 3:4 headshot
   must not make this panel taller than the one above it. */
.agency-interview__who{display:flex; align-items:center; gap:var(--space-sm)}
.agency-interview__photo{
  flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  object-fit:cover; display:block; background:var(--surface);
}
.agency-interview__name{margin:0; font-weight:700; line-height:1.3}
.agency-interview__name span{
  display:block; font-weight:400; font-size:.86rem; color:var(--muted);
}
/* No decorative quotation mark: at this size a glyph either collides with the
   first word or needs an indent that eats the measure in a 300px rail. The
   rule and the italic already say "someone said this". */
.agency-interview__quote{
  margin:var(--space-sm) 0 0; padding:0 0 0 var(--space-sm);
  border-left:3px solid var(--red); font-style:italic;
  font-size:.95rem; line-height:1.55; color:var(--ink);
}
.agency-panel--green .agency-panel__body{padding:var(--space-sm)}

/* The rail's rows, in green.

   Every previous try leaned on a divider between entries -- a hairline, then
   a side-bar, then a full card outline -- and each one was either too faint to
   separate three-line headlines or too heavy for a sidebar. The rail on the
   left already solves exactly this problem for fifteen names: each row is its
   own soft block on the panel's grey, no outline anywhere, and the eye reads
   the gaps rather than the lines.

   Green is the third colour, so the three columns carry one each: the rail
   blue, the profile's groups all three, the contact blue and this green. */
.agency-feed{list-style:none; margin:0; padding:0; display:flex;
             flex-direction:column; gap:2px}
.agency-feed li{
  display:grid; gap:3px;
  padding:10px var(--space-2xs);
  border-radius:4px; border-left:3px solid var(--pc);
  background:var(--bg);
  transition:background-color .15s var(--ease);
}
.agency-feed li:hover{background:var(--pc-tint)}
.agency-feed__date{font-size:.78rem; color:var(--muted)}
.agency-feed a{
  color:var(--ink); font-size:1rem; line-height:1.3;
  /* headlines here are long and the column is narrow */
  overflow-wrap:anywhere;
}
.agency-feed a:hover, .agency-feed a:focus-visible{color:var(--pc-ink)}
.agency-panel .readmore{margin-top:var(--space-md)}

/* The profile column is itself the measure (about 660px beside both flanks),
   so the old fixed 860 only stopped the medailonek filling its own track.
   The one case where the column IS wider than a comfortable measure is the
   two-column fallback, which caps it again rather than running prose to
   1050px. */
.agency-intro{max-width:none}
.agency-layout--noaside .agency-intro{max-width:820px}
.agency-block{
  margin-top:var(--space-xl); padding-top:var(--space-md);
  border-top:1px solid var(--line);
}
.agency-block__title{
  margin:0 0 var(--space-md); font-size:1.25rem;
  display:flex; align-items:center; gap:var(--space-2xs);
}
.agency-block__title::before{
  content:""; flex:none; width:4px; height:1.1em; border-radius:2px;
  background:var(--blue);
}
/* Groups stack full width and each list flows into columns, rather than the
   groups themselves sitting side by side.

   Side by side, the groups have to share a row height, and these lists are 9,
   18 and 16 items long -- every short one left a hole as deep as the tallest
   in its row, which is most of what made the middle of this page look empty.
   Flowed, the terms pack tight, every group ends on the same right edge, and
   the block is shorter than it was. */
.agency-block__grid{display:grid; gap:var(--space-md); grid-template-columns:1fr}
/* Three groups, three brand colours. The heading is a flat tinted strip in
   the group's colour, matching the aside's panels, so the eye can tell the
   three dimensions apart at a glance instead of reading forty terms as one
   grey list. */
.agency-group--blue{--gc:var(--blue); --gc-tint:var(--blue-tint)}
.agency-group--green{--gc:var(--green); --gc-tint:var(--green-tint)}
.agency-group--red{--gc:var(--red); --gc-tint:var(--red-tint)}
.agency-group > h3{
  margin:0 0 var(--space-sm); padding:8px var(--space-xs);
  background:var(--gc-tint, var(--surface));
  border-left:4px solid var(--gc, var(--line));
  font-size:.84rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink);
}
.agency-group ul{
  list-style:none; margin:0; padding:0 0 0 var(--space-xs);
  columns:3 165px; column-gap:var(--space-lg);
}
.agency-group li{break-inside:avoid}
.agency-group li{
  position:relative; padding-left:1rem; margin-bottom:6px;
  font-size:1rem; line-height:1.45;
}
/* The dot carries the group's colour too -- every bullet on the page used to
   be the same green whichever dimension it belonged to. */
.agency-group li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--gc, var(--green));
}

/* One stack now, not a spread: the card is 320px wide, and the two-column
   version of this left half its row empty under the profile. */
.agency-contact{display:grid; gap:var(--space-sm); align-items:start}
.agency-contact__address{margin:0; line-height:1.6; font-size:1rem}
.agency-contact__list{
  list-style:none; margin:0; padding:0; display:grid; gap:8px;
  padding-top:var(--space-sm); border-top:2px solid var(--pc-tint);
  font-size:1rem; overflow-wrap:anywhere;
}
.agency-contact__list a{color:var(--blue-ink); text-decoration:underline; text-underline-offset:.16em}
.agency-articles ul{list-style:none; margin:0 0 var(--space-md); padding:0; display:grid; gap:8px}
.agency-articles li{border-left:3px solid var(--line); padding-left:var(--space-2xs)}
.agency-articles a{color:var(--ink)}
.agency-articles a:hover, .agency-articles a:focus-visible{color:var(--blue-ink)}

/* ---------- Respondenti: the Desatero ------------------------------------ */
/* Ten principles, two columns, rows level: 1 beside 6, 2 beside 7, and so on.

   grid-auto-flow:column with five explicit rows is what makes that true. CSS
   columns cannot: they FLOW, so one long principle on the left pushes
   everything under it out of step with the right-hand column, which is the
   misalignment this replaces. Five rows is safe to hard-code here in a way it
   would not normally be -- a desatero has ten items; the word means ten, and
   the import refuses to run with any other number.

   The numbers are a counter, not typed into the copy: the block is editable in
   the panel, and a hand-typed "7." goes wrong the first time somebody reorders
   or inserts one. */
.desatero > ol{
  list-style:none; margin:var(--space-lg) 0 0; padding:0;
  display:grid; gap:var(--space-md);
  counter-reset:desatero;
}
/* Two columns always; the FIVE-ROW COLUMN FLOW only when there are really ten
   items — :has() asks the list how long it is.

   Column flow with a fixed row count is what puts principle 1 level with 6, and
   it is correct for ten items and catastrophic for any other number: the extra
   cells go into IMPLICIT columns the container has no width for, so every cell
   wraps to a sliver. That is what happened while the ten principles lived in a
   rich-text <ol>: Quill promoted the <p> inside each <li> to a list item of its
   own, twenty items, the page 25,486 px tall (Kateřina, 2026-09-30: "nějak
   zvláštně se zobrazuje Desatero"). They are rows now (DesateroPrinciple) and
   the template writes this markup from them, so the count is whatever the
   client has in /admin/desatero/ and an editor round trip cannot change it.
   This rule stays the second line of defence anyway: an eleventh principle is
   a thing she may legitimately add, and it degrades into an ordinary
   two-column list instead of a ruin. */
@media (min-width:820px){
  .desatero > ol{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .desatero > ol:has(> li:nth-child(10):last-child){
    grid-template-rows:repeat(5, auto);
    grid-auto-flow:column;
  }
}
/* Each principle is a card, and the two in a row are the same height.

   The row tops always lined up -- measured, 1 with 6 through 5 with 10 -- but
   as bare text the eye reads the WHITESPACE, and a two-line principle beside a
   four-line one leaves a ragged gap that looks like a broken column. A filled
   card fills its row, so the pairing is visible instead of inferred. */
.desatero > ol > li{
  counter-increment:desatero;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:2px var(--space-xs); align-content:start; min-width:0;
  padding:var(--space-md);
  border:1px solid var(--line); border-top:3px solid var(--dc);
  border-radius:6px; background:var(--bg);
}
.desatero > ol > li::before{
  content:counter(desatero);
  grid-row:1 / span 2; align-self:start;
  min-width:1.9em; padding:.15em 0;
  border-radius:4px; background:var(--dc); color:#fff;
  font-family:var(--font-head); font-size:1rem; font-weight:800;
  text-align:center; font-variant-numeric:tabular-nums;
}
/* The three brand colours in rotation. One colour read as monochrome. */
.desatero > ol > li:nth-child(3n+1){--dc:var(--blue);  --dc-tint:var(--blue-tint)}
.desatero > ol > li:nth-child(3n+2){--dc:var(--green); --dc-tint:var(--green-tint)}
.desatero > ol > li:nth-child(3n+3){--dc:var(--red);   --dc-tint:var(--red-tint)}
.desatero > ol > li > strong{
  align-self:center; font-family:var(--font-head); font-size:1.05rem;
  line-height:1.3; color:var(--ink);
}
.desatero > ol > li > p{
  grid-column:2; margin:0;
  /* --ink, not --muted: this is the substance of the page, and grey-on-white
     was the least readable copy on the site. */
  font-size:1rem; line-height:1.6; color:var(--ink);
}
.desatero__back{margin-top:var(--space-xl)}

/* ---------- the client's own cross-links, as they wrote them -------------
   These used to be parsed out of the body and re-rendered as a fixed grid,
   which meant the editor showed one thing and the page another — and an edit
   that broke the icon/label pairing made a link vanish from the page
   altogether. The body is rendered as written now, so this styles the client's
   OWN markup: a paragraph holding icon links, followed by the paragraph naming
   them. Put two icons on one line in the editor and they sit on one line here;
   put them in separate paragraphs and they stack. That is the whole point. */
/* Starší tvar téhož: řádek ikon jako odkazy v odstavci, než se 2026-10-01
   převedl na figury. V obsahu se dnes nevyskytuje ani jednou (změřeno
   2026-10-05), ale zůstává tu pro případ obnovy ze zálohy nebo importu — a
   zúžený na SVG, aby odkazovaná FOTKA v odstavci nedostala 64 px stejně, jako
   se to stalo figurám. */
.zad-prose p:has(> a > img[src$=".svg"]){
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin: var(--space-lg) 0 var(--space-2xs);
}
.zad-prose p > a > img[src$=".svg"]{
  display: block; width: 64px; height: 64px; margin: 0;
}
/* The label under the icons. Not boxed: a border would need markup grouping
   each icon with its own name, and inventing that markup is the parsing this
   replaces. */
.zad-prose p:has(> a > img) + p{
  margin: 0 0 var(--space-md);
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: var(--ink);
}
.zad-prose p:has(> a > img) > a{
  display: block; border-radius: 6px; padding: 2px;
  transition: transform .15s var(--ease);
}
.zad-prose p:has(> a > img) > a:hover,
.zad-prose p:has(> a > img) > a:focus-visible{ transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){
  .zad-prose p:has(> a > img) > a:hover,
  .zad-prose p:has(> a > img) > a:focus-visible{ transform: none; }
}

/* Icon + its own caption, side by side.
   A row of "and now read these" links wants each icon over the words that name
   it. Two paragraphs cannot express that — the icons are in one and the labels
   in another, so the labels run together and no amount of spacing fixes it
   (Marek, 2026-09-30: whitespace is the only tool the editor offers and Quill
   collapses it). A FIGURE can: image and caption are one object, and the client
   already has both fields in the image dialog. Consecutive figures flow inline,
   so two of them sit side by side and three wrap. */
/* JEN IKONY, ne každá figura. Tohle pravidlo vzniklo 2026-10-01 pro řádky
   prolinků (ikona nad svým popiskem) a bylo napsané na `figure` obecně —
   jenže knihovna obrázků vkládá KAŽDÝ obrázek jako figuru, takže na stránkách
   se zad-prose dostala každá fotka tvrdých 64×64 px. Marek, 2026-10-05: "na
   stránkách se obrázky úplně ultra zmenšily" — 530×275 fotka se kreslila jako
   64×64.

   Rozlišení je měřené, ne vymyšlené: v celém obsahu je 8 figur s ikonou a
   všechny jsou SVG z /media/legacy/icon-*, zatímco obsahových fotek je 2 895 a
   ani jedna SVG není. Selektor se proto ptá na příponu obrázku. */
.zad-prose figure:has(> a > img[src$=".svg"]),
.zad-prose figure:has(> img[src$=".svg"]){
  display: inline-block; vertical-align: top;
  width: auto; max-width: 200px; margin: var(--space-lg) var(--space-xl) var(--space-xs) 0;
  text-align: center;
}
.zad-prose figure:has(> a > img[src$=".svg"]) img,
.zad-prose figure:has(> img[src$=".svg"]) img{
  display: block; width: 64px; height: 64px; margin: 0 auto;
}
/* Obsahová fotka ve stejném textu: šířka sloupce, výška podle ní. */
.zad-prose figure img{max-width: 100%; height: auto}
.zad-prose figure:has(> a > img) figcaption, .zad-prose figure:has(> img) figcaption{
  padding-top: var(--space-2xs);
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--ink); line-height: 1.3;
}
.zad-prose figure:has(> a > img) a{ display: block; }

/* ---------- Embeds ------------------------------------------------------- */
/* Each platform's own embed, at the size that platform publishes for it — the
   height or ratio is set on the block by web/static/web/js/embeds.js from the
   provider table, so there is no second copy of those numbers here.

   This used to be a card of ours with a play button, which turned a podcast and
   a LinkedIn post into the same dark rectangle. Marek, 2026-10-02: "vypadá to
   absolutně příšerně, když se to snažíme recreatnout sami." */
.prose .mm-embed, .mm-embed{
  position:relative; margin:var(--space-lg) 0;
  border-radius:8px; overflow:hidden;
}
.mm-embed__frame{
  display:block; width:100%; height:100%; border:0;
}
/* A block whose script has not run yet, or whose provider is unknown: no
   height, no empty box, nothing that reserves space for something that is not
   coming. */
.mm-embed:not([data-mm-ready]){display:none}

/* X renders a <blockquote> their widget replaces. Until it does, their own
   stylesheet is not there, so this keeps the fallback readable rather than a
   bare unstyled quote. */
/* X's widget measures itself, so the block starts with no height at all and the
   page jumps when the post arrives. A floor costs nothing and holds the space. */
.mm-embed--x{border-radius:0; min-height:160px}
.mm-embed--x .twitter-tweet{margin:0 auto}

/* ---------- Respondenti: hero ------------------------------------------- */
/* Heading and lede on the left, provyzkum's poster filling the right.

   The lede is capped to its own column rather than running the page width --
   two lines across 1240px read as a caption under a title; beside the artwork
   they read as the page's opening. */
/* margin-bottom: the hero used to sit flush on top of the first row of
   tiles, with nothing between the poster's edge and the first card. */
.resp-hero{display:grid; gap:var(--space-lg); align-items:center;
           margin-bottom:var(--space-xl)}
.resp-hero__text{min-width:0}
.resp-hero__text .article-perex{margin-bottom:0}
.resp-hero__art{
  min-width:0; width:100%; height:auto; border-radius:6px;
  /* NEVER wider than the source file. The client's poster is authored at
     750px -- provyzkum.cz serves that exact file, named
     Vyzkum_muze_volat_750x265px_01.jpg, so there is no larger original to
     fetch -- and the column below reached 923px at a 1440px viewport, i.e.
     the browser was upscaling it 1.23x with the text baked in. Capping is the
     only fix that exists; the column keeps its width, the poster just stops
     growing inside it. */
  max-width:750px;
  /* The poster is a light illustration on near-white; without an edge it
     floats off the page rather than sitting on it. */
  border:1px solid var(--line);
}
@media (min-width:900px){
  /* The text column is cut to the width of the word "Respondenti" itself, so
     the lede stops where the heading stops and the poster takes everything
     else. Measured, not guessed: the rendered h1 is 349px of a 1192px hero at
     1280-1920, 296 of 1052 at 1100, 242 of 852 at 900 -- 28-29% throughout,
     which is what this ratio reproduces (0.43 / 1.43 = 30% before the gap).
     The column exceeds the poster's 750px above roughly a 1300px viewport,
     which is what .resp-hero__art's max-width now stops. */
  .resp-hero{grid-template-columns:0.43fr minmax(0,1fr)}
}
/* Stacked, the artwork goes under the words: it is the client's poster, not
   the page's subject, and pushing the h1 down the screen to show it inverts
   that. */
@media (max-width:899.98px){
  .resp-hero__text{order:1}
  .resp-hero__art{order:2}
}

/* KDYŽ SI KLIENT NAHRAJE SVOU FOTKU, je to jiný obrázek než ten, na který je
   tenhle blok navržený, a pravidla výše pro něj neplatí ani jedno.

   `max-width:750px` je ŠÍŘKA NAŠEHO SOUBORU, ne míra sazby — provýzkumový
   plakát je autorovaný na 750 px a nic většího neexistuje, takže se nesmí
   zvětšovat. Jenže Kateřina 2026-10-30 nahrála fotku 1016×714 a ten strop
   ji uťal uprostřed stránky: při 1440 px fotka končila na x=1227 proti
   1400, kam sahají karty pod ní, při 1920 na 1443 proti 1700 — díra 257 px.
   A protože je fotka svisle o moc vyšší než plakát (poměr 1,42 proti 2,83),
   vyrostlo hero z 265 na 528 px a `align-items:center` posadilo nadpis
   „Respondenti" 150 px pod horní hranu bloku, kde se volně vznášel.

   Tohle je potřetí tatáž třída chyby: sazba závislá na pixelech nahraného
   souboru (loga na /o-simar/ 2026-10-19, Markovo „to, jak změna loga opět
   něco rozhodí, je prostě špatně"). Řešení je stejné jako tam — o výšku
   rozhoduje RÁM, ne soubor.

   Výšku proto dává POMĚR PRUHU a fotka se do něj ořízne. Pruh je 750×265 —
   ta sazba, na kterou je stránka navržená. Je to míra bloku, ne rozměr
   žádného souboru, a právě proto smí stát v CSS; tentýž údaj drží šablona
   ve `width`/`height` výchozího obrázku.

   NE `height:100%` SE `stretch`em, což byla první verze: výšku řádku určuje
   jeho obsah, takže procentní výška je kruh — prohlížeč spadne zpátky na
   vlastní výšku obrázku a fotka vyrostla na 708 px, tedy hůř než před
   opravou. Změřeno, ne odhadnuto. Vedle u `.standardy-lead` ta konstrukce
   funguje jen proto, že tam je vyšší SOUSEDNÍ sloupec s citátem, který výšku
   určí první.

   POMĚR JE 2:1, NE 750/265. To je výsledek tří kol s Markem a stojí za
   zapsání, protože všechny moje verze byly vedle. Nejdřív jsem pruh nechal přes
   celý zbytek řádku v poměru 2,83 — Marek 2026-10-30: „ta kvalita fotky se
   teď trošičku kazí, jak se roztahuje … zkusme udělat tu mezeru mezi tím
   nadpisem a fotkou trošku větší a u fotky zkusit zachovat původní rozměr."
   Přečetl jsem to jako „zmenši ji" a udělal z ní úzký pruh 750×265 odsunutý
   mezerou 310 px. Načež: „To vypadá hůře, spíš jsem myslel, že ta fotka je
   vyšší … zvětšil i na výšku a určitě teď přiblížil k tomu nadpisu."

   Tedy VĚTŠÍ a VYŠŠÍ, ne menší. Vyrenderovaly se tři varianty — celá fotka
   bez ořezu (1,42), 16:9 a 2:1 — a Marek z nich vybral 2:1; 16:9 bylo
   „zase šíleně moc".

   CO TO STOJÍ, ZMĚŘENO: při 1920 px je fotka 1020 CSS px široká, takže na
   displeji s dvojnásobnou hustotou potřebuje 2040 obrazových bodů. Nahraný
   soubor jich má 1016, tedy polovinu. Ostřeji to nejde udělat sazbou — jen
   větším souborem; `process_upload` bere až 2400 px.

   MEZERA je zpátky na `--space-lg`, protože Marek chtěl fotku blíž
   k nadpisu.

   ROZLIŠENÍ NESE `data-mmadm-replaced`, které mm_cms píše jen u nahrazeného
   obrázku. Náš výchozí plakát má text zapečený v JPEGu a `cover` by mu
   uřízl slova — proto si drží svůj strop a svůj poměr. */
.resp-hero__art[data-mmadm-replaced]{max-width:none}
@media (min-width:900px){
  .resp-hero:has(.resp-hero__art[data-mmadm-replaced]){
    grid-template-columns:minmax(0,420px) minmax(0,1fr)}
  .resp-hero__art[data-mmadm-replaced]{
    width:100%; aspect-ratio:2/1; height:auto;
    object-fit:cover; object-position:center}
}

/* ---------- Respondenti: the tiles --------------------------------------- */
/* provyzkum.cz's two rows of four, plus a lead row above them.

   COLOUR. These were grey cards on a white page and read as exactly that --
   the life was in the icons and nothing else. Each row now takes one of the
   brand colours and wears it as a flat tint with a solid top rule, which is
   the same device the aside panels and the services block already use. No
   gradients: the colour is the block. */
.pv-group{padding-top:var(--space-lg)}
.pv-group__head{margin:0 0 var(--space-2xs); font-size:1.5rem}
.pv-group__head a{color:var(--ink)}
.pv-group__head a:hover, .pv-group__head a:focus-visible{color:var(--pc)}
.pv-group__lede{margin:0 0 var(--space-md); max-width:70ch; color:var(--muted)}
/* A group whose heading page has no perex renders this empty. Outside the
   editor the slot leaves a genuinely empty <p>, which still took its margin and
   pushed the tiles down; in the editor the slot's span keeps it non-empty, so
   there is still something to click and type into. */
.pv-group__lede:empty{display:none}

.pv-tiles{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-md);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
/* The lead pair, side by side and never three-up: the row under them is the
   form, not a third card. */
.resp-lead{display:grid; gap:var(--space-md); align-items:start}
@media (min-width:760px){
  .resp-lead{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch}
}

.pv-tile{
  position:relative; min-width:0;
  display:flex; flex-direction:column; gap:var(--space-2xs);
  min-height:120px; padding:var(--space-md);
  border:1px solid var(--line); border-top:4px solid var(--pc, var(--blue));
  border-radius:6px; background:var(--bg);
  transition:box-shadow .15s var(--ease), transform .15s var(--ease);
}
.pv-tile:hover, .pv-tile:focus-within{
  box-shadow:var(--shadow-card-hover); transform:translateY(-2px);
}
/* One target, the whole tile: the heading holds the only <a>, stretched over
   the card. Wrapping the card in an anchor instead would put the description
   inside the link text, which is what a screen reader reads out. */
.pv-tile__label{margin:0; font-size:1.06rem; line-height:1.3}
.pv-tile__label a{color:var(--ink)}
.pv-tile:not(.pv-tile--plain) .pv-tile__label a::after{content:""; position:absolute; inset:0}
.pv-tile__text{margin:0; font-size:.94rem; line-height:1.55; color:var(--ink)}
.pv-tile:hover .pv-tile__label a, .pv-tile:focus-within .pv-tile__label a{color:var(--pc)}

/* The two icon rows: the client's artwork, centred, four across as on
   provyzkum.cz's own front page. */
.pv-group--icons .pv-tile{align-items:center; justify-content:center;
                          min-height:150px; text-align:center}
/* A solid disc of the group's colour with the icon knocked out in white.

   The artwork is single-path line art with no fills of its own, so `color`
   drives it and the disc is just a background on the same element. As a plain
   coloured line drawing on a pale card it disappeared: eight tiles that were,
   in Marek's words, grey boxes stacked on each other. A filled disc is the one
   thing on a nav tile big enough to carry colour. */
.pv-tile__icon{
  width:74px; height:74px; padding:15px; border-radius:50%;
  background:var(--pc); fill:currentColor; color:#fff;
  transition:transform .15s var(--ease);
}
.pv-tile:hover .pv-tile__icon, .pv-tile:focus-within .pv-tile__icon{
  transform:scale(1.06);
}
/* An explicit class, not :nth-of-type(even): the groups are <section>s among
   the page's other <section>s, so nth-of-type counted the form section too. */
.pv-group--blue{--pc:var(--blue);  --pc-tint:var(--blue-tint)}
.pv-group--green{--pc:var(--green); --pc-tint:var(--green-tint)}

/* ---------- Respondenti: the complaints form ----------------------------- */
/* Red as an accent on the top edge, not as a wash. A full red-tint ground
   over a form this size drowned the page -- and a tinted field on a tinted
   panel is also the hardest place to see where an input begins. */
.complaint{padding-top:var(--space-lg)}
.complaint__inner{
  padding:var(--space-lg);
  border:1px solid var(--line); border-top:3px solid var(--red);
  border-radius:6px; background:var(--bg);
}
.complaint__head{margin:0 0 var(--space-2xs); font-size:1.5rem}
.complaint__lede{max-width:70ch}
.complaint__lede p{margin:0}
/* Two explicit columns, not auto-fit: auto-fit made four tracks at this
   width, so e-mail and name sat in the first two and half the row was empty. */
.complaint__form{
  display:grid; gap:var(--space-md); margin-top:var(--space-md);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){
  .complaint__form{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* align-content:start, or the grid stretches its rows to the tallest field in
   the row and the shorter one's input drifts down: "Váš e-mail" carries a hint
   line under it and "Jméno" does not, so the two inputs sat at different
   heights beside each other. */
.complaint__field{display:grid; gap:6px; margin:0; min-width:0;
                  align-content:start}
.complaint__field--wide{grid-column:1 / -1}
.complaint__field label{font-weight:700; font-size:.94rem}
/* The resting field wears the panel's own red on a plain white ground -- Marek
   liked the focused look and asked for it as the default.

   Focus then has to be MORE than the resting state, or the one field you are
   actually in is indistinguishable from the other three. It keeps the ring:
   resting is a 1px border, focus adds a 2px outline held 1px off it, so a
   focused field gains a second line rather than merely changing colour. */
.complaint__field input, .complaint__field textarea{
  font:inherit; width:100%; padding:10px var(--space-2xs);
  border:1px solid var(--red); border-radius:4px; background:var(--bg);
  color:var(--ink);
}
.complaint__field input:focus-visible, .complaint__field textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:1px;
}
.complaint__field textarea{resize:vertical; min-height:7em}
.complaint__hint{font-size:.84rem; color:var(--muted)}
.complaint__error{margin:0; font-size:.88rem; font-weight:700; color:var(--red-ink)}
.complaint__actions{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2xs) var(--space-md);
}
.complaint__privacy{font-size:.88rem; color:var(--muted)}
.complaint__done{
  margin:var(--space-md) 0 0; padding:var(--space-sm) var(--space-md);
  border-left:3px solid var(--green); background:var(--bg);
  font-weight:700;
}
.complaint__links{
  display:flex; flex-wrap:wrap; gap:var(--space-2xs) var(--space-md);
  margin:var(--space-md) 0 0;
}
.complaint__links a{
  color:var(--blue-ink); font-weight:700; font-size:.94rem;
  text-decoration:underline; text-underline-offset:.16em;
}


/* Respondenti's rail nests: two heading pages with four children each. The
   indent and the lighter weight are the only difference from a top-level
   link -- it is the same .zad-rail component as Chci průzkum. */
.zad-rail__link--sub{
  padding-left:var(--space-md); font-size:.94rem; color:var(--muted);
}
.zad-rail__link--sub.is-current{color:var(--blue-ink)}

/* "Zrušit filtr" sits beside the submit rather than as a stray line under the
   form, now that every filter is in one form and one place clears them all. */
.finder__reset{
  color:var(--blue-ink); font-weight:700; font-size:.94rem;
  text-decoration:underline; text-underline-offset:.16em;
}

/* ---------- Děje se v oboru: two columns -------------------------------- */
/* Same width as Chci průzkum (.wrap--wide), the feed beside a sidebar holding
   everything that is not an article: the filters, the open positions, the
   signup. The filters were a strip across the top; they are navigation for the
   feed rather than part of it, and four facets stacked read better than four
   facets in a row. */
.hub-layout{display:grid; gap:var(--space-xl); align-items:start}
.hub-main, .hub-aside{min-width:0}
@media (min-width:1000px){
  .hub-layout{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .hub-aside{position:sticky; top:calc(var(--head-h) + var(--space-md))}
}
/* Stacked, the feed comes first: the sidebar is navigation and offers, and
   pushing four collapsed facets above the news inverts what the page is for. */
@media (max-width:999.98px){
  .hub-main{order:1}
  .hub-aside{order:2}
}
.hub-aside{display:grid; gap:var(--space-md); align-content:start}
/* In a 320px column the facets stack; they are a row only in the wide form. */
.hub-aside .facets{grid-template-columns:minmax(0,1fr)}
.hub-aside .finder{margin:0}

/* One panel shape for the sidebar, one brand colour each. */
.side-panel{
  padding:var(--space-md);
  border:1px solid var(--line); border-top:3px solid var(--sp, var(--blue));
  border-radius:6px; background:var(--bg);
}
/* The one panel in the rail that is an OFFER rather than a place to look
   something up (see _hub_aside.html). A solid tinted ground and a button
   separate it from the two reference panels under it, which stay plain white.
   Flat fill on purpose — no gradient. */
.side-panel--offer{
  background:var(--green-tint); border-color:transparent;
  border-top:0; border-left:4px solid var(--green);
  border-radius:0 6px 6px 0;
}
.side-panel--offer .side-panel__head{font-size:1.2rem; color:var(--green-ink)}
.side-panel--offer .side-panel__lede{color:var(--green-ink); opacity:.85}
.side-panel--offer .side-panel__list a{color:var(--green-ink)}
.side-panel--offer .side-panel__list li::before{background:var(--green)}
.side-panel--offer .side-panel__empty{color:var(--green-ink); opacity:.8}
.btn--offer{
  margin-top:var(--space-sm); background:var(--green-ink); color:#fff;
  font-size:.9rem; padding:9px 16px;
}
.btn--offer:hover{background:var(--ink); color:#fff}
.side-panel--blue{--sp:var(--blue)}
.side-panel--green{--sp:var(--green)}
.side-panel--red{--sp:var(--red)}
.side-panel__head{
  display:flex; align-items:baseline; gap:var(--space-2xs);
  margin:0 0 var(--space-2xs); font-size:1.12rem;
}
.side-panel__lede{margin:0 0 var(--space-sm); font-size:.94rem; color:var(--muted)}
/* The count is the point of the jobs panel: how many are open right now. */
.side-panel__count{
  padding:1px 8px; border-radius:999px; background:var(--sp); color:#fff;
  font-family:var(--font-head); font-size:.78rem; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.side-panel__list{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2xs)}
.side-panel__list li{position:relative; padding-left:1.1rem}
.side-panel__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--sp);
}
.side-panel__list a{color:var(--ink); font-weight:700; line-height:1.35}
.side-panel__list a:hover, .side-panel__list a:focus-visible{color:var(--sp)}
.side-panel__empty{margin:0; color:var(--muted); font-size:.94rem}
.side-panel .readmore{margin-top:var(--space-sm)}

.side-form{display:grid; gap:var(--space-2xs)}
.side-form__field{margin:0}
.side-form input[type=email], .side-form input[type=text]{
  font:inherit; width:100%; padding:10px var(--space-2xs);
  border:1px solid var(--line); border-radius:4px; background:var(--surface);
  color:var(--ink);
}
.side-form input:focus-visible{outline:2px solid var(--sp); outline-offset:1px}
.side-form button{justify-self:start}
/* the agency under a study's title, quieter than the link above it */
.side-panel__by{display:block; font-size:.82rem; font-weight:400; color:var(--muted)}

/* ---------- the hub's Období facet -------------------------------------- */
/* Two ways in: a year, or an exact range. Years first, because a 17-year
   archive is nearly always browsed by one. */
/* Years take the room, the exact range sits beside them. Without explicit
   columns this inherited .facet__body's auto-fill and squeezed seventeen years
   into two narrow columns with the rest of the row empty. */
.facet__body--period{display:grid; gap:var(--space-md); grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .facet__body--period{grid-template-columns:minmax(0,1fr) minmax(0,220px)}
}
.period__years{
  display:grid; gap:var(--space-2xs); align-content:start;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 116px), 1fr));
}
/* Tabular figures so a column of years lines up digit for digit. */
.chip--year{font-variant-numeric:tabular-nums}
/* No fieldset rule: a border-top under a legend draws a line THROUGH the
   label on every engine. The legend alone separates it. */
.period__range{border:0; margin:0; padding:0}
.period__range legend{
  padding:0; margin-bottom:var(--space-2xs);
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
/* Stacked, not side by side: in a 220px column the pair wrapped anyway and the
   dash between them ended up orphaned on its own line. */
.period__pair{display:grid; gap:var(--space-2xs)}
.period__pair .facet__date{min-width:0}
.period__pair .facet__date input{width:100%}

/* ---------- Veřejné mínění ---------------------------------------------- */
/* Intro beside a photo, then two columns: the section's seven pages, and the
   articles as a rail. */
/* stretch, not center, and the frame drops the homepage's 4/5 portrait ratio:
   the photo matches the height of the copy beside it instead of setting its
   own and leaving a band of white above and below the text. */
.vm-intro{display:grid; gap:var(--space-xl); align-items:stretch;
          margin-bottom:var(--space-xl)}
.vm-intro__copy, .vm-intro__photo{min-width:0}
.vm-intro__photo{display:flex; flex-direction:column; margin-top:0}
.vm-intro__photo .stats-photo-frame{
  aspect-ratio:auto; flex:1 1 auto; min-height:320px;
}
@media (min-width:900px){
  .vm-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
.vm-layout{display:grid; gap:var(--space-xl); align-items:start}
.vm-main, .vm-aside{min-width:0}
@media (min-width:1000px){
  .vm-layout{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .vm-aside{position:sticky; top:calc(var(--head-h) + var(--space-md))}
}
/* Stacked, the section's own pages come before the reading list beside them. */
@media (max-width:999.98px){
  .vm-main{order:1}
  .vm-aside{order:2}
}

/* The seven, as proper cards: an icon in a tinted disc, the title, a line of
   description and a stated affordance. */
.vm-guides{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-md);
  /* 250 gave three across and stranded the seventh alone on its own row;
     210 fits four in the same column, so seven land as 4 + 3. */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.vm-guide{
  position:relative; min-width:0;
  display:flex; flex-direction:column; gap:var(--space-2xs);
  padding:var(--space-lg) var(--space-md) var(--space-md);
  border:1px solid var(--line); border-top:3px solid var(--vmc);
  border-radius:6px; background:var(--bg);
  transition:box-shadow .15s var(--ease), transform .15s var(--ease),
             border-color .15s var(--ease);
}
.vm-guide:nth-child(3n+1){--vmc:var(--blue);  --vmc-tint:var(--blue-tint)}
.vm-guide:nth-child(3n+2){--vmc:var(--green); --vmc-tint:var(--green-tint)}
.vm-guide:nth-child(3n+3){--vmc:var(--red);   --vmc-tint:var(--red-tint)}
/* Lucide line icons: stroked, not filled, so the disc is a tint behind them
   rather than a solid the stroke would disappear into. */
.vm-guide__icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:var(--space-2xs);
  border-radius:50%; background:var(--vmc-tint); color:var(--vmc);
  transition:transform .15s var(--ease);
}
.vm-guide__icon svg{width:26px; height:26px}
.vm-guide__title{margin:0; font-size:1.12rem; line-height:1.3}
.vm-guide__title a{color:var(--ink)}
.vm-guide__title a::after{content:""; position:absolute; inset:0}
.vm-guide__text{margin:0; font-size:.92rem; line-height:1.5; color:var(--muted)}
/* pinned to the bottom so the seven affordances line up whatever the copy length */
.vm-guide__go{margin-top:auto; padding-top:var(--space-2xs);
              font-size:.9rem; font-weight:700; color:var(--vmc)}
.vm-guide__go::after{content:" →"}
.vm-guide:hover, .vm-guide:focus-within{
  border-color:var(--vmc); box-shadow:var(--shadow-card-hover); transform:translateY(-2px);
}
.vm-guide:hover .vm-guide__icon, .vm-guide:focus-within .vm-guide__icon{transform:scale(1.08)}
.vm-guide:hover .vm-guide__title a, .vm-guide:focus-within .vm-guide__title a{color:var(--vmc)}


/* ---------- Předvolební výzkumy: the index -------------------------------- */
/* A list of the association's own published material, not an article. */
.pv-index{list-style:none; margin:var(--space-lg) 0 0; padding:0; display:grid; gap:var(--space-sm)}
.pv-index__item{
  display:grid; gap:2px; padding:var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left:3px solid var(--blue); border-bottom:1px solid var(--line);
}
.pv-index__item:last-child{border-bottom:0}
.pv-index__item > a{color:var(--ink); font-weight:700; font-size:1.02rem; line-height:1.35}
.pv-index__item > a:hover, .pv-index__item > a:focus-visible{color:var(--blue-ink)}
.pv-index__meta{font-size:.84rem; color:var(--muted)}

/* The editor-only "add a year" link at the foot of the Standardy rail. Reads as
   an action, not a page: dashed, accent-coloured, and it never renders outside
   the editor frame (see _kontroly_add_url). */
.zad-rail__add{
  display:block; margin-top:var(--space-2xs); padding:var(--space-2xs) 0;
  border-top:1px dashed var(--line); color:var(--blue-ink);
  font-weight:700; font-size:.9rem;
}
.zad-rail__add:hover{text-decoration:underline}

/* The consent line of the panel-interest form: checkbox and sentence on one
   line, wrapping under itself, not a full-width text input. */
/* ONLINE PANELS, where the second form used to be. Kateřina, 2026-09-23: the
   form that collected a name and an e-mail for SIMAR to forward is replaced by
   the answer itself — the agencies that actually run a panel. It keeps the
   complaint box's shape and its blue (Marek, 2026-09-10: "change the second
   form to blue"), so the pair still reads as a pair. */
.pv-panels{padding-top:var(--space-lg)}
.pv-panels__inner{
  padding:var(--space-lg);
  border:1px solid var(--line); border-top:3px solid var(--blue-ink);
  border-radius:6px; background:var(--bg);
}
.pv-panels__head{margin:0 0 var(--space-2xs); font-size:1.5rem}
.pv-panels__lede{max-width:70ch}
.pv-panels__lede p{margin:0}
/* The agencies that run a panel, as their own logos. A row of six names was
   a list; a row of six logos is the answer to "who runs one", read at a
   glance — Marek, 2026-09-24. auto-fit rather than a fixed column count so
   the row reflows as agencies are added or drop off, which is the whole point
   of reading it off Agency.panel_url instead of a typed list. */
.pv-panels__grid{
  margin:var(--space-lg) 0 0; padding:0; list-style:none;
  display:grid; gap:var(--space-sm);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.pv-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-2xs); height:100%; padding:var(--space-md) var(--space-sm);
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
  text-align:center; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pv-panel:hover, .pv-panel:focus-visible{
  border-color:var(--blue); box-shadow:var(--shadow-card-hover);
}
/* A fixed box, not a fixed width: the logos are a mix of tall SVGs and wide
   PNGs, and letting each size itself made the row of cards ripple. */
.pv-panel img{
  width:100%; max-width:130px; height:40px; object-fit:contain; display:block;
}
.pv-panel__name{
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; min-height:40px;
}
.pv-panel__label{font-size:.85rem; color:var(--muted)}
.pv-panel:hover .pv-panel__label{color:var(--blue-ink)}
.pv-panels__more{margin-top:var(--space-md); font-size:.92rem}
.pv-panels__more p{margin:0}
.complaint__consent label{display:flex; gap:.6rem; align-items:flex-start; font-weight:500; cursor:pointer}
.complaint__consent input[type=checkbox]{margin-top:.3em; flex:0 0 auto; width:1.1em; height:1.1em}

/* Štítky: a tag on an article is a link to the hub filtered by it. */
.pill--tag{background:var(--red-tint, #fdeaea); color:var(--red-text); border-color:transparent; text-decoration:none}
.pill--tag:hover, .pill--tag:focus-visible{background:var(--red); color:#fff}
.hub-tagbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 var(--space-sm); font-size:.94rem}
.hub-tagbar__label{color:var(--muted); font-weight:600}
.hub-tagbar__clear{margin-left:auto; color:var(--blue-ink); font-weight:600}

/* ===========================================================================
   Cookie lišta a okno s nastavením (web/templates/web/_consent.html).

   Tvar podle toho, jak to dělají jiní — ČNB, MPSV, Cookiebot, projité v
   prohlížeči 2026-10-04. Pruh PŘES CELOU ŠÍŘKU dole, ne zaoblená karta
   uprostřed: karta se čte jako upozornění, pruh se čte jako cookie lišta
   (Marek: "takhle absolutně nevypadá cookies lišta"). Podrobnosti v modálním
   okně, ne v rozbalovací části pruhu.

   Plné výplně, jeden akcent z tokenů webu. Žádný přechod, žádná záře.
   =========================================================================== */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:900;
  padding:0 0 var(--space-md);pointer-events:none}
.cc[hidden]{display:none!important}   /* autorské pravidlo nesmí přebít [hidden] */
/* PRUH, ALE NE PŘES CELOU ŠÍŘKU (Marek, 2026-10-04: "ať ta lišta prosím není
   úplně přes celou šíři, to vypadá trochu divně"). Odsazený ode všech tří
   stran a zarovnaný na stejnou šířku jako obsah webu, takže jeho levý okraj
   lícuje s logem a nav nad ním místo aby končil v prázdnu u okraje obrazovky.
   Hustota řádku zůstává: nadpis a text vlevo, tři tlačítka vpravo — to je to,
   co ji odlišuje od zaoblené kartičky, kterou jsem zkoušel předtím. */
/* Šířka počítaná stejně jako u .wrap (max-width:--maxw, padding-inline:24px),
   aby levý okraj lišty seděl na sloupec obsahu při KAŽDÉ šířce okna, ne jen
   při té, na které jsem se díval: s pevným odsazením na .cc se při 1280 px
   rozešel o 4 px. Zároveň zůstává okraj od kraje obrazovky, bez kterého by
   plovoucí pruh nevypadal jako plovoucí. */
.cc__inner{max-width:var(--maxw);width:calc(100% - 40px);margin:0 auto;
  pointer-events:auto;
  background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--blue);
  border-radius:var(--radius);
  box-shadow:0 18px 44px -20px rgba(22,32,43,.45);
  display:flex;align-items:center;gap:var(--space-lg);
  padding:var(--space-sm) var(--space-md)}
.cc__text{flex:1 1 auto;min-width:0}
.cc__title{display:block;font-family:var(--font-head);font-size:1rem;
  color:var(--ink);margin-bottom:3px}
.cc__text p{margin:0;font-size:.88rem;line-height:1.55;color:var(--muted);
  max-width:86ch}
.cc__link{color:var(--blue-ink);text-decoration:underline;white-space:nowrap}
.cc__acts{display:flex;gap:var(--space-2xs);flex-shrink:0;flex-wrap:wrap}
.cc__btn{font:600 .88rem/1 var(--font-body);padding:12px 20px;
  border-radius:var(--radius-sm);border:1px solid var(--blue);
  background:var(--blue);color:#fff;cursor:pointer;white-space:nowrap}
.cc__btn:hover{filter:brightness(.94)}
.cc__btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cc__btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.cc__btn--ghost:hover{background:var(--surface);filter:none}

@media (max-width:860px){
  .cc{padding:0 var(--space-2xs) var(--space-2xs)}
  .cc__inner{flex-direction:column;align-items:stretch;gap:var(--space-sm);
    padding:var(--space-sm);max-height:70vh;overflow-y:auto}
  .cc__acts{flex-direction:column-reverse}
  .cc__btn{width:100%;text-align:center}
}

/* --- okno s nastavením --------------------------------------------------- */
.ccm{position:fixed;inset:0;z-index:1000;background:rgba(16,20,26,.55);
  display:flex;align-items:center;justify-content:center;padding:var(--space-md)}
.ccm[hidden]{display:none!important}
.cc-locked{overflow:hidden}        /* pozadí se pod otevřeným oknem neposouvá */
.ccm__box{background:var(--bg);border-radius:var(--radius);width:min(620px,100%);
  max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px -24px rgba(16,20,26,.5)}
.ccm__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);padding:var(--space-md) var(--space-md) var(--space-xs);
  border-bottom:1px solid var(--line)}
.ccm__title{margin:0;font-family:var(--font-head);font-size:1.15rem;color:var(--ink)}
.ccm__close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 4px}
.ccm__close:hover{color:var(--ink)}
.ccm__body{overflow-y:auto;padding:var(--space-sm) var(--space-md)}
.ccm__lede{margin:0 0 var(--space-sm);font-size:.9rem;line-height:1.55;color:var(--muted)}
.ccm__row{padding:var(--space-sm) 0;border-top:1px solid var(--line)}
.ccm__row-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);margin-bottom:4px}
.ccm__row-head strong{font-size:.98rem;color:var(--ink)}
.ccm__row p{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.ccm__always{font-size:.82rem;color:var(--muted);white-space:nowrap}
.ccm__more{margin:var(--space-sm) 0 0;font-size:.86rem}
.ccm__more a{color:var(--blue-ink);text-decoration:underline}
.ccm__foot{display:flex;gap:var(--space-2xs);justify-content:flex-end;
  padding:var(--space-sm) var(--space-md) var(--space-md);
  border-top:1px solid var(--line)}

.ccm__switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  white-space:nowrap}
.ccm__switch input{position:absolute;opacity:0;width:0;height:0}
.ccm__slider{width:42px;height:24px;border-radius:999px;background:var(--line);
  position:relative;transition:background .15s var(--ease);flex:0 0 auto}
.ccm__slider::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .15s var(--ease);
  box-shadow:0 1px 2px rgba(16,20,26,.3)}
.ccm__switch input:checked + .ccm__slider{background:var(--green)}
.ccm__switch input:checked + .ccm__slider::after{transform:translateX(18px)}
.ccm__switch input:focus-visible + .ccm__slider{outline:2px solid var(--blue);outline-offset:2px}
/* Stav slovem, ne jen barvou: samotná barva přepínače je pro část lidí
   nečitelná a pro čtečku neexistuje. */
.ccm__state::after{content:"Vypnuto";font-size:.82rem;color:var(--muted)}
.ccm__switch input:checked ~ .ccm__state::after{content:"Zapnuto";color:var(--green-ink)}
html[lang="en"] .ccm__state::after{content:"Off"}
html[lang="en"] .ccm__switch input:checked ~ .ccm__state::after{content:"On"}

@media (max-width:560px){
  .ccm{padding:0;align-items:flex-end}
  .ccm__box{max-height:92vh;border-radius:var(--radius) var(--radius) 0 0}
  .ccm__foot{flex-direction:column-reverse}
  .ccm__foot .cc__btn{width:100%;text-align:center}
}

/* ---------------------------------------------------------------------------
   An embed nobody has consented to yet.

   NOT a fake player. Marek, 2026-10-02, on the card the earlier click-to-load
   version used for everything: "takhle se vsechno loaduje jako video a vypada
   to absolutne priserne, kdyz se to snazime recreatnout sami." So this says
   what it is in words, offers the two honest choices, and keeps a plain link to
   the post on the platform for anyone who would rather not load anything here.
   --------------------------------------------------------------------------- */
.mm-embed--ask{height:auto!important;aspect-ratio:auto!important;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-md);
  display:flex;flex-direction:column;gap:var(--space-xs);align-items:flex-start}
.mm-ask__label{font:600 .78rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.mm-ask__text{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink);max-width:68ch}
.mm-ask__acts{display:flex;gap:var(--space-2xs);align-items:center;flex-wrap:wrap}
.mm-ask__btn{font:600 .88rem/1 var(--font-body);padding:10px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer}
.mm-ask__btn:hover{filter:brightness(.94)}
.mm-ask__btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.mm-ask__btn--ghost:hover{background:var(--bg);filter:none}
.mm-ask__away{font-size:.85rem;color:var(--blue-ink);text-decoration:underline}

/* The two tables on /cookies/. Plain rules, no zebra — they are short and read
   as prose, and the page is the one place a visitor goes to be told facts. */
.ck{width:100%;border-collapse:collapse;margin:var(--space-sm) 0;font-size:.92rem}
.ck th,.ck td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line)}
.ck th{font-family:var(--font-head);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.ck td code{font-size:.86em;background:var(--surface);padding:1px 5px;border-radius:4px;
  overflow-wrap:anywhere}
.ck td:first-child{white-space:nowrap}
@media (max-width:640px){
  .ck th,.ck td{display:block;border-bottom:0;padding:2px 0}
  .ck thead{display:none}
  .ck tbody tr{display:block;padding:var(--space-2xs) 0;border-bottom:1px solid var(--line)}
  .ck td:first-child{white-space:normal;font-weight:600}
}

/* PANEL, KTERÝ PÍŠE KLIENT.
   .side-panel--rich mapuje výstup richtextu na TOTÉŽ, co panely nesou ve své
   vlastní značce: nadpis jako .side-panel__head, seznam jako .side-panel__list
   i s barevnou tečkou v barvě rámečku, odkazy jako v panelu. Bez toho vypadal
   obsah psaný klientem jako cizí těleso v rámečku, který ho obklopuje —
   Marek, 2026-10-04: "to prostě musí mít nějakou ustálenou logiku a design,
   kterou již nesou tyto side panely."
   Platí pro jakýkoli .side-panel, ne jen pro ten jeden na /verejne-mineni/. */
.side-panel--rich{min-width:0}
/* Klient píše, co chce, a rámeček je 320 px široký: jedno dlouhé slovo nebo
   nalepená adresa jinak vyjede ven. Měřeno na živé stránce 2026-10-04. */
.side-panel--rich :is(p,li,h2,h3,h4,a){overflow-wrap:anywhere}
.side-panel--rich :is(h2,h3,h4){
  margin:0 0 var(--space-2xs); font-family:var(--font-head); font-size:1.12rem;
  line-height:1.25; color:var(--ink);
}
.side-panel--rich :is(h2,h3,h4):not(:first-child){margin-top:var(--space-sm)}
.side-panel--rich p{margin:0 0 var(--space-2xs); font-size:.94rem; line-height:1.5;
  color:var(--muted)}
.side-panel--rich > :last-child{margin-bottom:0}
.side-panel--rich ul{list-style:none; margin:0 0 var(--space-2xs);
  padding:0; display:grid; gap:var(--space-2xs)}
.side-panel--rich ul li{position:relative; padding-left:1.1rem; line-height:1.35}
.side-panel--rich ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--sp, var(--blue));
}
/* Číslovaný seznam si čísla nechá — je to jiné sdělení než odrážka. */
.side-panel--rich ol{margin:0 0 var(--space-2xs); padding-left:1.3rem;
  display:grid; gap:var(--space-2xs)}
.side-panel--rich ol li{line-height:1.35}
.side-panel--rich li{font-size:.94rem}
/* Odkaz v seznamu je položka seznamu, jako v panelech psaných ručně; odkaz
   uvnitř odstavce zůstává podtržený, aby šel v souvislém textu poznat. */
.side-panel--rich li a{color:var(--ink); font-weight:700; text-decoration:none}
.side-panel--rich li a:hover, .side-panel--rich li a:focus-visible{color:var(--sp, var(--blue))}
.side-panel--rich p a{color:var(--blue-ink); text-decoration:underline}
.side-panel--rich :is(strong,b){color:var(--ink)}
/* Prázdný odstavec nebo položka seznamu — editor je nechá vzniknout jedním
   Enterem navíc — by jinak nakreslily odrážku bez textu nebo mezeru, kterou
   nikdo nenapsal. */
.side-panel--rich :is(p,li):empty{display:none}
.side-panel--rich li:empty::before{display:none}

/* Rámeček se neukáže, dokud do něj klient nenapíše. Funguje to jen proto, že
   šablona nenechává uvnitř prvku ŽÁDNOU mezeru — jeden konec řádku tam dal
   prázdný modrý obdélník na živé stránce. */
.vm-aside__box--own:empty{display:none}
.vm-aside__box--own:not(:empty){margin-top:var(--space-md)}

/* Výchozí umístění příloh na konci <main> (base.html) — pro stránky, které si
   je nedávají do vlastního sloupce. Odsazení, aby nelepily na předchozí sekci. */
.att-tail{margin:var(--space-lg) auto var(--space-xl)}

/* Rail jako rozbalovátko pod 900 px (web/static/web/js/rail.js).
   Nad zlomem je to sloupec vedle textu a tlačítko nemá co dělat; pod ním je to
   sedm odkazů nad článkem, které čtenář musí přerolovat. */
.zad-rail__toggle{display:none}
@media (max-width:899px){
  .zad-rail__toggle{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-2xs);
    width:100%; padding:10px var(--space-2xs); border:0; border-radius:4px;
    background:none; cursor:pointer; color:var(--ink);
    font:700 .82rem/1.3 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  }
  .zad-rail__chevron{
    width:9px; height:9px; flex:none; border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .15s var(--ease);
  }
  .zad-rail[data-open="1"] .zad-rail__chevron{transform:rotate(225deg) translate(-2px,-2px)}
  /* Zavřený rail je jen to tlačítko. Otevřený vypadá jako dřív. */
  .zad-rail[data-open="0"] > :not(.zad-rail__toggle){display:none}
  .zad-rail[data-open="0"]{padding:0}
  /* Jméno sekce nese tlačítko, takže hlavička railu by ho říkala podruhé —
     a odkaz na sekci je stejně o řádek výš v drobečkové navigaci. */
  .zad-rail__parent{display:none}
}