/* ==========================================================================
   Brod v projektech — design system
   v5 (2026-07-11 — červená dominance): barevná dominance webu přepnuta
   z modré na ČERVENOU (#EA1B0A), aby demo odpovídalo živému muhb.cz, kde je
   červená primární barva identity. --color-dark-bg (hero, footer, „Jak
   projekt sledujeme", spotlight karta, timeline, .detail-illustration)
   přepnut z #485CC7 na #EA1B0A. Modrá #485CC7 zůstává JEN ve fázových/
   timing rolích (Výběrové řízení, „Začne příští rok", badge-vyberko tint,
   modrošedá Nerealizováno) — nikde jinde. Vše v rámci manuálové červené
   rodiny (#EA1B0A primární + #C10016 tmavá červená manuálová), Manuál JVI
   města Havlíčkův Brod (kap. 1.25 — plné plochy 100% barvy, žádné cizí
   barevné kodifikace, „jiné kodifikace zakázány"). Kontrastní pozor: #EA1B0A
   má od bílé jen 4.51:1 (WCAG relative luminance) — prakticky nulová rezerva
   pro tinty/opacity na tomto pozadí, proto veškerý text na červené je plná
   bílá (žádné rgba(255,255,255,x) menší než 100%, žádné barevné tinty).
   Hero gesture (v4, 2026-07-11 — plně flat, manuál-compliant): žádná fotka,
   žádná diagonála. Jedna čistá plocha (dřív modrá, nyní červená přes
   --color-dark-bg), v duchu Manuálu JVI (kap. 1.25) a živého muhb.cz.
   Dřívější diagonální akcent (.hero::before, --color-secondary-dark)
   odstraněn — na mobilu působil jako vizuální artefakt za kartami. Titulek +
   stat karty nadále PŘEKRÝVAJÍ spodní hranu hera (negative margin, stín) —
   viz komentář v index.html hero sekci. v5 nahrazuje v4 jen barvou pozadí,
   flat gesto beze změny.
   ========================================================================== */

:root {
  /* --- Typography ---
     Sladěno s živým muhb.cz (Iterace 2, aktualizace): nadpisy Montserrat
     (600/700/800), text Open Sans (400/600), obojí Google Fonts s
     latin-ext subsetem (čeština). Nahrazuje dřívější Schibsted Grotesk. */
  --font-display: 'Montserrat', 'Archivo', sans-serif;
  --font-body: 'Open Sans', 'Inter', sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- Color: městská paleta (aktualizace 2026-07-11, soulad s Manuálem JVI) ---
     Zdroj: Manuál jednotné vizuální identity města Havlíčkův Brod
     (docs/design-tokens-hb.md, kap. 1.24–1.26) + živý muhb.cz. Manuál
     povoluje POUZE: červenou, modrou #485CC7, 7 doplňkových barev, jejich
     SVĚTLEJŠÍ procentní odstíny (10–90 %, nikdy tmavší), bílou a
     černou/grayscale (kap. 1.25 — "jiné barevné kodifikace jsou zakázány").
     Primární červená sjednocena s živým muhb.cz: #EA1B0A (Board request —
     manuálová #F93822 působila oranžově; Board rozhoduje o sjednocení
     s manuálovou #F93822 samostatně). Bonus: bílá na #EA1B0A má 4.51:1
     (AA pro běžný text), na #F93822 jen 3.74:1.
     --color-ink: DEPRECATED jako pozadí (nahrazeno --color-dark-bg níže)
     — token zůstává jen pro texty/nadpisy jako grayscale alias #333333, ať
     se nemusí přejmenovávat stovky použití.
     v5 (2026-07-11): --color-dark-bg přepnut z manuálové modré 100 %
     (#485CC7) na manuálovou červenou 100 % (#EA1B0A) — barevná dominance
     webu nyní červená, sladěno s živým muhb.cz. Modrá zůstává jen ve
     fázových/timing rolích (--phase-vyberko, TIMING_COLORS['pristi-rok']
     v app.js, badge-vyberko tint, --phase-nerealizovano).
     Znak/logo: viz poznámka u .logo v sekci Header — NEpoužit dokud
     souhlas města není ověřen z primárního zdroje (HR1). */
  --color-ink: #333333;
  --color-dark-bg: #ea1b0a;
  --color-primary: #ea1b0a;
  --color-primary-dark: #c10016;
  --color-primary-light: #ff6b52;
  --color-secondary: #485cc7;
  --color-secondary-dark: #2e3b85;
  --color-accent: #ea1b0a;
  --color-accent-dark: #c10016;

  --color-white: #ffffff;
  --color-paper: #f4f4f4;
  --color-paper-warm: #f6f4f0;
  --color-border: #d5d5d5;
  --color-text: #333333;
  --color-text-muted: #5c5c5c;
  /* --color-text-on-dark: dřív #eef0fb (modrý 6% tint pro modré pozadí).
     Na novém červeném --color-dark-bg (#EA1B0A) by modrý tint tvořil
     nechtěný barevný ráz (mimo manuál) a navíc nebyl testován na červené —
     nahrazeno čistou bílou (4.51:1 na #EA1B0A, ověřeno WebAIM, AA pro
     běžný text). */
  --color-text-on-dark: #ffffff;
  /* --color-text-on-dark-muted: dřív #dfe3f7 (modrý 15% tint, 4.6:1 na
     modré #485CC7). Na červené #EA1B0A byl testován analogický červený
     8% tint #fde9e7 → jen 3.86:1 (fail AA pro běžný text, WCAG relative
     luminance výpočet). Žádný dostatečně světlý červený tint nedrží
     4.5:1 na tomto konkrétním červeném pozadí bez ztráty barevnosti (tint
     by musel být tak světlý, že splyne s bílou) — použita čistá bílá
     (4.51:1, stejně jako --color-text-on-dark), dle instrukce "pokud tint
     nedosáhne, použij bílou". */
  --color-text-on-dark-muted: #ffffff;

  /* --- Fáze barvy (městské doplňkové barvy, viz design-tokens-hb.md) ---
     realizace/hotovo přebarveny 2026-07-11: dřívější tmavě zelené
     (#74bb7d tmavší odstín) byly mimo manuál (jen SVĚTLEJŠÍ tinty
     povoleny, nikdy tmavší). Realizace nyní primární červená (stavba =
     akce), Dokončeno 100% manuálová zelená #74BB7D. */
  --phase-zamer: #d7d2cb;
  --phase-studie: #ffc600;
  --phase-projekt: #ff9800;
  --phase-vyberko: #485cc7;
  --phase-realizace: #ea1b0a;
  --phase-hotovo: #74bb7d;
  --phase-nerealizovano: #aeb5d8;

  /* --- Spacing / radius / shadow --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(30, 36, 71, 0.07), 0 1px 1px rgba(30, 36, 71, 0.05);
  --shadow-md: 0 8px 24px rgba(30, 36, 71, 0.10), 0 2px 6px rgba(30, 36, 71, 0.06);
  --shadow-lg: 0 24px 60px rgba(30, 36, 71, 0.18), 0 8px 20px rgba(30, 36, 71, 0.10);

  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

/* Microtypography upgrade (Iterace 2): larger base size, more generous
   line-height, tighter heading tracking for a more "editorial/SaaS" feel. */
html { font-size: 17px; }

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-ink);
}
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; font-size: 1rem; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .container { padding-inline: 32px; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Motion --- */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.8s var(--ease-snap) forwards;
  }
  .stagger-1 { animation-delay: 0.08s; }
  .stagger-2 { animation-delay: 0.16s; }
  .stagger-3 { animation-delay: 0.24s; }
  .stagger-4 { animation-delay: 0.32s; }
  .stagger-5 { animation-delay: 0.4s; }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  .scroll-reveal.js-hidden {
    opacity: 0;
    transform: translateY(28px);
  }
  .scroll-reveal {
    transition: opacity 0.7s var(--ease-snap), transform 0.7s var(--ease-snap);
  }
  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
/* Header logo: znak města (logo-hb.png z muhb.cz). Užití přímo potvrdil
   Board 2026-07-10 („Můžeme si vzít i znak, děláme to pro město"). */
.logo {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-znak {
  height: 42px;
  width: auto;
  flex-shrink: 0;
}
.logo-divider {
  width: 1px;
  height: 30px;
  background: var(--color-border, #d5d5d5);
  flex-shrink: 0;
}
.logo-text { white-space: nowrap; }
.demo-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #fff3c4;
  color: #333333;
  border-radius: 999px;
  padding: 2px 8px;
}
@media (max-width: 520px) {
  .logo-znak { height: 34px; }
  .logo-text { font-size: 0.9rem; white-space: normal; line-height: 1.15; }
  .demo-badge { font-size: 0.6rem; padding: 2px 6px; }
}

.main-nav {
  display: none;
  gap: 4px;
}
.main-nav a {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  transition: background 0.2s var(--ease-snap), color 0.2s var(--ease-snap);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: var(--color-paper);
  color: var(--color-primary-dark);
}
@media (min-width: 768px) {
  .main-nav { display: flex; }
}
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 20px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 14px 4px;
  font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--color-border);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-nav a:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .mobile-nav { display: none !important; }
}

/* ==========================================================================
   Hero (v3 — flat, žádná fotka)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  /* v5 (2026-07-11): dřív --color-secondary (modrá #485CC7) přímo — nyní
     --color-dark-bg (nyní #EA1B0A), aby hero sledoval token flip jako
     ostatní tmavé sekce místo napevno modré. */
  background: var(--color-dark-bg);
  padding-block: 72px 40px;
  display: flex;
  align-items: flex-end;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 40px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  /* v5 (2026-07-11): dřív 14% bílá nad modrým pozadím (bílý text 6.1:1).
     Na červeném --color-dark-bg dá 14% bílá nad červenou jen 3.99:1 pro
     bílý text (fail AA na 0.85rem medium-weight, pod "large text" prahem).
     14% ČERNÁ nad červenou pill ztmavuje místo zesvětlení → bílý text
     5.82:1 (ověřeno WCAG), pill zůstává čitelně odlišená od pozadí. */
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--color-white);
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc600;
}

.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
  color: var(--color-white);
}
.hero-title .line-2 {
  display: block;
  /* v5 (2026-07-11): dřív žlutá #FFC600 (3.67:1 na modré --color-secondary,
     splňovala AA-large). Na novém červeném --color-dark-bg (#EA1B0A) drží
     žlutá jen 2.86:1 (ověřeno WCAG relative luminance) — pod 3:1 prahem i
     pro velký/tučný text, fail. Celý titulek nyní jednotně bílý
     (4.51:1), žádné odlišení druhého řádku barvou. */
  color: var(--color-white);
}
.hero-subtitle {
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-text-on-dark);
  max-width: 52ch;
  font-weight: var(--weight-regular);
  line-height: 1.6;
}

/* Stat cards overlap the bottom edge of the hero photo — the new hero
   gesture replacing the v1 watermark "11". Negative margin pulls them up
   out of .hero into the white section below, with a strong shadow so they
   read as a distinct floating layer. Below 640px the 1-column stack makes
   the overlap gesture read as a blank white gap instead (cards no longer
   span the row, so the pulled-up space isn't visually "claimed") — the
   overlap is disabled entirely on mobile via the <640px override below,
   and .hero-spacer collapses to match. Desktop (≥640px) keeps the
   -84px/-84px overlap unchanged. */
.hero-stats {
  position: relative;
  z-index: 3;
  margin-top: 40px;
  margin-bottom: -84px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (max-width: 639px) {
  .hero-stats { margin-bottom: 0; }
}
@media (min-width: 640px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
}
.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary-light);
}
.stat-card .stat-number {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 2.4rem;
  color: var(--color-primary);
  letter-spacing: -0.03em;
}
.stat-card .stat-label {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* Spacer section absorbs the stat-card overlap so the next section's own
   padding-top isn't swallowed by the negative margin above. Collapses to
   0 on mobile to match the disabled overlap (see .hero-stats <640px). */
.hero-spacer {
  height: 84px;
  /* v6 (2026-07-11, Board): dřív bílá — mezi červeným hero a šedou
     filter-section vznikal bílý pás, který nenavazoval ani na jednu stranu.
     Spacer nyní nese barvu následující sekce (--color-paper), takže karty
     překrývají čistý předěl červená→šedá. */
  background: var(--color-paper);
}
@media (max-width: 639px) {
  .hero-spacer { height: 0; }
}

/* ==========================================================================
   Filter bar
   ========================================================================== */
.filter-section {
  background: var(--color-paper);
  padding-block: 40px;
  /* border-top odstraněn (v6): spacer nad ním má stejnou barvu — linka by
     řezala vodorovně přes spodek plovoucích stat karet. */
  border-bottom: 1px solid var(--color-border);
}
.filter-heading {
  font-size: 0.85rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-bar + .filter-heading {
  margin-top: 28px;
}
.filter-heading-sector {
  margin-top: 28px;
}
.filter-pill {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: all 0.2s var(--ease-snap);
}
.filter-pill:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.filter-pill[aria-pressed="true"] {
  /* white text at 0.95rem (~16px) on --color-primary (#F93822) only
     reaches 3.74:1 — below the 4.5:1 normal-text AA threshold. Uses
     --color-primary-dark (#C10016, 6.4:1 with white) instead. */
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* ==========================================================================
   Spotlight banner — "Vybraný projekt" (Iterace 2, new section)
   ========================================================================== */
.spotlight-section {
  padding-block: 56px;
  background: var(--color-paper);
}
.spotlight-card {
  /* v5 (2026-07-11): dřív flat manuálová modrá 100% (--color-dark-bg).
     Token nyní ukazuje na červenou #EA1B0A — beze změny zde, jen sleduje
     token flip. */
  background: var(--color-dark-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 900px) {
  .spotlight-card { grid-template-columns: 1fr 1.15fr; }
}
.spotlight-visual {
  min-height: 220px;
  position: relative;
  /* Vrstva je jen loading-placeholder pod skutečnou fotkou (img, viz
     index.html) — sleduje token flip na červenou, žádný vizuální dopad
     na finální vykreslený obrázek. */
  background: var(--color-dark-bg);
}
.spotlight-visual svg { width: 100%; height: 100%; }
.spotlight-content {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-white);
}
.spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Bílá: na červené --color-dark-bg (#EA1B0A) drží 4.51:1, tenhle text
     je malý (0.78rem) → AA vyžaduje 4.5:1. Žlutá zůstává jen na
     dekorativní tečce vlevo. */
  color: var(--color-white);
  width: fit-content;
}
.spotlight-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* v5 (2026-07-11): žlutá tečka je dekorativní (žádný text uvnitř),
     ponechána beze změny — na červené #EA1B0A odlišitelná vizuálně i bez
     AA nároku (dekor, ne text/UI-komponenta). */
  background: #ffc600;
}
.spotlight-content h2 {
  color: var(--color-white);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.spotlight-content p {
  /* v5 (2026-07-11): dřív rgba(255,255,255,0.82) — na modré čitelné
     (~5.8:1), na červené #EA1B0A ale i 98% bílá padá pod 4.5:1 (červená
     je sama o sobě jen 4.51:1 od bílé, prakticky nulová rezerva pro
     průhlednost). 1.02rem regular text vyžaduje plné 4.5:1 → plná bílá. */
  color: var(--color-white);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 56ch;
}
.spotlight-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 4px;
}
.spotlight-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spotlight-fact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* v5 (2026-07-11): dřív rgba(255,255,255,0.62) (~2.38:1 na červené,
     fail). Malý label text (0.72rem) vyžaduje plné 4.5:1 → plná bílá,
     hierarchie (label vs. value) teď nesená jen velikostí/tučností. */
  color: var(--color-white);
  font-weight: var(--weight-medium);
}
.spotlight-fact-value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.1rem;
  color: var(--color-white);
}
.spotlight-content .btn-primary {
  /* Red #F93822 with white text only reaches 3.74:1 (fails AA) — use the
     manual's dark-red #C10016 instead, which clears 6.4:1 with white text.
     Kept as the site's one "loud" CTA per "used sparingly" guidance. */
  margin-top: 12px;
  width: fit-content;
  background: var(--color-accent-dark);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(193, 0, 22, 0.3);
}
.spotlight-content .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(193, 0, 22, 0.4);
}

/* ==========================================================================
   Project cards grid
   ========================================================================== */
.projects-section {
  padding-block: 64px;
  background: var(--color-white);
}
.section-head {
  margin-bottom: 40px;
  max-width: 60ch;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.section-head p {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* --- View toggle (cards / table) --- */
.section-head-with-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.view-toggle {
  display: none;
  gap: 6px;
  padding: 5px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .view-toggle { display: flex; }
}
.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  font-size: 0.92rem;
  transition: all 0.2s var(--ease-snap);
}
.view-toggle-btn:hover { color: var(--color-primary-dark); }
.view-toggle-btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.view-toggle-btn svg { flex-shrink: 0; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-snap), box-shadow 0.35s var(--ease-snap), border-color 0.35s var(--ease-snap);
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}
/* Card thumb: fixed 16:9 ratio for both photo and SVG-illustration cards so
   the grid stays visually consistent regardless of media type. */
.card-thumb {
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--color-paper);
  position: relative;
  overflow: hidden;
}
.card-thumb svg {
  width: 100%;
  height: 100%;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-snap);
}
.project-card:hover .card-thumb img {
  transform: scale(1.03);
}
.card-thumb .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(15, 32, 39, 0.18);
}
.card-illustration-tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(15, 32, 39, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: var(--weight-medium);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(3px);
}
.card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
/* When the badge moved onto the thumb (over image), card-body no longer
   needs its own badge — but .badge styling below is shared/reused there. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  width: fit-content;
  letter-spacing: 0.01em;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--badge-dot, currentColor);
  flex-shrink: 0;
}
/* WCAG AA fix (2026-07-10) + městská paleta (Iterace 2, přebarveno
   2026-07-11 pro soulad s Manuálem JVI): light background (SVĚTLEJŠÍ tint
   dané doplňkové/primární barvy, nikdy tmavší) + jednotný grayscale text
   #333333 (kap. 1.25). Values dle docs/design-tokens-hb.md, kap. 1.26
   mapping. Dot (::before) keeps the saturated municipal accent color. */
.badge-zamer { background: #efeded; color: #333333; --badge-dot: var(--phase-zamer); }
.badge-studie { background: #fff3c4; color: #333333; --badge-dot: var(--phase-studie); }
.badge-projekt { background: #ffe3b3; color: #333333; --badge-dot: var(--phase-projekt); }
.badge-vyberko { background: #dfe3f7; color: #333333; --badge-dot: var(--phase-vyberko); }
/* Realizace: fáze přebarvena na primární červenou (stavba = akce) —
   badge bg = červená 15% tint. */
.badge-realizace { background: #fbd5d0; color: #333333; --badge-dot: var(--phase-realizace); }
/* Hotovo: fáze přebarvena na 100% manuálovou zelenou #74BB7D — badge bg =
   zelená 40% tint (dřív sytá tmavě zelená bg + bílý text, mimo manuál). */
.badge-hotovo { background: #c8e4cb; color: #333333; --badge-dot: var(--phase-hotovo); }
.badge-nerealizovano { background: #e6e9f4; color: #333333; --badge-dot: var(--phase-nerealizovano); }

.card-title {
  font-size: 1.15rem;
  line-height: 1.25;
}
.card-sector {
  font-size: 0.82rem;
  font-weight: var(--weight-medium);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.card-cost {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.card-comments {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--weight-medium);
}
.card-loc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.project-card[hidden] { display: none; }

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}
.no-results[hidden] { display: none; }

/* --- Table view --- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
}
.table-wrap[hidden] { display: none; }
.card-grid[hidden] { display: none; } /* jinak .card-grid { display:grid } přebije UA [hidden] */
.projects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 720px;
}
.projects-table thead th {
  text-align: left;
  padding: 14px 18px;
  background: var(--color-paper);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  min-height: 24px;
  font: inherit;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  cursor: pointer;
}
.sort-btn:hover { color: var(--color-primary-dark); }
.sort-btn[aria-sort="ascending"],
.sort-btn[aria-sort="descending"] { color: var(--color-primary-dark); }
.sort-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.35;
}
.sort-btn[aria-sort="ascending"] .sort-arrow {
  border-bottom: 6px solid currentColor;
  opacity: 1;
}
.sort-btn[aria-sort="descending"] .sort-arrow {
  border-top: 6px solid currentColor;
  opacity: 1;
}
.projects-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s var(--ease-snap);
}
.projects-table tbody tr:last-child { border-bottom: none; }
.projects-table tbody tr:hover { background: var(--color-paper); }
.projects-table tbody tr[hidden] { display: none; }
.projects-table td {
  padding: 14px 18px;
  vertical-align: middle;
  color: var(--color-text);
}
.table-project-link {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.table-project-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.table-sector {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.table-cost {
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.table-loc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.table-comments {
  white-space: nowrap;
  font-weight: var(--weight-medium);
}
.projects-table .badge {
  font-size: 0.74rem;
  padding: 4px 10px;
}
@media (max-width: 767px) {
  .table-wrap { display: none !important; }
}

/* ==========================================================================
   Phases dark section — icon stepper (Iterace 2, replaces plain numbers)
   ========================================================================== */
.phases-section {
  /* v5 (2026-07-11): --color-dark-bg nyní ukazuje na manuálovou červenou
     100 % (#EA1B0A) místo modré — flat plocha beze změny pravidla, jen
     nová barva. Bez radiálních akcentů, manuál pracuje s čistými 100%
     plochami. */
  background: var(--color-dark-bg);
  padding-block: 72px;
  color: var(--color-text-on-dark);
  position: relative;
}
.phases-section h2 {
  color: var(--color-white);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.phases-section .section-head p {
  color: var(--color-text-on-dark-muted);
}
.phase-track {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .phase-track {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
  }
  .phase-track::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, var(--phase-zamer), var(--phase-studie), var(--phase-projekt), var(--phase-vyberko), var(--phase-realizace), var(--phase-hotovo));
    opacity: 0.65;
  }
}
.phase-step {
  position: relative;
  padding: 0 12px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
@media (min-width: 900px) {
  .phase-step { text-align: center; flex-direction: column; align-items: center; gap: 0; }
}
/* Icon stepper dot: SVG icon (via app content or inline in HTML) on a
   saturated phase-color disc. Icon color is always dark ink or white,
   chosen per-phase for contrast — never relies on a same-color icon on
   a light disc (zamer/studie are pale, so those get a dark icon). */
.phase-dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  /* Bílý ring: odděluje disc od pozadí sekce. v5 (2026-07-11): sekce je
     nyní červená (--color-dark-bg #EA1B0A) — fáze "Realizace" má disc
     STEJNÉ červené barvy (--phase-realizace), takže bez ringu by úplně
     splynula s pozadím (0:1 kontrast disc/bg). Ring zesílen z 3px na 4px,
     ať je oddělovací linka jistě čitelná i na fotoaparátech/menších
     displejích. Fáze Výběrové řízení (modrá 485CC7) ring dál potřebuje
     také, jen z jiného důvodu (modrá vs. červené pozadí, méně kritické). */
  box-shadow: 0 0 0 4px var(--color-white);
  flex-shrink: 0;
}
.phase-dot svg { width: 24px; height: 24px; }
@media (min-width: 900px) {
  .phase-dot { margin-inline: auto; }
}
.phase-step:nth-child(1) .phase-dot { background: var(--phase-zamer); }
.phase-step:nth-child(1) .phase-dot svg { stroke: #333333; }
.phase-step:nth-child(2) .phase-dot { background: var(--phase-studie); }
.phase-step:nth-child(2) .phase-dot svg { stroke: #333333; }
.phase-step:nth-child(3) .phase-dot { background: var(--phase-projekt); }
.phase-step:nth-child(3) .phase-dot svg { stroke: #333333; }
.phase-step:nth-child(4) .phase-dot { background: var(--phase-vyberko); }
.phase-step:nth-child(4) .phase-dot svg { stroke: #ffffff; }
/* Realizace: fáze přebarvena na primární červenou (sytá) — bílá ikona. */
.phase-step:nth-child(5) .phase-dot { background: var(--phase-realizace); }
.phase-step:nth-child(5) .phase-dot svg { stroke: #ffffff; }
/* Hotovo: fáze přebarvena na 100% manuálovou zelenou (světlejší, ne tmavší)
   — bílá ikona by na ní neprošla kontrastem, použit tmavý grayscale text. */
.phase-step:nth-child(6) .phase-dot { background: var(--phase-hotovo); }
.phase-step:nth-child(6) .phase-dot svg { stroke: #333333; }

.phase-step-text { flex: 1; }
.phase-step h3 {
  font-size: 1rem;
  color: var(--color-white);
  font-weight: var(--weight-bold);
}
.phase-step p {
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--color-text-on-dark-muted);
  line-height: 1.5;
}

/* ==========================================================================
   Map teaser
   ========================================================================== */
.map-teaser {
  padding-block: 72px;
  background: var(--color-paper-warm);
  /* v5 (2026-07-11): dřív jeden modrý (rgba 72,92,199) + jeden červený
     radiál — s červenou jako dominantní barvou webu by kombinace dvou
     různobarevných tintů na jedné světlé sekci vytvářela nechtěný
     dvojbarevný dojem. Oba radiály nyní červené 6% (--color-primary
     rgb 234,27,10), jen na různých souřadnicích pro jemnou asymetrii. */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(234, 27, 10, 0.06), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(234, 27, 10, 0.06), transparent 45%);
}
.map-teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .map-teaser-grid { grid-template-columns: 1fr 1fr; }
}
.map-teaser-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  /* kostel.jpg je portrait (1200x1800) — omez výšku, ať vizuál nedominuje
     nad textovým sloupcem na desktopu, a ořízni na konzistentní poměr. */
  aspect-ratio: 4 / 5;
  max-height: 480px;
}
.map-teaser-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-teaser h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.map-teaser p {
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 46ch;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: var(--weight-bold);
  font-size: 0.98rem;
  border: none;
  transition: transform 0.25s var(--ease-snap), box-shadow 0.25s var(--ease-snap);
}
.btn-primary {
  /* white text at 0.98rem bold (~16.7px) doesn't meet the 18.66px "large
     text" bar, so --color-primary (#F93822, 3.74:1) fails AA — use
     --color-primary-dark (#C10016, 6.4:1) as the actual button fill. */
  background: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(193, 0, 22, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(193, 0, 22, 0.36); }
.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary-light); }
.map-teaser .btn { margin-top: 28px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  /* v5 (2026-07-11): --color-dark-bg nyní červená 100 % (#EA1B0A) místo
     modré. --color-ink je nyní grayscale text alias. */
  background: var(--color-dark-bg);
  color: var(--color-text-on-dark-muted);
  padding-block: 40px;
  font-size: 0.9rem;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer strong { color: var(--color-white); }
/* v5 (2026-07-11): dřív opacity 0.8 / 0.65 na bílém textu — na modré
   pozadí mělo dost rezervy (bílá 8.6:1 tam), na červené #EA1B0A má bílá
   jen 4.51:1 základ, takže JAKÁKOLI průhlednost padá pod AA (opacity 0.8
   → 3.24:1, 0.65 → 2.51:1, obojí fail). Opacity odstraněna, hierarchie
   nesená jen menší velikostí písma. */
.footer-date {
  font-size: 0.82rem;
}
.footer-credit {
  font-size: 0.78rem;
}

/* ==========================================================================
   Detail page — bazén
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--color-primary-dark); }

.detail-hero {
  background: var(--color-white);
  padding-block: 48px 40px;
  position: relative;
  overflow: hidden;
}
.detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(30, 36, 71, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 36, 71, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 30%, transparent 100%);
  pointer-events: none;
}
.detail-hero-inner { position: relative; z-index: 1; }
.detail-badges {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
  background: var(--color-paper);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}
.detail-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  max-width: 20ch;
  line-height: 1.05;
}
.detail-hero-layout {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  /* start + nulový margin disclaimeru: horní hrany disclaimer boxu a
     vizualizace lícují (center nechávalo fotku trčet ~30 px nad box). */
  align-items: start;
}
.detail-hero-layout .disclaimer-box { margin-top: 0; }
@media (min-width: 900px) {
  .detail-hero-layout { grid-template-columns: 1.1fr 0.9fr; }
}
.detail-illustration {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* v5 (2026-07-11): dřív --color-secondary napevno (modrá, nesledovala
     token flip). Nyní --color-dark-bg (červená #EA1B0A), sladěno s
     ostatními ilustračními plochami (card-thumb, spotlight-visual). */
  background: var(--color-dark-bg);
}

.disclaimer-box {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  /* Dřív #fffaeb/#f4d374 (mimo manuál) — nyní žlutá 15% tint bg +
     100% manuálová žlutá border (#FFC600). */
  background: #fff6d9;
  border: 1.5px solid #ffc600;
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.disclaimer-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--phase-studie);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-black);
  font-family: var(--font-display);
}
.disclaimer-box p {
  font-size: 0.95rem;
  color: #333333;
  line-height: 1.6;
}
.disclaimer-box strong { color: #333333; }

.facts-section {
  padding-block: 56px;
  background: var(--color-paper);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 768px) {
  .facts-grid { grid-template-columns: repeat(4, 1fr); }
}
.fact-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.fact-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}
.fact-value {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  color: var(--color-ink);
  line-height: 1.25;
}

.description-section {
  padding-block: 64px;
  background: var(--color-white);
}
.description-section .prose {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1.05rem;
  color: var(--color-text);
}
.description-section h2 { margin-bottom: 28px; font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* --- Timeline --- */
.timeline-section {
  padding-block: 72px;
  /* v5 (2026-07-11): --color-dark-bg nyní červená 100 % (#EA1B0A) místo
     modré. Jemný bílý radiální highlight (dekor, ne text) beze změny. */
  background: var(--color-dark-bg);
  background-image: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.10), transparent 50%);
  color: var(--color-text-on-dark);
}
.timeline-section h2 { color: var(--color-white); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.timeline-section > .container > p {
  margin-top: 14px;
  color: var(--color-text-on-dark-muted);
  max-width: 60ch;
}

.timeline {
  margin-top: 48px;
  position: relative;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(255,255,255,0.15);
}
@media (min-width: 1024px) {
  .timeline {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    row-gap: 56px;
    column-gap: 0;
  }
  .timeline::before { display: none; }

  /* row 1 (items 1-5) connector */
  .timeline::after {
    content: '';
    position: absolute;
    left: 10%; right: 10%;
    top: 6px;
    height: 2px;
    background: rgba(255,255,255,0.15);
  }
}

.timeline-item {
  position: relative;
  padding: 0 0 36px 28px;
}
@media (min-width: 1024px) {
  .timeline-item {
    padding: 40px 14px 0;
    grid-row: 1;
  }
  .timeline-item:nth-child(n+6) {
    grid-row: 2;
    padding-top: 0;
    padding-bottom: 40px;
  }
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Ring must match the section background (--color-dark-bg), same fix as
     .phase-dot above — --color-ink no longer equals the dark bg. */
  border: 3px solid var(--color-dark-bg);
  background: var(--phase-zamer);
  z-index: 1;
}
@media (min-width: 1024px) {
  .timeline-item::before { left: 50%; transform: translateX(-50%); top: 6px; }
  .timeline-item:nth-child(n+6)::before { top: auto; bottom: 6px; }
}
@media (min-width: 1024px) {
  /* row 2 (items 6-10) connector, drawn per-row on the grid track */
  .timeline-item:nth-child(6) { position: relative; }
  .timeline-item:nth-child(6)::after,
  .timeline-item:nth-child(7)::after,
  .timeline-item:nth-child(8)::after,
  .timeline-item:nth-child(9)::after,
  .timeline-item:nth-child(10)::after {
    content: '';
    position: absolute;
    left: -100%;
    right: 50%;
    bottom: 6px;
    height: 2px;
    background: rgba(255,255,255,0.15);
    z-index: 0;
  }
  .timeline-item:nth-child(6)::after { display: none; }
}
/* "Hotovo" state uses the completed-phase green, not the (now red)
   in-progress realizace color — dřív omylem sdílelo --phase-realizace. */
.timeline-item.is-done::before { background: var(--phase-hotovo); }
.timeline-item.is-current::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(234, 27, 10, 0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 27, 10, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(234, 27, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 27, 10, 0); }
}
.timeline-item.is-future::before { background: rgba(255,255,255,0.25); }

.timeline-date {
  /* Section background changed from navy --color-ink to flat manuálová
     modrá --color-dark-bg (#485CC7) — --color-primary-light (#FF6B52)
     only reaches 2.06:1 there (was 5.35:1 on the old navy), fails AA.
     White clears 5.78:1 at this small bold size (B8 fix). */
  font-size: 0.8rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeline-item.is-future .timeline-date { color: var(--color-text-on-dark-muted); }
.timeline-title {
  margin-top: 6px;
  font-size: 0.98rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1.35;
}
.timeline-status {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--color-text-on-dark-muted);
}
.timeline-check {
  /* Dřív #6ee7a8 mintový akcent (mimo manuál). Text je 0.82rem bold
     (~13.9px s html base 17px) — pod 14px/18.66px prahem pro AA-large,
     takže žlutá #FFC600 (jen 3.67:1) by na malém textu neprošla. Použita
     bílá (5.78:1) místo toho, viz B8/B6 guidance "malý text → bílá". */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-white);
  font-weight: var(--weight-bold);
}

/* --- VŘ / competition --- */
.competition-section {
  padding-block: 64px;
  background: var(--color-paper);
}
.competition-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.competition-stats {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .competition-stats { grid-template-columns: repeat(4, 1fr); }
}
.rank-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.rank-card.rank-1 {
  /* Dřív #fff7ec (mimo manuál, žádná odvozená kodifikace) — nyní bílá →
     velmi světlý (~6%) tint manuálové oranžové #FF9800. */
  border-color: var(--color-accent);
  background: linear-gradient(160deg, #fff, #fef4e6);
}
.rank-number {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 1.8rem;
  color: var(--color-primary);
}
.rank-card.rank-1 .rank-number { color: var(--color-accent); }
.rank-name { margin-top: 4px; font-weight: var(--weight-bold); font-size: 1.02rem; }
.rank-prize { margin-top: 6px; color: var(--color-text-muted); font-size: 0.9rem; }
.competition-meta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.competition-meta a { color: var(--color-primary-dark); font-weight: var(--weight-medium); }
.competition-meta a:hover { text-decoration: underline; }

/* --- Documents --- */
.documents-section {
  padding-block: 56px;
  background: var(--color-white);
}
.documents-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 28px; }
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease-snap), background 0.2s var(--ease-snap);
}
.doc-item:hover { border-color: var(--color-primary-light); background: var(--color-paper); }
.doc-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
}
.doc-name { display: block; font-weight: var(--weight-bold); font-size: 0.98rem; }
.doc-meta { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-top: 2px; }

/* --- Feedback --- */
.feedback-section {
  padding-block: 72px;
  background: var(--color-paper-warm);
  /* v5 (2026-07-11): dřív modrý radiál (rgba 72,92,199) — sladěno s
     červenou dominancí webu, stejný vzor jako .map-teaser výše. */
  background-image: radial-gradient(circle at 90% 10%, rgba(234, 27, 10, 0.06), transparent 45%);
}
.feedback-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.feedback-intro { margin-top: 12px; color: var(--color-text-muted); max-width: 60ch; font-size: 1.05rem; }

.poll-card {
  margin-top: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.poll-question { font-size: 1.2rem; font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--color-ink); }
.poll-buttons {
  margin-top: 20px;
  display: grid;
  /* 3 postoje v jedné řadě na desktopu; na úzkém displeji se skládají
     pod sebe (auto-fit) — žádné osamocené zalomené tlačítko. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.poll-btn {
  min-height: 56px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-weight: var(--weight-bold);
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s var(--ease-snap);
}
.poll-btn:hover { border-color: var(--color-primary-light); transform: translateY(-2px); }
.poll-btn.selected { border-color: var(--color-primary); background: var(--color-paper); }
.poll-btn:disabled { cursor: default; }
.poll-results {
  margin-top: 24px;
}
.poll-results[hidden] { display: none; }
.poll-total {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.comments-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.comment-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.comment-author { font-weight: var(--weight-bold); color: var(--color-ink); }
.comment-date { font-size: 0.82rem; color: var(--color-text-muted); }
.comment-text { margin-top: 8px; color: var(--color-text); line-height: 1.6; }
.comment-pending {
  /* Dřív #fffaeb/#f4d374/#6b4a05 (mimo manuál) — nyní žlutá 15% tint bg,
     100% manuálová žlutá border, jednotný grayscale text (B5 vzor). */
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff6d9;
  border: 1px solid #ffc600;
  color: #333333;
  font-size: 0.76rem;
  font-weight: var(--weight-bold);
}

.comment-empty {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Honeypot anti-spam field (Wave 3) — off-screen via absolute positioning,
   NOT display:none/visibility:hidden (bots skip those; humans never see
   or reach this field via tab). Backend rejects submissions where this
   field is non-empty. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.comment-form {
  margin-top: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.comment-form h3 { font-size: 1.15rem; }
.form-row { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.form-row label { font-weight: var(--weight-medium); font-size: 0.92rem; }
.form-row input,
.form-row textarea {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-paper);
  transition: border-color 0.2s var(--ease-snap);
  min-height: 44px;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
}
.form-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.comment-form .btn { margin-top: 20px; }

/* ==========================================================================
   Map page
   ========================================================================== */
.map-page-header {
  padding-block: 40px 24px;
  background: var(--color-white);
}
.map-page-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.map-page-header p { margin-top: 12px; color: var(--color-text-muted); font-size: 1.05rem; max-width: 60ch; }

.map-wrap {
  padding-inline: 20px;
  padding-bottom: 56px;
  background: var(--color-white);
}
@media (min-width: 768px) {
  .map-wrap { padding-inline: 32px; }
}
#map {
  width: 100%;
  height: 62vh;
  min-height: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.map-legend {
  max-width: var(--container);
  margin: 20px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-fallback {
  padding: 40px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.map-fallback[hidden] { display: none; }

/* Custom divIcon pins (Iterace 2, replaces plain circleMarker dots) —
   strip Leaflet's default marker background/border box so only our SVG
   teardrop pin renders. */
.map-pin-icon {
  background: transparent !important;
  border: none !important;
}
.map-pin-icon svg {
  display: block;
  filter: drop-shadow(0 3px 6px rgba(30, 36, 71, 0.35));
}

/* ==========================================================================
   O webu — plain text page
   ========================================================================== */
.about-page-header {
  padding-block: 48px 8px;
  background: var(--color-white);
}
.about-page-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.about-page-header p { margin-top: 12px; color: var(--color-text-muted); font-size: 1.05rem; }

.about-section {
  padding-block: 40px 72px;
  background: var(--color-paper-warm);
}
.about-container {
  max-width: 720px;
}
.about-block + .about-block {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--color-border);
}
.about-block h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
.about-block p {
  margin-top: 14px;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.7;
}
.about-block p:first-of-type { margin-top: 14px; }

.about-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.about-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 480px;
}
.about-table thead th {
  text-align: left;
  padding: 12px 18px;
  background: var(--color-paper);
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
}
.about-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}
.about-table tr:last-child td { border-bottom: none; }
.about-table td:first-child {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  white-space: nowrap;
}

.about-phase-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-phase-list li {
  padding: 14px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.about-phase-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: 0.98rem;
}
.about-phase-desc {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.about-plain-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-plain-list li {
  padding-left: 22px;
  position: relative;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.65;
}
.about-plain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary-dark);
}

.about-mail-btn { margin-top: 20px; }

.about-demo-note {
  /* Dřív #fffaeb/#f4d374 (mimo manuál) — nyní stejný B5 vzor jako
     .disclaimer-box: žlutá 15% tint bg + 100% manuálová žlutá border. */
  margin-top: 44px;
  padding: 18px 22px;
  background: #fff6d9;
  border: 1.5px solid #ffc600;
  border-radius: var(--radius-md);
}
.about-demo-note p {
  margin: 0;
  font-size: 0.92rem;
  color: #333333;
}
.about-demo-note strong { color: #333333; }

/* Leaflet popup styling override */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm);
}
.map-popup-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.map-popup-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  padding: 3px 9px;
  border-radius: 999px;
  /* WCAG AA fix (2026-07-10): bg + color now set inline per-phase in
     app.js (PHASE_BADGE_STYLE) — light bg / dark text, same palette as
     .badge-* in this file. No default color here to avoid a stale
     white-text flash before inline style applies. */
  margin-bottom: 6px;
}

/* ==========================================================================
   Feature 1 — Transparentní výsledky ankety (PARTIMAP vzor)
   Rozšiřuje stávající .poll-* pravidla o vícemožnostní bar-chart (3 volby
   místo binárního souhlas/nesouhlas) + textaci "demo data".
   ========================================================================== */
.poll-results-note {
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.poll-bars {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.poll-bar-row-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
/* SVG ikona postoje uvnitř labelu: globální `svg { display: block }` by ji
   zalomila na vlastní řádek — inline-flex drží ikonu + text na jednom. */
.poll-bar-row-label > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.poll-bar-row-pct {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.poll-bar-row-track {
  margin-top: 6px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.poll-bar-row-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  /* v5 (2026-07-11): dřív --color-secondary (modrá) — anketa bary nyní
     červená rodina (--color-primary), sladěno s webovou dominancí. */
  background: var(--color-primary);
  transition: width 0.7s var(--ease-snap);
}

/* ==========================================================================
   Feature 2 — Postoj u komentářů (Decidim vzor)
   ========================================================================== */
.stance-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.stance-legend {
  font-weight: var(--weight-medium);
  font-size: 0.92rem;
  color: var(--color-text);
  padding: 0;
  margin-bottom: 8px;
}
.stance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stance-pill {
  position: relative;
}
.stance-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.stance-pill-label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-weight: var(--weight-medium);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  transition: all 0.2s var(--ease-snap);
  cursor: pointer;
}
.stance-pill input[type="radio"]:checked + .stance-pill-label {
  border-color: var(--color-primary);
  background: #fde9e7; /* červená ~8% tint */
  color: var(--color-primary-dark);
}
.stance-pill input[type="radio"]:focus-visible + .stance-pill-label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.comment-stance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: var(--weight-bold);
  width: fit-content;
}
/* Barvy dle briefu: zelená (podporuji) / oranžová (výhrady) / šedá
   (neutrální) — světlé pozadí + tmavý text, stejný AA vzor jako fázové
   badge (min. 4.5:1 pro normální text). */
.comment-stance-podporuji { background: #dcf0df; color: #333333; }
.comment-stance-vyhrady { background: #ffe3b3; color: #333333; }
.comment-stance-neutralni { background: #efeded; color: #333333; }

/* ==========================================================================
   Feature 3 — "Sledovat projekt" e-mail odběr (Charlotte vzor)
   ========================================================================== */
.follow-card {
  margin-top: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.follow-card h3 {
  font-size: 1.15rem;
}
.follow-card-intro {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.follow-form {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.follow-form[hidden] { display: none; }
.follow-form-row {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.follow-form-row label {
  font-weight: var(--weight-medium);
  font-size: 0.92rem;
}
.follow-form-row input {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-paper);
  min-height: 44px;
  transition: border-color 0.2s var(--ease-snap);
}
.follow-form-row input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
}
.follow-form .btn {
  flex-shrink: 0;
  align-self: flex-end;
}
.follow-error {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  font-weight: var(--weight-medium);
}
.follow-error[hidden] { display: none; }
.follow-status {
  /* bg #dcf0df (~75% světlejší tint --phase-hotovo #74BB7D) beze změny;
     border přepočten jako ~55% tint téže zelené, ať je celý blok
     ověřitelně odvozený z manuálové barvy místo libovolné hex hodnoty. */
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: #dcf0df;
  border: 1px solid #baddbe;
}
.follow-status[hidden] { display: none; }
.follow-status-text {
  color: #333333;
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
}
.follow-status-email {
  font-weight: var(--weight-bold);
}
.follow-unsubscribe {
  margin-left: auto;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-weight: var(--weight-medium);
  font-size: 0.88rem;
  color: var(--color-text);
  transition: all 0.2s var(--ease-snap);
}
.follow-unsubscribe:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ==========================================================================
   Feature 4 — Mapa barevně dle časování (Helsinki vzor)
   Doplňuje fázovou legendu o druhou mapovou legendu (časování), oddělenou
   nadpisem, se stejným .legend-item vzorem jako u fází.
   ========================================================================== */
.map-legend-group + .map-legend-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.map-legend-group[hidden] { display: none; }
.map-legend-title {
  width: 100%;
  font-size: 0.76rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.map-mode-toggle {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto 16px;
}
.map-mode-btn {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  font-size: 0.92rem;
  transition: all 0.2s var(--ease-snap);
}
.map-mode-btn:hover { color: var(--color-primary-dark); }
.map-mode-btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Feature A — Závazek kadence aktualizací (Charlotte vzor)
   Drobný řádek pod hlavičkou detailu projektu s datem poslední aktualizace.
   ========================================================================== */
.detail-updated {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}
.detail-updated svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ==========================================================================
   Feature B — "Co bude dál" (Oslo "Hva skjer når?" vzor)
   Kompaktní výhledový blok pod časovou osou — světlá karta, modrý akcent,
   šipkové odrážky. Vědomě NE další timeline (jiný vizuální jazyk).
   ========================================================================== */
.next-steps-section {
  padding-block: 56px;
  background: var(--color-paper);
}
.next-steps-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.next-steps-card h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
.next-steps-intro {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  max-width: 60ch;
}
.next-steps-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.next-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.next-step-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-secondary);
}
.next-step-body { flex: 1; }
.next-step-title {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.4;
}
.next-step-when {
  margin-top: 3px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.next-steps-disclaimer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Feature C — "Kde jsme celkem" (Decidim Accountability vzor)
   Agregovaný přehled postupu dle odvětví na homepage, mezi card-grid a
   tmavou sekcí "Jak projekt sledujeme". Čísla jsou vypočtená staticky.
   ========================================================================== */
.accountability-section {
  padding-block: 64px;
  background: var(--color-paper-warm);
}
.accountability-section .section-head p { max-width: 66ch; }
.accountability-table {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.accountability-row {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
}
@media (min-width: 768px) {
  .accountability-row {
    grid-template-columns: 1.1fr 0.7fr 1.4fr 0.9fr;
    gap: 24px;
  }
}
.accountability-sector {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: 1.02rem;
}
.accountability-count {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.accountability-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.accountability-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}
.accountability-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.accountability-progress-fill {
  height: 100%;
  border-radius: 999px;
  /* v5 (2026-07-11): dřív --color-secondary (modrá) — progress bary
     "Kde jsme celkem" nyní červená rodina (--color-primary). */
  background: var(--color-primary);
}
.accountability-cost {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: 0.98rem;
  text-align: left;
}
@media (min-width: 768px) {
  .accountability-cost { text-align: right; }
}
.accountability-cost-label {
  display: block;
  font-size: 0.74rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.accountability-note {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Akce CTA banner (index.html, pod card-gridem) — odkaz na akce.html
   ========================================================================== */
.akce-cta-section {
  padding-block: 32px;
  background: var(--color-paper);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.akce-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 640px) {
  .akce-cta-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.akce-cta-text {
  font-size: 1.05rem;
  color: var(--color-text);
}
.akce-cta-text strong { color: var(--color-primary-dark); }

/* ==========================================================================
   Všechny akce (akce.html)
   ========================================================================== */
.akce-summary {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .akce-summary { grid-template-columns: repeat(3, 1fr); }
}
.akce-summary-item {
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.akce-summary-number {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.7rem;
  color: var(--color-primary-dark);
}
.akce-summary-label {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.akce-search-wrap {
  position: relative;
  max-width: 480px;
}
.akce-search-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.akce-search-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
}
.akce-search-input:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 1px;
}

.akce-count {
  margin-top: 24px;
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.akce-list-section {
  padding-block: 40px 64px;
  background: var(--color-white);
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
}
.akce-table { min-width: 900px; }
.akce-table[hidden] { display: none; }
.akce-table tbody tr[hidden] { display: none; }
.table-project-name {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  max-width: 320px;
}
.table-cost-type {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: var(--weight-regular);
}
.table-status {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  max-width: 320px;
}
.table-contractor {
  color: var(--color-text);
  font-size: 0.9rem;
}

.akce-source-note {
  margin-top: 28px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 90ch;
}

/* Mobile: bez horizontálního scrollu stránky — tabulka se přepne na stacked
   karty-řádky (stejný <table> markup, jen CSS relayout + data-label popisky
   z JS render, žádný duplicitní DOM). */
@media (max-width: 767px) {
  .table-scroll {
    overflow-x: visible;
    border: none;
    box-shadow: none;
    background: none;
  }
  .akce-table {
    min-width: 0;
    width: 100%;
    display: block;
  }
  .akce-table thead { display: none; }
  .akce-table tbody { display: block; }
  .akce-table tbody tr {
    display: block;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
  }
  .akce-table tbody tr[hidden] { display: none; }
  .akce-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    text-align: right;
    border-bottom: 1px solid var(--color-border);
  }
  .akce-table td:last-child { border-bottom: none; }
  .akce-table td::before {
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-align: left;
    flex-shrink: 0;
  }
  .table-project-name {
    max-width: none;
    text-align: right;
  }
  .table-status {
    max-width: none;
    text-align: right;
  }
}