/* 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-soft); 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:#2889CA; 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}

.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)}
.nav__group--obor{--nav-accent:var(--green)}
.nav__group--verejnost{--nav-accent:var(--red)}

.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); color:#fff}
.lang button:not(.on):hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-block:var(--space-lg) 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); 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); color:var(--blue)}

.hero-visual{position:relative; padding:22px 18px 18px 0}
.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}
.card__media--tz{background:linear-gradient(135deg,var(--blue-tint),var(--bg)); color:var(--blue)}
.card__media--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__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); 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}
.section-head--news h2{display:flex; align-items:center; gap:.55em; margin-bottom:.6em}
.section-head__icon{
  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)}
.readmore--green{color:var(--green-ink)}
.readmore--blue{color:var(--blue)}

.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)}
.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); 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)}
.news-card--blue{border-left-color:var(--blue)}
.news-card--red{border-left-color:var(--red)}
.news-card__media{position:relative; z-index:1; height:150px; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:var(--space-sm)}
.news-card__media img{width:100%; height:100%; object-fit:cover; display:block}
.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)}
.stat-ico--green{color:var(--green)}
.stat-ico--red{color:var(--red)}
/* 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)}
.pillar-ico--green{color:var(--green)}
.pillar-ico--red{color:var(--red)}
.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)}
.stat-tile--green .stat-tile__value{color:var(--green)}
.stat-tile--red .stat-tile__value{color:var(--red)}
/* colored left-bar like the news lead cards (overrides the grey --line from .stat-tile) */
.stat-tile--blue{border-left-color:var(--blue)}
.stat-tile--green{border-left-color:var(--green)}
.stat-tile--red{border-left-color:var(--red)}
.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); 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)}
.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)}
.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-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;
  width: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}
}

.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-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)}
.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:#8b98a5}

/* ---------- 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}
  .head-sections .nav{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  .head-sections .nav a{white-space:nowrap}
  .nav__group{flex:0 0 auto}
}

@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}
  .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); 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); }

.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); 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. */
.agency-card__logo { display: flex; align-items: center; height: 56px; }
.agency-card__logo img { max-height: 100%; max-width: 180px; width: auto;
                         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: 1.5rem; align-items: center;
               margin-bottom: 1.5rem; }
.agency-head > div { min-width: 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); }

/* 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); 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); }
.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); color:var(--red)}
.file-row__ext--doc, .file-row__ext--docx{border-color:var(--blue); color:var(--blue)}
.file-row__ext--xls, .file-row__ext--xlsx, .file-row__ext--csv{border-color:var(--green); color:var(--green)}
/* 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)}
.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); 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)}
.pillar--green{border-top-color:var(--green)}
.pillar--red{border-top-color:var(--red)}

@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); font-weight: 700; }

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

/* 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)}
/* The content column caps at a reading measure and the RAIL TAKES THE SLACK,
   which is why the rail track is 1fr and the content track is the fixed one —
   the reverse of .vm-layout, and deliberately.

   Capping the content inside a 1fr column instead left 116px of unused column
   plus the gutter: a 180px hole between the text and the rail, with both still
   pinned to the page edges. Marek: "the huge empty gap between the content and
   the navbar". Letting the rail grow into it closes the hole and keeps both
   edges aligned with the header and footer, which moving the rail left would
   have broken.

   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{
    /* The rail is a fixed 320 and the CONTENT takes the remainder — back to
       the .vm-layout shape. It only had to be the other way round while the
       block spanned .wrap--wide: there the leftover had to go somewhere, and
       giving it to the rail was what made the rail look stretched. At .wrap
       there is no leftover to place. */
    grid-template-columns:minmax(0,1fr) 320px;
    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{opacity:.75}
/* 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)}
.osimar-goal--green{border-left-color:var(--green)}
.osimar-goal--red{border-left-color:var(--red)}

/* --- 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)}
/* 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); 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)} .osimar-fact--blue dd{color:var(--blue)}
.osimar-fact--green{border-left-color:var(--green)} .osimar-fact--green dd{color:var(--green)}
.osimar-fact--red{border-left-color:var(--red)} .osimar-fact--red dd{color:var(--red)}
.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);
  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)}
.person--green{border-top-color:var(--green)}
.person--red{border-top-color:var(--red)}
/* 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);
}
.prose > h4{font-size:1rem; margin:1.2em 0 .3em; color:var(--muted);
            text-transform:uppercase; letter-spacing:.06em; font-size:.8rem}
/* 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);
}
.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); 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}
/* 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)}
.osimar-prose > ol > li:nth-child(3n+2){border-left-color:var(--green)}
.osimar-prose > ol > li:nth-child(3n+3){border-left-color:var(--red)}

/* 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.

   The image itself is floated rather than its paragraph, because the two logos
   sit in DIFFERENT shapes: ESOMAR is alone in its <p> with the text in the next
   one, while the Hospodářská komora logo is inline at the start of the same <p>
   as its text. Floating the image covers both — the float escapes the empty
   paragraph in the first case and wraps the sibling text in the second. */
.osimar-prose img{
  float:left; margin:.2em var(--space-md) var(--space-sm) 0; max-width:180px; height:auto;
}
/* Both logos are <figure> now (mm_cms_wrap_images made every content image the
   same thing, so the editor stops showing two kinds). A figure's BROWSER
   default is margin:1em 40px, which indented them from the text column — the
   page's own `.prose figure` rule sets margin:1.4em 0, and .osimar-prose is
   not .prose. Zero, not 1.4em: the image inside is floated and carries its own
   margins, so a margin on the (zero-height) figure only pushes the float down. */
.osimar-prose figure{margin:0}
/* 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 img{float:none; 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)}
.standardy-branch--green{border-top-color:var(--green)}
.standardy-branch--red{border-top-color:var(--red)}
.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)}
.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;
}
/* 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 h3{margin:0 0 var(--space-xs)}
.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)}
.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)}
.standardy-notice__col--nonmember{border-left-color:var(--red)}
.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)}
.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)}
/* 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); 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 against a common right
   edge. Selection is the box filling with the facet's colour and the row
   tinting behind it — the same colour language as before, but the rows now
   line up instead of each being as wide as its own words. */
.chip{
  display:grid; grid-template-columns:16px minmax(0,1fr) auto;
  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}
.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); 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 > h3{margin:0; font-size:1.15rem; line-height:1.3}
.resource > h3 a{color:var(--ink)}
.resource > h3 a:hover, .resource > h3 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)}
.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); background:var(--bg)}
.zad-rail__link.is-current{
  color:var(--blue); font-weight:700;
  background:var(--bg); border-left-color:var(--blue);
}

/* 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}
.zad-published{margin:var(--space-md) 0 0; color:var(--muted); font-size:.82rem}


/* 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); color:var(--blue)}
.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__body{padding:var(--space-md)}
.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); 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)}

/* ---------- 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;
}
@media (min-width:820px){
  .desatero > ol{
    grid-template-columns:repeat(2, minmax(0,1fr));
    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)}

/* ---------- 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}
}

/* ---------- 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); 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)}

/* "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); 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);
}
.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)}
.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);
  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. */
/* The second form (zájem o panel) is BLUE; the complaint above it keeps red.
   Marek, 2026-09-10: "change the second form to blue". Same component, one
   colour swapped in the three places the red appears. */
.complaint--panel .complaint__inner{border-top-color:var(--blue)}
.complaint--panel .complaint__field input, .complaint--panel .complaint__field textarea{border-color:var(--blue)}
.complaint--panel .complaint__field input:focus-visible, .complaint--panel .complaint__field textarea:focus-visible{outline-color:var(--blue)}
.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); 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); font-weight:600}