/* TRIMA NEWS — vizuální styl "Hlavička novin" (2B) */
:root{
  --paper:#fffdfa; --ink:#141312; --ink-soft:#2e2a26; --muted:#6b6259;
  --rule:#dcd6cc; --rule-strong:#141312; --red:#c1121f; --red-dark:#8d0d17;
  --field:#b8b0a4; --note:#f7f2ea; --dark:#141312;
  --serif:'Newsreader',Georgia,serif; --sans:'Archivo',system-ui,sans-serif;
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55}
img{display:block;max-width:100%}
a{color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:rgba(193,18,31,.22)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:40px;padding-right:40px}
.gs{filter:grayscale(1) contrast(1.05)}
.nvlink{color:inherit;text-decoration:none}
.nvlink:hover{color:var(--red)}
.kicker{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.kicker--muted{color:var(--muted)}
.rule{height:3px;background:var(--red)}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* hlavička */
.topbar{border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.topbar__links{display:flex;gap:18px;align-items:center}
.masthead{border-bottom:3px double var(--rule-strong);text-align:center}
.masthead .wrap{padding-top:36px;padding-bottom:22px}
.masthead__name{font-family:var(--serif);font-size:64px;line-height:1;letter-spacing:.02em;font-weight:500;margin:0}
.masthead__name a{color:inherit;text-decoration:none}
.masthead__tag{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.mainnav{border-bottom:1px solid var(--rule)}
.mainnav .wrap{display:flex;justify-content:center;gap:36px;padding-top:12px;padding-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mainnav a[aria-current="page"]{color:var(--red)}

/* hero */
.hero{display:grid;grid-template-columns:1.6fr 1fr;border-bottom:1px solid var(--rule);max-width:var(--wrap);margin:0 auto}
.hero--jobs{grid-template-columns:1.5fr 1fr}
.hero__main{padding:56px 40px;border-right:1px solid var(--rule)}
.hero__side{padding:56px 40px;display:flex;flex-direction:column;gap:24px}
h1.display{font-family:var(--serif);font-weight:500;font-size:68px;line-height:1.04;letter-spacing:-.015em;margin:0 0 20px;max-width:16ch}
.hero--jobs h1.display{font-size:60px}
.dash{width:80px;height:2px;background:var(--red);margin-bottom:22px}
.lead{font-family:var(--serif);font-size:20px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;max-width:56ch}
.lead:last-of-type{margin-bottom:26px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* tlačítka */
.btn{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.04em;padding:14px 20px;text-decoration:none;border:0;cursor:pointer}
.btn--primary{background:var(--red);color:var(--paper)}
.btn--primary:hover{background:var(--red-dark);color:var(--paper)}
.btn--outline{border:2px solid var(--ink);color:var(--ink);padding:12px 20px}
.btn--outline:hover{background:var(--ink);color:var(--paper)}
.btn--light{background:var(--paper);color:var(--red)}

/* čísla */
.stat__num{font-family:var(--serif);font-size:46px;line-height:1}
.stat__num--sm{font-size:32px}
.stat__label{font-size:12px;color:var(--muted);letter-spacing:.04em}
.stat-row{display:flex;gap:28px}
.source{font-size:12px;color:var(--muted);line-height:1.6}

/* sekce */
.section{max-width:var(--wrap);margin:0 auto;padding:48px 40px}
.section--tight{padding-top:0}
.section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
h2.section__title{font-family:var(--serif);font-weight:500;font-size:38px;margin:0}
.section__more{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}

/* seznam titulů */
.titles{display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px}
.titles__item{display:block;border-bottom:1px solid var(--rule);padding:16px 0}
.titles__item:nth-last-child(-n+3){border-bottom:0}
.titles__name{font-family:var(--serif);font-size:22px}
.titles__region{font-size:12px;color:var(--muted)}

/* dvousloupec */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.linklist{display:flex;flex-direction:column}
.linklist a{border-bottom:1px solid var(--rule);padding:14px 0;font-family:var(--serif);font-size:20px}
.linklist a:last-child{border-bottom:0}

/* vedení */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.team img{width:100%;max-width:190px;height:auto;display:block;margin-bottom:10px}
.team__name{font-family:var(--serif);font-size:20px}
.team__role{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.team a{font-size:13px;text-decoration:none}
/* Portréty jsou odbarvené, při najetí se vrátí do původní barvy. Přechod jde
   oběma směry (najetí i odjetí), aby to nepůsobilo trhaně, a respektuje
   nastavení „omezit pohyb" v systému. (Matěj 1. 8. 2026) */
.team img{transition:filter .35s ease}
.team div:hover img.gs,
.team img.gs:focus-visible{filter:none}
@media (prefers-reduced-motion:reduce){ .team img{transition:none} }

/* červený inzerát */
.poster{background:var(--red);color:var(--paper)}
.poster .wrap{padding:52px 40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.poster h2{font-family:var(--serif);font-weight:500;font-size:46px;line-height:1.06;margin:0 0 10px;max-width:20ch}
.poster p{font-size:14px;margin:0;opacity:.9}
.poster .kicker{color:rgba(255,253,250,.85)}

/* formuláře */
.form{display:flex;flex-direction:column;gap:16px;max-width:460px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--field);background:#fff;padding:11px 12px;font-family:var(--sans);font-size:15px;border-radius:0}
.field textarea{resize:vertical}
.form .btn{align-self:flex-start}
.form__note{font-size:12px;color:var(--muted);line-height:1.5}
.hp{position:absolute;left:-9999px}
.flash{border:1px solid var(--field);background:var(--note);padding:14px 16px;font-size:14px;margin-bottom:20px}
.flash--err{border-color:var(--red);color:var(--red-dark)}
/* V tmavé sekci dědí hláška bílé písmo, ale pozadí má světlé — text pak nebyl
   vidět. Barvy se proto uvnitř .dark určují napevno. (1. 8. 2026) */
.dark .flash{color:#141312;border-color:#c9c2b6}
.dark .flash--err{color:var(--red-dark)}

/* tmavý blok s náborovým formulářem */
.dark{background:var(--dark);color:var(--paper)}
.dark .wrap{padding:52px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.dark h2{font-family:var(--serif);font-weight:500;font-size:42px;margin:0 0 10px;max-width:18ch}
.dark p{font-size:14px;color:#b8b0a6;margin:0}
.dark .field label{color:#b8b0a6}
.dark .field input,.dark .field select{border-color:#55504a;background:#1d1b19;color:var(--paper)}
.dark .form{max-width:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* pozice a nabídka */
.joblist{display:flex;flex-direction:column}
.joblist>div{border-bottom:1px solid var(--rule);padding:12px 0}
.joblist>div:last-child{border-bottom:0}
.joblist__title{font-family:var(--serif);font-size:21px}
.joblist__meta{font-size:12px;color:var(--muted)}
h3.label{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.ticks{display:flex;flex-direction:column}
.ticks>li{list-style:none;border-top:1px solid var(--rule);padding:12px 0;font-family:var(--serif);font-size:19px}
.ticks>li:last-child{border-bottom:1px solid var(--rule)}
.ticks{margin:0;padding:0}
.videorow{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.videorow video{width:100%;background:var(--dark)}

/* právní stránky */
.legal{max-width:820px;margin:0 auto;padding:56px 40px 64px}
.legal h1{font-family:var(--serif);font-weight:500;font-size:54px;line-height:1.05;margin:0 0 14px}
.legal__meta{font-size:12px;color:var(--muted);letter-spacing:.04em;margin:10px 0 34px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:26px;margin:34px 0 10px}
.legal h3{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin:24px 0 8px}
.legal p,.legal li{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink-soft)}
.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}
.note{border:1px solid var(--field);background:var(--note);padding:18px 20px;font-family:var(--sans);font-size:14px;line-height:1.6;color:#3a352f}

/* patička */
.footer{border-top:3px double var(--rule-strong)}
.footer .wrap{padding:36px 40px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;font-size:13px;line-height:1.8}
.footer strong{display:block;margin-bottom:8px}
.footer .muted{color:var(--muted)}
.footer__links{display:flex;flex-direction:column}
.footer__bar{border-top:1px solid var(--rule)}
.footer__bar .wrap{padding:14px 40px;font-size:12px;color:var(--muted);display:block}

@media (max-width:1000px){
  .hero,.hero--jobs{grid-template-columns:1fr}
  .hero__main{border-right:0;border-bottom:1px solid var(--rule)}
  .titles{grid-template-columns:repeat(2,1fr)}
  .titles__item:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .team{grid-template-columns:repeat(3,1fr)}
  .footer .wrap{grid-template-columns:1fr 1fr}
  .dark .wrap{grid-template-columns:1fr}
  .videorow{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wrap,.hero__main,.hero__side,.section,.legal,.poster .wrap,.dark .wrap,.footer .wrap,.footer__bar .wrap{padding-left:20px;padding-right:20px}
  .masthead__name{font-size:38px}
  h1.display,.hero--jobs h1.display{font-size:40px}
  .legal h1{font-size:34px}
  h2.section__title,.poster h2,.dark h2{font-size:28px}
  .mainnav .wrap{flex-wrap:wrap;gap:14px 20px}
  .titles,.cols2,.team,.grid2,.poster .wrap,.footer .wrap{grid-template-columns:1fr}
  .poster .wrap{align-items:start}
  .team{gap:20px}
}

/* ── Stránka „O Drbně" ─────────────────────────────────────────────────────
   Kruhové grafy jsou kreslené jako SVG přímo v šabloně — žádná knihovna,
   žádné volání ven. Kruh je poskládaný z výsečí pomocí stroke-dasharray:
   každá výseč zabírá díl obvodu odpovídající svému procentu. */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:42px 48px;margin-top:8px}
.chart__h{font-family:var(--serif);font-size:21px;margin:0 0 14px}
.chart__body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.chart svg{display:block}
.chart__legend{list-style:none;margin:0;padding:0;font-size:14px}
.chart__legend li{display:flex;align-items:baseline;gap:9px;padding:4px 0;border-bottom:1px solid var(--rule)}
.chart__legend li:last-child{border-bottom:0}
.chart__dot{width:11px;height:11px;flex:0 0 11px;display:inline-block;transform:translateY(1px)}
.chart__pct{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart__note{font-size:14px;color:var(--ink-soft);margin:14px 0 0}
.src{font-size:13px;color:var(--muted);margin-top:20px}

/* Čtyři čísla vedle sebe; na užších displejích se zalomí na dvě řady. */
.stats--row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats--row .stat{padding:22px 24px 20px;border-left:1px solid var(--rule)}
.stats--row .stat:first-child{border-left:0}
.stats--row .stat__num{font-family:var(--serif);font-size:32px;line-height:1.1}
.stats--row .stat__lbl{font-size:13px;color:var(--muted);margin-top:6px}

@media (max-width:900px){
  .charts{grid-template-columns:1fr;gap:34px}
  .stats--row{grid-template-columns:1fr 1fr}
  .stats--row .stat:nth-child(3){border-left:0}
  .stats--row .stat:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:520px){
  .chart__body{grid-template-columns:1fr;justify-items:start}
  .stats--row{grid-template-columns:1fr}
  .stats--row .stat{border-left:0;border-top:1px solid var(--rule)}
  .stats--row .stat:first-child{border-top:0}
}

/* Výpis titulů: odkazem je jen název, kraj zůstává textem — celý červený řádek
   působil jako jeden dlouhý odkaz a špatně se v něm hledalo. */
.kraje{list-style:none;margin:14px 0 0;padding:0;columns:2;column-gap:48px}
.kraje li{padding:7px 0;border-bottom:1px solid var(--rule);break-inside:avoid}
.kraje a{font-weight:700;text-decoration:none}
.kraje a:hover{text-decoration:underline}
.kraje span{color:var(--muted);font-size:14px}
@media (max-width:640px){ .kraje{columns:1} }
.chart__src{display:block;font-size:12px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.06em}

/* Bublinka grafu. Je připnutá na <body>, takže se vejde i vedle malého grafu
   a nic ji neořízne. translate(-50%,-130%) ji posadí nad kurzor. */
#graf-bublina{position:absolute;z-index:50;pointer-events:none;opacity:0;
  transition:opacity .12s;background:#141312;color:#fff;font-size:13px;
  padding:7px 11px;white-space:nowrap;transform:translate(-50%,-130%)}
#graf-bublina b{font-weight:700;margin-right:4px}

/* ── Persony ───────────────────────────────────────────────────────────────
   Řádek na osobu, oddělený vlasovou linkou — stejná logika jako výpis titulů
   nebo pozic. Karty s barevným záhlavím, jak to má interní verze v IS, by na
   novinové stránce působily jako cizí prvek. */
.lead--tight{max-width:68ch;margin-bottom:8px}
.personas{margin-top:26px;border-top:1px solid var(--rule)}
.persona{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(220px,270px);
  gap:34px;padding:30px 0;border-bottom:1px solid var(--rule);align-items:start}
.persona__photo{width:132px;height:132px;border-radius:50%;object-fit:cover;
  filter:grayscale(1) contrast(1.05)}
.persona__name{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;margin:0 0 6px}
.persona__tag{font-size:14px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.persona__quote{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;
  margin:0 0 14px;padding-left:15px;border-left:2px solid var(--red);color:var(--ink)}
.persona__bio{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0}
.persona__value{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:14px 0 0}
.persona__vlabel{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:3px}

/* Popisky vlevo, hodnota pod nimi — ve třetím sloupci není místo na dva
   sloupce vedle sebe a zalamovaná hodnota by se od popisku odtrhla. */
.persona__facts{margin:0;font-size:14px}
.persona__facts dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:12px}
.persona__facts dt:first-child{margin-top:0}
.persona__facts dd{margin:2px 0 0;color:var(--ink-soft);line-height:1.5}

@media (max-width:900px){
  .persona{grid-template-columns:96px minmax(0,1fr);gap:20px 24px}
  .persona__photo{width:96px;height:96px}
  .persona__facts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;
    column-gap:24px;border-top:1px solid var(--rule);padding-top:14px}
  .persona__facts dt:nth-child(3){margin-top:0}
}
@media (max-width:560px){
  /* Jeden sloupec: portrét jde nad jméno, tak ať má zase plnou velikost. */
  .persona{grid-template-columns:1fr}
  .persona__photo{width:120px;height:120px}
  .persona__facts{grid-template-columns:1fr}
  .persona__facts dt:nth-child(3){margin-top:12px}
}