/* Specifika landing stránky (seznam municipalit) – sdílené tokeny, layout
   chrome (page-header, theme-toggle, back-link) a šířka stránky (.wrap/
   .masthead-inner max-width) jsou v app.css, linkovaném před tímto
   souborem. */
/* overflow-x: hidden je pojistka konkrétně kvůli hero mapě (.landing-map
   níž) – její rohové kartičky záměrně přesahují mimo vlastní SVG plátno
   (overflow: visible, viz komentář u .landing-map svg), tenhle přesah je
   pevné procento (~6,7 %) šířky mapy, ne pevný počet px. Na většině šířek
   se vejde do paddingu .wrap tady vedle, ale v úzkém pásmu (těsně nad
   720px mobilním breakpointem, kde je padding kvůli clamp() malý a mapa
   ještě není o moc užší) může přesah být větší než padding a kartička by
   bez tohohle pravidla kousek přetekla za okraj stránky. Neomezuje to
   samotný přesah (ten zůstává, kde se vejde) – jen ho neprodlouží až za
   viewport, kde by se vejít nemohl. */
.wrap { padding: 32px clamp(16px, 4vw, 40px) 80px; overflow-x: hidden; }
h1 { font-size: 24px; margin: 0 0 6px; }
.subtitle { margin: 0 0 32px; }

.landing-announcement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 10px clamp(16px, 4vw, 40px);
  background: #6366f1;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}
.landing-announcement p { margin: 0; }
.landing-announcement strong { font-weight: 500; }
.landing-announcement-badge {
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.landing-announcement-badge:hover { background: rgba(255, 255, 255, .15); }
.landing-announcement-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.landing-news-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-1);
  color: var(--text-primary);
  line-height: 1.6;
}
.landing-news-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.landing-news-dialog h2 { margin: 0 0 16px; font-size: 22px; }
.landing-news-dialog p { color: var(--text-secondary); }
.landing-news-dialog form { text-align: right; }
.landing-news-dialog button {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

/* Sdílený .hidden util žije jen v city.css (viz jeho vlastní pravidlo) –
   tahle stránka (landing.blade.php) city.css vůbec nenačítá, jen app.css +
   tenhle soubor, takže potřebuje vlastní kopii. Používá ho
   #hero-search-results (landing-search.js). */
.hidden { display: none !important; }

/* Hero (rozcestník). Wordmark „Zastupko" žije v mastheadu, tady se
   neopakuje – hero je h1 + vyhledávač regionu (dřív tu byl popisný
   odstavec, .landing-hero-lead, nahrazeno). Žádný obrázek/gradient, ať
   drží hairline styl zbytku appky. */
.landing-hero {
  max-width: 760px;
  margin: 48px auto 64px;
  text-align: center;
}
.landing-hero-title {
  margin: 0 0 32px;
  /* Systémový font jako zbytek appky (app.css body), střídmě: pevná
     velikost bez fluid clamp, běžný bold, žádný upravovaný tracking. */
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  /* Stejná barva jako wordmark „Zastupko" v mastheadu (app.css
     .masthead-wordmark) – projektu chybí token, drží se týž literál. */
  color: #6366f1;
}
/* Ručně vložený <br> (viz landing.blade.php) rozdělí nadpis na dva řádky
   už na šířku desktopu – na mobilu (stejný breakpoint jako masthead menu,
   app.css) by se 28px druhý řádek ("z českých regionů, obcí a
   samospráv") ještě jednou zalomil, proto o kousek menší. */
@media (max-width: 640px) {
  .landing-hero-title { font-size: 22px; }
}

/* Vyhledávač regionu v hero (public/js/landing-search.js) – nad
   GeoController::regionyApi(), stejný zdroj jako /regiony, jen s
   dropdownem prvních pár shod místo celé stránky výsledků. Zvýrazněný
   (barva/glow shodné s h1/#6366f1 akcentem) a odsazený od nadpisu (viz
   .landing-hero-title margin výše) – je to hlavní CTA hero sekce, ne
   jen jeden z rovnocenných prvků. */
.landing-hero-search { position: relative; max-width: 520px; margin: 0 auto; text-align: left; }
.landing-hero-search-input {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid #6366f1;
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
  box-shadow: 0 4px 20px color-mix(in srgb, #6366f1 22%, transparent);
  transition: box-shadow .15s ease;
}
.landing-hero-search-input:hover { box-shadow: 0 4px 24px color-mix(in srgb, #6366f1 32%, transparent); }
.landing-hero-search-input:focus {
  outline: 2px solid var(--status-good);
  outline-offset: -1px;
  box-shadow: 0 4px 24px color-mix(in srgb, #6366f1 32%, transparent);
}
.landing-hero-search-input::-webkit-search-cancel-button { cursor: pointer; }
.landing-hero-search-results {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.landing-hero-search-results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
}
.landing-hero-search-results li.is-active a,
.landing-hero-search-results a:hover { background: var(--grid); }
.landing-hero-search-name { font-size: 14px; }
.landing-hero-search-typ { flex: none; color: var(--text-muted); font-size: 12.5px; }

/* Rozcestníková skica ČR (partials/landing-map.blade.php). Ručně kreslený
   vzhled dělá SVG filtr #lm-sketch, ne knihovna. Tahy mají
   vector-effect: non-scaling-stroke, ať drží šířku i při zmenšení.

   85 %, ne 100 % šířky .wrap – rohové kartičky uvnitř mapy záměrně
   přesahují mimo SVG plátno o pevné procento její šířky (~6,7 %, viz
   .landing-map svg overflow: visible níž a .wrap overflow-x: hidden jako
   krajní pojistka). Při 100% šířce by na menších (ne mobilních) šířkách
   stránky ten přesah často přesáhl padding .wrap a kartička by dosedala
   přímo na okraj stránky bez jakékoli mezery – 85 % nechává vždycky pár
   procent navíc jako vizuální odstup, nad rámec samotného paddingu. Na
   mobilu (media query níže) se vrací zpátky na plnou šířku – tam mapa
   žádné bleeding kartičky nemá (schované, viz media query), takže žádný
   odstup navíc nepotřebuje. */
.landing-map { max-width: min(1000px, 85%); margin: 8px auto 0; }
.landing-map svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Shrnutí počtů typů regionů nad mapou. Čísla mají barvu h1 (.landing-hero-
   title) – stejný odstín napříč appkou pro tenhle akcent (viz i is-highlight
   kraj/obec a šipky v landing-map.blade.php), ať shrnutí vizuálně navazuje
   na nadpis nad ním. Každá položka je prokliknutelná na příslušný seznam
   (geo.kraje/okresy/orp/pou/obce/obvody, viz landing-map.blade.php) – celý
   <a> kolem čísla i popisku, ne jen číslo, ať je klikací plocha větší. */
.landing-map-counts {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  font-size: 22px;
  color: var(--text-secondary);
}
.landing-map-counts a {
  color: inherit;
  text-decoration: none;
}
.landing-map-counts a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.landing-map-counts strong { color: #6366f1; font-weight: 700; }

.landing-map .lm-kraj {
  fill: var(--grid);
  fill-opacity: .35;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.landing-map .lm-kraj.is-highlight,
.landing-map .lm-obec-highlight {
  fill: #6366f1;
  fill-opacity: .13;
  stroke: #6366f1;
  stroke-width: 2;
}
/* Zvýrazněná obec (na rozdíl od kraje) nemá "šedý" .lm-kraj základ, jen
   samotné zvýraznění, plus tenčí non-scaling stroke – ve zmenšeném
   měřítku obce (desítky px vs. stovky u kraje) by stejná šířka jako
   u kraje vypadala nepřiměřeně tlustá. */
.landing-map .lm-obec-highlight {
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Šipka = zužující se vyplněný tah (šaft) + otevřený hrot ze dvou čar.
   Jediná šipka je modrá – vede od špendlíku k rámečku obce. */
.landing-map .lm-arrow { fill: var(--text-muted); stroke: none; }
.landing-map .lm-arrowhead {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.landing-map .lm-arrows-blue .lm-arrow { fill: #6366f1; }
.landing-map .lm-arrows-blue .lm-arrowhead { stroke: #6366f1; }

/* Načrtnutá značka obce na mapě – obrys kreslený „dvakrát", bez výplně,
   škrtnutá zem pod hrotem. */
.landing-map .lm-pin {
  fill: none;
  stroke: #6366f1;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.landing-map .lm-pin-2 { stroke-width: 1.3; opacity: .5; }
.landing-map .lm-pin-dot { fill: #6366f1; }
.landing-map .lm-pin-ground {
  fill: none;
  stroke: #6366f1;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .55;
  vector-effect: non-scaling-stroke;
}

/* Rámeček vyzdvižené obce – náhled hranice + název + statistiky, odkaz. */
.landing-map .lm-card { cursor: pointer; }
.landing-map .lm-card-frame {
  fill: var(--surface-1);
  stroke: #6366f1;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.landing-map .lm-card:hover .lm-card-frame { stroke-width: 3; }
.landing-map .lm-card-outline {
  fill: #6366f1;
  fill-opacity: .12;
  stroke: #6366f1;
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.landing-map text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.landing-map .lm-card-name { font-size: 27px; font-weight: 700; fill: var(--text-primary); }
.landing-map .lm-card-kicker { font-size: 14px; font-weight: 600; fill: #6366f1; }
.landing-map .lm-card-stat { font-size: 17px; fill: var(--text-secondary); }
.landing-map .lm-card-open { font-size: 14px; font-weight: 600; fill: #6366f1; }
.landing-map .lm-card:hover .lm-card-open { text-decoration: underline; }

/* Mobilní kontejnery pro kartičky Čelákovice/Most/Plzeňský kraj/Brno
   (#lm-mobile-above/-below, landing-map.blade.php) – prázdné v HTML,
   public/js/landing-map-mobile.js do nich při přechodu pod 720px přímo
   PŘESUNE (ne zkopíruje) <a class="lm-card"> elementy z hlavní mapy, viz
   jeho vlastní komentář (SVG viewBox nejde přepnout přes media query,
   proto JS, ne čisté CSS). Sdílí s hlavní mapou stejné .lm-card/
   .lm-card-frame/... třídy (žádná zvláštní mobilní varianta stylu). */
/* `.landing-map svg` o pár řádků výš má vyšší specificitu (třída + typ
   element vs. jen třída tady) a nastavuje display:block – bez stejně
   „těžkého" selektoru (svg.landing-map-mobile-cards, ne jen samotná
   třída) by tenhle default prohrál a kontejnery (byť prázdné, dokud
   nedoběhne JS) by na desktopu zabíraly místo v layoutu. */
.landing-map svg.landing-map-mobile-cards { display: none; }

/* Krátké šipky od špendlíku/těžiště polygonu k okraji mapy
   (.lm-mobile-hint, landing-map.blade.php, u Čelákovic/Mostu/Plzeňska/
   Brna) – na mobilu naznačují, kterým směrem (nahoru/dolů) na kartu
   navazují, i když samotná karta v .landing-map-mobile-cards žádnou
   šipku nemá (jedna souvislá šipka napříč dvěma <svg> nejde, viz diskuze
   v hlavní konverzaci). Na desktopu schované – tam ke kartě vede
   diagonální .lm-arrow/.lm-arrowhead ve stejné .lm-arrows skupině beze
   změny. */
.landing-map .lm-main-svg .lm-mobile-hint { display: none; }

/* Pod ~720 px se text v kartách/šipkách (jména, statistiky – pevná
   velikost v SVG user-units) zmenšením spolu s celou skicou stane
   nečitelným, a plná plocha 1400×680 (viewBox počítá i s kartami, které
   záměrně přesahují mimo kraje, viz landing-map.blade.php) se navíc do
   šířky mobilu nevejde bez zmenšení/scrollu. Řešení: v hlavní mapě
   (.lm-main-svg) se schovají diagonální šipky ke kartám (nemají už na co
   ukazovat) a kartičky – NE celá .lm-arrows skupina, špendlíky
   (.lm-place, uvnitř .lm-arrows) zůstávají viditelné přímo na skice,
   a taky ne .lm-mobile-hint šipky výše (ty se naopak právě tady ukážou,
   proto vlastní selektor s :not() – jinak by je smetlo stejné pravidlo,
   sdílí třídu .lm-arrow/.lm-arrowhead). `.lm-card { display: none }`
   tady je zároveň bezpečný fallback pro případ bez JS/než doběhne
   landing-map-mobile.js (viz jeho komentář) – jakmile JS kartičku
   přesune pryč z .lm-main-svg do #lm-mobile-above/-below, tohle pravidlo
   se na ni (v novém rodiči) už nevztahuje a zase je vidět, teď na
   správném místě. Bez JS by naopak zůstala bleeding mimo plátno a
   způsobila vodorovný přetok stránky – radši schovaná. */
@media (max-width: 720px) {
  /* Zpátky na plnou šířku – 85% max-width výše je jen kvůli bleeding
     rohovým kartičkám (schované tady pod, viz .lm-main-svg .lm-card
     display: none) na desktopu, na mobilu mapa žádné nemá, takže
     nepotřebuje ani ten odstup navíc. Beze změny by taky zmenšil základ,
     ze kterého se počítá "full bleed" width/margin o pár řádků níž. */
  .landing-map { max-width: none; }
  .landing-map .lm-main-svg .lm-arrows:not(.lm-mobile-hint) .lm-arrow,
  .landing-map .lm-main-svg .lm-arrows:not(.lm-mobile-hint) .lm-arrowhead,
  .landing-map .lm-main-svg .lm-card { display: none; }
  .landing-map .lm-main-svg .lm-mobile-hint { display: block; }
  /* "Full bleed" – mapa (hlavní i mobilní kartičky, ale ne .landing-map-
     counts nad ní, ta zůstává v běžné šířce stránky) přesahuje ven z
     .wrap paddingu (app.css, stejná clamp() hodnota nalevo i napravo) až
     na okraj obrazovky, ať využije celou šířku mobilu, ne jen šířku
     uvnitř odsazení – negativní margin na obou stranách + width doplněná
     o dvojnásobek toho paddingu zpátky. */
  .landing-map svg {
    width: calc(100% + 2 * clamp(16px, 4vw, 40px));
    margin-left: calc(-1 * clamp(16px, 4vw, 40px));
    margin-right: calc(-1 * clamp(16px, 4vw, 40px));
  }
  .landing-map svg.landing-map-mobile-cards { display: block; margin-top: 10px; margin-bottom: 10px; }
  .landing-map-counts { font-size: 18px; gap: 8px 20px; }
}

/* Nadpis sekce karet níže – hairline odsazení jako .detail-section-title
   v city.css (ta appka tuhle stránku nenačítá), ale větší a v barvě h1/
   čísel ve shrnutí nad mapou (#6366f1), ať vizuálně váže na zbytek hero
   sekce, ne jako tlumený mezinadpis detailu obce/subjektu. */
.landing-section-title {
  margin: 30px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 24px;
  font-weight: 700;
  color: #6366f1;
  text-align: center;
}
/* Popisek pod .landing-section-title – vlastní třída, ne .subtitle (ten
   sdílí zbytek stránky pro odkazy výš, tady jde o větší, vystředěný text
   navazující na nadpis nad ním). */
.landing-section-lead {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.5;
}
.landing-integration-note {
  margin-top: 16px;
}

/* Karty zpracovaných obcí. Pod 640px zůstává úzký sloupec řádků (mobil),
   od 640px výš mřížka karet vedle sebe – stejný breakpoint/princip jako
   .entity-list v city.css (tam appka nemá), jen o úroveň jednodušší (bez
   avatara/centrování, .municipality-link zůstává řádkový vzhled i
   v mřížce). */
.municipalities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 640px) {
  .municipalities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
  }
}
.municipality-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color .15s ease;
}
.municipality-link:hover { border-color: var(--series-1); }
.municipality-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.municipality-name { font-size: 16px; font-weight: 600; }
.municipality-meta { color: var(--text-muted); font-size: 13px; }
.municipality-arrow { color: var(--text-muted); font-size: 18px; flex: none; }

/* Znak obce v kartě – stejná pravidla jako .znak/.znak-placeholder
   v city.css (ta stránka je nenačítá, viz .hidden výše), zkopírováno.
   Náhrada za chybějící/nenačtený znak řeší veřejné js/znak-fallback.js,
   naloženo v <head> (viz landing.blade.php). */
.znak {
  width: 36px;
  height: 41px;
  object-fit: contain;
  flex: none;
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
  box-sizing: border-box;
}
.znak-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.znak-placeholder svg { width: 55%; height: 55%; fill: currentColor; }

.empty-note {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 32px;
  line-height: 1.5;
}

/* Karty sekce /subjekty (landing.blade.php) – na rozdíl od .municipalities
   žádný znak/statistiky ze souboru, jen název + popisek destinace, proto
   samostatné třídy místo sdílení .municipality-*. */
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.landing-feature-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color .15s ease;
}
.landing-feature-card:hover { border-color: var(--series-1); }
.landing-feature-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
}
.landing-feature-title-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Ikona sdílená s partials/summary-icon.blade.php (jen tvar) – vlastní
   třída místo .summary-card-icon z city.css (ta stránka ho nenačítá).
   Barva stejná jako zbytek akcentu na landing (#6366f1), ne tlumená
   .summary-card-icon výchozí (city.css) – tady jde o hlavní CTA kartu,
   ne o vedlejší statistiku. */
.landing-feature-title .summary-card-icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
  color: #6366f1;
}
.landing-feature-arrow { color: var(--text-muted); font-size: 18px; flex: none; }
.landing-feature-card:hover .landing-feature-arrow { color: var(--series-1); }
.landing-feature-desc { color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }

/* Kontaktní formulář (contact.blade.php). */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
  margin: 0 auto;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}
.contact-optional { color: var(--text-muted); font-weight: 400; }
.contact-field input,
.contact-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.contact-field input:focus,
.contact-field textarea:focus { outline: 2px solid var(--status-good); outline-offset: -1px; }
.contact-error { margin: -10px 0 0; color: var(--status-critical); font-size: 13px; }
.contact-status {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--status-good) 40%, var(--border));
  background: color-mix(in srgb, var(--status-good) 12%, var(--surface-1));
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}
.contact-submit {
  align-self: flex-start;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.contact-submit:hover { background: var(--grid); }
/* Honeypot – vizuálně i pro asistenční technologie neexistuje (na rozdíl
   od pouhého display:none, které některé formulářové boti rozpoznají a
   pole kvůli tomu přeskočí). */
.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Stránka O projektu (about.blade.php) využívá stejnou plnou šířku jako
   landing page; .wrap už ji omezuje společným maximem 1320 px. */
.about-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.about-intro { margin-top: 0; padding-top: 0; border-top: 0; }
.about-page h1,
.about-section h2 {
  color: #6366f1;
  text-align: center;
}
.about-section h2 { margin: 0 0 10px; font-size: 19px; }
.about-section p {
  max-width: 880px;
  margin: 0 auto;
  color: var(--text-secondary);
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
}
.about-section p + p { margin-top: 14px; }
.about-section a { color: var(--series-1); }
.about-sources {
  max-width: 880px;
  margin: 14px auto 0;
  padding-left: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
}
.about-sources li + li { margin-top: 12px; }

/* Ukázka štítku „Zpracováno AI" na stránce O projektu. Sdílí markup i
   text dialogu s hlasováním obcí (partials/ai-generated.blade.php), ale
   city.css se sem nenačítá, proto potřebuje vlastní lehké styly. */
.about-ai-demo { display: flex; justify-content: center; margin: 18px 0; }
.about-ai-demo .title-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--status-warning) 40%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-1));
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
}
.about-ai-demo .title-action:hover {
  border-color: color-mix(in srgb, var(--status-warning) 70%, var(--border));
  color: var(--text-primary);
}
.about-ai-demo .summary-card-icon { width: 15px; height: 15px; color: currentColor; opacity: .8; }
.app-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  overflow: hidden;
}
.app-dialog[open] { display: flex; flex-direction: column; }
.app-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.app-dialog-ai {
  border-color: color-mix(in srgb, var(--status-warning) 40%, var(--border));
  background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-1));
}
.app-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--status-warning) 40%, var(--border));
}
.app-dialog-head h2 { margin: 0; color: var(--text-primary); font-size: 15px; }
.app-dialog-close {
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}
.app-dialog-close:hover { color: var(--text-primary); }
.app-dialog-body {
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow-y: auto;
  text-align: justify;
  hyphens: auto;
}
.notice-dialog .process-steps { margin: 8px 0 12px; padding-left: 20px; }
.notice-dialog .process-steps li { margin-bottom: 6px; }
.notice-dialog .process-steps li:last-child { margin-bottom: 0; }
.notice-warning {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--status-warning) 40%, var(--border));
}

/* Podmínky použití (terms.blade.php) – obsah je právně strukturovaný do
   číslovaných bodů, proto používá vycentrovaný čitelný sloupec jako text
   stránky O projektu, ale vlastní styly seznamů. */
.terms-section {
  max-width: 880px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  line-height: 1.65;
}
.terms-page h1,
.terms-section h2 { color: #6366f1; text-align: center; }
.terms-section h2 { margin: 0 0 14px; font-size: 19px; }
.terms-section p { margin: 0 0 12px; text-align: justify; hyphens: auto; }
.terms-section ol,
.terms-section ul { margin: 0; padding-left: 1.4rem; }
.terms-section li { padding-left: .2rem; text-align: justify; hyphens: auto; }
.terms-section li + li { margin-top: 10px; }
.terms-section li > ul { margin-top: 10px; }
.terms-section a { color: var(--series-1); }