/*
Theme Name: Paměť Romů
Theme URI: https://www.pametromu.cz/
Author: RyNet.cz
Author URI: https://www.rynet.cz/
Description: Téma pro web Paměť Romů. Vzhled převzatý z původního webu na Joomle, kód napsaný nově — s funkčním zobrazením na mobilu, lokálně hostovanými písmy a bez závislosti na Bootstrapu.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pametromu
Tags: custom-colors, custom-menu, translation-ready
*/

/* ==================================================================
   Paleta a základní hodnoty

   Barvy odměřeny ze snímku původního webu, ne odhadnuty:
   #2b2b2b tvoří 61 % plochy stránky, #e0b586 je akcent.
   ================================================================== */

:root {
  /* plochy */
  --pr-pozadi: #2b2b2b;
  --pr-pozadi-tmave: #000000;
  --pr-pozadi-svetle: #454545;

  /* text */
  --pr-text: #ffffff;
  --pr-text-tlumeny: #a9a9a9;

  /* akcent */
  --pr-akcent: #e0b586;
  --pr-akcent-tmavy: #d6ad80;

  /* linky a oddělovače */
  --pr-linka: #454545;

  /* písma */
  --pr-pismo-text: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pr-pismo-nadpis: 'Roboto Slab', Georgia, 'Times New Roman', serif;

  /* velikosti — původní web má základ 14px, zde 16px kvůli čitelnosti
     dlouhých vzpomínkových textů; poměry nadpisů zachovány */
  --pr-velikost-zaklad: 16px;
  --pr-radkovani: 1.65;

  /* rozměry */
  --pr-sirka-obsahu: 1170px;
  --pr-sirka-textu: 46rem;
  --pr-mezera: 1.25rem;
}

/* ==================================================================
   Základ
   ================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--pr-pozadi);
  color: var(--pr-text);
  font-family: var(--pr-pismo-text);
  font-size: var(--pr-velikost-zaklad);
  line-height: var(--pr-radkovani);
  -webkit-font-smoothing: antialiased;

  /* Na krátkých stránkách by pod patičkou prosvítalo pozadí. Tohle ji
     přisune ke spodnímu okraji okna. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pr-hlavni {
  flex: 1 0 auto;
}

.pr-paticka {
  flex-shrink: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--pr-akcent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--pr-text);
}

/* Viditelné zaostření pro ovládání klávesnicí — na tmavém pozadí
   musí být výrazné, jinak se uživatel ztratí. */
:focus-visible {
  outline: 2px solid var(--pr-akcent);
  outline-offset: 2px;
}

/* ==================================================================
   Typografie
   ================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pr-pismo-nadpis);
  color: var(--pr-akcent);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.375rem); }   /* orig. 62px */
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); } /* orig. 42px */
h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem); }   /* orig. 30px */
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin: 0 0 1.1em;
}

/* Nadpisy karet pamětníků na titulce — verzálky s prostrkáním,
   jak je má původní web. */
.pr-nadpis-verzalky {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==================================================================
   Rozvržení
   Původní web stál na Bootstrapu 2 (span*, row-fluid). Tady flexbox
   a grid — vypadá stejně, ale funguje i na mobilu.
   ================================================================== */

.pr-obal {
  width: 100%;
  max-width: var(--pr-sirka-obsahu);
  margin-inline: auto;
  padding-inline: var(--pr-mezera);
}

.pr-mrizka {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* Položky mřížky i flexu mají ve výchozím stavu min-width: auto, takže
   se nezmenší pod šířku svého obsahu — velká fotografie pak roztáhne
   celou stránku a na mobilu vznikne vodorovné posouvání. */
.pr-mrizka > *,
.pr-slider__polozka,
.pr-karta,
.pr-claim__obal > * {
  min-width: 0;
}

/* Čtecí sloupec pro texty pamětníků */
.pr-text-clanku {
  max-width: var(--pr-sirka-textu);
}

/* ==================================================================
   Hlavička a menu

   Původní web má menu úplně nahoře, verzálkami a prostrkané,
   logo pod ním vlevo přes fotku.
   ================================================================== */

.pr-hlavicka {
  position: relative;
  z-index: 10;
}

/* Menu nahoře. Na podstránkách má tmavé pozadí, na titulce leží přímo
   na fotografii — tmavé pozadí tam má jen aktivní a rozbalená položka. */
.pr-menu-pruh {
  display: flex;
  align-items: center;
  background: var(--pr-pozadi-tmave);
}

.pr-navigace {
  width: 100%;
}

/* Položky roztažené přes šířku, jako na původním webu */
.pr-menu {
  justify-content: space-between;
  width: 100%;
}

/* Logo pod menu, zarovnané na stejný levý okraj */
.pr-logo-pruh {
  padding-block: 1.25rem;
}

/* Na titulce leží hlavička přes úvodní fotografii */
.pr-hlavicka--pruhledna {
  position: absolute;
  inset: 0 0 auto;
}

/* Tmavý přechod pod menu — na světlé fotografii by menu jinak zanikalo.
   Nahoře sytý, dolů se ztrácí do fotky. */
.pr-hlavicka--pruhledna::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 15rem;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.55) 30%,
    rgba(0, 0, 0, 0.2) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

.pr-hlavicka--pruhledna .pr-menu-pruh {
  background: transparent;
}

/* ------------------------------------------------------------------
   Menu přilepené při odscrollování
   Hlavička je pozicovaná absolutně, takže position: sticky by se
   neuplatnila — přepnutí na fixed proto řídí skript.
   ------------------------------------------------------------------ */

.pr-menu-pruh.je-prilepene {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  animation: pr-sjezd 0.25s ease;
}

/* Přilepené menu se drží stejné šířky obsahu jako zbytek webu */
.pr-menu-pruh.je-prilepene .pr-navigace {
  width: 100%;
  max-width: var(--pr-sirka-obsahu);
  margin-inline: auto;
  padding-inline: var(--pr-mezera);
}

.pr-menu-pruh.je-prilepene .pr-menu > li > a {
  padding-block: 1rem;
  text-shadow: none;
}

@keyframes pr-sjezd {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pr-menu-pruh.je-prilepene {
    animation: none;
  }

  /* Kdo si vyžádal klid, dostane snímky bez pohybu — přepínají se
     rovnou, bez prolnutí i bez přibližování. */
  .pr-slider__polozka,
  .pr-slider__polozka .pr-slider__obrazek {
    transition: none;
  }

  .pr-slider__polozka .pr-slider__obrazek,
  .pr-slider__polozka.je-aktivni .pr-slider__obrazek {
    transform: none;
    animation: none;
  }

  .pr-karta,
  .pr-karta__obrazek img {
    transition: none;
  }

  .pr-karta:hover,
  .pr-karta:focus-within,
  .pr-karta:hover .pr-karta__obrazek img,
  .pr-karta:focus-within .pr-karta__obrazek img {
    transform: none;
  }
}

.pr-hlavicka--pruhledna .pr-logo-pruh {
  padding-block: 0.5rem 1.75rem;
}

/* Na podstránce stojí pod logem nadpis stránky, takže logo je menší
   než na titulce — jinak by se překrývaly. */
.pr-hlavicka--pruhledna .pr-logo img {
  max-height: 6rem;
}

/* Text menu musí být čitelný i na světlém snímku */
.pr-hlavicka--pruhledna .pr-menu > li > a {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.pr-logo__text {
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.5rem;
  color: var(--pr-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pr-logo a {
  text-decoration: none;
  display: inline-block;
}

.pr-logo img {
  max-height: 7rem;
  width: auto;
}

/* --- menu --- */

.pr-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-menu li {
  margin: 0;
}

.pr-menu a {
  display: block;
  padding: 1.4rem 1.6rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pr-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Aktivní i najetá položka dostane tmavé pozadí — na fotce je to
   jediné, co je za nimi vidět. */
.pr-menu a:hover,
.pr-menu a:focus-visible,
.pr-menu .current-menu-item > a,
.pr-menu .current_page_item > a,
.pr-menu .current-menu-ancestor > a,
.pr-menu li:hover > a,
.pr-menu li:focus-within > a {
  background: var(--pr-pozadi-svetle);
  color: var(--pr-akcent);
}

.pr-hlavicka--pruhledna .pr-menu a:hover,
.pr-hlavicka--pruhledna .pr-menu .current-menu-item > a,
.pr-hlavicka--pruhledna .pr-menu .current_page_item > a,
.pr-hlavicka--pruhledna .pr-menu li:hover > a,
.pr-hlavicka--pruhledna .pr-menu li:focus-within > a {
  background: rgba(69, 69, 69, 0.92);
  text-shadow: none;
}

/* --- druhá úroveň menu (O projektu) --- */

.pr-menu li {
  position: relative;
}

.pr-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pr-pozadi-tmave);
  border-top: 2px solid var(--pr-akcent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}

.pr-menu li:hover > .sub-menu,
.pr-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pr-menu .sub-menu a {
  padding: 0.65rem 1.1rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Naznačit, že položka má podmenu */
.pr-menu .menu-item-has-children > a::after {
  content: '▾';
  margin-left: 0.4em;
  font-size: 0.75em;
  opacity: 0.7;
}

/* ------------------------------------------------------------------
   Tlačítko pro rozbalení menu na úzkých displejích
   ------------------------------------------------------------------ */

.pr-prepinac {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0.25rem;
  background: transparent;
  border: 0;
  color: var(--pr-text);
  font-family: var(--pr-pismo-text);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.pr-prepinac__carky,
.pr-prepinac__carky::before,
.pr-prepinac__carky::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pr-prepinac__carky {
  position: relative;
}

.pr-prepinac__carky::before,
.pr-prepinac__carky::after {
  content: '';
  position: absolute;
  left: 0;
}

.pr-prepinac__carky::before {
  top: -0.45rem;
}

.pr-prepinac__carky::after {
  top: 0.45rem;
}

/* Rozbaleno — čárky se změní v křížek */
.pr-prepinac[aria-expanded='true'] .pr-prepinac__carky {
  background: transparent;
}

.pr-prepinac[aria-expanded='true'] .pr-prepinac__carky::before {
  transform: translateY(0.45rem) rotate(45deg);
}

.pr-prepinac[aria-expanded='true'] .pr-prepinac__carky::after {
  transform: translateY(-0.45rem) rotate(-45deg);
}

/* ------------------------------------------------------------------
   Úzké displeje — menu jako harmonika
   ------------------------------------------------------------------ */


/* ==================================================================
   Karty pamětníků

   Na původním webu tři sloupce: zlatý nadpis verzálkami, portrét,
   perex, podtržený odkaz „číst dále".
   ================================================================== */

.pr-hlavni {
  padding-block: 2.5rem 3.5rem;
}

/* Obsah navazuje na záhlaví, které už odsazení řeší samo. */
.pr-zahlavi-stranky + .pr-hlavni {
  padding-top: 2.25rem;
}

/* Slider i úvodní pás musí sahat až pod hlavičku, žádný pruh nad nimi.
   Dole končí titulka tmavým pruhem s claimem, na který rovnou navazuje
   patička — mezera mezi nimi by vypadala jako prázdné místo. */
body.home .pr-hlavni {
  padding-top: 0;
}

/* ==================================================================
   Záhlaví podstránek

   Nadpis leží přímo v obrazovém pásu, ne pod ním. Podkladem jsou tváře
   pamětníků; když má stránka vlastní náhledový obrázek, použije se ten.
   Hlavička s menu leží přes záhlaví, proto má nahoře místo navíc.
   ================================================================== */

.pr-zahlavi-stranky {
  position: relative;
  overflow: hidden;
  background: var(--pr-pozadi-tmave);
  min-height: clamp(14rem, 22vw, 18rem);
  display: flex;
  align-items: flex-end;
}

.pr-zahlavi-stranky__pas,
.pr-zahlavi-stranky__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Sedm tváří vedle sebe. Na užších displejích se počet snižuje, aby
   z portrétů nezůstaly svislé proužky. */
.pr-zahlavi-stranky__pas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.pr-zahlavi-stranky__pas img,
.pr-zahlavi-stranky__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}


/* Pás je hodně široký, takže se ze snímku ořízne většina výšky.
   U portrétu se bere výřez shora, kde je obličej; u dobových
   fotografií jsou lidé spíš uprostřed, proto níž. */
.pr-zahlavi-stranky--foto .pr-zahlavi-stranky__foto img {
  object-position: center 22%;
}

.pr-zahlavi-stranky--dobova .pr-zahlavi-stranky__foto img {
  object-position: center 38%;
}

/* Přechod do černé zleva — nadpis stojí vlevo a musí držet i na
   světlé fotografii. */
.pr-zahlavi-stranky__stin {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Plynulé ztmavování doleva: vpravo jsou tváře v pásu vidět, směrem
     k nadpisu podklad postupně tmavne, až je text čitelný. */
  background:
    linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.4) 30%,
      rgba(0, 0, 0, 0.72) 60%,
      rgba(0, 0, 0, 0.9) 85%,
      rgba(0, 0, 0, 0.94) 100%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%);
}

.pr-zahlavi-stranky__obal {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Nahoře místo pro průhlednou hlavičku: menu i logo nad nadpisem. */
  padding-block: 12rem 1.9rem;
}

.pr-zahlavi-stranky__nadpis {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  /* Dál doprava už podklad světlá kvůli tvářím v pásu. */
  max-width: 58%;
}

.pr-zahlavi-stranky--foto .pr-zahlavi-stranky__nadpis {
  color: var(--pr-text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.pr-zahlavi-stranky__podnadpis {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

.pr-zahlavi-stranky__podnadpis .pr-oddelovac {
  margin-inline: 0.5rem;
  opacity: 0.5;
}

.pr-zahlavi-stranky__podnadpis a {
  color: var(--pr-text-tlumeny);
  text-decoration: none;
}

.pr-zahlavi-stranky__podnadpis a:hover,
.pr-zahlavi-stranky__podnadpis a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

/* Drobečková navigace */
.pr-drobky {
  margin-bottom: 0.7rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-text-tlumeny);
}

.pr-drobky a {
  color: var(--pr-text-tlumeny);
  text-decoration: none;
}

.pr-drobky a:hover,
.pr-drobky a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

.pr-drobky span {
  margin-inline: 0.45rem;
  opacity: 0.5;
}

.pr-karta {
  display: flex;
  flex-direction: column;
}

.pr-karta__nadpis {
  font-size: 1.375rem;
  margin: 0 0 0.85rem;
}

.pr-karta__nadpis a {
  color: var(--pr-akcent);
  text-decoration: none;
}

.pr-karta__nadpis a:hover,
.pr-karta__nadpis a:focus-visible {
  color: var(--pr-text);
}

.pr-karta__obrazek {
  display: block;
  margin-bottom: 1rem;
  /* Rám drží přiblíženou fotografii uvnitř. */
  overflow: hidden;
}

.pr-karta__obrazek img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease-out;
}

/*
 * Karta reaguje na najetí jako celek, ne jen odkaz pod kurzorem —
 * fotografie se přiblíží, karta se nadzvedne a jméno zesvětlá.
 * Reakce platí i pro ohnisko, aby ji poznal i ten, kdo web prochází
 * klávesnicí.
 */
.pr-karta {
  transition: transform 0.3s ease-out;
}

.pr-karta:hover,
.pr-karta:focus-within {
  transform: translateY(-4px);
}

.pr-karta:hover .pr-karta__obrazek img,
.pr-karta:focus-within .pr-karta__obrazek img {
  transform: scale(1.05);
}

.pr-karta:hover .pr-karta__nadpis a,
.pr-karta:focus-within .pr-karta__nadpis a {
  color: var(--pr-text);
}

.pr-karta:hover .pr-karta__vice,
.pr-karta:focus-within .pr-karta__vice {
  color: var(--pr-text);
}

/* Perex nechat růst, aby odkaz „číst dále" seděl u všech karet
   ve stejné výšce i při různě dlouhých textech. Cílit jen na perex,
   ne na všechny odstavce v kartě. */
.pr-karta__perex {
  flex: 1 1 auto;
  font-size: 0.9375rem;
}

.pr-karta__perex p {
  margin-bottom: 0.6em;
}

.pr-karta__vice {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-size: 0.9375rem;
}

/* ==================================================================
   Titulka
   ================================================================== */

.pr-uvod {
  position: relative;
  background: var(--pr-pozadi-tmave);
}

.pr-uvod__obrazek {
  width: 100%;
  max-height: 78vh;
  object-fit: cover;
}

/* --- úvodní slider --- */

.pr-slider {
  position: relative;
  background: var(--pr-pozadi-tmave);
  overflow: hidden;
}

.pr-slider__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 100%;
}

/* Snímky leží přes sebe; viditelný je jen aktivní. Grid je drží
   ve stejné buňce, takže výška odpovídá nejvyššímu z nich. */
.pr-slider__polozka {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s;
}

.pr-slider__polozka.je-aktivni {
  opacity: 1;
  visibility: visible;
}

/* Zobrazená fotografie se po celou dobu nepatrně přibližuje. Statický
   snímek přes celou obrazovku působí jako zaseknutá stránka; pohyb je
   tak pomalý, že si ho návštěvník uvědomí až po chvíli. Zvětšení se
   ořízne rámem slideru, proto overflow. */
/* Koncový stav si drží samotná animace (forwards). Kdyby byl
   předepsaný i tady, čekaly by nezobrazené snímky zvětšené a
   přesahovaly by rám. */
.pr-slider__polozka .pr-slider__obrazek {
  will-change: transform;
}

.pr-slider__polozka.je-aktivni .pr-slider__obrazek {
  animation: pr-priblizeni 5.6s ease-out forwards;
}

@keyframes pr-priblizeni {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.pr-slider__odkaz {
  display: block;
  position: relative;
  text-decoration: none;
}

.pr-slider__obrazek {
  width: 100%;
  max-height: 78vh;
  object-fit: cover;
}

/* Popisek snímku — jméno člověka na fotografii. Stojí vpravo dole,
   zarovnaný na pravý okraj obsahového sloupce, ne na okraj obrazovky.
   Ovládací tečky jsou až u samotného rohu a o kus níž, takže mezi
   jménem a tečkami zůstává odstup a nedá se do nich omylem trefit.

   Výpočet vpravo je totéž, co dělá .pr-obal — polovina okna minus
   polovina obsahové šířky a odsazení. Na úzkém displeji se použije
   samotné odsazení. */
.pr-slider__popisek {
  position: absolute;
  bottom: 4rem;
  right: max(
    var(--pr-mezera),
    calc(50% - (var(--pr-sirka-obsahu) / 2) + var(--pr-mezera))
  );
  z-index: 2;
  max-width: min(24rem, 55%);
  padding: 0.4rem 0.9rem;
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.0625rem;
  line-height: 1.3;
  text-align: right;
  color: var(--pr-akcent);
  background: rgba(0, 0, 0, 0.78);
  border-right: 3px solid var(--pr-akcent);
}

.pr-slider__odkaz:hover .pr-slider__popisek,
.pr-slider__odkaz:focus-visible .pr-slider__popisek {
  color: var(--pr-text);
  background: rgba(0, 0, 0, 0.9);
}

.pr-slider__ovladani {
  position: absolute;
  right: 1.75rem;
  bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}

.pr-slider__tecka {
  width: 0.85rem;
  height: 0.85rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.pr-slider__tecka:hover,
.pr-slider__tecka:focus-visible {
  transform: scale(1.15);
}

.pr-slider__tecka.je-aktivni {
  background: var(--pr-akcent);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pr-sekce {
  padding-block: 3rem;
}

/* Pruh s claimem — na původním webu černý pás pod pamětníky
   s fotografií pamětníka uprostřed (obrázek na pozadí, ne v textu). */
.pr-claim {
  position: relative;
  overflow: hidden;
  background: url('assets/img/bottom_bg.png') center center no-repeat var(--pr-pozadi-tmave);
  padding-block: 2.75rem;
  min-height: 21rem;
  display: flex;
  align-items: center;
}

/* Když je uprostřed portrét pamětníka, výchozí obrázek na pozadí
   překáží — pruh je pak jen tmavá plocha pod fotografií. */
.pr-claim--s-fotkou {
  background-image: none;
}

/* Portrét uprostřed. Vybírá se náhodně, takže musí sednout jakýkoli:
   ořez na výšku pruhu a měkký přechod do černé po všech stranách,
   aby fotografie neměla ostrý okraj. */
.pr-claim__foto {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(32rem, 42%);
  pointer-events: none;
}

.pr-claim__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Obličej bývá v horní části snímku. */
  object-position: center 28%;
  -webkit-mask-image: radial-gradient(
    ellipse 44% 46% at 50% 50%,
    #000 38%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 44% 46% at 50% 50%,
    #000 38%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
}

.pr-claim__obal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Text po stranách fotografie. Bez omezení šířky by se dlouhá věta
   roztáhla přes portrét a byla nečitelná. */
.pr-claim__text {
  flex: 0 1 auto;
  max-width: min(28rem, 38%);
}

.pr-claim__odkazy {
  flex: 0 1 auto;
  max-width: min(20rem, 28%);
}

.pr-claim__nadpis {
  margin: 0;
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.5rem;
  color: var(--pr-akcent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pr-claim__veta {
  margin: 0.2em 0 0;
  font-family: var(--pr-pismo-nadpis);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.25;
  color: var(--pr-text);
}

.pr-claim__vyzva {
  margin: 0 0 0.6rem;
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.375rem;
  color: var(--pr-text);
}

.pr-claim__tlacitka {
  margin: 0;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pr-tlacitko {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--pr-pozadi-svetle);
  color: var(--pr-text);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pr-tlacitko:hover,
.pr-tlacitko:focus-visible {
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
}

/* ==================================================================
   Detail pamětníka
   ================================================================== */

/* Úvodní odstavec stojí nad videem a drží jeho šířku. Užší čtecí
   sloupec platí až pro výpověď pod přehrávačem. */
.pr-pametnik__perex {
  font-size: 1.0625rem;
  color: var(--pr-text);
  border-left: 3px solid var(--pr-akcent);
  padding-left: 1.25rem;
  margin-bottom: 2rem;
}

.pr-pametnik__perex p:last-child {
  margin-bottom: 0;
}

.pr-pametnik__telo {
  margin-block: 2rem;
}

/* Konec detailu pamětníka: tři další, aby bylo kam pokračovat. */
.pr-dalsi-pametnici {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pr-linka);
}

/* ==================================================================
   Lidé (stránka Tým)

   Kulaté portréty a text, který je obtéká — tak to má i původní web.
   Ve dvou sloupcích: tři vedle sebe by při dlouhých životopisech
   nechaly na text příliš úzké místo.
   ================================================================== */

.pr-lide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  margin-bottom: 2.5rem;
}

.pr-osoba {
  /* Obtékající portrét musí zůstat uvnitř své buňky. */
  overflow: hidden;
}

/* Zapsáno i s .pr-text-clanku: pravidlo pro obrázky v obsahu stránky
   má vyšší specificitu a přepsalo by výšku. U čtvercových fotografií by
   to nebylo poznat, u fotografií na výšku vznikla elipsa místo kruhu. */
.pr-osoba__foto,
.pr-text-clanku .pr-osoba__foto {
  float: left;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0.3rem 1.1rem 0.6rem 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
}

/* Vedení projektu má větší portréty než tazatelé. */
.pr-lide--vedeni .pr-osoba__foto,
.pr-text-clanku .pr-lide--vedeni .pr-osoba__foto {
  width: 10rem;
  height: 10rem;
  margin-right: 1.4rem;
}

.pr-osoba__jmeno {
  margin: 0 0 0.5rem;
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.125rem;
  color: var(--pr-akcent);
}

.pr-osoba__role {
  display: block;
  font-family: var(--pr-pismo-text);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--pr-text-tlumeny);
}

.pr-osoba__popis {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Čtecí sloupec je pro dvě osoby vedle sebe úzký — vedle portrétu by
   na text zbylo pár slov na řádek. Skupina se proto roztáhne na plnou
   šířku obsahu; začíná na stejném levém okraji, takže se jen protáhne
   doprava. */
.pr-text-clanku .pr-lide {
  max-width: none;
  width: calc(min(var(--pr-sirka-obsahu), 100vw) - 2 * var(--pr-mezera));
}

/* ==================================================================
   Obsahová stránka
   ================================================================== */

.pr-stranka__telo h2,
.pr-stranka__telo h3 {
  margin-top: 1.8em;
}

/* Obsah přenesený z Joomly nese vlastní zarovnání a rozměry obrázků.
   Tohle je srovná do čtecího sloupce. */
.pr-stranka__telo img {
  height: auto;
  margin-block: 1rem;
}

.pr-stranka__telo table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
}

.pr-stranka__telo th,
.pr-stranka__telo td {
  border: 1px solid var(--pr-linka);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

.pr-stranka__telo ul,
.pr-stranka__telo ol {
  padding-left: 1.4rem;
}

.pr-stranka__telo li {
  margin-bottom: 0.4em;
}

/* ==================================================================
   Videovýpověď

   Přehrávač se vkládá až po kliknutí. Do té doby je vidět portrét
   pamětníka a tlačítko — na YouTube nejde žádný požadavek.
   ================================================================== */

.pr-video {
  position: relative;
  margin-bottom: 2.5rem;
  background: var(--pr-pozadi-tmave);
}

.pr-video__nahled {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.5;
}

.pr-video__spustit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--pr-text);
  font-family: var(--pr-pismo-text);
  font-size: 1rem;
  cursor: pointer;
  padding: 1rem;
  text-align: center;
}

.pr-video__ikona {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
  font-size: 1.5rem;
  padding-left: 0.2rem;
  transition: transform 0.15s ease;
}

.pr-video__spustit:hover .pr-video__ikona,
.pr-video__spustit:focus-visible .pr-video__ikona {
  transform: scale(1.08);
}

.pr-video__text {
  max-width: 28rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.pr-video__poznamka {
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--pr-text-tlumeny);
  background: var(--pr-pozadi);
}

/* po spuštění */
.pr-video--spusteno {
  aspect-ratio: 16 / 9;
}

.pr-video__ramec {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==================================================================
   Kontakt — mapa vedle údajů

   Mapa je z OpenStreetMap, ne z Google: neukládá návštěvníkovi
   sledovací soubory, takže se může načíst rovnou a web kvůli ní
   nepotřebuje cookie lištu.
   ================================================================== */

.pr-kontakt--s-mapou {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin-block: 0.5rem 2rem;
}

.pr-kontakt__ramec {
  display: block;
  width: 100%;
  height: clamp(18rem, 32vw, 24rem);
  border: 1px solid var(--pr-linka);
  background: var(--pr-pozadi-svetle);
}

.pr-kontakt__poznamka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--pr-text-tlumeny);
}

.pr-kontakt__zdroj {
  color: #8d8d8d;
}

.pr-kontakt__udaje p:first-child {
  margin-top: 0;
}

/* ==================================================================
   Detail pamětníka — text a postranní sloupec

   Vpravo stojí galerie a odkazy na doprovodné texty. Sloupec se při
   posouvání drží na obrazovce a zastaví se pod přilepeným menu, aby
   pod ním nezmizel.
   ================================================================== */

/*
 * Bez align-items: start by sloupce zůstaly stejně vysoké — a přesně
 * to je potřeba: přilepený obsah se může posouvat jen v rámci svého
 * rodiče, takže aside musí sahat po celé výšce textu vedle sebe.
 */
.pr-pametnik__obsah--se-sloupcem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: 3rem;
}

/* Sloupec se drží na obrazovce a zastaví se pod přilepeným menu.
   Jeho obsah je držený tak nízko, aby se vešel celý — proto je
   v náhledu jen šest fotografií. */
.pr-pametnik__sloupec-obsah {
  position: sticky;
  top: 5.5rem;
}

/* Na nízkém okně by se sloupec nevešel a přilepený by horní částí
   zalezl pod menu. Tam se raději posouvá s textem. */
@media (max-height: 54rem) {
  .pr-pametnik__sloupec-obsah {
    position: static;
  }
}


/* Boxy s odkazy na doprovodné texty (přišly z původního webu) */
.pr-pametnik__sloupec .infobox {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--pr-pozadi-svetle);
  border-top: 3px solid var(--pr-akcent);
}

.pr-pametnik__sloupec .infobox h5 {
  margin: 0 0 0.8rem;
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-akcent);
}

.pr-pametnik__sloupec .infobox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-pametnik__sloupec .infobox li {
  margin-bottom: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.pr-pametnik__sloupec .infobox li:last-child {
  margin-bottom: 0;
}

.pr-pametnik__sloupec .infobox strong {
  font-weight: 400;
}

/* ==================================================================
   Fotogalerie pamětníka
   ================================================================== */

.pr-galerie__nadpis {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-akcent);
}

.pr-galerie__pocet {
  font-size: 0.75rem;
  color: var(--pr-text-tlumeny);
}

/* Dva sloupce — ve třech byly náhledy tak malé, že na nich nebylo
   nic poznat. */
.pr-galerie__mrizka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

/* Fotografie nad rámec náhledu zůstávají v HTML kvůli listování
   v prohlížeči, jen se nezobrazují. */
.pr-galerie__polozka--skryta {
  display: none;
}

.pr-galerie__vice {
  display: block;
  width: 100%;
  margin-top: -2rem;
  margin-bottom: 2.5rem;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--pr-linka);
  color: var(--pr-text-tlumeny);
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pr-galerie__vice:hover,
.pr-galerie__vice:focus-visible {
  border-color: var(--pr-akcent);
  color: var(--pr-akcent);
}

/* Odstup mezi galerií a odkazy na doprovodné texty. */
.pr-galerie + .infobox {
  margin-top: 0;
}

.pr-galerie__polozka a {
  display: block;
  overflow: hidden;
}

.pr-galerie__polozka img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.pr-galerie__polozka a:hover img,
.pr-galerie__polozka a:focus-visible img {
  transform: scale(1.06);
  opacity: 0.85;
}

/* ==================================================================
   Prohlížeč fotografií

   Otevře se přes stránku po kliknutí na náhled. Bez JavaScriptu
   zůstávají odkazy funkční a vedou rovnou na soubor.
   ================================================================== */

.pr-prohlizec {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);

  /* Stránka pod prohlížečem zůstává tušit — návštěvník ví, že se jen
     dívá na fotografii a nikam neodešel. Rozostření drží pozornost na
     snímku, i když je pod ním text. */
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.pr-prohlizec.je-otevreny {
  display: flex;
}

/* Stránka pod prohlížečem se nemá posouvat. */
body.ma-prohlizec {
  overflow: hidden;
}

.pr-prohlizec__ramec {
  margin: 0;
  max-width: min(90vw, 70rem);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.pr-prohlizec__obrazek {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pr-prohlizec__popisek {
  font-size: 0.875rem;
  color: var(--pr-text-tlumeny);
  text-align: center;
  max-width: 46rem;
}

.pr-prohlizec__zavrit,
.pr-prohlizec__predchozi,
.pr-prohlizec__dalsi {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: var(--pr-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pr-prohlizec__zavrit:hover,
.pr-prohlizec__predchozi:hover,
.pr-prohlizec__dalsi:hover,
.pr-prohlizec__zavrit:focus-visible,
.pr-prohlizec__predchozi:focus-visible,
.pr-prohlizec__dalsi:focus-visible {
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
}

.pr-prohlizec__zavrit {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.pr-prohlizec__predchozi,
.pr-prohlizec__dalsi {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 4.5rem;
  font-size: 2rem;
  line-height: 1;
}

.pr-prohlizec__predchozi {
  left: 0.75rem;
}

.pr-prohlizec__dalsi {
  right: 0.75rem;
}

.pr-prohlizec__pocitadlo {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--pr-text-tlumeny);
}

/* ==================================================================
   Patička
   Tři sloupce: kdo projekt dělá, rozcestník, kontakt. Pod nimi
   poděkování podporovatelům a spodní řádek.
   ================================================================== */

.pr-paticka {
  background: var(--pr-pozadi-tmave);
  /* Nad patičkou končí tmavý pruh s claimem — bez linky by obojí
     splynulo v jednu černou plochu. */
  border-top: 1px solid var(--pr-linka);
  padding-block: 3.5rem 0;
  color: var(--pr-text-tlumeny);
}

.pr-paticka__sloupce {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
}

.pr-paticka__sloupce > * {
  min-width: 0;
}

.pr-paticka__nadpis {
  font-family: var(--pr-pismo-text);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pr-akcent);
  margin: 0 0 1.1rem;
}

.pr-paticka__logo-odkaz {
  display: inline-block;
  margin-bottom: 1.2rem;
}

.pr-paticka__logo {
  max-width: 12rem;
  max-height: 6rem;
  width: auto;
  height: auto;
}

.pr-paticka__nazev {
  font-family: var(--pr-pismo-nadpis);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pr-text);
}

.pr-paticka__popis p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0.9em;
}

.pr-paticka__popis p:last-child {
  margin-bottom: 0;
}

.pr-paticka__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-paticka__menu li {
  margin-bottom: 0.55rem;
}

.pr-paticka__menu a {
  font-size: 0.9375rem;
  color: #e2e2e2;
  text-decoration: none;
}

.pr-paticka__menu a:hover,
.pr-paticka__menu a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

.pr-paticka__adresa {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.pr-paticka__adresa a {
  color: #e2e2e2;
  text-decoration: none;
}

.pr-paticka__adresa a:hover,
.pr-paticka__adresa a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

.pr-paticka__site {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.pr-paticka__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--pr-linka);
  border-radius: 50%;
  color: #e2e2e2;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pr-paticka__ikona svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.pr-paticka__ikona:hover,
.pr-paticka__ikona:focus-visible {
  border-color: var(--pr-akcent);
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
}

.pr-paticka__podpora {
  border-top: 1px solid var(--pr-linka);
  margin-top: 3rem;
  padding-block: 1.5rem;
}

.pr-paticka__podpora p {
  margin: 0;
  font-size: 0.875rem;
  color: #8d8d8d;
}

/* Odstup od sloupců nad tím. Dřív ho držel pruh s poděkováním
   podporovatelům; ten se už nevypisuje, takže mezera musí být tady. */
.pr-paticka__spodek {
  border-top: 1px solid var(--pr-linka);
  margin-top: 3rem;
  padding-block: 1.5rem 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}

.pr-paticka__copyright,
.pr-paticka__soukromi,
.pr-paticka__autor {
  margin: 0;
  font-size: 0.8125rem;
  color: #8d8d8d;
}

/* Odkaz na ochranu osobních údajů stojí hned za copyrightem, podpis
   se odsune k pravému okraji. Musí to být až za pravidlem s margin,
   které by ho jinak přebilo. */
.pr-paticka__autor {
  margin-left: auto;
}

.pr-paticka__soukromi a {
  color: #8d8d8d;
  text-decoration: none;
}

.pr-paticka__soukromi a:hover,
.pr-paticka__soukromi a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

.pr-paticka__copyright a,
.pr-paticka__autor a {
  color: #8d8d8d;
  text-decoration: none;
}

.pr-paticka__copyright a:hover,
.pr-paticka__copyright a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

.pr-paticka__autor a:hover,
.pr-paticka__autor a:focus-visible {
  color: var(--pr-akcent);
  text-decoration: underline;
}

/* ==================================================================
   Přehled pamětníků — tři sloupce, další se přidávají tlačítkem
   ================================================================== */

/* Pevně tři sloupce, aby vycházely řádky po třech. Na užších
   displejích se počet sníží. */
.pr-mrizka--pametnici {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  column-gap: 2.5rem;
}

/* Řady oddělené tenkou linkou, jako na původním webu. Linka vzniká
   spodním okrajem karet — protože karty v řadě jsou stejně vysoké,
   navazují na sebe a tvoří souvislou čáru. */
.pr-mrizka--pametnici > .pr-karta {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--pr-linka);
}

@media (max-width: 62rem) {
  .pr-mrizka--pametnici {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .pr-mrizka--pametnici {
    grid-template-columns: 1fr;
  }
}

.pr-zahlavi__pocet {
  margin: 0;
  color: var(--pr-text-tlumeny);
  font-size: 0.9375rem;
}

.pr-dalsi {
  margin-top: 2.5rem;
  text-align: center;
}

.pr-dalsi__odkaz {
  min-width: 14rem;
}

.pr-dalsi__odkaz.je-nacita {
  opacity: 0.6;
  pointer-events: none;
}

.pr-dalsi__stav {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--pr-text-tlumeny);
  min-height: 1.2em;
}

/* ==================================================================
   Vyprávění — rozcestník
   ================================================================== */

.pr-vypraveni__uvod {
  margin-bottom: 2rem;
}

.pr-obdobi__stitek {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--pr-linka);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-tlumeny);
}

.pr-obdobi__pocet {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(224, 181, 134, 0.25);
  font-size: 0.8125rem;
  color: var(--pr-akcent);
}

.pr-dalsi-texty {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pr-linka);
}

.pr-dalsi-texty__nadpis {
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-tlumeny);
  margin: 0 0 1rem;
}

.pr-dalsi-texty__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pr-dalsi-texty__seznam a {
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.0625rem;
  text-decoration: none;
}

.pr-dalsi-texty__seznam a:hover,
.pr-dalsi-texty__seznam a:focus-visible {
  text-decoration: underline;
}

/* ==================================================================
   Období, ke kterému zatím nejsou svědectví
   ================================================================== */

.pr-pripravujeme {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  margin-block: 2rem 1rem;
  padding: 2rem 2rem 1.75rem;
  background: var(--pr-pozadi-svetle);
  border-top: 3px solid var(--pr-akcent);
}

.pr-pripravujeme__znak {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(224, 181, 134, 0.15);
  color: var(--pr-akcent);
}

.pr-pripravujeme__znak svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

.pr-pripravujeme__text {
  max-width: var(--pr-sirka-textu);
}

.pr-pripravujeme__nadpis {
  margin: 0 0 0.6rem;
  font-size: 1.375rem;
}

.pr-pripravujeme__text p {
  margin-bottom: 0.8em;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pr-pripravujeme__text p:last-child {
  margin-bottom: 0;
}

.pr-pripravujeme__odkazy {
  color: var(--pr-text-tlumeny);
}

/* ==================================================================
   Skupina na stránce období

   Vlevo přehrávač s tvářemi, vpravo vysvětlující text v rámečku.
   Vedle sebe proto, že pod sebou by stránka byla neúnosně dlouhá.
   ================================================================== */

.pr-skupina {
  margin-block: 2.5rem;
  /* Po kliknutí na tvář se sem stránka posune — odstup drží nadpis
     pod přilepeným menu, ne za ním. */
  scroll-margin-top: 5.5rem;
}

.pr-skupina__nadpis {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem);
}

.pr-skupina__obsah {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.pr-skupina__obsah--bez-textu {
  grid-template-columns: minmax(0, 1fr);
}

.pr-skupina__obsah > * {
  min-width: 0;
}

/* Text vedle ukázek — kratší řádek než v článku, proto menší písmo. */
.pr-skupina__text {
  padding: 1.4rem 1.5rem;
  background: var(--pr-pozadi-svetle);
  border-top: 3px solid var(--pr-akcent);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pr-skupina__text p {
  margin-bottom: 0.9em;
}

.pr-skupina__text p:last-child {
  margin-bottom: 0;
}

/* ==================================================================
   Ukázky z výpovědí na stránce období

   Jeden přehrávač a pod ním tváře pamětníků. Nahrávky nejsou stříhané,
   proto se u každé tváře uvádí čas, od kterého ukázka začíná.
   ================================================================== */

/* --- přehrávač --- */

.pr-ukazky {
  margin-block: 0 2rem;
}

/* Ve skupině stojí přehrávač vedle textového rámečku — horní hrany
   musí lícovat, proto se odsazení shora ruší i tam. */
.pr-skupina__ukazky .pr-ukazky {
  margin-top: 0;
}

/* Přehrávač má každá skupina vlastní a stojí hned nad svými tvářemi,
   aby se po kliknutí nemuselo jezdit stránkou nahoru. */
.pr-ukazky__prehravac {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--pr-pozadi-tmave);
  overflow: hidden;
}

.pr-ukazky__nahled {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.pr-ukazky__ramec {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pr-ukazky__spustit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1.5rem;
  background: none;
  border: 0;
  color: var(--pr-text);
  font-family: var(--pr-pismo-text);
  cursor: pointer;
}

.pr-ukazky__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
  font-size: 1.5rem;
  transition: transform 0.15s ease;
}

.pr-ukazky__spustit:hover .pr-ukazky__ikona,
.pr-ukazky__spustit:focus-visible .pr-ukazky__ikona {
  transform: scale(1.08);
}

.pr-ukazky__jmeno {
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.375rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.pr-ukazky__cas {
  font-size: 0.875rem;
  color: var(--pr-akcent);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.pr-ukazky__poznamka {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--pr-text-tlumeny);
}

/* --- tváře --- */

.pr-ukazky__skupina {
  margin-bottom: 2.25rem;
}

.pr-ukazky__nadpis-skupiny {
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-tlumeny);
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--pr-linka);
}

/* Tváře se roztáhnou na plnou šířku obsahu — čtecí sloupec je pro ně
   úzký a vešly by se jen čtyři na řádek. */
.pr-ukazky__tvare {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 1.75rem 1rem;
  margin-block: 1.25rem 2rem;
}



.pr-ukazka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--pr-text-tlumeny);
  text-align: center;
  cursor: pointer;
}

/* Zapsáno i s .pr-text-clanku: pravidlo pro obrázky v obsahu stránky
   má vyšší specificitu a přepsalo by výšku, takže by z kroužku byla
   elipsa. Stejná past jako na stránce Tým. */
.pr-ukazka__foto,
.pr-text-clanku .pr-ukazka__foto {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  border: 3px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.pr-ukazka__foto--prazdna {
  display: block;
  background: var(--pr-pozadi-svetle);
}

.pr-ukazka:hover .pr-ukazka__foto,
.pr-ukazka:focus-visible .pr-ukazka__foto {
  transform: scale(1.06);
  border-color: var(--pr-akcent);
}

.pr-ukazka.je-aktivni .pr-ukazka__foto {
  border-color: var(--pr-akcent);
}

.pr-ukazka__jmeno {
  font-family: var(--pr-pismo-nadpis);
  font-size: 0.875rem;
  line-height: 1.25;
}

.pr-ukazka__cas {
  font-size: 0.75rem;
  opacity: 0.75;
}

.pr-ukazka:hover .pr-ukazka__jmeno,
.pr-ukazka:focus-visible .pr-ukazka__jmeno,
.pr-ukazka.je-aktivni .pr-ukazka__jmeno {
  color: var(--pr-akcent);
}

.pr-ukazky__cely-zaznam {
  margin: 0;
  font-size: 0.9375rem;
}

/* ==================================================================
   Vyhledávání v pruhu menu
   ================================================================== */

.pr-hledani-obal {
  position: relative;
  flex: none;
  margin-left: 1rem;
}

.pr-hledani-prepinac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--pr-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.pr-hledani-prepinac svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.pr-hledani-prepinac:hover,
.pr-hledani-prepinac:focus-visible,
.pr-hledani-obal.je-otevrene .pr-hledani-prepinac {
  color: var(--pr-akcent);
}

/* Panel visí pod pruhem menu, aby nerozhazoval jeho výšku. */
.pr-hledani-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  width: min(22rem, 80vw);
  padding: 0.75rem;
  background: var(--pr-pozadi-tmave);
  border: 1px solid var(--pr-linka);
}

.pr-hledani {
  display: flex;
  gap: 0.5rem;
}

.pr-hledani__pole {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  background: var(--pr-pozadi);
  border: 1px solid var(--pr-linka);
  color: var(--pr-text);
  font-family: var(--pr-pismo-text);
  font-size: 0.9375rem;
}

.pr-hledani__pole::placeholder {
  color: var(--pr-text-tlumeny);
}

.pr-hledani__pole:focus {
  outline: 2px solid var(--pr-akcent);
  outline-offset: -1px;
}

.pr-hledani__odeslat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  background: var(--pr-akcent);
  border: 0;
  color: var(--pr-pozadi-tmave);
  cursor: pointer;
}

.pr-hledani__odeslat svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.pr-hledani__odeslat:hover,
.pr-hledani__odeslat:focus-visible {
  background: var(--pr-text);
}

/* ==================================================================
   Výsledky vyhledávání
   ================================================================== */

.pr-hledani-zahlavi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pr-linka);
}

.pr-hledani-zahlavi .pr-hledani {
  width: min(26rem, 100%);
}

.pr-hledani-zahlavi__pocet {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--pr-text-tlumeny);
}

.pr-hledani-nic {
  max-width: var(--pr-sirka-textu);
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  color: var(--pr-text-tlumeny);
}

.pr-vysledky {
  margin-bottom: 2.5rem;
}

.pr-vysledky__nadpis {
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-tlumeny);
  margin: 0 0 1.25rem;
}

.pr-vysledky__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-vysledek {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--pr-linka);
}

.pr-vysledek--stranka {
  grid-template-columns: minmax(0, 1fr);
}

.pr-vysledek:last-child {
  margin-bottom: 0;
}

.pr-vysledek__foto img,
.pr-vysledek__bez-fotky {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  object-position: center 25%;
}

.pr-vysledek__bez-fotky {
  background: var(--pr-pozadi-svetle);
}

.pr-vysledek__jmeno {
  margin: 0 0 0.3rem;
  font-size: 1.25rem;
}

.pr-vysledek__jmeno a {
  text-decoration: none;
}

.pr-vysledek__jmeno a:hover,
.pr-vysledek__jmeno a:focus-visible {
  text-decoration: underline;
}

.pr-vysledek__stitky {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--pr-text-tlumeny);
}

/* Úryvek z výpovědi — kvůli němu se hledá, takže dostane celou šířku
   čtecího sloupce a nezkracuje se na pár slov. */
.pr-vysledek__uryvek {
  margin: 0;
  max-width: var(--pr-sirka-textu);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pr-text);
}

.pr-shoda {
  background: rgba(224, 181, 134, 0.25);
  color: var(--pr-akcent);
  padding: 0 0.15em;
}

/* ==================================================================
   Přepínač způsobu řazení pamětníků
   ================================================================== */

.pr-razeni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pr-linka);
}

.pr-razeni__odkaz {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--pr-linka);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--pr-text);
}

.pr-razeni__odkaz:hover,
.pr-razeni__odkaz:focus-visible {
  border-color: var(--pr-akcent);
  color: var(--pr-akcent);
}

.pr-razeni__odkaz.je-aktivni {
  background: var(--pr-akcent);
  border-color: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
}

/* ==================================================================
   Mapa krajů

   SVG je obtažené z mapy, kterou měl na téhle stránce původní web.
   Kraje bez pamětníků jsou ztlumené a neproklikávací.
   ================================================================== */

.pr-mapa-obal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin-block: 1rem 2rem;
}

.pr-mapa {
  margin: 0;
}

.pr-mapa__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Kraj, odkud někdo pochází, drží tlumený odstín akcentu — na první
   pohled je vidět, kde sbírka má a kde nemá. */
.pr-mapa__kraj {
  fill: rgba(224, 181, 134, 0.32);
  stroke: var(--pr-pozadi);
  stroke-width: 1.4;
  transition: fill 0.15s ease;
}

.pr-mapa__odkaz:hover .pr-mapa__kraj,
.pr-mapa__odkaz:focus-visible .pr-mapa__kraj,
.pr-mapa__kraj.je-zvyraznen {
  fill: var(--pr-akcent);
}

.pr-mapa__odkaz {
  cursor: pointer;
}

.pr-mapa__odkaz:focus-visible {
  outline: none;
}

.pr-mapa__kraj--prazdny {
  fill: #3d3d3d;
}

/* Právě zobrazený kraj */
.pr-mapa__kraj[data-aktivni] {
  fill: var(--pr-akcent);
}

a.pr-kraj.je-aktivni {
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
}

a.pr-kraj.je-aktivni .pr-kraj__pocet {
  color: var(--pr-pozadi-tmave);
}

/* Pod výpisem z kraje stojí mapa jako rozcestník, proto s odstupem.
   Vlastní linku nemá — výpis už jednou ukončený je spodním okrajem
   poslední řady karet a dvě čáry pod sebou vypadaly zvláštně. */
.pr-mapa-obal--pod-vypisem {
  margin-top: 3rem;
}

.pr-mapa__popisek {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  color: var(--pr-text-tlumeny);
}

.pr-zeme {
  margin-bottom: 1.75rem;
}

.pr-zeme__nadpis {
  font-family: var(--pr-pismo-text);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pr-text-tlumeny);
  margin: 0 0 0.8rem;
}

.pr-kraje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pr-kraj {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--pr-pozadi-svetle);
  color: var(--pr-text);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.pr-kraj:hover,
a.pr-kraj:focus-visible {
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
}

.pr-kraj__pocet {
  font-size: 0.8125rem;
  color: var(--pr-akcent);
}

a.pr-kraj:hover .pr-kraj__pocet,
a.pr-kraj:focus-visible .pr-kraj__pocet {
  color: var(--pr-pozadi-tmave);
}

.pr-kraj--prazdny {
  opacity: 0.35;
}

.pr-kraje-zbytek {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--pr-text-tlumeny);
}

/* ==================================================================
   Časová osa podle data narození
   ================================================================== */

.pr-osa {
  position: relative;
  padding-left: 1.5rem;
  margin-block: 1rem 1.5rem;
}

.pr-osa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--pr-akcent), rgba(224, 181, 134, 0.15));
}

.pr-dekada {
  position: relative;
  margin-bottom: 2.5rem;
}

.pr-dekada::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 5px);
  top: 0.55rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pr-akcent);
}

.pr-dekada__hlava {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
  font-size: 1rem;
}

.pr-dekada__roky {
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.625rem;
  color: var(--pr-akcent);
  text-decoration: none;
}

.pr-dekada__roky:hover,
.pr-dekada__roky:focus-visible {
  color: var(--pr-text);
  text-decoration: underline;
}

.pr-dekada__pocet {
  font-family: var(--pr-pismo-text);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--pr-text-tlumeny);
}

.pr-tvare {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.pr-tvar {
  display: block;
  width: 4.5rem;
  text-decoration: none;
}

.pr-tvar img,
.pr-tvar__bez-fotky {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 0.15s ease;
}

.pr-tvar__bez-fotky {
  background: var(--pr-pozadi-svetle);
}

.pr-tvar:hover img,
.pr-tvar:focus-visible img {
  transform: scale(1.06);
}

.pr-tvar__jmeno {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--pr-text-tlumeny);
}

.pr-tvar:hover .pr-tvar__jmeno,
.pr-tvar:focus-visible .pr-tvar__jmeno {
  color: var(--pr-akcent);
}

/* ==================================================================
   Stránkování
   ================================================================== */

.wp-block-query-pagination,
.navigation.pagination {
  margin-top: 2.5rem;
}

.navigation.pagination .page-numbers {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  margin-right: 0.3rem;
  text-decoration: none;
  border: 1px solid var(--pr-linka);
}

.navigation.pagination .page-numbers.current {
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
  border-color: var(--pr-akcent);
}

/* ==================================================================
   Přístupnost
   ================================================================== */

.pr-preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pr-akcent);
  color: var(--pr-pozadi-tmave);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}

.pr-preskocit:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
   Text přes úvodní fotografii

   Nadpis a věta leží přes slider a při střídání fotografií se nemění.
   Ztmavení dole je i praktické: fotografie jsou různě světlé a bez něj
   by na některých text zanikl.
   ================================================================== */

.pr-uvodni-obraz {
  position: relative;
}

.pr-uvodni-obraz__stin {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.pr-hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(3rem, 7vw, 6rem);
  z-index: 2;
  /* Proklik na snímek musí zůstat funkční i pod textem. */
  pointer-events: none;
}

.pr-hero a {
  pointer-events: auto;
}

/* Logo stojí nad nadpisem, na stejném levém okraji. */
.pr-hero__logo {
  margin-bottom: 1rem;
}

.pr-hero__logo img {
  max-height: 6.5rem;
  max-width: 15rem;
  width: auto;
  height: auto;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55));
}

.pr-hero__nadpis {
  color: var(--pr-text);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  max-width: 20em;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.pr-hero__veta {
  color: #e8e8e8;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  max-width: 34em;
  margin: 0 0 1.6rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.pr-hero__akce {
  margin: 0;
}

.pr-tlacitko--velke {
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
}

/* ==================================================================
   Blok o projektu
   ================================================================== */

.pr-oprojektu {
  border-bottom: 1px solid var(--pr-linka);
}

.pr-oprojektu__obal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 3rem;
  align-items: start;
}

.pr-oprojektu__nadpis {
  margin: 0;
}

.pr-oprojektu__text {
  font-size: 1.0625rem;
}

.pr-oprojektu__vice {
  margin-bottom: 0;
}

/* ==================================================================
   Záhlaví sekce — nadpis vlevo, odkaz na přehled vpravo
   ================================================================== */

.pr-hlava-sekce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.pr-hlava-sekce__nadpis {
  margin: 0;
}

.pr-hlava-sekce__vice {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ==================================================================
   Rozcestník do vyprávění
   ================================================================== */

.pr-obdobi {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.pr-obdobi > * {
  min-width: 0;
}

.pr-obdobi__karta {
  display: block;
  background: var(--pr-pozadi-svetle);
  border-top: 3px solid var(--pr-akcent);
  text-decoration: none;
  transition: background-color 0.18s ease;
}

/* Bez pásu s tvářemi drží text odsazení sám. */
.pr-obdobi__karta > :not(.pr-obdobi__pas) {
  margin-inline: 1.5rem;
}

.pr-obdobi__karta > :not(.pr-obdobi__pas):first-child {
  margin-top: 1.6rem;
}

.pr-obdobi__karta--foto > :not(.pr-obdobi__pas):first-child {
  margin-top: 11.5rem;
}

.pr-obdobi__karta > :last-child {
  margin-bottom: 1.5rem;
}

/*
 * Dobové fotografie k obdobím nemáme, proto je ilustrují tváře lidí,
 * kteří o nich vyprávějí. Přechod dolů je nutný — pod pásem začíná
 * text a bez ztmavení by na fotkách zanikal.
 */
.pr-obdobi__pas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 7rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.pr-obdobi__pas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.pr-obdobi__pas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(69, 69, 69, 0.15) 0%,
    rgba(69, 69, 69, 0.55) 60%,
    var(--pr-pozadi-svetle) 100%
  );
}

.pr-obdobi__karta:hover .pr-obdobi__pas::after,
.pr-obdobi__karta:focus-visible .pr-obdobi__pas::after {
  background: linear-gradient(
    to bottom,
    rgba(80, 80, 80, 0.05) 0%,
    rgba(80, 80, 80, 0.45) 60%,
    #505050 100%
  );
}

/* Dobová fotografie k období.

   Sahá až za letopočet a teprve pod ním se ztrácí do plochy karty —
   ostrá hrana uprostřed dlaždice by ji rozdělila na dvě půlky. Proto
   je vyjmutá z toku a text si na ni dělá místo odsazením. */
.pr-obdobi__pas--foto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15.5rem;
  margin: 0;
  display: block;
}

.pr-obdobi__pas--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Přechod začíná až v dolní polovině, aby fotografie zůstala čitelná,
   a končí barvou karty, takže není poznat, kde snímek přestává. */
.pr-obdobi__pas--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(45, 45, 45, 0) 0%,
    rgba(45, 45, 45, 0.3) 40%,
    rgba(45, 45, 45, 0.82) 62%,
    rgba(58, 58, 58, 0.96) 78%,
    var(--pr-pozadi-svetle) 100%
  );
}

.pr-obdobi__karta:hover .pr-obdobi__pas--foto::after,
.pr-obdobi__karta:focus-visible .pr-obdobi__pas--foto::after {
  background: linear-gradient(
    to bottom,
    rgba(52, 52, 52, 0) 0%,
    rgba(52, 52, 52, 0.25) 40%,
    rgba(52, 52, 52, 0.78) 62%,
    rgba(68, 68, 68, 0.94) 78%,
    #505050 100%
  );
}

/* Karta s fotografií: letopočet leží na jejím spodním okraji. */
.pr-obdobi__karta--foto {
  position: relative;
}

.pr-obdobi__karta--foto > .pr-obdobi__roky {
  position: relative;
  z-index: 1;
  margin-top: 11.5rem;
}

.pr-obdobi__karta--foto > :not(.pr-obdobi__pas) {
  position: relative;
  z-index: 1;
}

/* Období, ke kterému zatím nejsou svědectví */
.pr-obdobi__pas--prazdny {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 181, 134, 0.08);
  color: rgba(224, 181, 134, 0.45);
}

.pr-obdobi__pas--prazdny svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: currentColor;
}

.pr-obdobi__pas--prazdny::after {
  content: none;
}

.pr-obdobi__karta:hover,
.pr-obdobi__karta:focus-visible {
  background: #505050;
}

.pr-obdobi__roky {
  display: block;
  font-family: var(--pr-pismo-nadpis);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--pr-akcent);
}

.pr-obdobi__nazev {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--pr-text);
}

.pr-obdobi__popis {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pr-text-tlumeny);
}

/* ==================================================================
   Úzké displeje
   Tento blok musí zůstat na konci souboru — přepisuje pravidla výše
   a při stejné specificitě rozhoduje pořadí.
   ================================================================== */

/* ==========================================================================
   Lišta se souhlasem s měřením
   Leží dole přes obsah, ale nezakrývá ho celý — návštěvník může číst
   dál a rozhodnout se, až bude chtít. Bez měřicího kódu se nevypisuje.
   ========================================================================== */

.pr-souhlas {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  background: rgba(20, 20, 20, 0.97);
  border-top: 1px solid var(--pr-linka);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
}

@supports (backdrop-filter: blur(8px)) {
  .pr-souhlas {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(8px);
  }
}

.pr-souhlas[hidden] {
  display: none;
}

.pr-souhlas__obal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
}

.pr-souhlas__text {
  flex: 1 1 26rem;
}

.pr-souhlas__text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.pr-souhlas__dovetek {
  margin-top: 0.5rem !important;
  color: var(--pr-text-tlumeny);
  font-size: 0.875rem !important;
}

.pr-souhlas__dovetek a {
  color: var(--pr-akcent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pr-souhlas__tlacitka {
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
}

.pr-souhlas .pr-tlacitko {
  white-space: nowrap;
}

.pr-souhlas__odmitnout {
  background: transparent;
  border: 1px solid var(--pr-linka);
  color: var(--pr-text);
}

.pr-souhlas__odmitnout:hover,
.pr-souhlas__odmitnout:focus-visible {
  border-color: var(--pr-text-tlumeny);
  background: rgba(255, 255, 255, 0.06);
  color: var(--pr-text);
}

.pr-souhlas__prijmout {
  background: var(--pr-akcent);
  border: 1px solid var(--pr-akcent);
  color: #1b1b1b;
}

.pr-souhlas__prijmout:hover,
.pr-souhlas__prijmout:focus-visible {
  background: var(--pr-akcent-tmavy);
  border-color: var(--pr-akcent-tmavy);
  color: #1b1b1b;
}

/* Odkaz v patičce vypadá jako odkaz, i když je to tlačítko — jinak by
   se v řadě ostatních odkazů choval jako cizí prvek. */
.pr-souhlas__zmenit {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.pr-souhlas__zmenit:hover,
.pr-souhlas__zmenit:focus-visible {
  color: var(--pr-akcent);
}

/* ==================================================================
   Nenalezená adresa

   Web přešel z Joomly, takže sem lidé chodí ze starých odkazů. Místo
   strohého oznámení dostanou hledání, ukázku pamětníků a rozcestník.
   ================================================================== */

.pr-nenalezeno {
  padding-block: 3rem 4rem;
}

.pr-nenalezeno__uvod {
  max-width: var(--pr-sirka-textu);
  margin-bottom: 3.5rem;
}

.pr-nenalezeno__vysvetleni {
  margin: 0 0 2rem;
  font-size: 1.125rem;
  line-height: 1.65;
}

.pr-nenalezeno__vyzva {
  margin: 0 0 0.6rem;
  color: var(--pr-text-tlumeny);
}

/* Vyhledávací pole je tu hlavní cesta dál, tak ať je vidět. */
.pr-nenalezeno__hledani .pr-hledani {
  max-width: 28rem;
}

.pr-nenalezeno__pametnici {
  margin-bottom: 3.5rem;
}

.pr-nenalezeno__nadpis {
  margin: 0 0 1rem;
  font-size: 1.375rem;
}

.pr-nenalezeno__seznam {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-nenalezeno__seznam a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--pr-akcent);
  text-decoration: none;
}

.pr-nenalezeno__seznam a:hover,
.pr-nenalezeno__seznam a:focus-visible {
  color: var(--pr-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 60rem) {

  .pr-menu-pruh {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.9);
  }

  .pr-hlavicka--pruhledna .pr-menu-pruh {
    background: rgba(0, 0, 0, 0.9);
  }

  .pr-prepinac {
    display: flex;
    align-self: flex-start;
  }

  /* Menu je schované, dokud ho návštěvník nerozbalí */
  .pr-navigace {
    display: none;
    padding-bottom: 0.75rem;
  }

  .pr-navigace.je-otevrene {
    display: block;
  }

  .pr-menu {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
  }

  .pr-menu > li {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .pr-menu a {
    padding: 0.85rem 0.25rem;
  }

  /* Podmenu se rozbalí pod položkou, ne přes obsah */
  .pr-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    background: transparent;
    min-width: 0;
    padding-left: 1.1rem;
  }

  .pr-menu .sub-menu a {
    padding-block: 0.65rem;
    white-space: normal;
  }

  /* Logo menší, ať nepřekrývá obsah */
  .pr-hlavicka--pruhledna .pr-logo img,
  .pr-logo img {
    max-height: 5.5rem;
  }

  .pr-hlavicka--pruhledna .pr-logo-pruh {
    padding-block: 0.75rem 1rem;
  }

  /* Popisek slideru bez širokého odsazení */
  .pr-slider__popisek {
    padding: 0.6rem 0.9rem;
    font-size: 1rem;
  }

  /* Text přes fotku: menší odsazení */
  .pr-hero {
    bottom: 1.75rem;
  }

  .pr-hero__logo {
    margin-bottom: 0.6rem;
  }

  .pr-hero__logo img {
    max-height: 4rem;
    max-width: 10rem;
  }

  .pr-hero__veta {
    margin-bottom: 1.1rem;
  }

  /* Záhlaví podstránky — méně tváří, ať z nich nejsou proužky */
  .pr-zahlavi-stranky__pas {
    grid-template-columns: repeat(3, 1fr);
  }

  .pr-zahlavi-stranky__obal {
    padding-block: 8.5rem 1.5rem;
  }

  /* Text hero je na telefonu pod fotografií, takže se jméno
     pamětníka s ničím netluče a může zůstat vidět. */

  .pr-slider__ovladani {
    bottom: 1rem;
  }

  /* Na úzkém displeji není pro portrét vedle textu místo */
  .pr-claim__foto {
    display: none;
  }

  .pr-claim__text,
  .pr-claim__odkazy {
    max-width: none;
  }

  .pr-mapa-obal,
  .pr-kontakt--s-mapou {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pr-pripravujeme {
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem 1.25rem;
  }

  .pr-skupina__obsah {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Lupa je vedle tlačítka menu, panel přes celou šířku. */
  .pr-hledani-obal {
    position: static;
    margin-left: auto;
  }

  .pr-hledani-panel {
    left: 0;
    right: 0;
    width: auto;
  }

  .pr-vysledek {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .pr-vysledek__foto img,
  .pr-vysledek__bez-fotky {
    width: 5rem;
    height: 5rem;
  }

  .pr-pametnik__obsah--se-sloupcem {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Přilepení nedává smysl, když je sloupec pod textem. */
  .pr-pametnik__sloupec-obsah {
    position: static;
  }

  .pr-galerie__mrizka {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 1.75rem;
  }

  .pr-ukazky__tvare {
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    gap: 1.1rem 0.75rem;
  }

  .pr-ukazka__foto,
  .pr-text-clanku .pr-ukazka__foto {
    width: 5rem;
    height: 5rem;
    border-width: 2px;
  }

  .pr-lide {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pr-osoba__foto,
  .pr-text-clanku .pr-osoba__foto {
    width: 6rem;
    height: 6rem;
  }

  .pr-lide--vedeni .pr-osoba__foto,
  .pr-text-clanku .pr-lide--vedeni .pr-osoba__foto {
    width: 7.5rem;
    height: 7.5rem;
  }

  .pr-oprojektu__obal,
  .pr-paticka__sloupce {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .pr-paticka__sloupce {
    gap: 2.25rem;
  }

  .pr-paticka__autor {
    margin-left: 0;
  }

  .pr-souhlas__obal {
    gap: 1rem;
  }

  .pr-souhlas__tlacitka {
    width: 100%;
  }

  .pr-souhlas__tlacitka .pr-tlacitko {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ==================================================================
   Telefon — úvodní obraz na výšku

   Fotografie z videovýpovědí jsou panoramatické (2:1). Na úzkém
   displeji z nich zbyl pruh vysoký 180 bodů a text přes něj se
   nevešel — nadpis skončil nad horním okrajem obrazovky, mimo
   dohled. Proto se na telefonu fotografie ořízne na výšku a text
   se přesune pod ni.
   ================================================================== */

@media (max-width: 46rem) {

  .pr-uvodni-obraz {
    display: flex;
    flex-direction: column;
    background: var(--pr-pozadi-tmave);
  }

  /* Ořez je vodorovný: fotografie je širší než rám, takže se z ní
     ubere po stranách a tvář uprostřed zůstane celá. */
  .pr-slider__obrazek,
  .pr-uvod__obrazek {
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: 62vh;
    object-fit: cover;
  }

  /* Text stojí pod fotografií, ne přes ni. */
  .pr-hero {
    position: static;
    bottom: auto;
    padding-block: 1.5rem 2.25rem;
    background: var(--pr-pozadi-tmave);
  }

  /* Ztmavení sloužilo textu přes fotografii — ten už tam není. */
  .pr-uvodni-obraz__stin {
    display: none;
  }

  .pr-hero__logo {
    display: none;
  }

  .pr-hero__nadpis {
    font-size: 1.75rem;
    line-height: 1.25;
  }

  .pr-hero__veta {
    margin-bottom: 1.25rem;
    font-size: 1rem;
  }

  .pr-hero__akce .pr-tlacitko {
    display: block;
    text-align: center;
  }

  /*
   * Jméno člověka na snímku. Na širokém displeji stojí nad tlačítkem,
   * tady je text až pod fotografií — jméno tedy patří na její spodní
   * okraj, kde nic nepřekrývá.
   */
  .pr-slider__popisek {
    right: auto;
    bottom: 1.25rem;
    left: var(--pr-mezera);
    max-width: calc(100% - 6rem);
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
    text-align: left;
    border-right: 0;
    border-left: 3px solid var(--pr-akcent);
  }

  /* Tečky zůstávají na fotografii, jen ustoupí jménu. */
  .pr-slider__ovladani {
    bottom: 0.6rem;
  }


  /*
   * Logo v hlavičce bylo na telefonu vysoké 88 bodů a nadpis
   * podstránky pod ním začínal dřív, než logo skončilo — písmena se
   * překrývala. Menší logo a větší odsazení nadpisu to rozvedou.
   */
  .pr-hlavicka--pruhledna .pr-logo img,
  .pr-logo img {
    max-height: 3.25rem;
  }

  .pr-zahlavi-stranky__nadpis {
    font-size: 1.75rem;
  }


  /*
   * Pás tváří: sedm dlaždic vedle sebe by na telefonu byly proužky,
   * mřížka o dvou řádcích zas působila neuspořádaně. Zůstávají tři
   * svislé dlaždice v jediném řádku, každá přes celou výšku záhlaví.
   */
  .pr-zahlavi-stranky__pas {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }

  .pr-zahlavi-stranky__pas img:nth-child(n + 4) {
    display: none;
  }

  /* Drobečková navigace končila v logu — odsazení počítá s jeho
     výškou a nechává mezi nimi vzduch. */
  .pr-zahlavi-stranky__obal {
    padding-block: 11.5rem 1.75rem;
  }

  .pr-drobky {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }


  /*
   * Výsledky hledání. Vedle fotografie zbývalo na text 239 bodů,
   * takže úryvek — kvůli kterému se hledá — padal po dvou slovech na
   * řádek. U nalezené stránky bylo hůř: pravidlo pro pamětníky
   * přebilo jednosloupcové rozvržení a text se lisoval do sloupce
   * širokého 80 bodů. Na telefonu proto fotografie stojí nad textem.
   */
  .pr-vysledek,
  .pr-vysledek--stranka {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .pr-vysledek__foto img,
  .pr-vysledek__bez-fotky {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .pr-vysledek__uryvek {
    font-size: 1rem;
  }
}