/**
 * nanokompozity.cz — vzhled podle schváleného návrhu navrh_vzhledu.html.
 * Hodnoty (šířky, mezery, velikosti písma) jsou převzaté odtud, neodhadují se.
 * Šablona Olivero se needituje, vše jde přes tento modul.
 * Pozn.: CSS modulu se načítá PŘED šablonou, proto místy !important.
 */

:root {
  --nano-primary: #1da7f6;
  --nano-dark: #2a3035;
  --nano-light-bar: #f1f3f5;
  --nano-text: #1a1d20;
  --nano-muted: #6b7280;
  --nano-line: #e3e6ea;
  /* Kontejner je TEKUTÝ (92 %) se stropem. Tekutost a centrování jsou
     z kola 4 a zůstávají; strop je podle návrhu 1200 px — z něj vychází
     hlavní sloupec na 820 px (1200 − 40 odsazení − 300 sloupec − 40 mezera).
     Hlavní sloupec se nikde nenastavuje napevno, vyjde z mřížky. */
  --nano-sirka: 92%;
  --nano-container: 1200px;
  --nano-odsazeni: 20px;
  --nano-side: 300px;
  --nano-gap: 40px;
}

/* Pod 768 px se přechází z POMĚRNÉ šířky na PEVNÝ okraj 16 px.
   Poměrných 92 % dávalo okraj, který roste s obrazovkou (375 px → 15 px,
   563 px → 22,5 px, 768 px → 30,7 px) a na širších telefonech ukrajovalo
   zbytečně moc místa. Pevná hodnota drží okraj stejný na každém telefonu.
   Řeší se přepnutím proměnných, ne dalším pravidlem — kontejnery níž je
   používají všechny stejně, takže se linka nemůže rozejít.
   `width: auto` + `margin-inline: auto` = okraje vyjdou na nulu, šířku dá
   rodič a bílý okraj drží jen `padding-inline`. */
/* Hranice je `48rem`, ne `47.99rem`: media dotazy se tu vyhodnocují proti
   šířce OKNA včetně posuvníku (ověřeno — při okně 768 px je `clientWidth`
   753 px a dotaz `max-width: 47.99rem` se neuplatnil). Zadání chce 768 px
   včetně, takže hranice musí být přesně 48rem. */
@media (max-width: 48rem) {
  :root {
    --nano-sirka: auto;
    --nano-container: none;
    --nano-odsazeni: 16px;
  }
}

/* ============================================================
   1. JEDNOTNÁ MŘÍŽKA — jádro celého návrhu
   Hlavička, lišty, obsah i patička začínají na stejné svislé lince.
   ============================================================ */

/* Kontejnery, které nesou svislou linku. Jen ty, které opravdu obalují celý
   pruh — vnořené obaly (lišta sekcí, vnitřek patičky) se řeší níž, jinak by
   se odsazení 20 px sečetlo dvakrát. */
.site-header__inner__container,
.region--secondary-menu > .secondary-nav,
.layout-main,
.site-footer__inner.container {
  width: var(--nano-sirka) !important;
  max-width: var(--nano-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--nano-odsazeni) !important;
}

/* Olivero omezuje bílou plochu stránky na `--max-bg-color` (98,125 rem =
   1570 px) a NEcentruje ji. Nad 1570 px okna tím vznikly dvě chyby najednou:
   kontejner se centroval do těch 1570 px, takže vlevo zbývalo 185 px
   a vpravo 325 px, a napravo od bílé plochy prosvítal Oliverův ozdobný
   vzorek z `body`. Strop se ruší, bílá plocha jde přes celé okno. */
.dialog-off-canvas-main-canvas .page-wrapper {
  max-width: none;
}

@media (min-width: 62.5rem) {
  /* Vlastní dvousloupcová mřížka obsahu.
     Olivero sází obsah do 14sloupcové mřížky `.sidebar-grid` a hlavní sloupec
     v ní posouvá NATVRDO na `grid-column: 3 / 11`
     (core/themes/olivero/css/layout/layout-sidebar.css, @media 62.5rem) —
     první dva sloupce zůstávají prázdné, což dělalo posun 170,84 px.
     Žádná proměnná to neřídí, proto se sloupce předefinují a obě
     části se umístí znovu. Naše selektory mají o třídu vyšší váhu než
     Oliverovy, takže není potřeba !important. */
  .main-content__container .sidebar-grid {
    grid-template-columns: minmax(0, 1fr) var(--nano-side);
    column-gap: var(--nano-gap);
    align-items: start;
  }

  .layout-main .sidebar-grid > .site-main {
    grid-column: 1 / 2;
  }

  .layout-main .sidebar-grid > .region--sidebar {
    grid-column: 2 / 3;
  }

  .layout-main > * {
    min-width: 0;
  }

  /* Hlavní fotka článku má v Oliveru třídu `wide-content` a schválně vylézá ze
     sloupce zápornými okraji spočítanými pro původní 14sloupcovou mřížku
     (core/themes/olivero/css/components/wide-content.css). U nás je hlavní
     sloupec široký přesně jak má, takže se to „vylezení“ ruší — jinak fotka
     přesahovala 87,79 px doleva mimo linku. */
  .layout-main .sidebar-grid .wide-content {
    width: 100%;
    margin-inline: 0;
  }

  .layout-main .region--sidebar {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .layout-main .region--content,
  .layout-main .region--content-above,
  .layout-main .region--content-below,
  .layout-main .grid-full,
  .layout-main .layout--pass--content-medium,
  .layout-main .layout--content-narrow,
  .layout-main .layout--content-medium {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* Obal obsahu má v Oliveru třídu `container` s vlastním vnitřním odsazením
   `--container-padding` (1,125 rem = 18 px). Linku drží kontejner výš, takže
   tenhle obal žádné vlastní odsazení mít nesmí — a to ve VŠECH šířkách.
   Dokud to platilo jen nad 1000 px, začínal obsah na mobilu i tabletu
   o 18 px vpravo od loga. */
.main-content__container.container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* MEZERA MEZI HLAVIČKOU A OBSAHEM (kolo 9, bod D) — globálně 32 px,
   na mobilu 20 px.
   Zdroje byly dva, ne jeden:
   1. `.main-content__container { padding-block-start: var(--sp5) }` = 90 px
      (nad mobilem; na mobilu `var(--sp3)` = 54 px)
      v olivero/css/layout/layout.css,
   2. horní okraj prvního prvku obsahu — na titulce `.nano-hero`
      (28 px, naše pravidlo z kola 4), na ostatních stránkách drobečková
      navigace (20 px, naše pravidlo z kola 8).
      Odsazení kontejneru brání slučování okrajů, takže se ty hodnoty
      SČÍTALY: 90 + 28 = 119 px na titulce, 90 + 12 = 102 px jinde.
   Mezeru drží nově jen kontejner, prvním prvkům se horní okraj nuluje. */
.main-content__container.container {
  padding-block-start: 32px;
}

/* Horní okraje prvních prvků obsahu se nulují u SVÝCH pravidel níž
   (`.nano-hero` a `.region--content-above .breadcrumb`), ne tady —
   ta pravidla jsou v souboru později a stejně silná, takže by override
   na tomhle místě prohrál na pořadí. */

@media (max-width: 48rem) {
  .main-content__container.container {
    padding-block-start: 20px;
  }
}

/* Pod 1000 px sází Olivero obsah do své 14sloupcové mřížky a nechává vlevo
   prázdné sloupce (`grid-column: 2 / 14` u bloků v obsahu, `3 / 13`
   u postranního sloupce). Při 768 px to posouvalo obsah o dalších 46,7 px
   doprava proti logu. Nad 1000 px platí naše dvousloupcová mřížka výš. */
@media (max-width: 62.49rem) {
  .layout-main .grid-full > *,
  .layout-main .layout--content-medium,
  .layout-main .layout--content-narrow,
  .layout-main .layout--pass--content-medium > *,
  .layout-main .layout--pass--content-narrow > *,
  .layout-main .sidebar-grid > .site-main,
  .layout-main .sidebar-grid > .region--sidebar {
    grid-column: 1 / -1;
  }
}

.layout-main .region--content {
  padding-block: 0 24px;
}

/* ============================================================
   2. TYPOGRAFIE
   ============================================================ */

html, body, p, li, h1, h2, h3, h4,
.node__content, .field--name-body, .text-content {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

body {
  color: var(--nano-text);
}

/* ============================================================
   3. HLAVIČKA A LIŠTY
   ============================================================ */

.site-header,
.site-header .site-header__fixable,
.site-header .site-header__inner,
.site-header .site-header__initial {
  background-color: #fff;
}

.site-header {
  border-block-end: 1px solid var(--nano-line);
}

.site-header__inner__container {
  padding-block: 0;
}

/* VÝŠKA BÍLÉ HLAVIČKY. Olivero drží pruh s logem na pevných 180 px:
   `.site-branding { min-height: var(--site-header-height-wide) }` (= --sp10
   = 10 × 1,125 rem) v olivero/css/components/header-site-branding.css
   pod @media (min-width: 75rem), a totéž má `.site-header` v site-header.css.
   Návrh výšku neurčuje, řídí ji obsah (odsazení 22 / 18 px). */
.site-header .site-branding,
.site-header.site-header {
  min-height: 0;
}

/* Olivero přidává pruhu s logem ještě VLASTNÍ odsazení
   (`padding-block: var(--sp0-5)` = 9 px a `padding-block-end: var(--sp)`
   = 18 px, header-site-branding.css) a ruší ho až od 75 rem. Odsazení
   22/18 px podle návrhu si nese `.site-branding__inner`, takže tohle je
   odsazení navíc — dvojité.
   Platí ve VŠECH šířkách schválně: kdyby bylo vázané na vodorovnou lištu,
   poskočila by výška bílé hlavičky na hranici hamburger → lišta o 27 px,
   a to je skok, který se skrz přepnutí menu vysvětlit nedá. */
.site-header .site-branding {
  padding-block: 0;
}

/* A hlavně: `.site-branding__inner` má v témže souboru na řádku 69 PEVNOU
   `height: var(--header-height-wide-when-fixed)` (= 108 px) pod
   @media (min-width: 75rem). Protože je to `height`, a ne `min-height`,
   nereagovala výška na obsah vůbec — pruh zůstal 108 px i se skrytým logem
   i sloganem. Výšku vrací obsahu `height: auto`. */
.site-branding .site-branding__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: auto;
  padding-block: 22px 18px;
}

.site-branding .site-branding__logo img {
  max-width: 250px;
  height: auto;
}

.site-branding .site-branding__slogan {
  color: #111;
  font-size: 15px;
  line-height: 1.3;
  max-width: none;
  white-space: nowrap;
}

/* HRANICE VODOROVNÉ LIŠTY = 1100 px (68,75 rem), ne 1000 px.
   Při 1000 px zbývalo deseti rubrikám jen 12 px rezervy — stačilo by
   přejmenovat rubriku na delší název a lišta by se rozbila, aniž by si toho
   kdokoli všiml. Při 1100 px je rezerva 104 px.
   POZOR: tenhle blok je vázaný na VODOROVNOU LIŠTU. Pravidla, která
   s lištou nesouvisejí (dvousloupcová mřížka obsahu, odsazení kontejnerů,
   výška pruhu s logem), zůstávají na svých původních hranicích — jinak by
   se na 1100 px hnulo i to, co s menu nemá nic společného. */
@media (min-width: 68.75rem) {
  .site-header,
  .site-header .site-header__fixable,
  .site-header .site-header__fixable.is-fixed {
    position: static !important;
    inset: auto !important;
    box-shadow: none !important;
  }

  .mobile-buttons {
    display: none !important;
  }

  /* Další dvě věci, které Olivero srovnává až od 75 rem, takže v pásmu
     1000–1199 px zůstávaly „mobilní":
     1. `.region--secondary-menu { margin-block-start/end: var(--sp2) }`
        (olivero/css/layout/region-secondary-menu.css) = 36 px nad i pod
        světlou lištou, tedy 72 px nazbyt v hlavičce a viditelná mezera
        mezi tmavou a světlou lištou,
     2. `.site-branding { padding-block: var(--sp0-5) }` + `padding-block-end:
        var(--sp)` (header-site-branding.css) = 9 px nahoře a 18 px dole,
        takže bílá hlavička měla 122,5 px místo 95,5 px jako nad 1200 px.
     Bez tohohle by přechod 1199 → 1200 px viditelně poskočil. */
  .site-header__inner .region--secondary-menu {
    margin-block: 0;
  }

  .site-header__inner .site-header__inner__container {
    flex-wrap: wrap;
    row-gap: 0;
  }

  /* Tmavá lišta rubrik přes celou šířku stránky, obsah v mřížce.
     POZOR: `100vw` počítá i svislý posuvník, takže lišta přečnívala o 15 px
     doprava a stránka měla vodorovný posuvník. Odečítá se `--scrollbar-width`
     (Olivero ji definuje v base/variables.css).
     `flex: none` je nutné: Olivero dává liště `flex-basis: max-content`,
     a dokud je basis jiný než `auto`, `width` se na šířku vůbec nepoužije. */
  .site-header__inner .header-nav {
    display: block !important;
    position: static !important;
    inset: auto !important;
    flex: none;
    /* Celoplošná lišta. Do výpočtu musí kromě posuvníku vstoupit i odsazení,
       které si rezervuje administrátorská navigace Drupalu
       (`--drupal-displace-offset-left`, sbalená 72 px, rozbalená 264 px).
       Bez toho se lišta počítala z celého `100vw` a přihlášenému uživateli
       přetékala stránka o šířku té navigace (naměřeno 132 px při okně
       1163 px). Nepřihlášený stav se nemění — obě proměnné jsou tam 0.
       Odvození okraje: obsah leží ve viditelném pruhu širokém
       `pruh = 100vw − posuvník − vlevo − vpravo`, kontejner je v něm
       vycentrovaný, takže posun na jeho levý okraj je `50% − pruh/2`. */
    width: calc(
      100vw - var(--scrollbar-width, 0px)
      - var(--drupal-displace-offset-left, 0px)
      - var(--drupal-displace-offset-right, 0px)
    ) !important;
    margin-inline: calc(
      50% - 50vw + var(--scrollbar-width, 0px) / 2
      + var(--drupal-displace-offset-left, 0px) / 2
      + var(--drupal-displace-offset-right, 0px) / 2
    ) !important;
    background-color: var(--nano-dark);
    /* Zbytky mobilní zásuvky. Olivero je ruší až od 75 rem (1200 px), jenže my
       přepínáme na vodorovnou lištu už od 62,5 rem — v pásmu 1000–1199 px by
       tedy lišta zůstala široká 500 px (`--mobile-nav-width`), odsazená
       o 54 px zleva a s bílým pruhem místo horního okraje.
       KLÍČOVÉ: `visibility`. Základní pravidlo
       `.header-nav { visibility: hidden }` (header-navigation.css) ruší až
       `body:not(.is-always-mobile-nav) .header-nav` pod @media 75rem.
       V pásmu 1000–1199 px tedy byla lišta NEVIDITELNÁ, ale protože jsme ji
       vytáhli z `position: fixed` do toku, pořád zabírala 582 px na výšku —
       odtud ta prázdná bílá plocha nad obsahem. */
    visibility: visible !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border-block-start: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* Stejný kontejner jako všude jinde — lišta je přes celé okno,
     ale odkazy v ní musí začínat na společné lince. */
  .site-header__inner .header-nav .primary-nav {
    position: static !important;
    width: var(--nano-sirka);
    max-width: var(--nano-container);
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* `display: flex` je taky nutné doplnit: seznam odkazů je ve výchozím stavu
     blokový (zásuvka je svislá) a vodorovný ho dělá až
     nav-primary-wide.css pod @media 75rem. V pásmu 1000–1199 px se proto
     deset rubrik skládalo pod sebe do sloupce vysokého 468 px. */
  /* `flex-wrap: wrap` je POJISTKA, ne běžný stav. Při nepřihlášeném prohlížení
     se deset rubrik vejde na jeden řádek v každé šířce od 1100 px výš
     (při 1100 px potřebují 854 px a mají 958). Zalomí se jen tehdy, když
     webu ubere místo něco, co media dotaz nevidí — typicky rozbalená
     administrátorská navigace, která při okně 1163 px nechá webu jen 884 px,
     zatímco lišta potřebuje ~894. Dřívější `nowrap` v takové chvíli vystrčilo
     položky ven a stránka dostala vodorovný posuvník.
     Dvouřádková lišta je ošklivější než jednořádková, ale je to pořád lepší
     než posuvník — a jakmile se navigace sbalí, vrátí se na jeden řádek. */
  .header-nav .primary-nav__menu--level-1 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
  }

  .header-nav .primary-nav__menu-item--level-1 {
    display: flex;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-nav .primary-nav__menu-link--level-1 {
    padding: 14px 15px !important;
    font-weight: 600;
    color: #fff !important;
    white-space: nowrap;
  }

  /* VÝŠKA TMAVÉ LIŠTY. Text odkazu je zabalený v `<span
     class="primary-nav__menu-link-inner">` a Olivero mu v
     olivero/css/components/navigation/nav-primary-wide.css dává
     `padding-block: var(--sp2)` = 2 × 1,125 rem = 36 px nahoře i dole.
     Se zděděným řádkováním 27 px z toho vyšlo 99 px, plus 14 + 14 px odsazení
     odkazu = 127 px; s vnořenou světlou lištou měla hlavička 177 px místo 47.
     Táž šablona tam přebíjí i velikost písma (`font-size: 1rem`), proto naše
     14,5 px neplatila.
     Oliverovy selektory mají tvar `body:not(.is-always-mobile-nav) .třída`
     (jedna značka + dvě třídy), takže potřebujeme tři třídy, aby naše
     hodnoty vyhrály. Bez !important. */
  .header-nav .primary-nav__menu-item--level-1 .primary-nav__menu-link--level-1,
  .header-nav .primary-nav__menu-item--level-1 .primary-nav__menu-link-inner {
    font-size: 14.5px;
    line-height: 1.3;
  }

  .header-nav .primary-nav__menu-item--level-1 .primary-nav__menu-link-inner {
    padding-block: 0;
  }

  .header-nav .primary-nav__menu-link--level-1::before,
  .header-nav .primary-nav__menu-link--level-1::after {
    display: none !important;
  }

  .header-nav .primary-nav__menu-item--level-1:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Domů modře, Hledat odsunuté doprava. */
  .header-nav .primary-nav__menu-item--level-1:first-child {
    background-color: var(--nano-primary);
  }

  .header-nav .primary-nav__menu-item--level-1:last-child {
    margin-inline-start: auto !important;
  }
}

/* ============================================================
   3b. MOBILNÍ ZÁSUVKA (pod 1100 px)
   Oliverovy výchozí rozměry jsou pro tenhle web předimenzované: písmo
   28 px (`.primary-nav__menu-link { font-size: 1.75rem }`
   v olivero/css/components/navigation/nav-primary.css), položka vysoká
   54 px a odsazení 18 px, zatímco zbytek webu má 14–16 px.
   Zmenšuje se PÍSMO, ne dotyková plocha — položka musí zůstat aspoň 44 px.
   Hranice musí přesně navazovat na blok vodorovné lišty výš (68,75 rem),
   aby v pásmu mezi nimi nezůstala zásuvka bez úprav ani lišta bez zásuvky.
   ============================================================ */

@media (max-width: 68.74rem) {
  /* Odsazení zásuvky stejné jako obsah webu (bod B), místo Oliverových
     18 px. Olivero to má na `.header-nav` (jedna třída), stačí nám dvě. */
  .site-header__inner .header-nav {
    padding-inline: 16px;
  }

  .header-nav .primary-nav__menu-link--level-1,
  .header-nav .primary-nav__menu-link-inner {
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 600;
  }

  /* 12 + 12 px odsazení + řádkování 21,5 px = položka ~46 px.
     Nezmenšovat — pod 44 px se na telefonu začne klikat vedle. */
  .header-nav .primary-nav__menu-link-inner {
    padding-block: 12px;
  }

  .header-nav .primary-nav__menu-item--level-1 {
    border-block-end: 1px solid var(--nano-line);
  }

  /* Druhá lišta (Firmy, Videa, Akce, Projekty, Donate) se do zásuvky sype
     taky — musí mít stejné odsazení i velikost, jinak vypadá jako cizí.
     Vlastní odsazení kontejneru se tu ruší, linku drží zásuvka sama. */
  .header-nav .region--secondary-menu > .secondary-nav {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .header-nav .region--secondary-menu .secondary-nav__menu-link {
    padding: 12px 0;
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 600;
  }

  .header-nav .region--secondary-menu .secondary-nav__menu-item {
    border-block-end: 1px solid var(--nano-line);
  }

  .header-nav .region--secondary-menu .secondary-nav__menu {
    display: block;
  }
}

/* Světlá lišta sekcí. Leží UVNITŘ `.header-nav`, která už je přes celou
   šířku stránky — proto stačí 100 %, žádné 100vw (to by zase přečnívalo). */
.region--secondary-menu {
  display: block;
  width: 100%;
  margin-inline: 0;
  background-color: var(--nano-light-bar);
  border-block-end: 1px solid var(--nano-line);
}

.region--secondary-menu .secondary-nav,
.region--secondary-menu .block-menu {
  display: block;
  width: 100%;
}

/* Linku drží obal `.secondary-nav` (viz kontejnery nahoře), samotný seznam
   proto žádné vlastní odsazení ani středění mít nesmí. */
.region--secondary-menu .secondary-nav__menu {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 0;
  list-style: none;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.region--secondary-menu .secondary-nav__menu-item {
  margin: 0;
}

/* Řádkování musí být vlastní — zděděných 27 px z těla dělalo lištu 50 px
   místo 41 px podle návrhu. */
.region--secondary-menu .secondary-nav__menu-link {
  display: block;
  padding: 11px 15px;
  color: #41474d;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
}

.region--secondary-menu .secondary-nav__menu-item:first-child .secondary-nav__menu-link {
  padding-inline-start: 0;
}

.region--secondary-menu .secondary-nav__menu-link:hover {
  color: var(--nano-primary);
}

/* ============================================================
   4. TOP ČLÁNEK (hero) na titulce
   ============================================================ */

.nano-hero .views-row {
  position: relative;
  margin: 28px 0 34px;
  overflow: hidden;
  border-radius: 4px;
  border: 0;
  padding: 0;
}

.nano-hero .views-field-field-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.nano-hero .views-field-field-categories,
.nano-hero .views-field-title,
.nano-hero .views-field-created {
  position: relative;
  z-index: 2;
}

.nano-hero .views-row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.nano-hero .views-field-field-categories {
  position: absolute;
  inset-block-end: 92px;
  inset-inline-start: 32px;
}

.nano-hero .views-field-field-categories a {
  display: inline-block;
  background: var(--nano-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 10px;
}

.nano-hero .views-field-title {
  position: absolute;
  inset-block-end: 46px;
  inset-inline: 32px;
}

.nano-hero .views-field-title a {
  color: #fff;
  font-size: 31px;
  line-height: 1.22;
  font-weight: 800;
  text-decoration: none;
  max-width: 24ch;
  display: inline-block;
}

.nano-hero .views-field-created {
  position: absolute;
  inset-block-end: 26px;
  inset-inline-start: 32px;
  color: #fff;
  font-size: 13px;
  opacity: 0.85;
}

/* ============================================================
   5. MŘÍŽKA ČLÁNKŮ na titulce
   ============================================================ */

.view-blog .views-view-grid {
  --views-grid--layout-gap: 30px;
}

.view-blog .views-view-grid__item {
  display: flex;
  padding: 0;
  border: 0;
  margin-block-end: 32px;
}

.view-blog .views-view-grid__item-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.view-blog .views-view-grid .teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.view-blog .views-view-grid .teaser > header,
.view-blog .views-view-grid .teaser__top {
  display: contents;
}

.view-blog .views-view-grid .teaser__image {
  order: 1;
  margin-block-end: 12px;
}

/* Náhled karty v poměru 16:9 podle návrhu (`.card .thumb`). Bez tohohle
   si box bral přirozený poměr obrázku — u stylu vypis_230 to bylo 230:144
   = 1,597, tedy ani 16:9, ani jednotně. `object-fit: cover` už zděděné je,
   takže se obrázek ořízne, nedeformuje. */
.view-blog .views-view-grid .teaser__image img {
  aspect-ratio: 16 / 9;
}

.view-blog .views-view-grid .teaser__title {
  order: 2;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  margin-block: 0 7px;
}

.view-blog .views-view-grid .teaser__content {
  order: 3;
  gap: 8px;
}

.view-blog .views-view-grid .teaser__meta {
  order: 4;
  margin-block: 8px 0;
  font-size: 12.5px;
  color: var(--nano-muted);
}

@media (max-width: 767px) {
  .view-blog .views-view-grid--horizontal {
    grid-template-columns: 1fr !important;
  }
}

/* Náhledy obecně — nikdy kroužek, nikdy absolutní posun. */
.teaser .teaser__image {
  position: static !important;
  inset: auto !important;
  margin: 0;
  width: 100%;
}

.teaser .teaser__image,
.teaser .teaser__image > a {
  display: block;
  width: 100%;
}

.teaser .teaser__image img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  object-fit: cover;
}

.teaser::after {
  display: none;
}

/* ============================================================
   6. VÝPIS RUBRIKY — fotka 230 px vlevo, text v bloku vpravo
   ============================================================ */

.view:not(.view-blog) .views-row,
.region--content .item-list .views-row {
  padding-block: 22px;
  margin: 0;
  border-block-end: 1px solid var(--nano-line);
}

/* Návrh: `.row:first-of-type { padding-top: 0 }` — první položka se lepí
   rovnou pod nadpis rubriky, nemá nad sebou odsazení navíc. */
.view:not(.view-blog) .view-content > .views-row:first-child {
  padding-block-start: 0;
}

@media (min-width: 48rem) {
  .view:not(.view-blog) .teaser {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 0;
  }

  .view:not(.view-blog) .teaser > header,
  .view:not(.view-blog) .teaser__top {
    display: contents;
  }

  .view:not(.view-blog) .teaser__image {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  /* Návrh má u výpisu 16:10, ale obrázek dodává styl `karta_16_9`
     (800 × 450) z kola 5 a uživatel rozhodl NEZAKLÁDAT další styl.
     Poměr se proto srovnává na 16:9, ať se náhled neořezává podruhé. */
  .view:not(.view-blog) .teaser__image img {
    aspect-ratio: 16 / 9;
  }

  .view:not(.view-blog) .teaser__title {
    grid-column: 2;
    grid-row: 1;
    margin-block: 0 6px;
    font-size: 20px;
    line-height: 1.28;
    font-weight: 700;
  }

  .view:not(.view-blog) .teaser__meta {
    grid-column: 2;
    grid-row: 2;
    margin-block: 0 9px;
    font-size: 12.5px;
    color: var(--nano-muted);
  }

  /* Obal obsahu se rozpouští, aby se náš řádek metadat i perex daly umístit
     do mřížky samostatně (metadata řádek 2, perex řádek 3). */
  .view:not(.view-blog) .node--type-article .teaser__content {
    display: contents;
  }

  .view:not(.view-blog) .node--type-article .nano-meta {
    grid-column: 2;
    grid-row: 2;
  }

  .view:not(.view-blog) .node--type-article .field--name-field-perex {
    grid-column: 2;
    grid-row: 3;
  }

  /* Typy obsahu bez našeho řádku metadat (akce, projekty) si obal nechávají. */
  .view:not(.view-blog) .teaser__content {
    grid-column: 2;
    grid-row: 3;
    gap: 6px;
  }
}

/* ŘÁDEK METADAT „rubriky · datum · autor".
   Vykresluje ho modul (`_nano_uprava_radek_metadat`), protože Olivero má
   slovo „Od", jméno autora i datum v jednom textovém uzlu a rubriky navíc
   v jiném obalu — CSS to přeskládat neumí. Oliverova verze se proto
   u ČLÁNKŮ schová, u ostatních typů obsahu zůstává. */
.view:not(.view-blog) .node--type-article .teaser__meta,
.view:not(.view-blog) .node--type-article .field--name-field-categories,
.view:not(.view-blog) .node--type-article .field--name-field-tags {
  display: none;
}

/* Na titulce se karty nemění — tam zůstává původní podoba z kola 5. */
.view-blog .nano-meta {
  display: none;
}

.nano-meta {
  margin-block: 0 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nano-muted);
}

.nano-meta a {
  color: var(--nano-primary);
  font-weight: 600;
  text-decoration: none;
}

/* Pod 768 px se řádkový výpis skládá pod sebe. Obal `.teaser__top` je
   v Oliveru flexbox v řádku — dokud byl náhled absolutně umístěný, nevadilo
   to, ale po přepnutí na statické umístění tlačil nadpis o 170 px mimo
   obrazovku a stránka se dala posouvat do stran. */
@media (max-width: 47.99rem) {
  .view:not(.view-blog) .teaser > header,
  .view:not(.view-blog) .teaser__top {
    display: block;
  }

  /* Obrázek nad textem, přes celou šířku, mezera 14 px. */
  .view:not(.view-blog) .teaser__image {
    margin-block-end: 14px;
  }
}

/* Perex ve výpisu. `font-family` musí být uvedená výslovně: perex nese třídu
   `text-content` a Olivero jí v components/text-content.css dává patkové
   písmo (`Lora, georgia, serif`). Na titulce i tady má být stejné bezpatkové
   písmo jako ve zbytku webu, jen o půl bodu větší (15 px). */
.view .teaser .field--name-field-perex {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #3f464d;
  line-height: 1.5;
  margin-block: 0;
}

/* Rubriky a štítky na řádku. */
.field--name-field-categories,
.field--name-field-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  margin-block: 0.3em;
  font-size: 12.5px;
}

.field--name-field-categories .field__label,
.field--name-field-tags .field__label {
  font-weight: 700;
  margin: 0;
}

.field--name-field-categories .field__item,
.field--name-field-tags .field__item {
  margin: 0;
}

/* ============================================================
   7. DETAIL ČLÁNKU
   ============================================================ */

/* Bez omezení šířky. Návrh měl `max-width: 26ch`, jenže hlavní sloupec je sám
   o sobě dost úzký na to, aby řádek nebyl nečitelně dlouhý — a nadpis se kvůli
   tomu lámal zbytečně brzy. Láme se podle sloupce, ne podle počtu znaků. */
.page-title,
h1.page-title {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  /* Když se nadpis přece jen na dva řádky zalomí (úzký sloupec kolem 1024 px),
     `balance` rozdělí slova rovnoměrně, takže na druhém řádku nezůstane
     osamocené slovo. Prohlížeče, které to neumí, zalomí jako dřív. */
  /* KOLO 16, bod A: `balance` vyrovnává délku řádků, takže nadpis lámal
     dřív, než musel — naměřeno při 1280 px: řádky 452 a 431 px v sloupci
     širokém 784 px. `max-width` přitom byl `none`, šířka ho neomezovala.
     `pretty` v tomhle prohlížeči láme stejně jako `auto` (naměřeno
     766 + 117 px), takže osamocené slovo na posledním řádku hlídá
     nezlomitelná mezera, kterou před poslední slovo vkládá `js/nano.js`. */
  text-wrap: pretty;
  margin-block: 26px 14px;
}

.node--view-mode-full .node__meta {
  margin-block-end: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nano-muted);
}

/* `:not(:last-child)` je nutné kvůli váze: Olivero má
   `.field:not(:last-child) { margin-block-end: var(--sp2) }` (= 36 px),
   což je stejně silné jako dvě třídy a načítá se později, takže by vyhrálo
   a pod fotkou by zůstala mezera 36 místo 22 px podle návrhu. */
.node--view-mode-full .field--name-field-image,
.node--view-mode-full .field--name-field-image:not(:last-child) {
  margin-block: 18px 22px;
}

.node--view-mode-full .field--name-field-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Perex — JEN V DETAILU ČLÁNKU (kolo 12).
   Původní selektor `.field--name-field-perex, .field--name-field-perex p`
   byl bez omezení, takže 17,5 px / 700 platilo i ve výpisech. Obal tam sice
   pravidlo pro výpis přebilo na 15 px / 400, ale odstavec `<p>` UVNITŘ ne —
   ten měl dál 17,5 px / 700 a tučný perex se opakoval u každé položky.
   Zúženo na `.node--view-mode-full`, tedy na celý článek. Přebíjet se
   nemusí nic a `!important` u řádkování zmizelo: `.node__content
   .text-content` má perex od kola 5 vyjmutý (`:not(.field--name-field-perex)`),
   takže tu není s čím soupeřit.
   `:not(:last-child)` je kvůli Oliverovu `.field:not(:last-child)`
   (mezera 36 px místo 20 podle návrhu). */
.node--view-mode-full .field--name-field-perex,
.node--view-mode-full .field--name-field-perex p,
.node--view-mode-full .node__content .field--name-field-perex:not(:last-child) {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.55;
  margin-block: 0 20px;
}

/* Perex nese i třídu `text-content`, takže ho pravidlo pro tělo článku
   přebíjelo zpátky na 16 px — proto je odsud vyjmutý. */
.node__content .field--name-body,
.node__content .text-content:not(.field--name-field-perex) {
  font-size: 16px;
  line-height: 1.72;
}

.node__content .field--name-body p,
.node__content .text-content p {
  margin-block: 0 18px;
}

/* Obrázky uvnitř textu — text se na ně nesmí lepit. */
.node__content .field--name-body img[align="left"],
.node__content .field--name-body img[style*="float: left"],
.node__content .field--name-body img[style*="float:left"],
.node__content .field--name-body .align-left {
  float: left;
  margin: 6px 26px 16px 0;
  max-width: 330px;
  height: auto;
}

.node__content .field--name-body img[align="right"],
.node__content .field--name-body img[style*="float: right"],
.node__content .field--name-body img[style*="float:right"],
.node__content .field--name-body .align-right {
  float: right;
  margin: 6px 0 16px 26px;
  max-width: 330px;
  height: auto;
}

.node__content .field--name-body figcaption,
.node__content .field--name-body .caption {
  font-size: 12.5px;
  color: var(--nano-muted);
  margin-block-start: 6px;
  line-height: 1.4;
}

.node__content .field--name-body::after {
  content: "";
  display: block;
  clear: both;
}

/* Blok autora. */
.field--name-field-autori .node--type-autor {
  padding-block-start: 16px;
  border-block-start: 1px solid var(--nano-line);
}

.field--name-field-autori .teaser__meta,
.field--name-field-autori .teaser__image {
  display: none;
}

.field--name-field-autori .field--name-field-obr-zek {
  float: left;
  margin: 0 20px 8px 0;
}

.field--name-field-autori .field--name-field-obr-zek img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 3px;
}

.field--name-field-autori .teaser__title {
  font-size: 18px;
  margin-block: 0 6px;
}

.field--name-field-autori .field--name-field-perex,
.field--name-field-autori .field--name-body {
  font-size: 15px;
  font-weight: 400;
}

/* Související články. */
.region--content-below .block-views {
  margin-block-start: 32px;
  padding-block-start: 20px;
  border-block-start: 2px solid var(--nano-dark);
}

.region--content-below .block__title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-block-end: 14px;
}

.region--content-below .view-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.region--content-below .views-row {
  border: 0;
  margin: 0;
  padding: 0;
}

.region--content-below .views-field-field-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
}

.region--content-below .views-field-title {
  display: block;
  margin-block-start: 8px;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
}

/* Navigace Předchozí / Další. */
.nano-navigace {
  display: flex;
  gap: 16px;
  margin-block: 32px 16px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--nano-line);
}

.nano-navigace__polozka {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid var(--nano-line);
  text-decoration: none;
  line-height: 1.3;
}

.nano-navigace__polozka--dalsi {
  text-align: right;
}

.nano-navigace__polozka--prazdna {
  border: 0;
}

.nano-navigace__popisek {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nano-muted);
}

.nano-navigace__nazev {
  font-weight: 700;
  color: var(--nano-text);
}

/* ============================================================
   8. POSTRANNÍ SLOUPEC
   ============================================================ */

.region--sidebar .block {
  margin-block-end: 34px;
}

/* ROZTEČ POLOŽEK. Obal řádků `.view-content` je v Oliveru mřížka
   s `gap: var(--sp3)` = 54 px (olivero/css/components/views.css), takže mezi
   položkami zbývalo 54 px navíc a rozteč byla 156,9 px místo 82,5 px
   podle návrhu. Odsazení si nese sama položka (11 px nahoře i dole). */
.region--sidebar .view-content {
  gap: 0;
}

/* Vlastní řádkování: zděděných 27 px z těla dělalo z data pod nadpisem
   pruh vysoký 27 px místo 18,6 px, což je ta „mezera navíc pod nadpisem". */
.region--sidebar {
  line-height: 1.55;
}

.region--sidebar .block__title {
  margin-block: 0 14px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nano-text);
  padding-block-end: 9px;
  border-block-end: 2px solid var(--nano-dark);
}

/* Položka: náhled 82×58 vlevo, nadpis na dva řádky, pod ním datum. */
/* `column-gap`, ne `gap`: návrh má v položce jen dvě buňky vedle sebe, kdežto
   Views vykresluje tři pole (náhled, nadpis, datum) do dvou řádků — svislá
   mezera 12 px se tam proto navíc uplatnila a položka byla o 12 px vyšší. */
.region--sidebar .views-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 0;
  align-items: start;
  padding-block: 11px;
  margin: 0;
  border-block-end: 1px solid var(--nano-line);
}

.region--sidebar .views-row:last-child {
  border-block-end: 0;
}

.region--sidebar .views-field-field-image {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.region--sidebar .views-field-field-image img {
  width: 82px;
  height: 58px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.region--sidebar .views-field-title {
  grid-column: 2;
}

.region--sidebar .views-field-title a {
  color: var(--nano-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.region--sidebar .views-field-title a:hover {
  color: var(--nano-primary);
}

.region--sidebar .views-field-created {
  grid-column: 2;
  font-size: 12px;
  color: var(--nano-muted);
  margin-block-start: 4px;
}

.region--sidebar .menu-item {
  padding-block: 6px;
  border-block-end: 1px solid var(--nano-line);
  font-size: 14px;
}

/* ============================================================
   9. PATIČKA
   ============================================================ */

/* Patička. Obal `.page-wrapper` v selektoru není ozdoba: Olivero má
   `.site-footer { background: linear-gradient(...) }` — a protože je to
   ZKRATKA `background`, vynulovala nám `background-color` a patička zůstávala
   světle šedá. Stejně silné pravidlo šablony se načítá později, takže tu
   potřebujeme o třídu navíc. */
.page-wrapper .site-footer {
  background: #1c2024;
  color: #c8ced4;
  margin-block-start: 56px;
  line-height: 1.55;
}

/* Olivero nechává pod patičkou 234 px prázdna (--sp13). Návrh má 44 px
   nahoře a nic dole. */
.site-footer .site-footer__inner {
  padding-block: 0 20px;
}

.site-footer .region--footer_top__inner {
  margin-block-end: 0;
}

.site-footer a {
  color: #e6eaee;
}

.site-footer .region--footer-top {
  padding-block: 44px 0;
}

/* Vnitřek patičky. Olivero mu dává `grid-column: 3 / 13`
   (core/themes/olivero/css/layout/layout-content-medium.css, pravidlo
   `.layout--pass--content-medium > *`), což patičku posouvalo o 170,84 px
   doprava. Linku už drží `.site-footer__inner.container`, takže vnitřek
   zabírá celou šířku a žádné další odsazení nepřidává. */
.site-footer .region--footer_top__inner,
.site-footer .region--footer_bottom__inner,
.site-footer .region--footer-bottom > * {
  grid-column: 1 / -1;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.site-footer .region--footer_top__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.4fr;
  gap: 44px;
}

.site-footer .block {
  margin-block-end: 0;
}

/* O třídu navíc kvůli Oliverovu `.site-footer .block__title` v block.css,
   které je stejně silné a načítá se později. */
.page-wrapper .site-footer .block__title {
  margin-block: 0 16px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-block-end: 9px;
  border-block-end: 2px solid var(--nano-primary);
}

/* O třídu navíc kvůli Oliverovu `.site-footer .text-content { color: inherit }`. */
.page-wrapper .site-footer p {
  font-size: 14px;
  line-height: 1.65;
  color: #a9b1b9;
  margin: 0;
}

/* Štítky jako odznaky. */
.site-footer .block-views-blockstitky-block-1 .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer .block-views-blockstitky-block-1 .views-row {
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
}

.site-footer .block-views-blockstitky-block-1 .views-row a {
  display: inline-block;
  border: 1px solid #3a4147;
  padding: 5px 11px;
  font-size: 12.5px;
  border-radius: 3px;
  color: #c8ced4;
  text-decoration: none;
}

/* Novinky s náhledem 70×50. */
.site-footer .block-views-blockblog-block-2 .views-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-block: 9px;
  border-block-end: 1px solid #2c3237;
}

.site-footer .block-views-blockblog-block-2 .views-field-field-image {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.site-footer .block-views-blockblog-block-2 .views-field-field-image img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.site-footer .block-views-blockblog-block-2 .views-field-title a {
  color: #e6eaee;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-footer .block-views-blockblog-block-2 .views-field-created {
  grid-column: 2;
  font-size: 11.5px;
  color: #8b949c;
  margin-block-start: 3px;
}

/* Spodní řádek s copyrightem. */
.nano-copyright {
  max-width: none;
  margin: 36px 0 0;
  padding: 16px 0;
  border-block-start: 1px solid #2c3237;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: #8b949c;
}

/* ============================================================
   10. MOBIL — jen aby se nic nerozpadalo
   ============================================================ */

@media (max-width: 61.99rem) {
  .site-header .site-branding__inner {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-block: 14px 12px;
  }

  .site-header .site-branding__logo img {
    max-width: 190px;
  }

  .site-header .site-branding__text {
    flex: 1 1 100%;
  }

  .site-header .site-branding__slogan {
    white-space: normal;
    font-size: 13px;
  }

  .page-title,
  h1.page-title {
    font-size: 24px;
  }

  .nano-hero .views-field-title a {
    font-size: 20px;
  }

  .nano-hero .views-field-field-categories {
    inset-block-end: 74px;
  }

  .site-footer .region--footer_top__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .nano-copyright {
    flex-direction: column;
    gap: 6px;
  }

  .node__content .field--name-body .align-left,
  .node__content .field--name-body .align-right {
    float: none;
    margin: 12px 0;
    max-width: 100%;
  }
}

/* Prázdná lišta sociálních ikon — ikonky se nepřidávají. */
.social-bar {
  background-color: transparent;
}

.social-bar .social-bar__inner {
  padding-block: 0;
}

/* ============================================================
   OPRAVY PO KONTROLE NÁVRHU
   ============================================================ */

/* 1. Olivero si vlevo rezervuje pruh široký `--content-left` (5,625 rem = 90 px,
   core/themes/olivero/css/base/variables.css) pro sociální lištu a přepínač
   lepivé hlavičky. Šířku z něj odvozuje hlavička
   (`.site-header__inner`), obsah (`.main-content`), patička i sama sociální
   lišta. Ikonky se nepřidávají a lepivá hlavička je vypnutá, takže se
   proměnná přepíše v KOŘENI — tím pruh zmizí všude najednou a nemusí se
   přebíjet jednotlivé selektory.
   Zápis `html:root` není překlep: CSS modulu se načítá PŘED šablonou, a proti
   Oliverovu `:root` by stejně silný `:root` prohrál na pořadí. Přidaná značka
   `html` zvedne váhu, takže !important není potřeba. */
html:root {
  --content-left: 0px;
}

.social-bar {
  display: none !important;
}

/* Ozdobný vzorek Olivera (dvě kapky v SVG, opacity 0,05, `body`
   v olivero/css/base/base.css). V návrhu není a na širokém monitoru jen
   zvýrazňoval prázdné místo vpravo. Žádnou funkci nemá — je čistě dekorace
   šablony. Pryč.
   Zápis `html body` (ne samotné `body`) je zase kvůli pořadí načítání —
   viz `html:root` výš. */
html body {
  background-image: none;
}

/* Levý sloupec hlavičky. Po vynulování proměnné v něm zbyl jen přepínač
   lepivé hlavičky se svou vlastní šířkou 12 px — a ta logo pořád posouvala.
   Lepivá hlavička je na desktopu vypnutá, takže sloupec nemá co dělat. */
.site-header .site-header__initial {
  display: none;
}

/* 2. Hero: popisky ve svislém toku, ať se nepřekrývají. */
.nano-hero .views-row {
  display: block;
}

.nano-hero .views-field-field-categories,
.nano-hero .views-field-title,
.nano-hero .views-field-created {
  position: absolute;
  inset-inline: 32px;
  inset-block-end: auto;
}

.nano-hero .views-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.nano-hero .views-field-field-image {
  position: absolute;
  inset: 0;
}

.nano-hero .views-field-field-image img {
  height: 100%;
  object-fit: cover;
}

.nano-hero .views-row {
  min-height: 360px;
  padding: 70px 32px 26px;
}

.nano-hero .views-field-field-categories,
.nano-hero .views-field-title,
.nano-hero .views-field-created {
  position: relative;
  inset: auto;
}

.nano-hero .views-field-field-categories {
  margin-block-end: 12px;
}

.nano-hero .views-field-field-categories a {
  margin-inline-end: 6px;
}

.nano-hero .views-field-title {
  margin-block-end: 8px;
}

/* ============================================================
   14. VÝPIS RUBRIKY — nadpis, mezery, drobečková navigace (kolo 8)
   ============================================================ */

/* NADPIS RUBRIKY 34 → 30 px podle návrhu (`.term h1`). Velikost 34 px
   nastavuje naše vlastní pravidlo `.page-title, h1.page-title` z kola 5 —
   to ale platí i pro nadpis článku, kde je 34 px schválených. Zmenšuje se
   proto vázané na to, že stránka NENÍ detail uzlu.
   ROZLIŠOVACÍ VLASTNOST (kolo 10): `body:not(.path-node)`. Drupal dává
   detailu uzlu vždy třídu `path-node` (ověřeno: článek i stránka „Firmy"
   ji mají), kdežto všechny výpisy dostanou třídu podle své cesty —
   `path-taxonomy`, `path-projekty`, `path-event-created`, `path-search`.
   Výhoda proti výčtu cest: každý nový pohled se chová správně sám od sebe
   a nemusí se nikam dopisovat. */
body:not(.path-node) .page-title,
body:not(.path-node) h1.page-title {
  font-size: 30px;
  margin-block: 26px 22px;
}

/* MEZERA POD NADPISEM byla 122 px místo 22 px podle návrhu. Skládala se ze
   čtyř kusů, všechny `--sp3` = 54 px z Olivera:
   1. `.block { margin-block-end: var(--sp3) }` (components/block.css)
      na bloku s nadpisem stránky → 54 px pod nadpisem,
   2. totéž na bloku drobečkové navigace → 54 px mezi drobečky a nadpisem,
   3. `.view { row-gap: var(--sp3) }` (components/views.css); první dítě
      `.view-header` je sice vysoké 0 px, ale NENÍ prázdné (`:empty` na něj
      nesedí, obsahuje prázdný div), takže mřížka mezeru vytvoří → 54 px
      nad prvním článkem,
   4. `.view-content { row-gap: var(--sp3) }` → 54 px mezi každými dvěma
      položkami navíc k jejich odsazení 22 + 22 px.
   K tomu 14 px spodního okraje nadpisu z našeho pravidla.
   Ruší se cíleně, jen v hlavním obsahu — patička a postranní sloupec mají
   vlastní rozestupy a titulka (`.view-blog`) je schválená z kola 5. */
body:not(.path-node) .region--content-above .block-page-title-block {
  margin-block-end: 0;
}

.region--content-above .block-system-breadcrumb-block {
  margin-block-end: 0;
}

.region--content .view:not(.view-blog),
.region--content .view:not(.view-blog) .view-content {
  row-gap: 0;
}

/* Mezera nad stránkováním se tím taky ztratila — vrací se výslovně. */
.region--content .view:not(.view-blog) .pager {
  margin-block-start: 34px;
}

/* DROBEČKOVÁ NAVIGACE. Blok `olivero_breadcrumbs` už existoval, byl jen
   vypnutý — jen se zapnul a přesunul nad nadpis (viz konfigurační změny). */
/* Horní okraj je 0: mezeru mezi hlavičkou a obsahem drží od kola 9
   výhradně `.main-content__container` (32 px, na mobilu 20 px). Kdyby si
   drobečky přidaly vlastní, sečetlo by se to. */
.region--content-above .breadcrumb {
  margin-block: 0 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--nano-muted);
}

/* Olivero z drobečkové navigace dělá pod 1000 px vodorovně POSUVNÝ PRUH:
   `.breadcrumb__content { overflow: auto; margin-inline: -9px -18px }`,
   `.breadcrumb__list { width: max-content; white-space: nowrap;
   margin-inline: -18px }` a `.breadcrumb::after` se stínem na pravé straně
   (components/breadcrumb.css). Ty záporné okraje čouhaly ven z dokumentu
   a stránka na mobilu přetékala o 2 px. Cesta se má normálně zalomit,
   ne posouvat. */
.region--content-above .breadcrumb__content,
.region--content-above .breadcrumb__list {
  overflow: visible;
  width: auto;
  /* `margin: 0`, ne jen `margin-inline`: Olivero má na `.breadcrumb__content`
     i ZÁPORNÉ svislé okraje (`margin-block: calc(var(--sp0-5) * -1)` = −9 px)
     proti vlastnímu odsazení. Ty drobečky vytahovaly o 9 px nahoru, takže
     mezera pod hlavičkou vycházela 24 px místo 32. */
  margin: 0;
  padding-inline: 0;
  padding-block: 0;
  white-space: normal;
}

.region--content-above .breadcrumb::after {
  content: none;
}

.region--content-above .breadcrumb ol,
.region--content-above .breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ODDĚLOVAČ. Olivero ho NEKRESLÍ znakem ani obrázkem — je to prázdný
   pseudoprvek 8 × 8 px, kterému nechá jen horní a pravý okraj
   (2px solid var(--color--gray-45)) a otočí ho o 45°:
   `.breadcrumb__item:nth-child(n + 2)::before` v components/breadcrumb.css.
   Náš `content: "›"` se do té otočené rámečkové šipky jen vkreslil, takže
   uživatel viděl slepenec obojího. Rámeček, rozměr i otočení se proto ruší.
   Obsah je pseudoprvek → nekopíruje se do schránky a čtečka ho nečte. */
.region--content-above .breadcrumb li + li::before {
  content: "›";
  display: inline;
  width: auto;
  height: auto;
  margin-inline: 0 6px;
  transform: none;
  border: 0;
  font-size: 13px;
  color: var(--nano-muted);
}

.region--content-above .breadcrumb a {
  color: var(--nano-primary);
  text-decoration: none;
}

.region--content-above .breadcrumb a:hover,
.region--content-above .breadcrumb a:focus-visible {
  text-decoration: underline;
}

/* Poslední položka je aktuální stránka — není odkaz, jen tlumený text. */
.region--content-above .breadcrumb li:last-child {
  color: var(--nano-muted);
}

/* Na mobilu se cesta nesmí roztáhnout přes víc než dva řádky. Když je
   dlouhá, vypustí se PROSTŘEDNÍ položky (první a poslední zůstávají),
   nezmenšuje se písmo. */
@media (max-width: 48rem) {
  .region--content-above .breadcrumb li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }

  .region--content-above .breadcrumb li:nth-last-child(2):not(:first-child)::after {
    content: " …";
    color: var(--nano-muted);
  }

  /* Vypuštění prostředních položek nestačí tam, kde je dlouhá SAMA poslední
     položka — název článku se při 375 px lámal do tří řádků. Poslední
     položka se proto usekne třemi tečkami. Písmo zůstává 13 px. */
  .region--content-above .breadcrumb li:last-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   13. STRÁNKOVÁNÍ (kolo 7, bod 3)
   Dvě samostatné vady, obě z olivero/css/components/pager.css:
   1. ROZMĚR: `.pager__item { width/height: var(--sp2-5) }` = 45 px
      a od 31,25 rem `var(--sp3)` = 54 px, tučné písmo 16 px zděděné z těla.
      Vedle zbytku webu (14–16 px) to působilo předimenzovaně.
   2. ZAROVNÁNÍ: `.pager__items` je sice `display: flex`, ale NEMÁ
      `justify-content`. Výchozí `flex-start` tlačil celý blok doleva:
      položky zabíraly 540 px v 820px sloupci, takže vypadaly posunuté
      o 140 px proti středu obsahu. Obal `.pager` přitom šířku sloupce
      dědí správně (820 px, stejné `left` jako karty) — chyba nebyla
      v kontejneru, ale v zarovnání uvnitř něj.
   ============================================================ */

.pager__items {
  justify-content: center;
  gap: 4px;
  font-weight: 600;
}

.pager .pager__item {
  width: auto;
  min-width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: 3px;
  font-size: 14.5px;
  overflow: hidden;
}

.pager .pager__item .pager__link {
  border-radius: 3px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nano-text);
  padding-inline: 8px;
}

.pager .pager__item--active {
  background-color: var(--nano-primary);
  color: #fff;
}

.pager .pager__item--active .pager__link {
  color: #fff;
}

/* Šipky |◀ ◀ ▶ ▶| se zmenšují stejně jako čísla — jsou to SVG, takže
   se jim musí dát rozměr, nedědí velikost písma. */
.pager .pager__item--control svg {
  width: 14px;
  height: 14px;
}

.pager .pager__item,
.pager .pager__link {
  transition: background-color 0.17s ease, color 0.17s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pager .pager__item:not(.pager__item--active):hover {
    background-color: var(--nano-light-bar);
  }

  .pager .pager__item:not(.pager__item--active):hover .pager__link {
    background-color: var(--nano-light-bar);
    color: var(--nano-primary);
  }
}

.pager .pager__link:focus-visible {
  background-color: var(--nano-light-bar);
  color: var(--nano-primary);
  outline: 2px solid var(--nano-primary);
  outline-offset: -2px;
}

/* Na dotykových zařízeních musí zůstat dotyková plocha aspoň 44 px —
   zmenšuje se písmo, ne plocha. */
@media (max-width: 48rem) {
  .pager .pager__item {
    min-width: 44px;
    height: 44px;
  }
}

/* ============================================================
   11. DĚLENÍ SLOV NA NADPISECH (kolo 5, bod F)
   Olivero má v olivero/css/base/base.css `body { hyphens: auto }`.
   Naše starší pravidlo mělo v seznamu taky `body`, jenže stejně silný
   selektor šablony se načítá později, takže vyhrál — a nadpis TOP článku
   se lámal jako „může být do- / brý pomocník".
   Nadpisy jsou často divy nebo odkazy, ne značky h1–h6, takže dědily
   `auto` a bylo je nutné vyjmenovat. V odstavcích textu dělení ZŮSTÁVÁ.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.page-title,
.nano-hero .views-field-title,
.nano-hero .views-field-title a,
.teaser__title,
.teaser__title a,
.region--sidebar .views-field-title,
.region--sidebar .views-field-title a,
.region--content-below .views-field-title,
.region--content-below .views-field-title a,
.site-footer .views-field-title,
.site-footer .views-field-title a,
.nano-navigace__nazev {
  -webkit-hyphens: none;
  hyphens: none;
}

/* ============================================================
   12. REAKCE NA MYŠ A KLÁVESNICI (kolo 5, bod E)
   Efekty jsou v `@media (hover: hover) and (pointer: fine)`, aby se na
   dotykových zařízeních nezasekával zvýrazněný stav po klepnutí.
   Zvýraznění na `:focus-visible` je mimo tu podmínku — musí fungovat
   při ovládání klávesnicí i na dotykovém zařízení s klávesnicí.
   ============================================================ */

.nano-hero .views-field-title a,
.view-blog .views-view-grid .teaser__title a,
.view:not(.view-blog) .teaser__title a,
.region--sidebar .views-field-title a,
.region--content-below .views-field-title a,
.site-footer .views-field-title a,
.header-nav .primary-nav__menu-link--level-1,
.region--secondary-menu .secondary-nav__menu-link {
  cursor: pointer;
  transition: color 0.17s ease, background-color 0.17s ease;
  text-underline-offset: 3px;
}

.view-blog .views-view-grid .teaser__image img,
.view:not(.view-blog) .teaser__image img,
.nano-hero .views-field-field-image img {
  transition: filter 0.17s ease;
}

/* Podtržení a obarvení nadpisů. Celá karta je citlivá, ne jen text:
   `:hover` visí na dlaždici / řádku, ne na odkazu. */
@media (hover: hover) and (pointer: fine) {
  .view-blog .views-view-grid__item:hover .teaser__title a,
  .view:not(.view-blog) .views-row:hover .teaser__title a,
  .region--sidebar .views-row:hover .views-field-title a,
  .region--content-below .views-row:hover .views-field-title a,
  .site-footer .views-row:hover .views-field-title a,
  .nano-hero .views-row:hover .views-field-title a,
  .view-blog .views-view-grid .teaser__title a:hover,
  .view:not(.view-blog) .teaser__title a:hover,
  .region--sidebar .views-field-title a:hover,
  .region--content-below .views-field-title a:hover,
  .site-footer .views-field-title a:hover,
  .nano-hero .views-field-title a:hover {
    color: var(--nano-primary);
    text-decoration: underline;
  }

  /* Nadpis TOP článku je na fotce, tam by modrá zanikla — zůstává bílý,
     jen se podtrhne. */
  .nano-hero .views-row:hover .views-field-title a,
  .nano-hero .views-field-title a:hover {
    color: #fff;
  }

  /* Jemné ztmavení náhledu. Žádné zvětšování ani posun — rozvržení se nehne. */
  .view-blog .views-view-grid__item:hover .teaser__image img,
  .view:not(.view-blog) .views-row:hover .teaser__image img,
  .nano-hero .views-row:hover .views-field-field-image img {
    filter: brightness(0.92);
  }

  .site-footer .views-row:hover .views-field-title a,
  .site-footer .views-field-title a:hover {
    color: #fff;
  }
}

/* Klávesnice. Stejné zvýraznění + viditelný obrys. */
.nano-hero .views-field-title a:focus-visible,
.view-blog .views-view-grid .teaser__title a:focus-visible,
.view:not(.view-blog) .teaser__title a:focus-visible,
.region--sidebar .views-field-title a:focus-visible,
.region--content-below .views-field-title a:focus-visible,
.site-footer .views-field-title a:focus-visible {
  color: var(--nano-primary);
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

.header-nav .primary-nav__menu-link--level-1:focus-visible,
.region--secondary-menu .secondary-nav__menu-link:focus-visible {
  outline: 2px solid var(--nano-primary);
  outline-offset: -2px;
}

/* 3. Mezera pod hero blokem podle návrhu (28 nahoře, 34 dole). */
.region--content-above {
  margin-block-end: 0;
}

/* Horní okraj je 0 ze stejného důvodu jako u drobečků — mezeru pod
   hlavičkou drží od kola 9 jen `.main-content__container`. */
.nano-hero {
  margin-block: 0 34px;
}

.nano-hero .views-row {
  margin: 0;
}

/* ============================================================
   15. VLASTNÍ VÝPISY (kolo 10) — Projekty, Akce a další pohledy
   Nejsou to rubriky ani titulka, proto se jich úpravy z kol 8 a 9
   netýkaly. Sekce je na KONCI souboru schválně: opakovaně se ukázalo,
   že override zapsaný dřív prohraje na pořadí se stejně silným
   pravidlem níž.
   ============================================================ */

/* --- D. Prázdný sloupec pro obrázek -----------------------------------
   Olivero vykresluje v náhledu uzlu `<div class="teaser__image">` VŽDY,
   i když typ obsahu obrázek nemá (`projekt` a `event_calendar` ho
   v náhledu nemají — ověřeno v nastavení zobrazení). Náš řádkový výpis
   z kola 8 mu ale vyhradil pevný sloupec
   `grid-template-columns: 230px minmax(0, 1fr)`, takže text začínal
   o 252 px vpravo (230 px sloupec + 22 px mezera) a vlevo bylo prázdno.
   Když náhled obrázek nemá, zůstane mřížka JEDNOSLOUPCOVÁ a všechno se
   přesune do prvního sloupce.
   POZOR, tudy ne: `display: block` sloupec sice zruší, ale zároveň odhalí
   pořadí z DOM — Olivero má uvnitř `<header>` nejdřív `.teaser__meta`
   a teprve pak `.teaser__top` s nadpisem, takže by se autor a datum
   vysypaly NAD nadpis. Pořadí drží právě mřížka (`grid-row` 1/2/3).
   Mřížka se tu vypisuje CELÁ a bez media dotazu schválně: pravidla z kola 8
   platí jen nad 48 rem a pod ní náhled vracejí do blokového toku (kvůli
   skládání obrázku nad text). Bezobrázková položka žádné skládání
   nepotřebuje, a kdyby do blokového toku spadla, rozsypalo by se pořadí. */
.view:not(.view-blog) .teaser:not(:has(.teaser__image img)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  align-items: start;
  padding: 0;
}

.view:not(.view-blog) .teaser:not(:has(.teaser__image img)) > header,
.view:not(.view-blog) .teaser:not(:has(.teaser__image img)) .teaser__top {
  display: contents;
}

/* Velikosti a okraje se opakují i tady schválně: pravidla z kola 8 jsou
   za `@media (min-width: 48rem)`, takže na mobilu neplatila a mezery
   vycházely 0 a 18 px místo 6 a 9 px. */
.view:not(.view-blog) .teaser:not(:has(.teaser__image img)) .teaser__title {
  grid-column: 1;
  grid-row: 1;
  margin-block: 0 6px;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 700;
}

.view:not(.view-blog) .teaser:not(:has(.teaser__image img)) .teaser__meta {
  grid-column: 1;
  grid-row: 2;
  margin-block: 0 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nano-muted);
}

.view:not(.view-blog) .teaser:not(:has(.teaser__image img)) .teaser__content {
  grid-column: 1;
  grid-row: 3;
}

.view:not(.view-blog) .teaser__image:not(:has(img)) {
  display: none;
}

/* --- E. Text položky: bezpatkové písmo -------------------------------
   Tělo článku nese třídu `text-content` a Olivero jí v
   components/text-content.css dává `font-family: Lora, georgia, serif`
   a větší stupeň (naměřeno 18 px). Ve výpisu má vypadat stejně jako
   perex na rubrice. */
.view:not(.view-blog) .teaser .field--name-body {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f464d;
  margin-block: 0;
}

/* --- F. Rámeček kolem položky ----------------------------------------
   Platí pro vlastní výpisy, NE pro už schválené: titulku (`view-blog`)
   a rubriku (`view-taxonomy-term`), které mají vlastní podobu.
   KOLO 11: patří sem i vyhledávání — je to taky bezobrázkový výpis.
   Nový pohled, který v budoucnu přibude, rámeček dostane sám od sebe. */
.view:not(.view-blog):not(.view-taxonomy-term) .views-row {
  border: 1px solid var(--nano-line);
  border-radius: 4px;
  padding: 20px 22px;
  margin-block-end: 16px;
  transition: border-color 0.17s ease;
}

/* První položka si u rubriky bere `padding-top: 0` (kolo 8) — v rámečku
   by tím text nahoře přilnul k lince, proto se to tady vrací. */
.view:not(.view-blog):not(.view-taxonomy-term)
.view-content > .views-row:first-child {
  padding-block-start: 20px;
}

/* --- G. Mezery uvnitř položky ----------------------------------------
   `.teaser` má z kola 8 `gap: 22px`, což je zkratka pro OBA směry —
   svisle se tedy 22 px přičítalo k vlastním okrajům prvků: nadpis →
   metadata 6 + 22 = 28 px, metadata → text 9 + 22 = 31 px.
   Vodorovná mezera mezi obrázkem a textem zůstává 22 px, mění se jen svislá.
   KOLO 11: platí i pro výpis rubriky (`.view-taxonomy-term`) — uživatel
   rozhodl mezery srovnat, aby všechny výpisy vypadaly stejně. */
.view:not(.view-blog) .teaser {
  row-gap: 0;
}

/* --- F/hover ---------------------------------------------------------
   Reaguje celá položka, ne jen text. Stejný přístup jako u karet z kola 5. */
.view:not(.view-blog):not(.view-taxonomy-term)
.views-row .teaser__title a {
  transition: color 0.17s ease;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .view:not(.view-blog):not(.view-taxonomy-term)
  .views-row:hover {
    border-color: #c9ced5;
  }

  .view:not(.view-blog):not(.view-taxonomy-term)
  .views-row:hover .teaser__title a {
    color: var(--nano-primary);
    text-decoration: underline;
  }
}

.view:not(.view-blog):not(.view-taxonomy-term)
.views-row:focus-within {
  border-color: #c9ced5;
}

.view:not(.view-blog):not(.view-taxonomy-term)
.views-row .teaser__title a:focus-visible {
  color: var(--nano-primary);
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

@media (max-width: 48rem) {
  .view:not(.view-blog):not(.view-taxonomy-term) .views-row,
  .view:not(.view-blog):not(.view-taxonomy-term)
  .view-content > .views-row:first-child {
    padding: 16px 16px;
    margin-block-end: 12px;
  }
}

/* ============================================================
   16. VÝSLEDKY VYHLEDÁVÁNÍ (kolo 11)
   Pohled `vyhledavani` má jiný formát než ostatní výpisy: řádky jsou
   POLE (`views-field-title`, `views-field-body`), ne náhled uzlu.
   Nemá tedy žádné `.teaser__*`, takže typografie z kol 8 a 10 se na něj
   nechytí a musí se vypsat zvlášť. Rámeček, odsazení a mezery mezi
   položkami už sdílí se sekcí 15.
   ============================================================ */

.view-vyhledavani .views-field-title {
  margin-block: 0 6px;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 700;
}

.view-vyhledavani .views-field-title a {
  color: var(--nano-text);
  text-decoration: none;
  transition: color 0.17s ease;
  text-underline-offset: 3px;
}

.view-vyhledavani .views-field-body,
.view-vyhledavani .views-field-body p {
  margin-block: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f464d;
}

/* Hover: reaguje celá položka, stejně jako u Projektů a Akcí (kolo 10). */
@media (hover: hover) and (pointer: fine) {
  .view-vyhledavani .views-row:hover .views-field-title a {
    color: var(--nano-primary);
    text-decoration: underline;
  }
}

.view-vyhledavani .views-field-title a:focus-visible {
  color: var(--nano-primary);
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* --- Vyhledávací formulář --------------------------------------------
   Je to vystavený filtr pohledu (`.views-exposed-form.form--inline`
   uvnitř `.view-filters`). Olivero mu dává vlastní tvarosloví: pole
   vysoké 54 px s okrajem `rgb(129,150,162)` a tlačítko jako obrys
   (bílé pozadí, modrý rámeček 2 px, písmo 18/700). Sjednocujeme
   se zbytkem webu. */
.view-vyhledavani .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-block-end: 24px;
}

.view-vyhledavani .views-exposed-form .form-item,
.view-vyhledavani .views-exposed-form .form-actions {
  margin: 0;
}

.view-vyhledavani .views-exposed-form label {
  display: block;
  margin-block-end: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nano-muted);
}

.view-vyhledavani .views-exposed-form input[type="text"] {
  min-width: 260px;
  /* `min-height: 0` je nutné: Olivero drží formulářová pole na
     `min-height: var(--sp3)` = 54 px, což naši výšku 40 px přebilo. */
  min-height: 0;
  height: 40px;
  padding: 10px;
  border: 1px solid var(--nano-line);
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.2;
}

.view-vyhledavani .views-exposed-form input[type="text"]:focus-visible {
  border-color: var(--nano-primary);
  outline: 2px solid var(--nano-primary);
  outline-offset: -2px;
}

.view-vyhledavani .views-exposed-form input[type="submit"] {
  /* `margin: 0` je nutné: Olivero dává tlačítku `margin-inline-end: 18 px`
     a na mobilu, kde je tlačítko přes celou šířku, ten okraj čouhal
     za pravý okraj stránky — dokument měl `scrollWidth` 362 při
     `clientWidth` 360. */
  margin: 0;
  height: 40px;
  padding-inline: 18px;
  border: 0;
  border-radius: 3px;
  background-color: var(--nano-primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.17s ease;
}

@media (hover: hover) and (pointer: fine) {
  .view-vyhledavani .views-exposed-form input[type="submit"]:hover {
    background-color: #0b8fd6;
  }
}

.view-vyhledavani .views-exposed-form input[type="submit"]:focus-visible {
  outline: 2px solid var(--nano-text);
  outline-offset: 2px;
}

/* Na mobilu pod sebou přes celou šířku; dotyková plocha aspoň 44 px. */
@media (max-width: 48rem) {
  .view-vyhledavani .views-exposed-form {
    flex-direction: column;
    align-items: stretch;
  }

  .view-vyhledavani .views-exposed-form input[type="text"],
  .view-vyhledavani .views-exposed-form input[type="submit"] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 44px;
  }
}

/* Hláška „nic nenalezeno" — jen zarovnání a stupeň písma, text se nemění
   (je to obsah, ne styl). */
.view-vyhledavani .view-empty {
  font-size: 15px;
  color: #3f464d;
}

/* ============================================================
   17. TYPOGRAFIE POLOŽKY VÝPISU I NA MOBILU (kolo 11)
   Pravidla z kola 8 (nadpis 20 px, mezery 6 a 9 px) jsou schovaná
   za `@media (min-width: 48rem)`, protože tam řeší i dvousloupcové
   rozvržení s obrázkem. Pod 768 px se proto neuplatnila a rubrika měla
   nadpis 24 px a mezery 18 a 27 px. Velikosti a mezery na šířce okna
   nezávisí, takže se vypisují bez media dotazu.
   Titulka (`.view-blog`) má vlastní podobu a zůstává mimo.
   ============================================================ */

.view:not(.view-blog) .teaser__title {
  margin-block: 0 6px;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 700;
}

.view:not(.view-blog) .teaser__meta,
.view:not(.view-blog) .nano-meta {
  margin-block: 0 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nano-muted);
}

/* Obaly uvnitř položky si na mobilu nesou vlastní svislé mezery, které se
   přičítaly k okrajům nadpisu a metadat: `.teaser__top` má
   `margin-block-end: 18 px` a `.teaser__content` `row-gap: 18 px`
   (Olivero, components/node-teaser.css). Na rubrice z toho vycházelo
   18 a 27 px místo 6 a 9 px. Nad 768 px se to neprojevovalo, protože tam
   je `.teaser__top` `display: contents`. */
.view:not(.view-blog) .teaser__top {
  margin-block-end: 0;
}

.view:not(.view-blog) .teaser__content {
  row-gap: 0;
}

/* Vystavený filtr má kromě „Hledat" i tlačítko „Zrušit". Modrá jsou
   po předchozím pravidle obě, což mate — vedlejší akce se ztlumí
   na obrysové tlačítko. Nic se neskrývá, jen se odliší důležitost. */
.view-vyhledavani .views-exposed-form input[type="submit"][data-drupal-selector*="reset"] {
  background-color: transparent;
  color: var(--nano-muted);
  border: 1px solid var(--nano-line);
}

@media (hover: hover) and (pointer: fine) {
  .view-vyhledavani .views-exposed-form input[type="submit"][data-drupal-selector*="reset"]:hover {
    background-color: var(--nano-light-bar);
    color: var(--nano-text);
  }
}

/* ============================================================
   18. DOLADĚNÍ MOBILU (kolo 12) — platí jen do 768 px,
   nad hranicí se nesmí změnit nic.
   ============================================================ */

/* --- C. Claim vedle loga --------------------------------------------
   Na mobilu zabíral dva řádky (33,8 px) pod logem.
   PŘESUNUTO v kole 15: pravidlo je teď v sekci A5 uvnitř TÉHOŽ media
   dotazu, kterým se zapíná lupa, aby se hranice nedala rozejít. */

/* --- B. Drobečky na jeden řádek -------------------------------------
   Usekávání poslední položky doplnilo kolo 8, jenže seznam měl
   `flex-wrap: wrap`, takže se položka radši zalomila na druhý řádek,
   než aby se zúžila. `nowrap` ji donutí zúžit se a useknout. */
@media (max-width: 48rem) {
  /* Selektor musí být o třídu silnější než pravidlo z kola 8
     (`.region--content-above .breadcrumb ol`, tedy dvě třídy a značka) —
     jinak `wrap` vyhraje na váze a položka se zase zalomí. */
  .region--content-above .breadcrumb .breadcrumb__list {
    flex-wrap: nowrap;
  }

  .region--content-above .breadcrumb li:first-child,
  .region--content-above .breadcrumb li + li::before {
    flex: 0 0 auto;
  }
}

/* --- A2. Zavírací křížek do hlavičky zásuvky --------------------------
   Tlačítko sedí v hlavičce webu (`.mobile-buttons`) a jeho svislá pozice
   se řídí výškou hlavičky. Po skrytí claimu (bod C) se hlavička zkrátila
   a tlačítko se posunulo na 53–89 px, tedy PŘES první položku zásuvky,
   která začíná na 54 px (zásuvka si na křížek nechává horní okraj 54 px).
   Když je zásuvka otevřená, tlačítko se proto ukotví do jejího horního
   pruhu, kde na něj bylo místo vyhrazené. */
@media (max-width: 68.74rem) {
  body.is-overlay-active .mobile-nav-button {
    position: fixed;
    inset-block-start: 5px;
    inset-inline-end: 12px;
    z-index: 505;
  }
}

/* --- A4. Druhá lišta v zásuvce pod sebou -----------------------------
   Seznam měl z kola 3 `display: flex !important` (kvůli vodorovné liště
   na desktopu), takže se v zásuvce sázel vedle sebe a zalamoval do dvou
   řádků. V zásuvce má být pod sebou jako běžné položky menu. */
@media (max-width: 68.74rem) {
  .header-nav .region--secondary-menu .secondary-nav__menu {
    display: block !important;
  }

  .header-nav .region--secondary-menu .secondary-nav__menu-item {
    display: block;
  }

  .header-nav .region--secondary-menu .secondary-nav__menu-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 0;
    text-decoration: none;
  }

  /* Odlišení od hlavních rubrik zůstává jemné — světlé pozadí pruhu,
     odsazení stejné jako u zbytku zásuvky. */
  .header-nav .region--secondary-menu {
    padding-inline: 16px;
    margin-inline: -16px;
  }
}

/* --- A5. Lupa v hlavičce ---------------------------------------------
   Odkaz vkládá `js/nano.js` do `.mobile-buttons`; dokud se to nepovede,
   zůstává „Hledat" v zásuvce (nic se neztratí). */
.nano-lupa {
  display: none;
}

@media (max-width: 68.74rem) {
  .nano-lupa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--nano-text);
    text-decoration: none;
    transition: color 0.17s ease;
  }

  .nano-lupa__ikona {
    width: 20px;
    height: 20px;
    display: block;
  }

  .nano-lupa:hover,
  .nano-lupa:focus-visible {
    color: var(--nano-primary);
  }

  /* „Hledat" ze seznamu rubrik pryč — má ho teď lupa. Hledá se podle
     adresy, ne podle pořadí, aby to přežilo přeskládání menu. */
  body.nano-ma-lupu .header-nav .primary-nav__menu-item--level-1:has(a[href="/search/node"]) {
    display: none;
  }

  /* KOLO 15: claim pod logem je schovaný VŽDY, když jsou vidět ikony.
     Proto stojí uvnitř tohohle media dotazu, a ne ve vlastním s vlastním
     číslem — kdyby se hranice ikon posunula, posune se claim s ní.
     Do kola 14 se schovával jen do 48 rem a v pásmu 992–1033 px ležela
     ikona lupy PŘES text: naměřený vodorovný průnik 38,3 px při 992 px,
     3,4 px při 1030 px, svislý průnik 19,5 px (celá výška textu);
     `elementFromPoint` uprostřed průniku vracel `nano-lupa`.
     Skrývá se VIZUÁLNĚ — v HTML zůstává kvůli vyhledávačům a čtečkám
     obrazovky, proto `clip-path`, ne `display: none`. */
  .site-header .site-branding__slogan {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============================================================
   19. MOBILNÍ HLAVIČKA A ZÁSUVKA (kolo 13)
   ============================================================ */

/* --- A. Lupa vedle hamburgeru, ne nad ním ----------------------------
   `.mobile-buttons` je blokový obal, takže se odkaz s lupou vložený
   z `js/nano.js` postavil NAD tlačítko a přidal hlavičce na výšce.
   Řádek s oběma tlačítky, mezera 8 px, svisle na střed. Pořadí (lupa,
   pak hamburger) dává skript, který lupu vkládá jako první prvek.
   POZOR na rozsah: bez media query tohle pravidlo (0,2,0) přebíjelo
   Oliverovo `.mobile-buttons { display: none }` (0,1,0) i nad hranicí
   a hamburger zůstal viditelný vedle vodorovné lišty (naměřeno
   `display: inline-flex` při 1280 px). Platí proto jen tam, kde je
   zásuvka. */
@media (max-width: 68.74rem) {
  .site-header .mobile-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* Hamburger měl 36 × 36 px (Olivero `.mobile-nav-button`), tedy pod
   hranicí 44 px pro dotykové cíle — a vedle 44px lupy to bylo vidět.
   Bílý pruh s logem je 68 px vysoký, tlačítko jeho výšku neurčuje,
   takže zvětšení hlavičku nezvýší. */
@media (max-width: 68.74rem) {
  .site-header .mobile-buttons .mobile-nav-button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- C. Šedý blok a jeho oddělovací linky ----------------------------
   Dvě příčiny, obě z olivero/css/components/navigation/nav-secondary.css:
   1. `.secondary-nav__menu-item { width: max-content; max-width: 12.5rem }`
      — položka je široká jen jako text, takže linka na jejím spodním
      okraji končila hned za slovem (naměřeno „Firmy" 16–62 px místo
      16–359 px),
   2. `.secondary-nav__menu-item:not(:last-child) { margin-inline-end:
      var(--sp1-5) }` = 27 px, což linku zkracovalo ještě o kus.
   Do třetice měl šedý blok `width: 100 %` (naše pravidlo z kola 5) a
   záporné okraje ho jen POSUNULY, nerozšířily — končil proto 16 px před
   pravým krajem zásuvky (0–343 místo 0–375). */
@media (max-width: 68.74rem) {
  .header-nav .region--secondary-menu {
    width: auto;
  }

  .header-nav .region--secondary-menu .secondary-nav__menu-item {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }

  /* Poslední položka (Donate) linku nemá — stejně jako poslední rubrika. */
  .header-nav .region--secondary-menu .secondary-nav__menu-item:last-child {
    border-block-end: 0;
  }
}

/* ============================================================
   20. OBRÁZKY VE VÝPISECH (kolo 13, bod D)
   Pravidlo: ve výpisu se ukazuje jen obrázek, který je SAMOSTATNÉ POLE
   (u článků `field_image`). Obrázek vložený redaktorem do textu se ve
   výpisu neukazuje — je uvnitř odstavce, takže by vždycky zůstal viset
   uprostřed položky.
   Zjištěno měřením: Akce ani Projekty žádné pole pro obrázek NEMAJÍ,
   u Akcí mají 2 z 9 uzlů obrázek v textu. Články pole mají a ve výpisu
   se vykresluje vlevo, takže se jich tohle netýká.
   SELEKTOR JE ZÁMĚRNĚ ÚZKÝ: `.views-row .teaser` — `teaser` je jen
   v náhledu, `views-row` jen ve výpisu. V detailu (`node--view-mode-full`)
   se tím nic neschová, obrázky v textu článků tam zůstávají.
   ============================================================ */

.views-row .teaser .field--name-body img,
.views-row .teaser .field--name-body figure,
.views-row .teaser .field--name-body picture {
  display: none;
}

/* --- B. Zavírací křížek pod administrátorskou lištou (kolo 13) --------
   Nepřihlášenému uživateli byl křížek vidět (5–41 px, nic ho nezakrývalo).
   PŘIHLÁŠENÉMU ale ne: Drupal má na mobilu vodorovnou ovládací lištu
   `.admin-toolbar-control-bar` vysokou 49 px se `z-index: 499`, a ta
   křížek překryla — `elementFromPoint` na jeho středu vracel
   `admin-toolbar-control-bar__content`, ne tlačítko. Vlastní `z-index: 505`
   nepomůže, protože tlačítko leží uvnitř `.site-header` se `z-index: 101`,
   takže se celé jeho vrstvení řídí tou stovkou.
   Křížek se proto posune pod lištu. Výšku měří `js/nano.js` a předává ji
   jako `--nano-admin-lista`; nepřihlášenému je proměnná 0 a nic se nemění. */
@media (max-width: 68.74rem) {
  body.is-overlay-active .mobile-nav-button {
    inset-block-start: calc(5px + var(--nano-admin-lista, 0px));
  }
}

/* ============================================================
   21. SVISLÝ STŘED HLAVIČKY NA MOBILU (kolo 14)
   ============================================================
   Lupa a hamburger seděly níž než logo. Naměřené svislé středy před
   opravou (375 px): logo 32, lupa i hamburger 38,5 — rozdíl 6,5 px.
   S rostoucí šířkou se rozdíl zvětšoval (563 a 768 px: 17,1 px,
   1099 px: 23,8 px).

   Tři příčiny, všechny měřené:

   1. `olivero/css/components/header-buttons-mobile.css` dává
      `.mobile-buttons { margin-block-start: var(--sp0-5) }` a v media
      dotazech ho stupňuje na `--sp2` a `--sp4`, tedy 9 px do 499 px,
      36 px od 500 px a 72 px od 700 px. Je to pevný odsun shora, který
      s výškou loga nemá nic společného — proto rozdíl rostl.
      Zároveň tenhle odsun URČOVAL VÝŠKU bílého pruhu: při 768 px byl
      pruh 116 px, což je přesně 72 + 44 (odsun + tlačítko).

   2. `.site-header__inner__container` je `display: flex` s
      `align-items: normal`, takže se logo i tlačítka natahovala přes
      celou výšku pruhu a o společném středu nerozhodovalo nic.

   3. Odsazení `.site-branding__inner` je nesouměrné — 14/12 px do
      991 px (naše sekce 10) a 22/18 px výš (Olivero). Logo tím sedělo
      o 1–2 px výš než střed svého obalu. Do 768 px k tomu přidává
      `row-gap: 6px` mezera pod logem za claim, který je sice vizuálně
      schovaný, ale v toku zůstává (kolo 12, bod C).

   Řešení: pruh centruje obsah, tlačítkům se ruší odsun shora a odsazení
   loga se srovná na souměrné. Dotyková plocha 44 × 44 px se nemění —
   centruje se posunem, ne zmenšením. Nad 1100 px se nic z toho neuplatní. */

@media (max-width: 68.74rem) {
  .site-header .site-header__inner__container {
    align-items: center;
  }

  .site-header .site-branding {
    align-items: center;
  }

  /* Odsun shora pryč — výšku pruhu teď určuje logo, ne tlačítko. */
  .site-header .mobile-buttons {
    margin-block: 0;
  }

  /* Souměrné odsazení, aby střed loga byl i středem jeho obalu.
     `row-gap: 0` proto, že claim je v celém tomhle rozsahu schovaný
     (sekce A5), ale jako prvek v toku zůstává — mezera pod logem by
     jinak logo posunula nahoru. Do kola 14 to platilo jen do 48 rem;
     od kola 15 je claim schovaný až do hranice ikon, tak se rozsah
     srovnal. */
  .site-header .site-branding__inner {
    padding-block: 20px;
    row-gap: 0;
  }
}

/* Na telefonech je pruh s logem užší než na tabletu. */
@media (max-width: 48rem) {
  .site-header .site-branding__inner {
    padding-block: 12px;
  }
}

/* ============================================================
   22. DETAIL ČLÁNKU (kolo 16)
   ============================================================
   Uzavřená rozhodnutí, která se od návrhu ZÁMĚRNĚ liší a nesrovnávají
   se s ním: metadata pod nadpisem, rubriky pod textem, hlavní fotka
   v původním poměru (neořezávat), nadpis 34 px, perex 17,5 px / 700. */

/* --- B. Mezera mezi nadpisem a metadaty -----------------------------
   Naměřeno 68 px (spodek nadpisu 352,9 → metadata 420,9 při 1280 px).
   Dva zdroje, nekolabují spolu, protože region je `display: grid`:
   1. `h1.page-title { margin-block-end: 14px }` (naše, sekce 4) = 14 px,
   2. `.block-page-title-block { margin-block-end: var(--sp3) }`
      (olivero/css/components/block.css) = 54 px.
   Cíl 14 px → ruší se ten druhý. Jen na detailu článku, ať se nesáhne
   na výpisy z kol 8 až 10. */
body.page-node-type-article .block-page-title-block {
  margin-block-end: 0;
}

/* Metadata, rubrika a fotka mají tvořit souvislý blok. Naměřené schody
   byly 10 / 36 / 22 px; z řady vybočovalo 36 px, které nese
   `.field--name-field-categories { margin-block-end: var(--sp2) }`.
   Srovnáno na 18 px podle návrhu (`.lead-img { margin: 18px 0 22px }`),
   výsledná řada je 10 / 18 / 22 px. */
body.page-node-type-article .node__content > .field--name-field-categories {
  margin-block-end: 18px;
}

/* --- C. Blok autora -------------------------------------------------
   Autoři jsou samostatný typ obsahu `autor` (12 uzlů) se dvěma poli:
   `field_obr_zek` (obrázek) a `field_perex` (text o autorovi). Kontakt
   je v poli `body` uzlu autora. Vykresluje se jako náhled (`teaser`),
   takže jméno je `h2.teaser__title` a zbytek leží v `.teaser__content`.

   Proč dřívější `float: left` na fotce nefungoval: Olivero dává
   `.teaser__content { display: grid; grid-auto-rows: max-content;
   gap: var(--sp) }` (olivero/css/components/teaser.css). Položka mřížky
   se nedá obtékat, takže fotka, kontakt i text stály pod sebou
   s mezerou 18 px. Místo obtékání proto mřížka. */
.field--name-field-autori .teaser__content {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}

.field--name-field-autori .field--name-field-obr-zek {
  float: none;
  margin: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.field--name-field-autori .field--name-field-obr-zek img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

/* Text o autorovi (perex) napravo od fotky, nad kontaktem. `font-family:
   inherit` je nutné: pole nese třídu `.text-content`, které
   olivero/css/components/text-content.css dává `Lora, georgia, serif`.
   Stejný postup jako u perexu ve výpisech v kole 12. */
.field--name-field-autori .field--name-field-perex {
  grid-column: 2;
  grid-row: 1;
}

.field--name-field-autori .field--name-field-perex,
.field--name-field-autori .field--name-field-perex p {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f464d;
  margin-block: 0;
}

/* Kontakt pod textem o autorovi, tedy taky napravo od fotky. */
.field--name-field-autori .field--name-body {
  grid-column: 2;
  grid-row: 2;
}

/* E-mail a web v bloku autora NA KONCI ČLÁNKU (19. 8. 2026).

   Pole přibyla v kole 21, ale mřížka výše umísťuje jmenovitě jen tři
   položky (fotka, perex, body). E-mail a web tedy zbyly na automatickém
   umísťování a rozešly se — naměřeno na článku 85 při 1280 px:
   e-mail vlevo 170,4 (správně), web vlevo 70,4 při šířce 80 px,
   tedy v SLOUPCI PRO FOTKU, kde se „www.csas.cz" zlomilo na dva řádky.

   Proč zrovna web a ne e-mail: pole `body` je u jedenácti z dvanácti
   autorů po migraci v kole 21 PRÁZDNÉ a Drupal prázdné pole nevykreslí.
   Buňka (řádek 2, sloupec 2) tím zůstala volná, spadl do ní e-mail
   a vypadal správně. Na web zbyla první volná buňka pod fotkou, tedy
   (řádek 3, sloupec 1). Byla to shoda okolností, ne funkční pravidlo —
   u autora s neprázdným `body` (nid 108) by se do sloupce pro fotku
   propadl i e-mail.

   Řeší se určením SLOUPCE, řádek se nechává na automatice. Pevné
   `grid-row` by tuhle vadu vyrobilo znovu pokaždé, když některé pole
   chybí — a chybí často: perex, fotku i body má vyplněný jen někdo. */
.field--name-field-autori .field--name-field-email,
.field--name-field-autori .field--name-field-web {
  grid-column: 2;
  margin-block: 0;
}

.field--name-field-autori .field--name-field-email,
.field--name-field-autori .field--name-field-web,
.field--name-field-autori .field--name-field-web .field__item {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f464d;
}

.field--name-field-autori .field--name-field-email a,
.field--name-field-autori .field--name-field-web a {
  color: var(--nano-primary);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .field--name-field-autori .field--name-field-email a:hover,
  .field--name-field-autori .field--name-field-web a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Lámání adresy. Dědí se `overflow-wrap: break-word` — z Olivera
   (`body`, base.css) i z naší sekce 2 —, takže se adresa v úzké buňce
   rozlomí kdekoli; právě tak vzniklo „www.csas" / „.cz".
   `break-word` láme jen jako POSLEDNÍ MOŽNOST, když se slovo do buňky
   nevejde. Po opravě sloupce se to u žádné z dnešních adres nestane
   (nejdelší `www.milanzeleny.com` má 19 znaků), ale pravidlo tu zůstává
   schválně jako pojistka: bez něj by přemrštěně dlouhá adresa místo
   zalomení roztáhla stránku do strany.

   POZOR, ČEHO CSS NEUMÍ: omezit dělení jen na tečku a lomítko nejde.
   `overflow-wrap` ani `word-break` neberou seznam znaků a `hyphens`
   pracuje se slovníkem jazyka, ne s interpunkcí. Jediná spolehlivá
   cesta je vložit `<wbr>` za tečky a lomítka při vykreslení, což je
   zásah do modulu, ne do stylů. Dokud se adresy vejdou na řádek,
   není to potřeba. */
.field--name-field-autori .field--name-field-web,
.field--name-field-autori .field--name-field-web a {
  min-width: 0;
  word-break: normal;
  hyphens: none;
}

/* Trojice tříd schválně: `.node__content .text-content:not(
   .field--name-field-perex)` ze sekce 9 má kvůli `:not()` specifičnost
   0-3-0 a dvoutřídní selektor by prohrál (naměřeno: obal zůstával
   na 16 px). */
.field--name-field-autori .node--type-autor .field--name-body,
.field--name-field-autori .field--name-body p {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f464d;
  margin-block: 0;
}

.field--name-field-autori .field--name-body a {
  color: var(--nano-primary);
}

/* Víc autorů pod sebou. Žádný článek na webu dnes víc než jednoho autora
   nemá (ověřeno dotazem: 45 článků má jednoho, 35 žádného), ale živá
   verze má nadpis „Autoři:" v množném čísle, tak ať to sedí, až takový
   článek vznikne. Bez tohohle odstupu se bloky slepily — naměřeno
   na naklonovaném druhém bloku: mezera 0 px, oddělovací linka druhého
   bloku začínala hned pod kontaktem prvního. */
.field--name-field-autori .field__item + .field__item .node--type-autor {
  margin-block-start: 24px;
}

/* Jméno autora zůstává tučné. */
.field--name-field-autori .teaser__title {
  font-size: 18px;
  font-weight: 700;
  margin-block: 0 6px;
}

/* Pod 563 px jeden sloupec, fotka nad textem. Hranice je 35,125 rem
   = 562 px, aby při 563 px byly ještě dva sloupce — zadání říká
   „pod 563 px". Při 563 px má obsahový pruh 516 px, dva sloupce
   (80 + 20 + 416) se tam vejdou. */
@media (max-width: 35.125rem) {
  .field--name-field-autori .teaser__content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  /* Pořadí se musí určit výslovně. V HTML jde obrázek, kontakt, teprve
     pak text o autorovi — `grid-row: auto` by to pořadí prosadilo
     a kontakt by skončil NAD textem (naměřeno při 375 px: kontakt
     6284,5, text 6317,5). */
  .field--name-field-autori .field--name-field-obr-zek {
    grid-column: 1;
    grid-row: 1;
  }

  .field--name-field-autori .field--name-field-perex {
    grid-column: 1;
    grid-row: 2;
  }

  .field--name-field-autori .field--name-body {
    grid-column: 1;
    grid-row: 3;
  }

  /* Pod 563 px je mřížka JEDNOSLOUPCOVÁ, takže `grid-column: 2` z pravidla
     výše se musí zrušit — jinak by si prohlížeč druhý sloupec dopočítal
     jako implicitní a e-mail s webem by vylezly mimo obsahový pruh.
     Řádek se opět nechává na automatice, položky se poskládají pod text. */
  .field--name-field-autori .field--name-field-email,
  .field--name-field-autori .field--name-field-web {
    grid-column: 1;
  }
}

/* --- D. Navigace Předchozí / Další --------------------------------- */

/* D2. Popisek modrý a výraznější. Modrá se týká JEN jeho. */
.nano-navigace__popisek {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nano-primary);
}

/* D3. Název článku běžným řezem. */
.nano-navigace__nazev {
  font-size: 15px;
  font-weight: 400;
  color: var(--nano-text);
  transition: color 0.17s ease;
}

/* D1. Reaguje celý box, ne jen text, stejně jako karty z kola 5
   a položky výpisu z kola 10. */
.nano-navigace__polozka {
  transition: border-color 0.17s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nano-navigace__polozka:hover {
    border-color: #c9ced5;
  }

  .nano-navigace__polozka:hover .nano-navigace__nazev {
    color: var(--nano-primary);
    text-decoration: underline;
  }
}

.nano-navigace__polozka:focus-visible {
  border-color: #c9ced5;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

.nano-navigace__polozka:focus-visible .nano-navigace__nazev {
  color: var(--nano-primary);
  text-decoration: underline;
}

/* D4. Do 768 px pod sebou, mezera 12 px, každý přes celou šířku. */
@media (max-width: 48rem) {
  .nano-navigace {
    flex-direction: column;
    gap: 12px;
  }

  .nano-navigace__polozka {
    width: 100%;
    min-height: 44px;
  }

  /* Zástupný prázdný box drží místo jen ve dvousloupcovém řádku,
     pod sebou by přidal prázdné pole. */
  .nano-navigace__polozka--prazdna {
    display: none;
  }
}

/* --- E2. Mezera mezi blokem autora a navigací ------------------------
   Naměřeno 110 px (konec textu o autorovi 4524,9 → navigace 4634,9).
   Tři zdroje:
   1. `.field--name-field-perex { margin-block-end: 20px }` (Olivero,
      field.css) = 20 px,
   2. `.teaser { padding-block-end: var(--sp3) }` (Olivero, teaser.css)
      = 54 px, a právě v tomhle prázdném pásu ležela ta krátká šedá
      čárka, viz níže,
   3. `.field--name-field-autori { margin-block-end: var(--sp2) }` = 36 px,
      slitá s `.nano-navigace { margin-block-start: 32px }` na 36 px.
   Cíl 40 px.

   CO BYLA TA ŠEDÁ ČÁRKA: `.teaser::after` z
   olivero/css/components/teaser.css, tedy `position: absolute;
   inset-block-end: 0; width: var(--sp3); height: 0; content: "";
   border-top: solid 2px var(--color--gray-95)` = 54 x 2 px šedá ozdoba
   na spodku každého náhledu. Sekce 5 ji ruší přes
   `.teaser::after { display: none }`, jenže náš vlastní clearfix
   `.field--name-field-autori .node--type-autor::after` měl vyšší
   specifičnost a vracel jí `display: block`. Clearfix je od přechodu
   na mřížku zbytečný, tak byl zrušen a čárka zmizela s ním.
   Vratné: stačí to pravidlo vrátit. */
.field--name-field-autori .node--type-autor {
  padding-block-end: 0;
}

body.page-node-type-article .node__content > .field--name-field-autori {
  margin-block-end: 40px;
}

.nano-navigace {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- E3. Prázdný blok souvisejících článků --------------------------
   Uzly 116 a 179 blok vykreslí, ale bez jediné karty, zbyde nadpis
   a tlustá linka. Naměřeno 167 px. `:empty` nesedne, blok obsahuje
   bílé znaky i nadpis. Skrývá se proto podle toho, že v něm není
   žádný `.views-row`. Blok se nezakazuje, u ostatních článků zůstává. */
.region--content-below .block-views:not(:has(.views-row)) {
  display: none;
}

/* --- E1. Mezera mezi navigací a souvisejícími články -----------------
   Naměřeno 234 px (spodek navigace 4740,1 → tlustá linka 4974,1).
   Šest zdrojů:
   1. `.nano-navigace { margin-block-end: 16px }` (naše)           = 16
   2. `.node__content { padding-block-end: var(--sp3) }` (Olivero)  = 54
   3. `.block-system-main-block { margin-block-end: var(--sp3) }`   = 54
   4. `.region--content { padding-block-end: 24px }` (naše, kolo 9) = 24
   5. `.region--content { margin-block-end: var(--sp3) }` (Olivero) = 54
   6. `.region--content-below .block-views { margin-block-start: 32px }` = 32
   Cíl 48 px: zdroje 1 až 5 na nulu, šestý na 48.

   Podmínka `:has()` je tam schválně. Bez souvisejících článků se spodní
   odsazení vynulovat nesmí, jinak by obsah dosedl na patičku. */
body.page-node-type-article
  .main-content__container:has(.region--content-below .views-row)
  .node__content {
  padding-block-end: 0;
}

body.page-node-type-article
  .main-content__container:has(.region--content-below .views-row)
  .region--content .block-system-main-block {
  margin-block-end: 0;
}

body.page-node-type-article
  .main-content__container:has(.region--content-below .views-row)
  .region--content {
  padding-block-end: 0;
  margin-block-end: 0;
}

body.page-node-type-article
  .main-content__container:has(.region--content-below .views-row)
  .region--content-below .block-views {
  margin-block-start: 48px;
}

/* --- E3. Nadpisy souvisejících článků --------------------------------
   Výchozí stav byl modrý a podtržený: sekce 12 dala těmhle nadpisům
   jen chování na myš, ne výchozí barvu, takže se uplatnil odkaz
   Olivera (#0882c9 a podtržení). Nikde jinde na webu to tak není.
   Zvýraznění na myš už existuje ze sekce 12, teď se od výchozího
   stavu skutečně liší. */
.region--content-below .views-field-title a {
  color: var(--nano-text);
  text-decoration: none;
  transition: color 0.17s ease;
}

.region--content-below .views-field-title,
.region--content-below .views-field-title a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.32;
}

.region--content-below .views-field-created,
.region--content-below .views-field-created time {
  font-size: 12.5px;
  color: var(--nano-muted);
}

/* Mřížka souvisejících článků držela tři sloupce i na mobilu — naměřeno
   při 375 px `96px 96px 96px`, tedy karty široké 96 px s náhledem
   96 x 54 px. Nešlo o regresi z tohohle kola, blok se dosud na mobilu
   neměřil. Do 768 px proto jeden sloupec, mezi 768 a 1099 px dva. */
@media (max-width: 48rem) {
  .region--content-below .view-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 48.01rem) and (max-width: 68.74rem) {
  .region--content-below .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   23. MEZERA PŘED POSTRANNÍM SLOUPCEM NA MOBILU (kolo 17)
   ============================================================
   Do 999 px padá postranní sloupec pod obsah — `.sidebar-grid` má dvě
   položky, `main.site-main` a `aside.region--sidebar`, a pod hranicí
   z nich udělá dva řádky. Naměřená hranice: při 900 px pod sebou,
   při 1000 px vedle sebe.

   Vada, kterou to vyrobilo: v kole 16 jsem kvůli mezeře 48 px mezi
   navigací a souvisejícími články vynuloval `.region--content`
   `margin-block-end` i `padding-block-end`. Na desktopu to nevadí,
   tam sloupec stojí VEDLE obsahu. Na mobilu ale sloupec následuje
   hned za obsahem, takže se box „Další článek" dotkl nadpisu
   „Nejnovější články" — naměřeno při 375 i 563 px mezera 0,0 px,
   `elementFromPoint` na dotyku vracel odkaz z postranního sloupce.
   Na ostatních stránkách zbývalo 18 px z `.region--content
   { margin-block-end: var(--sp) }`, což je taky málo.

   Řešení je mezera mezi řádky mřížky, ne odsazení uvnitř obsahu:
   `row-gap` se nedá přebít pravidly pro `.region--content` (mimo jiné
   tím z kola 16, které má vyšší specifičnost) a nad hranicí se
   neuplatní vůbec, protože tam je řádek jen jeden.
   Spodní odsazení obsahu se v tom pásmu ruší, aby výsledek byl přesně
   48 px na všech stránkách, ne 48 + 18. */
@media (max-width: 62.49rem) {
  .sidebar-grid {
    row-gap: 48px;
  }

  .sidebar-grid .region--content {
    margin-block-end: 0;
    padding-block-end: 0;
  }
}

/* ============================================================
   24. ŠIPKY U NAVIGACE MEZI ČLÁNKY (kolo 18)
   ============================================================
   Znaky ‹ (U+2039) a › (U+203A) — stejná rodina jako oddělovač
   v drobečkové navigaci (sekce 15, kolo 9), aby to drželo pohromadě.

   Jsou to PSEUDOPRVKY, ne text v HTML: nekopírují se do schránky, když
   uživatel označí text (ověřeno `getSelection().toString()` — šipka tam
   není). Aby je nepředčítala ani čtečka obrazovky, mají prázdný
   alternativní text, viz níže.

   `letter-spacing: normal` proto, že popisek má `0.1em` (= 1,2 px) a to
   se přidává ZA každý znak včetně šipky; bez toho by mezera u „PŘEDCHOZÍ"
   vyšla 7,2 px místo 6. Naměřeno po opravě: u obou směrů přesně 6,00 px
   (šipka 4,86 px, šipka + mezera 10,86 px).

   Žádná vlastní animace: barvu i přechod dědí od popisku, takže se
   na myš chovají stejně jako zbytek. */
.nano-navigace__polozka--predchozi .nano-navigace__popisek::before,
.nano-navigace__polozka--dalsi .nano-navigace__popisek::after {
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
}

.nano-navigace__polozka--predchozi .nano-navigace__popisek::before {
  /* Zápis `content: znak / ""` dává vygenerovanému obsahu PRÁZDNÝ
     alternativní text, takže ho přístupnostní strom bere jako ozdobu
     a čtečka ho nepředčítá. `aria-hidden` by tady nepomohlo — dá se dát
     jen na prvek v HTML, ne na pseudoprvek. */
  content: "\2039" / "";
  margin-inline-end: 6px;
}

.nano-navigace__polozka--dalsi .nano-navigace__popisek::after {
  content: "\203A" / "";
  margin-inline-start: 6px;
}

/* Popisek se šipkou se nesmí zalomit. Nejdelší kombinace je
   „DALŠÍ ČLÁNEK ›" (popisky jsou verzálkami). */
.nano-navigace__popisek {
  white-space: nowrap;
}

/* ============================================================
   25. DETAIL AUTORA (kolo 19)
   ============================================================
   Uzel typu `autor`, zobrazení `full`, například /radek-novak.
   Všechno je vázané na `body.page-node-type-autor`, ne na cestu, takže
   nový autor nic nevyžaduje.

   Pole v `.node__content` jdou v HTML v pořadí: `body` (kontakt),
   `field_perex` (text o autorovi), `field_obr_zek` (fotka). Cílové
   rozvržení je jiné, proto mřížka s výslovně určenými řádky a sloupci.

   Levý sloupec je 200 px, ne 120 px podle šířky fotky: nejdelší
   e-mailová adresa z dvanácti autorů je dlouhá 27 znaků a při 14 px
   měří 183,2 px. Užší sloupec by adresy lámal uprostřed slova. */
/* Mezera nadpis → obsah. Bez tohohle je 68 px (1280 px) a 32 px
   (375 px) — `h1.page-title { margin-block-end: 14px }` plus
   `.block-page-title-block { margin-block-end: var(--sp3) }` z Olivera,
   stejné dva zdroje jako u článku v kole 16. Srovnáno na 14 px, ať se
   detail autora a detail článku chovají stejně. */
body.page-node-type-autor .block-page-title-block {
  margin-block-end: 0;
}

body.page-node-type-autor .node--view-mode-full .node__content {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}

/* `margin-inline` a `width` schválně: pole nese Oliverovu třídu
   `wide-content`, která ho má vytáhnout z obsahového sloupce do stran
   (olivero/css/components/wide-content.css). Uvnitř mřížky to znamenalo
   ZÁPORNÝ levý okraj −54,86 px a fotka při 768 px vylezla na x = −39,
   tedy mimo stránku. Naše obecné pravidlo pro `.wide-content` na to
   nestačí, tady je potřeba vyšší specifičnost. */
body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-obr-zek {
  grid-column: 1;
  grid-row: 1;
  margin-block: 0;
  margin-inline: 0;
  width: auto;
  max-width: none;
}

/* KOLO 21: kontakt je teď ve vlastních polích `field_email` a `field_web`,
   ne v `body`. Levý sloupec je proto fotka, e-mail, web; pravý sloupec
   text o autorovi a pod ním případný zbytek `body`.
   `body` se ze zobrazení NEODEBÍRÁ — uzel 108 v něm má text „test“,
   který má zůstat. U ostatních je prázdné a Drupal ho nevykreslí. */
body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-email {
  grid-column: 1;
  grid-row: 2;
  margin-block: 16px 0;
}

body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-web {
  grid-column: 1;
  grid-row: 3;
  margin-block: 4px 0;
}

body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-perex {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-block: 0;
}

body.page-node-type-autor .node--view-mode-full .node__content > .field--name-body {
  grid-column: 2;
  grid-row: 3;
  margin-block: 16px 0;
}

/* Popisek „Kontakt:“ býval v `body` jako <strong>. Teď ho vykresluje CSS
   nad e-mailem. Kdyby autor měl jen web a e-mail ne, přesune se popisek
   na web — `:has()` to pozná. */
body.page-node-type-autor .field--name-field-email::before,
body.page-node-type-autor .node__content:not(:has(.field--name-field-email))
  .field--name-field-web::before {
  content: "Kontakt:";
  display: block;
  margin-block-end: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nano-text);
}

body.page-node-type-autor .field--name-field-email,
body.page-node-type-autor .field--name-field-web,
body.page-node-type-autor .field--name-field-web .field__item {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--nano-text);
  overflow-wrap: break-word;
}

body.page-node-type-autor .field--name-field-email a,
body.page-node-type-autor .field--name-field-web a {
  color: var(--nano-primary);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  body.page-node-type-autor .field--name-field-email a:hover,
  body.page-node-type-autor .field--name-field-web a:hover {
    text-decoration: underline;
  }
}

body.page-node-type-autor .field--name-field-email a:focus-visible,
body.page-node-type-autor .field--name-field-web a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* --- A. Fotka v kulatém rámečku -------------------------------------
   Stejný tvar jako v bloku autora na konci článku (kolo 16), jen větší:
   tady je fotka hlavní prvek stránky. */
body.page-node-type-autor .field--name-field-obr-zek img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

/* --- C. Popisek pole „Obrázek" --------------------------------------
   Zobrazení `node.autor.default` má u pole `field_obr_zek`
   `label: above`, proto se nad fotkou vykresloval název pole
   z administrace. Je to jediný viditelný popisek na téhle stránce —
   `body` i `field_perex` mají `label: hidden`.
   Řeší se CSS, ne konfigurací, aby seznam k nasazení nenarostl.
   `display: none` na `.field__label` je spolehlivé: popisek je vlastní
   prvek, nic jiného v něm není. */
body.page-node-type-autor .node--view-mode-full .field__label {
  display: none;
}

/* --- B. Kontakt pod fotkou ------------------------------------------
   Kontakt je součástí pole `body` uzlu autora, ne samostatné pole.
   Do levého sloupce se dá přesunout beze změny obsahu (viz mřížka výše).
   „Kontakt:" je v HTML jako <strong>, takže se dá spolehlivě zalomit
   na vlastní řádek. Adresy pak zůstávají inline a v 200px sloupci se
   samy rozpadnou na dva řádky — e-mail a web pod sebou.
   Oddělovač mezi adresami je textový uzel a u každého autora jiný
   (`;`, `,`, „e-mail:", `<em>&nbsp;</em>`, u jednoho druhý odstavec).
   CSS textové uzly adresovat neumí, takže interpunkce zůstává na konci
   prvního řádku. Odstranit ji by znamenalo přepsat obsah dvanácti uzlů
   — nedělá se, rozhodne uživatel. */
body.page-node-type-autor .node--view-mode-full .field--name-body,
body.page-node-type-autor .node--view-mode-full .field--name-body p {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--nano-text);
  margin-block: 0;
  overflow-wrap: break-word;
}

body.page-node-type-autor .node--view-mode-full .field--name-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--nano-text);
}

body.page-node-type-autor .node--view-mode-full .field--name-body a {
  color: var(--nano-primary);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  body.page-node-type-autor .node--view-mode-full .field--name-body a:hover {
    text-decoration: underline;
  }
}

body.page-node-type-autor .node--view-mode-full .field--name-body a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* --- D. Text o autorovi ---------------------------------------------
   Táž vada jako v kole 16 v bloku autora na konci článku, sem se to
   nepropsalo. `font-family: inherit` je nutné: pole nese třídu
   `.text-content`, které olivero/css/components/text-content.css dává
   `Lora, georgia, serif`. Trojice tříd proto, že
   `.node__content .text-content:not(.field--name-field-perex)` ze sekce 9
   má kvůli `:not()` specifičnost 0-3-0. */
body.page-node-type-autor .node--view-mode-full .field--name-field-perex,
body.page-node-type-autor .node--view-mode-full .field--name-field-perex p {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f464d;
  margin-block: 0;
}

/* --- E. Řádek „Od ruzicka, 27. března 2016" --------------------------
   Rozhodnutí uživatele: na stránce o osobě je matoucí, je to údaj o tom,
   kdo uzel v Drupalu založil. Vázáno na TYP OBSAHU, ne na cestu.
   U článků metadata zůstávají — uzavřené rozhodnutí, nesahat na ně. */
body.page-node-type-autor .node--view-mode-full .node__meta {
  display: none;
}

/* Pod 563 px jeden sloupec: fotka, kontakt, text. Hranice 35,125 rem
   = 562 px, stejně jako u bloku autora v kole 16. */
@media (max-width: 35.125rem) {
  body.page-node-type-autor .node--view-mode-full .node__content {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-obr-zek {
    grid-column: 1;
    grid-row: 1;
  }

  body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-email {
    grid-column: 1;
    grid-row: 2;
  }

  body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-web {
    grid-column: 1;
    grid-row: 3;
  }

  body.page-node-type-autor .node--view-mode-full .node__content > .field--name-field-perex {
    grid-column: 1;
    grid-row: 4;
    margin-block-start: 24px;
  }

  body.page-node-type-autor .node--view-mode-full .node__content > .field--name-body {
    grid-column: 1;
    grid-row: 5;
  }

  body.page-node-type-autor .field--name-field-obr-zek img {
    width: 96px;
    height: 96px;
  }
}

/* ============================================================
   26. ŠTÍTKY V PATIČCE (kolo 20, bod F)
   ============================================================
   Odkaz uvnitř štítku má hodnoty z návrhu už dřív — naměřeno 12,5 px,
   `padding: 5px 11px`, `border: 1px solid #3a4147`, `border-radius: 3px`,
   barva `#c8ced4`. Velké rámečky dělal OBAL `.views-row`.

   Viník je pravidlo z kola 10, které dalo položkám vlastních výpisů
   jemný rámeček:

     .view:not(.view-blog):not(.view-taxonomy-term) .views-row {
       border: 1px solid var(--nano-line); border-radius: 4px;
       padding: 20px 22px; margin-block-end: 16px }

   Pohled se štítky (`view-stitky`) do té podmínky spadá, takže každý
   štítek dostal rámeček 1 px, zaoblení 4 px, odsazení 20/22 px
   a spodní okraj 16 px — naměřeno 73,4 px na výšku místo 31,4 px.

   Pravidlo, které to v patičce ruší, tu už bylo:
   `.site-footer .block-views-blockstitky-block-1 .views-row
   { border: 0; padding: 0; margin: 0 }`. Prohrávalo ale specifičností:
   `:not()` počítá svůj argument, takže selektor z kola 10 má 0-4-0,
   kdežto ten v patičce jen 0-3-0. Proto je tenhle přepis pětitřídní
   (0-5-0) a na pořadí v souboru nezávisí. */
/* Šestitřídní (0-6-0): kromě pravidla z kola 10 (0-4-0) je tu ještě jeho
   mobilní varianta a `… .view-content > .views-row:first-child` (0-5-1),
   které přežily první pokus a nechaly na štítcích odsazení 20 px, resp.
   16 px. `.block-views` a `.block-views-blockstitky-block-1` jsou obě
   na témž prvku, takže se počítají obě. */
.site-footer .block-views.block-views-blockstitky-block-1 .view .view-content .views-row {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: block;
  transition: none;
}

/* Obal je `display: flex; flex-wrap: wrap; gap: 8px` už z dřívějška,
   ale `.view` nad ním má z kola 9 `display: grid; gap: 54px`. Bez
   tohohle by mezi řádky štítků zůstala mezera 54 px. */
.site-footer .block-views-blockstitky-block-1 .view {
  display: block;
}

/* Do 768 px větší mezera mezi štítky (kolo 21, bod A). Dotyková plocha
   štítku je 31,4 px, tedy těsně pod hranicí 32 px, a štítek se podle
   rozhodnutí uživatele nezvětšuje — místo toho se zvětší odstup mezi
   cíli, aby se dalo trefit. Nad 768 px zůstává 8 px. */
@media (max-width: 48rem) {
  .site-footer .block-views-blockstitky-block-1 .view-content {
    gap: 12px;
  }
}

/* ============================================================
   27. STRÁNKA VYHLEDÁVÁNÍ (kolo 22)
   ============================================================
   Pohled `vyhledavani` má řádky typu „pole" (`title`, `body`), ne náhled
   uzlu. Kolo 22 do něj přidalo `field_image` (styl `karta_16_9`).
   Na náhled uzlu se přepnout nedalo: filtr `combine` prohledává POLE
   `title` a `body` uvnitř pohledu, bez nich by vyhledávání nefungovalo. */

/* --- A. Vyhledávací pole na šířku obsahu ---------------------------- */

/* Nad 768 px mřížka místo pružného řádku z kola 11.
   Proč mřížka: pružný řádek zarovnával tlačítko na SPODEK celé položky
   včetně nápovědy „Hledá se v nadpisu i v textu.“ (`align-items:
   flex-end`), takže tlačítko sedělo o 36 px níž než pole — naměřeno
   pole top 351,3, tlačítko top 387,3. Mřížka dá tlačítko do TÉHOŽ
   řádku jako pole a nápovědu pod ně, bez dopočítávaných odsazení.

   `display: contents` na `.form-item` je k tomu potřeba: popisek, pole
   a nápověda jsou zabalené v něm, a bez toho by se do mřížky formuláře
   nedostaly. Vlastní vzhled `.form-item` nemá, takže se zrušením jeho
   boxu nic neztrácí. */
@media (min-width: 48.01rem) {
  .view-vyhledavani .views-exposed-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 8px;
    align-items: start;
  }

  .view-vyhledavani .views-exposed-form .form-item {
    display: contents;
  }

  .view-vyhledavani .views-exposed-form .form-item__label {
    grid-column: 1;
    grid-row: 1;
  }

  .view-vyhledavani .views-exposed-form .form-item input[type="text"],
  .view-vyhledavani .views-exposed-form .form-item input[type="search"] {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .view-vyhledavani .views-exposed-form .form-item__description {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
  }

  .view-vyhledavani .views-exposed-form .form-actions {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
  }
}

/* --- B. Výsledek jako položka výpisu rubriky ------------------------ */

@media (min-width: 48.01rem) {
  /* `row-gap: 0` schválně: svislé mezery uvnitř textového sloupce jsou
     6 px (nadpis → metadata) a 9 px (metadata → úryvek), tedy stejné
     jako všude jinde od kola 11. Jednotná mezera z `gap` by je
     přebila. */
  .view-vyhledavani .views-row {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    column-gap: 22px;
    row-gap: 0;
    align-items: start;
  }

  .view-vyhledavani .views-row > .views-field-field-image {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .view-vyhledavani .views-row > .views-field-title {
    grid-column: 2;
    grid-row: 1;
  }

  /* Řádek metadat nese pole `created` — vypisuje rubriky i datum
     najednou (viz kolo 23). */
  .view-vyhledavani .views-row > .views-field-created {
    grid-column: 2;
    grid-row: 2;
  }

  .view-vyhledavani .views-row > .views-field-body {
    grid-column: 2;
    grid-row: 3;
  }

  /* Výsledek BEZ náhledového obrázku nesmí nechat prázdný sloupec
     230 px. Views má na poli `hide_empty`, takže se obal vůbec
     nevykreslí, a `:has()` to pozná — text pak zabere celou položku.
     (V kole 10 u Akcí to bylo horší: tam obal vykresloval Olivero vždy.) */
  .view-vyhledavani .views-row:not(:has(.views-field-field-image)) {
    display: block;
  }
}

/* Pod 768 px jeden sloupec, obrázek nad textem — to zajistí výchozí tok,
   protože mřížka platí až od 48,01 rem. Obrázek jen ať drží šířku. */
.view-vyhledavani .views-field-field-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

@media (max-width: 48rem) {
  .view-vyhledavani .views-field-field-image {
    margin-block-end: 12px;
  }
}

/* Nadpis. Barvu i řez už drží kolo 11, tady jen zajišťujeme, že se
   nepodtrhává a že se chová stejně jako v rubrice. */
.view-vyhledavani .views-field-title,
.view-vyhledavani .views-field-title a {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--nano-text);
  text-decoration: none;
}

/* --- Řádek metadat (kolo 23) ----------------------------------------
   „Průmysl, Potraviny · 13. února 2024“. Rubriky i datum vypisuje JEDNO
   pole pohledu (`created`) přes přepis s podmínkou, takže u výsledků bez
   rubriky nezůstane osamocený oddělovač — doloženo na „Zahraniční
   partneři“, kde je metadata jen „30. dubna 2020“.
   Autor se nepřidával, rozhodnutí uživatele. */
.view-vyhledavani .views-field-created,
.view-vyhledavani .views-field-created time,
.view-vyhledavani .views-field-field-categories,
.view-vyhledavani .views-field-uid {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nano-muted);
}

.view-vyhledavani .views-field-created a {
  color: var(--nano-primary);
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .view-vyhledavani .views-field-created a:hover {
    text-decoration: underline;
  }
}

.view-vyhledavani .views-field-created a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* Mezery stejné jako všude jinde od kola 11: nadpis → metadata 6 px,
   metadata → úryvek 9 px.

   `margin-block-end: 0` na nadpisu je nutné. Nadpis má z dřívějška
   spodní okraj 6 px. V blokovém toku (mobil) se slije s horním okrajem
   metadat a mezera je 6 px, jenže MEZI POLOŽKAMI MŘÍŽKY se okraje
   NESLÉVAJÍ, takže nad 768 px se sečetly na 12 px. Naměřeno: nadpis
   bottom 538,3, metadata top 550,3. */
.view-vyhledavani .views-field-title {
  margin-block-end: 0;
}

.view-vyhledavani .views-field-created {
  margin-block-start: 6px;
}

.view-vyhledavani .views-field-body {
  margin-block-start: 9px;
}

/* Úryvek. TUČNÝ BYL Z OBSAHU, ne z CSS: `text_summary_or_trimmed`
   nechává v úryvku značky z článku, a některé články začínají
   `<strong>` — naměřeno `strong` s `font-weight: 700` uvnitř
   `.views-field-body p`. Řez se proto srovnává i na potomcích.
   Ořez na tři řádky stejným způsobem, jakým postranní sloupec ořezává
   na dva. */
.view-vyhledavani .views-field-body,
.view-vyhledavani .views-field-body p,
.view-vyhledavani .views-field-body strong,
.view-vyhledavani .views-field-body b,
.view-vyhledavani .views-field-body em,
.view-vyhledavani .views-field-body span {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #3f464d;
}

.view-vyhledavani .views-field-body .field-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-vyhledavani .views-field-body p {
  margin-block: 0;
}

/* Obrázky vložené do TĚLA článku se ve výpisu nezobrazují — stejné
   pravidlo jako od kola 13. V detailu článku zůstávají.
   Naměřeno před opravou: pátý výsledek měl v úryvku obrázek 180 px
   bez obrazového stylu. */
.view-vyhledavani .views-field-body img,
.view-vyhledavani .views-field-body figure,
.view-vyhledavani .views-field-body picture,
.view-vyhledavani .views-field-body figcaption {
  display: none;
}

/* ============================================================
   28. PATIČKA (kolo 24, bod A)
   ============================================================
   Inventura proti návrhu (sekce 4) ukázala, že většina hodnot už sedí:
   pozadí #1c2024, barva #c8ced4, `margin-top: 56px`, nadpisy bloků
   (12,5 px / 800, prostrkání 0,13em, verzálky, bílá, spodní linka 2 px
   #1da7f6), poměr sloupců 1,3 : 1 : 1,4 (naměřeno 368,77 / 283,67 /
   397,16 px), mezera 44 px, Novinky (mřížka 70 px + zbytek, náhled
   70 × 50 se zaoblením 3 px, odkaz 13,5 px / 600 #e6eaee ořezaný
   na dva řádky, datum 11,5 px #8b949c) i spodní lišta (odsazení shora
   36 px, linka 1 px #2c3237, odsazení 16 px, pružný řádek
   se `space-between`, 13 px, #8b949c).

   Odchylky, které se opravují níž: chybějící odsazení shora, patkové
   písmo v „O nás“, natažené bloky, mezera na mobilu a chování na myš. */

/* Návrh: `padding: 44px 0 0`. Naměřeno 0. */
.page-wrapper .site-footer {
  padding-block-start: 44px;
}

/* Text „O nás“ byl patkový — táž vada jako v kolech 8, 16 a 19.
   Pole nese třídu `.text-content`, které
   olivero/css/components/text-content.css dává `Lora, georgia, serif`. */
.site-footer .block-block-content .text-content,
.site-footer .block-block-content .text-content p {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #a9b1b9;
  margin-block: 0;
}

/* Bloky se natahovaly na výšku nejvyššího z nich — naměřeno 560 px
   u všech tří, ačkoli „O nás“ potřebuje jen část. Návrh je nenatahuje. */
.site-footer .region--footer_top__inner {
  align-items: start;
}

/* Pod 768 px sloupce pod sebou (to už platilo) s mezerou 32 px —
   naměřeno 28 px. Odsazení od kraje 16 px drží společný obal
   z kola 3, tady se nenastavuje znovu. */
@media (max-width: 48rem) {
  .site-footer .region--footer_top__inner {
    gap: 32px;
  }
}

/* Bloky byly o 36 px užší než jejich sloupec mřížky — naměřeno
   332,8 / 247,7 / 397,2 px ve sloupcích 368,77 / 283,67 / 397,16 px,
   tedy poměr 1,34 : 1 : 1,60 místo 1,30 : 1 : 1,40. Nese to Oliverovo
   `margin-inline-end: var(--sp2)` na blocích kromě posledního
   (na posledním je 0, proto ta nerovnoměrnost). Odstupy drží mezera
   mřížky 44 px, vlastní okraj bloků je zbytečný. */
.site-footer .region--footer-top .block {
  margin-inline: 0;
}

/* Spodní lišta se lámala pod sebe už od 992 px (sekce 10). Zadání chce
   zlom až pod 563 px — vedle sebe se pohodlně vejde, „Copyright © 2026
   Nanokompozity.cz“ má 229 px a „Všechna práva vyhrazena“ 161 px,
   dohromady 390 px do 531 px širokého pruhu při 563 px. */
@media (max-width: 61.99rem) and (min-width: 35.13rem) {
  .site-footer .nano-copyright {
    flex-direction: row;
    gap: 16px;
  }
}

@media (max-width: 35.125rem) {
  .site-footer .nano-copyright {
    align-items: center;
    text-align: center;
  }
}

/* Chování na myš stejné jako všude jinde. Kontrast #1da7f6 proti
   pozadí #1c2024 je 6,17 : 1, tedy nad hranicí 4,5 : 1 — světlejší
   odstín není potřeba. */
.site-footer a {
  transition: color 0.17s ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer .block-block-content a:hover,
  .site-footer [class*="blockblog"] .views-row:hover .views-field-title a,
  .site-footer [class*="blockblog"] .views-field-title a:hover,
  .site-footer [class*="blockstitky"] .views-row a:hover,
  .site-footer .nano-copyright a:hover {
    color: var(--nano-primary);
    text-decoration: underline;
  }
}

.site-footer a:focus-visible {
  color: var(--nano-primary);
  text-decoration: underline;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* ============================================================
   29. OBYČEJNÉ STRÁNKY (kolo 24, bod B)
   ============================================================
   Uzly typu `page` — Firmy (75) a Donate (130). Nikdy se neladily.
   Inventura našla jen dvě vady, obě už vyřešené jinde na webu; opravují
   se tedy stejným způsobem. Nadpis 34 px zůstává (uzavřené rozhodnutí),
   drobečky, zarovnání na svislou linku i mezera pod hlavičkou už seděly
   a viditelný popisek pole tu žádný není.

   Co je pro tyhle stránky specifické, se NEMĚNÍ a je vypsané v reportu
   (odrážky psané znakem „·“ v obyčejných odstavcích, prázdný obsah
   stránky Donate). */

/* Patkový text — táž vada jako v kolech 8, 16, 19 a v patičce.
   Pole nese třídu `.text-content`, které
   olivero/css/components/text-content.css dává `Lora, georgia, serif`.
   Trojice tříd proto, že `.node__content .text-content:not(
   .field--name-field-perex)` ze sekce 9 má kvůli `:not()`
   specifičnost 0-3-0. */
body.page-node-type-page .node--view-mode-full .node__content .text-content,
body.page-node-type-page .node--view-mode-full .node__content .text-content p,
body.page-node-type-page .node--view-mode-full .node__content .text-content li {
  font-family: inherit;
}

/* Mezera nadpis → obsah byla 68 px, stejně jako u článku před kolem 16
   a u autora před kolem 19: `h1.page-title { margin-block-end: 14px }`
   plus `.block-page-title-block { margin-block-end: var(--sp3) }`
   z Olivera. Srovnáno na 14 px, ať se všechny detailové stránky chovají
   stejně. */
body.page-node-type-page .block-page-title-block {
  margin-block-end: 0;
}

/* ============================================================
   30. ODKAZY V TEXTU — CHOVÁNÍ NA MYŠ (kolo 25)
   ============================================================
   Olivero dává odkazům v textu na myš ČERNOU barvu a světle modrou
   výplň přes celé slovo (olivero/css/components/text-content.css):

     .text-content a:where(:not(.button)):hover {
       color: var(--color--black);
       box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
       text-decoration-color: var(--color--primary-80); }

   Naměřeno na /node/75: základní stav rgb(8,130,201), po najetí
   rgb(0,0,0). Zbytek webu má na myš #1da7f6 s podtržením, takže se to
   sjednocuje.

   ZÁKLADNÍ STAV SE NEMĚNÍ — zůstává rgb(8,130,201) i s Oliverovou
   spodní linkou z `box-shadow: inset 0 -2px`. Mění se jen to, co se
   děje po najetí a při zaostření klávesnicí.

   Specifičnost: Oliverovo pravidlo má 0-2-1 (`:where()` se nepočítá).
   Tohle má 0-3-1 díky `:not(.button)`, takže vyhraje bez ohledu
   na pořadí souborů. `.button` se vynechává schválně — tlačítka mají
   vlastní vzhled. */

.text-content a:not(.button) {
  transition: color 0.17s ease, box-shadow 0.17s ease;
}

@media (hover: hover) and (pointer: fine) {
  .text-content a:not(.button):hover {
    color: var(--nano-primary);
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}

.text-content a:not(.button):focus-visible {
  color: var(--nano-primary);
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* ============================================================
   31. IKONY SOCIÁLNÍCH SÍTÍ V PATIČCE
   ============================================================

   Vykresluje je blok `nano_socialni_ikony` z modulu, umístěný
   v oblasti **Footer Top**. Adresy se vyplňují v nastavení bloku
   v administraci; PRÁZDNÁ ADRESA znamená, že se místo odkazu
   vykreslí `<span>`, takže ikona není klikatelná ani z klávesnice —
   není to jen vzhled.

   `fill: currentColor` v SVG znamená, že barvu řídí jediná
   vlastnost. Po doplnění adres se nemusí měnit nic dalšího.

   --- PROČ NE OBLAST „SOCIAL BAR" ---------------------------------
   Olivero má pro ikony vlastní oblast `social`, ale nedá se použít.
   Kreslí ji jako SVISLÝ pruh vlevo a její šířku bere z proměnné
   `--content-left` (`olivero/css/layout/social-bar.css:17`); šablona
   `region--social.html.twig` obsah navíc balí do `.rotate`.
   Tu proměnnou jsme v kole 4 vynulovali a lištu skryli — právě tím
   se logo, obsah a patička srovnaly na jednu svislou linku.
   Vrátit ikony do Social Baru = vrátit 90px pruh = posunout celý
   web doprava. Tedy regrese celého kola 4.

   --- PROČ NE HORNÍ SERVISNÍ LIŠTA --------------------------------
   Ikony i odkazy O nás / Inzerce byly 21. 8. nejdřív v servisní
   liště v hlavičce. Fungovalo to, ale mělo to jednu vadu: lišta se
   musela pod 1100 px celá skrývat, protože se do úzké hlavičky
   nevešla — a s ní mizely i odkazy. Na telefonu tedy O nás a Inzerce
   nebyly nikde.

   Řešení, které to nahradilo, je lepší: odkazy jsou ve světlé liště
   (Secondary menu) a ikony v patičce. **Patička vypadá na všech
   šířkách stejně, takže žádná mobilní výjimka není potřeba** a obojí
   je dostupné i na telefonu. Pravidla horní lišty byla proto
   odstraněna celá, včetně jejího `@media`.

   --- BARVY: NA TMAVÉM PODKLADU SE NEDAJÍ PŘEVZÍT ZE SVĚTLÉHO -----
   Když ikony sedly v bílé hlavičce, byla neaktivní barva `#b8bfc6`
   proti bílé NÍZKOKONTRASTNÍ, a proto působila zašle. Na tmavé
   patičce (`#1c2024`) je táž barva naopak SVĚTLÁ a vychází
   **8,82 : 1** — tedy výrazněji než vlastní text patičky
   (`#c8ced4` = 10,33 : 1, `#a9b1b9` = 7,55 : 1). Neaktivní ikony by
   tak vypadaly nápadněji než obsah kolem nich, což je opak toho,
   co mají sdělovat.

   Změřené kontrasty proti pozadí patičky `#1c2024`:

     #c8ced4  10,33 : 1   text patičky
     #b8bfc6   8,82 : 1   původní „neaktivní" ze světlé hlavičky
     #a9b1b9   7,55 : 1   text bloku O nás
     #1da7f6   6,17 : 1   primární barva, chování na myš
     #8b949c   5,32 : 1   datum a spodní lišta — ZVOLENO pro neaktivní
     #6b7280   3,39 : 1   pod hranicí 4,5 : 1, příliš tmavé

   Neaktivní ikona je proto `#8b949c` — barva, kterou patička už
   používá pro data a spodní lištu, takže zapadá do zavedené palety
   a čte se jako druhořadá. Aktivní stav je `#c8ced4` jako text
   patičky, chování na myš `#1da7f6`; na tmavém podkladu se tím
   ikona při najetí ROZSVÍTÍ, což je správný směr.
   ============================================================ */

/* --- ikony sociálních sítí ---------------------------------------
   Vykresluje je blok `nano_socialni_ikony` z modulu. Adresy se
   vyplňují v nastavení bloku; PRÁZDNÁ ADRESA znamená, že se místo
   odkazu vykreslí `<span>`, takže ikona není klikatelná ani z
   klávesnice — není to jen vzhled.

   `fill: currentColor` v SVG znamená, že barvu řídí tahle jediná
   vlastnost. Odbarvení neaktivní ikony je proto jeden řádek a po
   doplnění adresy se nemusí měnit nic dalšího. */

.nano-social__seznam {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nano-social__polozka {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nano-social__odkaz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  /* Aktivní stav na tmavé patičce: táž barva jako text patičky
     (10,33 : 1). `--nano-muted` sem NEPATŘÍ — na `#1c2024` vychází
     jen 3,39 : 1, tedy pod hranicí čitelnosti. */
  color: #c8ced4;
  transition: color 0.17s ease;
}

.nano-social__ikona {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Neaktivní: tlumeně a bez kurzoru ruky, ať je zjevné, že se na
   profilu teprve pracuje a nejde o rozbitý odkaz.
   `#8b949c` (5,32 : 1) je táž barva, jakou patička používá pro data
   a spodní lištu — čte se jako druhořadá a zapadá do palety.
   Původní `#b8bfc6` ze světlé hlavičky by na tmavém podkladu vyšlo
   8,82 : 1, tedy nápadněji než text kolem. Viz rozbor v hlavičce
   sekce. */
.nano-social__odkaz--neaktivni {
  color: #8b949c;
  cursor: default;
}

/* Aktivní stav — platí až ve chvíli, kdy se doplní adresa a vznikne
   `<a>`. Připraveno dopředu, po vyplnění se nic neupravuje. */
@media (hover: hover) and (pointer: fine) {
  a.nano-social__odkaz:hover {
    color: var(--nano-primary);
  }
}

a.nano-social__odkaz:focus-visible {
  color: var(--nano-primary);
  outline: 2px solid var(--nano-primary);
  outline-offset: 2px;
}

/* ============================================================
   32. IKONY SÍTÍ DO SPODNÍ LIŠTY PATIČKY
   ============================================================

   Ikony byly nejdřív ve třetím sloupci `footer_top`. Vedle sloupců
   „O nás" a „Novinky", které mají nadpis s modrou linkou, visely ve
   vzduchu — z 391 px šířky zabíraly stovku a nahoře nic. Nadpis se
   nad ně dávat nemá: „Sledujte nás" nad třemi šedými neaktivními
   ikonami vyzývá k něčemu, co zatím nejde.

   Přesunuty proto do `footer_bottom`, k copyrightu.

   JAK JE ŘÁDEK SLOŽENÝ. V regionu jsou dva bloky:
     1. `nano_copyright` — vykresluje `<div class="nano-copyright">`
        se DVĚMA spany: „Copyright © ROK Nazev" a „Všechna práva
        vyhrazena". Ten div má vlastní `space-between`.
     2. `nano_socialni_ikony` — ikony.

   Oba texty jsou tedy uvnitř JEDNOHO bloku a nedají se od sebe
   oddělit bez zásahu do vykreslování. Ikony proto nemůžou skončit
   MEZI nimi; jdou na kraj řádku.

   ŘEŠENÍ: region se udělá pružným řádkem, blok s copyrightem v něm
   dostane `flex: 1`, takže si svoje dva texty dál rozestře po celé
   zbylé šířce, a ikony se zarovnají k pravému okraji — na tutéž
   linku, na které končí postranní sloupec (1194,4 při 1280 px).

   Rámeček a odsazení se z `.nano-copyright` PŘESOUVAJÍ na region,
   aby celý řádek — texty i ikony — ležel uvnitř jednoho pruhu pod
   jednou linkou. Hodnoty zůstávají z kola 24 beze změny:
   `margin-block-start: 36px`, `padding-block: 16px`,
   `border-block-start: 1px solid #2c3237`.

   Barva ikon `#8b949c` je táž, jakou má text spodní lišty, takže
   ikony a copyright vedle sebe mají stejný tón. Viz rozbor kontrastů
   v sekci 31. */

/* POZOR NA NÁZEV REGIONU: `footer_bottom` nemá obal `__inner`, jaký má
   `footer_top`. Bloky jsou PŘÍMÝMI dětmi `.region--footer-bottom`
   — a ta třída se píše se SPOJOVNÍKEM, ne s podtržítkem. Selektor
   `.region--footer_bottom__inner` nesedí na nic; ověřeno v DOM. */
.site-footer .region--footer-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-start: 36px;
  padding-block: 16px;
  border-block-start: 1px solid #2c3237;
}

/* Blok s oběma texty si bere zbytek šířky, takže jeho vlastní
   `space-between` funguje dál — „Copyright" vlevo, „Všechna práva
   vyhrazena" před ikonami. */
.site-footer .region--footer-bottom > .block-nano-copyright {
  flex: 1 1 auto;
  min-width: 0;
}

/* Rámeček a odsazení teď drží region, ne tenhle div. */
.site-footer .nano-copyright {
  margin: 0;
  padding: 0;
  border-block-start: 0;
}

/* `flex: 0 0 auto` NESTAČÍ. Základní velikost se u tohohle bloku
   neodvodila od obsahu, ale od dostupné šířky — blok si vzal
   1 133,9 px z 1 163,8 px řádku a copyright vedle něj se smrskl
   na ~10 px (jeho text pak přetékal ven). Změřeno.
   Explicitní `width: max-content` to srovná: 1 133,9 → 98 px.
   Totéž umí `flex: 0 0 content`, ale `max-content` má širší podporu. */
.site-footer .region--footer-bottom > .block-nano-socialni-ikony {
  flex: 0 0 auto;
  width: max-content;
}

/* Mobil: sloupce patičky se skládají pod sebe, spodní lišta taky.
   Hranice 61,99 rem je táž, na které se skládá `.nano-copyright`
   (sekce 10) — ať se řádek neláme na dvou různých místech. */
@media (max-width: 61.99rem) {
  .site-footer .region--footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* Pod 563 px je `.nano-copyright` na střed (sekce 28); ikony taky. */
@media (max-width: 35.125rem) {
  .site-footer .region--footer-bottom {
    text-align: center;
  }
}