/**
 * Pražský pantheon — styly webu.
 *
 * Výraz: současný, výrazný, čistě černobílý. Jediné písmo (Source Sans 3, humanistický grotesk),
 * dva řezy — 400 a 700. Žádná barva, žádné stíny, žádné zaoblení: rozdíly
 * dělá velikost, tloušťka a vlasová linka. Text životopisů je záměrně velký,
 * protože je to čtecí web, ne rozcestník.
 */

:root {
	--pp-measure: var(--wp--custom--measure, 680px);
	--pp-article: var(--wp--custom--article, 1080px);
	--pp-header-height: 84px;
	--pp-header-stuck: 52px;
	--pp-rule: 1px solid var(--wp--preset--color--rule);
	--pp-ink: var(--wp--preset--color--ink);
	--pp-soft: var(--wp--preset--color--ink-soft);

	/* Web je černobílý. Jediná barva je světlá cihlová (token `surface`)
	   a používá se výhradně jako plocha: pozadí patičky a podbarvení řádku
	   při najetí. Tmavý odstín se neosvědčil — soupeřil s černou o pozornost. */

	/* Dvě velikosti pro všechno velké: jeden hlas pro hlavní sdělení,
	   jeden pro nadpisy sekcí. Víc jich web nepotřebuje. */
	--pp-display: var(--wp--custom--size-display, clamp( 1.8rem, 1.25rem + 2.35vw, 3.4rem ));
	--pp-section: var(--wp--custom--size-section, clamp( 1.48rem, 1.15rem + 1.4vw, 2.22rem ));

	/* Velikost navigace i názvu značky — jedna hodnota, ať spolu lícují. */
	--pp-nav: 1.0625rem;
}

/* Source Sans 3 má nižší střední výšku než geometrické a neogroteskní řezy,
   takže při stejné velikosti působí drobněji. Základ proto zvedáme zhruba
   o pět procent — jinak by se dlouhé životopisy četly hůř. Hodnota kopíruje
   křivku z base theme, jen posunutou nahoru. */
body {
	font-size: clamp( 0.99rem, 0.875rem + 0.475vw, 1.25rem );
}


/* ------------------------------------------------------ mikrotypografie */

/* Štítky nad sekcemi: verzálky, malé, prostrkané. Dolní mez je 12 px —
   verzálky s prostrkáním se čtou opticky menší, než jaká je jejich velikost,
   a pod touhle hranicí přestávají být pohodlné. */
.stitek,
.osobnost-eyebrow {
	margin: 0;
	color: var(--pp-soft);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- odkazy */

/*
 * Odkaz v textu je černý a podtržený. Cihlová se sem nehodí: v odstavci
 * s deseti odkazy by z ní byla vyrážka a text by přestal být klidný.
 * Akcent se ukáže až na najetí.
 */
.entry-content a,
.osobnost-perex a,
.osobnost-infobox a,
.custom-popup a,
.wp-block-post-content a,
.page-body a {
	color: var(--pp-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.12s ease-out;
}

/* Všechny linky na webu jsou vlasové, takže se odkaz na najetí neztlušťuje —
   obarví se. */
.entry-content a:hover,
.osobnost-perex a:hover,
.osobnost-infobox a:hover,
.custom-popup a:hover,
.wp-block-post-content a:hover,
.page-body a:hover {
	color: var(--pp-soft);
}

/* Odkaz mimo web dostane šipku, ať je poznat, že vede pryč. */
.entry-content a[target="_blank"]::after,
.osobnost-infobox a[target="_blank"]::after,
.page-body a[target="_blank"]::after {
	content: "↗";
	display: inline-block;
	margin-left: 0.15em;
	font-size: 0.85em;
	text-decoration: none;
	vertical-align: 0.08em;
}

/* Odkazy, které fungují jako plocha (seznamy, karty, navigace), podtržené nejsou. */
.nav__list a,
.osobnosti-seznam a,
.osobnost-dalsi a,
.osobnost-footer .profese-list a,
.site-header a,
.menu-overlay a {
	text-decoration: none;
}

/* ---------------------------------------------------------------- hlava */

/* Bez dělicí linky — hlavičku oddělí bílé místo pod ní, ne pravítko. */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--wp--preset--color--bg);
	border-bottom: 0;
}

/*
 * Obsah hlavičky, patičky i stránky sdílí jeden kontejner (--container).
 * Roztahuje se do 1920 px a pak se vycentruje; do krajů okna jde jen pozadí,
 * aby na širokém monitoru logo a menu neodletěly každý na jinou stranu.
 */
.site-header__inner {
	max-width: var(--container, 1920px);
	margin-inline: auto;
	padding-inline: var(--gutter, 28px);
	gap: 40px;
}

/*
 * Base umí hlavičku po odscrollování zmenšit (třída `is-stuck` a proměnné
 * --logo-h / --logo-h-stuck), ale jeho pravidlo míří na `.brand img`, což je
 * textová varianta loga. Nahrané logo se vykresluje jako `.custom-logo`,
 * takže ho na tentýž mechanismus musíme napojit sami.
 */
.site-header {
	padding-block: 18px;
}

/* Ani po odscrollování žádná linka — hlavičku odděluje bílá plocha. */
.site-header.is-stuck {
	padding-block: 10px;
}

/* Značka = obrázkové „P" plus název webu. Název má velikost položek menu,
   jen v tučném řezu, aby se od nich odlišil bez zvětšování. */
.site-header .brand {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	color: var(--pp-ink);
	text-decoration: none;
}

.site-header .brand img,
.site-header .custom-logo-link img {
	display: block;
	height: var(--logo-h);
	width: auto;
	max-height: none;
	transition: height 220ms ease;
}

.site-header.is-stuck .brand img,
.site-header.is-stuck .custom-logo-link img {
	height: var(--logo-h-stuck);
}

/* Název je o kousek větší než položky menu — je to značka, ne další odkaz. */
.site-header .brand__name {
	color: var(--pp-ink);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.008em;
	line-height: 1.1;
	white-space: nowrap;
}

:root {
	--logo-h: 34px;
	--logo-h-stuck: 24px;
}

@media (min-width: 900px) {
	:root {
		--pp-header-height: 100px;
		--logo-h: 48px;
		--logo-h-stuck: 28px;
	}
}

.nav__list {
	gap: 34px;
}

.site-header .nav__list a {
	position: relative;
	color: var(--pp-ink);
	font-size: var(--pp-nav);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Podtržení vyjede zdola, ať je stav zřejmý i bez barvy. */
.nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--pp-ink);
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.16s ease-out;
}

.nav__list a:hover::after,
.nav__list .current-menu-item > a::after {
	transform: scaleX( 1 );
}

.nav__search {
	color: var(--pp-ink);
}

/* Vyhledávací překryv z base má pod polem dvoupixelovou linku — na tomhle
   webu jsou všechny linky vlasové. */
.search-overlay__form {
	border-bottom-width: 1px;
	border-bottom-color: var(--pp-ink);
}

/* --------------------------------------------------------- detail osobnosti */

.osobnost-single .osobnost {
	max-width: var(--pp-article);
	margin-inline: auto;
}

@media (min-width: 1000px) {
	.osobnost-single .osobnost {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 268px;
		column-gap: 72px;
		align-items: start;
	}

	/* Textový sloupec vlevo, infobox vpravo. Selektory musí mít stejnou
	   specifitu jako pravidlo pro všechny potomky, jinak by je přebilo. */
	.osobnost-single .osobnost > * {
		grid-column: 1;
		min-width: 0;
	}

	.osobnost-single .osobnost > .osobnost-header {
		grid-column: 1 / -1;
	}

	/* Infobox se přilepí, ale nikdy nepřeroste okno: co se nevejde, doroluje
	   se uvnitř. Bez toho vytéká na malých monitorech pod článek. */
	.osobnost-single .osobnost > .osobnost-infobox {
		grid-column: 2;
		grid-row: 2 / span 99;
		position: sticky;
		top: calc( var(--pp-header-stuck) + 24px );
		max-height: calc( 100vh - var(--pp-header-stuck) - 48px );
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

.osobnost-header {
	margin: 0 0 3rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--pp-ink);
}

/*
 * Pravidlo pro celý web: co je větší než zhruba 2 rem, jde do středního řezu.
 * Plný bold v displejové velikosti působí jako křik; ve střední tloušťce
 * zůstane důraz i čitelnost. Nadpisy h1 to mají v theme.json, tady jsou
 * displejové prvky, které nadpisy nejsou.
 */
.osobnost-header h1 {
	margin: 0;
	max-width: 14ch;
	text-wrap: balance;
}

.osobnost-header .osobnost-zivot {
	margin: 1rem 0 0;
	color: var(--pp-soft);
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* Perex — vodicí odstavec, výrazně větší než tělo. */
.osobnost-perex {
	max-width: var(--pp-measure);
	margin: 0 0 2.5rem;
	font-size: clamp( 1.42rem, 1.21rem + 0.74vw, 1.74rem );
	font-weight: 400;
	line-height: 1.34;
	letter-spacing: -0.009em;
}

.osobnost-perex p {
	margin: 0;
}

/* Citát. */
.osobnost-citat {
	max-width: var(--pp-measure);
	margin: 0 0 3rem;
	padding: 1.5rem 0 0;
	border-top: var(--pp-rule);
}

.osobnost-citat p {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.017em;
}

.osobnost-citat cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Tělo životopisu — velké a vzdušné, ale vždy o stupeň pod perexem.
   Na mobilu se obojí zmenšuje, jinak by měl perex i tělo stejnou váhu
   a úvod by přestal fungovat jako úvod. */
.osobnost-single .entry-content {
	max-width: var(--pp-measure);
	font-size: clamp( 1.185rem, 1.07rem + 0.475vw, 1.385rem );
	line-height: 1.62;
	letter-spacing: -0.009em;
}

.osobnost-single .entry-content p {
	margin: 0 0 1.5rem;
}

.osobnost-single .entry-content h2 {
	margin: 3rem 0 1rem;
}

/* Infobox — sloupec vpravo, drobným písmem, oddělený jen linkami. */
.osobnost-infobox {
	font-size: 0.875rem;
	line-height: 1.45;
}

.osobnost-portret {
	margin: 0 0 1.25rem;
}

.osobnost-portret img {
	display: block;
	width: 100%;
	height: auto;
}

.osobnost-infobox h2 {
	margin: 1.5rem 0 0.5rem;
	padding-top: 0.5rem;
	border-top: var(--pp-rule);
	color: var(--pp-soft);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.osobnost-infobox h2:first-of-type {
	margin-top: 0;
}

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

.osobnost-infobox li + li {
	margin-top: 0.5rem;
}

.osobnost-infobox .znak {
	display: inline-block;
	width: 1em;
	color: var(--pp-soft);
}

.osobnost-infobox .pamatniky .druh,
.osobnost-infobox .pamatniky .poznamka,
.osobnost-infobox .pamatniky .odstraneno {
	display: block;
	color: var(--pp-soft);
	font-size: 0.875rem;
}

.osobnost-infobox .pamatniky .odstraneno {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.osobnost-portret .credit {
	margin-top: 0.5rem;
	color: var(--pp-soft);
	font-size: 0.75rem;
	line-height: 1.3;
	word-break: break-word;
}

/* Uvedení autora je povinnost, ne obsah — zůstává tlumené, aby na sebe
   nestrhávalo pozornost víc než odkazy v textu. */
.osobnost-portret .credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.osobnost-portret .credit a:hover {
	color: var(--pp-ink);
}

@media (max-width: 999px) {
	/* Infobox tu navazuje rovnou na hlavičku, která už svou linku má —
	   druhá by vedle ní vypadala jako dvojčára. */
	.osobnost-infobox {
		max-width: var(--pp-measure);
		margin: 2rem 0 3rem;
		border-top: 0;
	}

	.osobnost-portret {
		max-width: 240px;
	}
}

/* Profese pod článkem. */
.osobnost-footer {
	max-width: var(--pp-measure);
	margin: 3rem 0 0;
	padding-top: 1.25rem;
	border-top: var(--pp-rule);
}

.osobnost-footer .profese-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0.75rem 0 0;
}

.osobnost-footer .profese-list a {
	padding: 5px 12px;
	border: 1px solid var(--pp-ink);
	color: var(--pp-ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
}

.osobnost-footer .profese-list a:hover {
	background: var(--pp-ink);
	border-color: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

/* ------------------------------------------------------------ cesta dál */

/* Sekce musí mít stejnou vnitřní šířku jako článek — ten má vedle max-width
   ještě gutter z .container, takže by holé max-width lícovalo o 28 px vedle. */
.osobnost-dalsi-sekce {
	box-sizing: border-box;
	max-width: var(--pp-article);
	margin: 5rem auto 0;
	padding-inline: var(--gutter, 28px);
	padding-bottom: clamp( 3rem, 2rem + 3vw, 5rem );
}

.osobnost-dalsi {
	padding-top: 2rem;
	border-top: 1px solid var(--pp-ink);
}

/* Hlavní nabídka: další osobnost v abecedě, velkým písmem. */
.dalsi-hlavni {
	display: block;
	position: relative;
	padding: 1.75rem 0 2rem;
	border-bottom: var(--pp-rule);
	color: var(--pp-ink);
}

.dalsi-hlavni .stitek {
	display: block;
	margin-bottom: 0.75rem;
}

.dalsi-hlavni .jmeno {
	display: block;
	max-width: 16ch;
	font-size: clamp( 2rem, 1.3rem + 2.8vw, 3.4rem );
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.dalsi-hlavni .roky {
	display: block;
	margin-top: 0.5rem;
	color: var(--pp-soft);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.dalsi-hlavni .perex {
	display: block;
	max-width: 46ch;
	margin-top: 1rem;
	font-size: 1.05rem;
	line-height: 1.45;
}

.dalsi-hlavni .sipka {
	position: absolute;
	top: 1.75rem;
	right: 0;
	font-size: 2rem;
	line-height: 1;
	transition: transform 0.16s ease-out;
}

.dalsi-hlavni:hover .sipka {
	transform: translateX( 10px );
}

/* Tři lidé ze stejného oboru. */
.dalsi-obor {
	padding: 2rem 0;
	border-bottom: var(--pp-rule);
}

.dalsi-obor ul {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 32px;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.dalsi-obor a {
	display: block;
	color: var(--pp-ink);
}

.dalsi-obor .jmeno {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.008em;
}

.dalsi-obor a:hover .jmeno {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.dalsi-obor .roky {
	display: block;
	margin-top: 0.25rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.dalsi-obor .perex {
	display: block;
	margin-top: 0.6rem;
	color: var(--pp-soft);
	font-size: 0.9rem;
	line-height: 1.4;
}

@media (max-width: 780px) {
	.dalsi-obor ul {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Rozcestník. */
.dalsi-rozcestnik {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 1.75rem 0 0;
}

.dalsi-rozcestnik a {
	padding: 11px 20px;
	border: 1px solid var(--pp-ink);
	color: var(--pp-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.dalsi-rozcestnik a:first-child {
	background: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

.dalsi-rozcestnik a:hover {
	background: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

.dalsi-rozcestnik a:first-child:hover {
	background: var(--pp-ink);
	border-color: var(--pp-ink);
}

/* --------------------------------------------------------------- archiv */

.osobnosti-archiv .filtr {
	position: sticky;
	top: var(--pp-header-stuck);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 16px 0;
	background: var(--wp--preset--color--bg);
}

/* Vstupy, výběry i přepínač mají jednu výšku — box-sizing a pevná výška,
   protože input, select a button si výšku počítají každý jinak. */
.osobnosti-archiv .filtr__hledat,
.osobnosti-archiv .filtr__profese,
.osobnosti-archiv .filtr__cast,
.osobnosti-archiv .filtr__prepinac {
	box-sizing: border-box;
	height: 44px;
}

/* Filtry jsou černobílé jako zbytek ovládání. */
.osobnosti-archiv .filtr__hledat,
.osobnosti-archiv .filtr__profese,
.osobnosti-archiv .filtr__cast {
	padding: 0 14px;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--pp-ink);
	border-radius: 0;
	color: var(--pp-ink);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1;
}

.osobnosti-archiv .filtr__hledat {
	flex: 1 1 200px;
	min-width: 160px;
}

.osobnosti-archiv .filtr__profese option,
.osobnosti-archiv .filtr__cast option {
	color: var(--pp-ink);
}

.osobnosti-archiv .filtr__hledat::placeholder {
	/* Tlumený text má vlastní token; inkoust na 70 % krytí by dal sice
	   stejný odstín, ale rozešel by se s paletou při první její změně. */
	color: var(--pp-soft);
	opacity: 1;
}

.osobnosti-archiv .filtr__prepinac {
	display: inline-flex;
	border: 1px solid var(--pp-ink);
}

.osobnosti-archiv .filtr__prepinac button {
	padding: 0 18px;
	background: transparent;
	border: 0;
	color: var(--pp-ink);
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
}

.osobnosti-archiv .filtr__prepinac button[aria-pressed="true"] {
	background: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

.osobnosti-archiv .pocet {
	margin-left: auto;
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * Na mobilu se filtr nelepí. Naskládaný na čtyři řádky by po odscrollování
 * zabral půl obrazovky a z výsledků by nezbylo skoro nic — u čtyř ovládacích
 * prvků je lepší nechat je odrolovat pryč. Zároveň se zhutní do tří řádků.
 */
@media (max-width: 780px) {
	.osobnosti-archiv .filtr {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 12px 0 16px;
	}

	/* Prvky v mřížce se samy nezmenší pod šířku svého obsahu — bez min-width
	   by pole a výběry přetekly z obrazovky ven. */
	.osobnosti-archiv .filtr > * {
		min-width: 0;
		max-width: 100%;
	}

	.osobnosti-archiv .filtr__hledat {
		grid-column: 1 / -1;
	}

	.osobnosti-archiv .filtr__profese,
	.osobnosti-archiv .filtr__cast {
		width: 100%;
		text-overflow: ellipsis;
	}

	.osobnosti-archiv .filtr__prepinac {
		justify-self: start;
	}

	.osobnosti-archiv .filtr__prepinac button {
		padding: 0 14px;
	}

	.osobnosti-archiv .pocet {
		margin-left: 0;
		align-self: center;
		justify-self: end;
	}
}

/* Seznam jako rejstřík: jméno, roky, obor — každý řádek na vlasové lince. */
/* Řádek nemá boční odsazení, takže podbarvení při najetí lícuje přesně
   s filtrem nad seznamem a nikam nepřetéká. */
.osobnosti-seznam {
	margin: clamp( 1.5rem, 1rem + 1.6vw, 2.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

.osobnosti-seznam li {
	border-bottom: var(--pp-rule);
}

.osobnosti-seznam a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 7ch minmax(0, 22ch);
	gap: 24px;
	align-items: baseline;
	padding: 14px 0;
	color: var(--pp-ink);
	transition: background 0.1s ease-out;
}

.osobnosti-seznam a:hover {
	background: var(--wp--preset--color--surface);
}

/* Jméno zůstává černé i při najetí — podbarvení řádku je dost silný signál
   a zesvětlené jméno by čtení jen ztížilo. */
.osobnosti-seznam a:hover,
.osobnosti-seznam a:hover .jmeno,
.osobnosti-seznam a:focus-visible .jmeno {
	color: var(--pp-ink);
}

.osobnosti-seznam a:hover .roky,
.osobnosti-seznam a:hover .profese {
	color: var(--pp-soft);
}

.osobnosti-seznam .jmeno {
	font-size: clamp( 1.05rem, 0.95rem + 0.5vw, 1.35rem );
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.osobnosti-seznam .roky {
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.osobnosti-seznam .profese {
	color: var(--pp-soft);
	font-size: 0.875rem;
	line-height: 1.3;
}

/* Na mobilu životní data v seznamu vypadnou: na úzký sloupec se nevejdou
   a lámou se na dva řádky. Na detailu osobnosti jsou hned pod jménem. */
@media (max-width: 720px) {
	.osobnosti-seznam a {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.osobnosti-seznam .roky {
		display: none;
	}

	.osobnosti-seznam .profese {
		grid-column: 1;
	}
}

.osobnosti-archiv .pohled[hidden] {
	display: none;
}

.osobnosti-archiv .pohled--mapa {
	margin-top: 24px;
}

/* ------------------------------------------------- archiv profese */

.pp-osoby ul {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 40px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-osoby a {
	display: block;
	color: var(--pp-ink);
	text-decoration: none;
}

.pp-osoby .jmeno {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pp-osoby a:hover .jmeno {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.pp-osoby .roky {
	display: block;
	margin-top: 0.2rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.pp-prazdno {
	color: var(--pp-soft);
}

@media (max-width: 560px) {
	.pp-osoby ul {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 28px 16px;
	}
}

/* Stránkování — čísla stránek, ne „starší/novější". Kde je člověk v pořadí,
   je u čtyř stovek osobností užitečnější informace než směr. */
.pp-strankovani {
	margin-top: clamp( 2.5rem, 2rem + 2vw, 4rem );
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.pp-strankovani__stav {
	margin: 0 0 1rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pp-strankovani ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-strankovani a,
.pp-strankovani span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--pp-ink);
	color: var(--pp-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background 0.12s ease-out, color 0.12s ease-out;
}

.pp-strankovani a:hover {
	background: var(--wp--preset--color--surface);
}

.pp-strankovani .current {
	background: var(--pp-ink);
	border-color: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

/* Výpustka mezi vzdálenými čísly není tlačítko, tak ať se tak netváří. */
.pp-strankovani .dots {
	border-color: transparent;
	color: var(--pp-soft);
}

/* ------------------------------------------------------------------ mapa */

/*
 * Leaflet si uvnitř rozdává z-indexy až do stovek (dlaždice 200, markery 600,
 * ovládání 1000) a přerostl by lepivou hlavičku i filtr. `position: relative`
 * se `z-index: 0` z mapy udělá vlastní vrstvicí kontext, takže všechno její
 * vrstvení zůstane uvnitř rámečku.
 */
.pp-map {
	position: relative;
	z-index: 0;
	width: 100%;
	min-height: 320px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--pp-ink);
}

.pp-map__loading,
.pp-map__error,
.pp-map__prazdno {
	margin: 0;
	padding: 2rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

/* Shluky — černá kolečka, bílý text. */
.pp-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pp-ink);
	border: 1px solid #fff;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
}

.pp-cluster--maly {
	font-size: 0.8125rem;
}

.pp-cluster--stredni {
	font-size: 0.875rem;
}

.pp-cluster--velky {
	font-size: 0.9375rem;
}

.leaflet-marker-icon.pp-cluster {
	transition: transform 0.12s ease-out;
}

.leaflet-marker-icon.pp-cluster:hover {
	transform: scale( 1.1 );
}

/* Popup. */
.leaflet-popup.custom-popup .leaflet-popup-content-wrapper {
	border: 1px solid var(--pp-ink);
	border-radius: 0;
	box-shadow: none;
}

.leaflet-popup.custom-popup .leaflet-popup-tip {
	box-shadow: none;
}

.leaflet-popup.custom-popup .leaflet-popup-content {
	margin: 0;
	padding: 16px 18px;
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Zavírací křížek si Leaflet barví sám do světle šedé, která má proti bílé
   jen 3,8 : 1. Přebarvujeme ho do inkoustové — je to ovládací prvek, takže
   na něm kontrast záleží stejně jako na textu. */
.leaflet-popup.custom-popup .leaflet-popup-close-button {
	width: 28px;
	height: 28px;
	padding: 4px 4px 0 0;
	color: var(--pp-ink);
	font-size: 1.25rem;
	line-height: 1;
}

.leaflet-popup.custom-popup .leaflet-popup-close-button:hover,
.leaflet-popup.custom-popup .leaflet-popup-close-button:focus-visible {
	color: var(--pp-ink);
	background: var(--wp--preset--color--surface);
}

.custom-popup .card-header {
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.custom-popup .popis {
	margin-bottom: 0.6rem;
}

.custom-popup .adresa {
	margin-bottom: 0.4rem;
}

.custom-popup .druhpamatniku {
	display: inline-block;
	margin-left: 0.35em;
	padding: 1px 7px;
	border: 1px solid var(--wp--preset--color--rule);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.custom-popup .poznamka,
.custom-popup .odstraneno {
	color: var(--pp-soft);
	font-size: 0.875rem;
}

.custom-popup .linknaprofil {
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: var(--pp-rule);
	font-weight: 700;
}

/* ------------------------------------------------------------- stránky */

.page-hero,
.page-body {
	max-width: var(--pp-article);
	margin-inline: auto;
}

.page-hero__title {
	max-width: 16ch;
	margin-bottom: 0;
	text-wrap: balance;
}

/* Mřížka se nesmí lepit na nadpis — velký nadpis potřebuje pod sebou dýchat. */
/* Odsazení dělá padding, ne margin: WordPress prvnímu potomku bloku
   s `is-layout-flow` horní okraj nuluje, takže by se margin neprojevil. */
.pp-osoby {
	padding-top: clamp( 2rem, 1.2rem + 2.5vw, 3.5rem );
}

/* Vyhledávací pole na stránce výsledků — stejný jazyk jako filtry archivu. */
.pp-hledani {
	max-width: var(--pp-measure);
	margin-top: 1.5rem;
}

.pp-hledani .wp-block-search__inside-wrapper {
	border: 1px solid var(--pp-ink);
	border-radius: 0;
	padding: 0;
}

.pp-hledani .wp-block-search__input {
	padding: 11px 14px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--pp-ink);
	font: inherit;
	font-size: 1rem;
}

.pp-hledani .wp-block-search__input:focus {
	outline: 0;
}

.pp-hledani .wp-block-search__button {
	margin: 0;
	padding: 11px 22px;
	background: var(--pp-ink);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--bg);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
}

.pp-hledani .wp-block-search__button:hover {
	background: var(--pp-ink);
}

/* Čtecí šířka platí pro text, ne pro mřížky a seznamy — ty mají využít
   celou plochu stránky. */
.page-body > *:not(.alignwide):not(.alignfull):not(.osobnosti-archiv):not(.pp-osoby):not(.pp-strankovani):not(.pp-prazdno) {
	max-width: var(--pp-measure);
}

.page-body p {
	font-size: 1.1875rem;
	line-height: 1.6;
}

.page-body h2 {
	margin: 3rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--pp-ink);
}

.page-body h3 {
	margin: 2rem 0 0.5rem;
}

/* ------------------------------------------------------------- titulní */

.uvod-lead h1,
.uvod-lead p {
	max-width: 30ch;
	margin: 0;
	font-size: var(--pp-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Base přidává za text tlačítka šipku. Tenhle web ji nechce — text sám
   říká, kam vede, a v cihlové výplni šipka jen přidává šum. */
.wp-block-button__link.wp-element-button::after {
	content: none;
}

/* Tlačítka jsou nativní core bloky, jen převlečené do cihlové. */
.uvod-akce {
	gap: 10px;
	margin-top: 2.5rem;
}

.uvod-akce .wp-block-button__link {
	padding: 14px 26px;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--pp-ink);
	border-radius: 0;
	color: var(--pp-ink);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.12s ease-out, color 0.12s ease-out;
}

.uvod-akce .wp-block-button:first-child .wp-block-button__link {
	background: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

.uvod-akce .wp-block-button__link:hover {
	background: var(--pp-ink);
	color: var(--wp--preset--color--bg);
}

.uvod-akce .wp-block-button:first-child .wp-block-button__link:hover {
	background: var(--pp-ink);
	color: var(--wp--preset--color--bg);
	border-color: var(--pp-ink);
}

/* Na mobilu jsou tohle jediné dvě cesty ze stránky — ať jsou pořádně velké. */
@media (max-width: 600px) {
	.uvod-akce .wp-block-button,
	.uvod-akce .wp-block-button__link {
		width: 100%;
	}
}

/* Sekce titulní strany. Boční okraj drží stejný gutter jako .container
   z base, aby text nelícoval s okrajem okna. */
.uvod-hero,
.uvod-vyber,
.uvod-slovo,
.uvod-zaver {
	width: 100%;
	max-width: var(--container, 1320px);
	margin-inline: auto;
	padding-inline: var(--gutter, 28px);
}

.uvod-hero {
	padding-block: clamp( 2.5rem, 1.5rem + 4vw, 5.5rem ) clamp( 2.5rem, 2rem + 3vw, 4rem );
}

/* Sekce odděluje bílé místo, ne linka — titulní strana má dýchat. */
.uvod-vyber,
.uvod-slovo,
.uvod-zaver {
	padding-block: clamp( 2.5rem, 2rem + 3vw, 4.5rem );
}

.uvod-vyber .wp-block-heading,
.uvod-slovo .wp-block-heading {
	margin-top: 0;
}

/* Fotka přes celou šířku okna — jediné barevné místo na webu a zároveň
   jeho jediný velký obraz, takže dostane prostor od kraje ke kraji. */
.uvod-foto {
	width: 100%;
	max-width: var(--container, 1920px);
	margin-inline: auto;
}

.uvod-foto .wp-block-image {
	margin: 0;
}

/* Na širokém monitoru je fotka pás přes celou šířku; na mobilu by z ní
   stejná výška udělala výřez samé oblohy, tak se drží poměru na šířku. */
.uvod-foto img {
	display: block;
	width: 100%;
	height: clamp( 420px, 78vh, 900px );
	object-fit: cover;
	object-position: center 60%;
}

@media (max-width: 780px) {
	.uvod-foto img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* Popisek patří na stejnou svislici jako ostatní text, ne doprostřed pod
   fotku — `.wp-block-image figcaption` je z jádra centrovaný. */
.uvod-foto figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container, 1320px);
	margin: 12px auto 0;
	padding-inline: var(--gutter, 28px);
	color: var(--pp-soft);
	font-size: 0.875rem;
	text-align: left;
}

.uvod-foto figcaption .zdroj a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Namátkový výběr osobností — šest portrétů v řadě. */
.pp-vyber ul {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 24px;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

/* Položky karetních mřížek se musí umět zmenšit pod šířku svého obsahu.
   Když se portrét nenačte, vykreslí prohlížeč místo něj alternativní text
   a ten by jinak stopu mřížky roztáhl — proto `minmax( 0, 1fr )` u stop
   a `min-width: 0` u položek. Bez toho se rozpadne celý řádek. */
.pp-vyber li,
.pp-osoby li,
.dalsi-obor li {
	min-width: 0;
}

.pp-vyber a {
	display: block;
	color: var(--pp-ink);
	text-decoration: none;
}

/* Poměr stran drží obal, ne obrázek — WordPress vypisuje do <img> atributy
   width/height a ty by aspect-ratio na samotném obrázku přebily. */
.portret {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--surface);
}

.portret img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.3s ease-out;
}

a:hover .portret img {
	transform: scale( 1.04 );
}

/* Zhruba každá desátá osobnost fotku nemá. Prázdné místo by mřížku roztrhalo,
   tak na něj přijdou iniciály — drží rytmus a něco i řeknou. */
.portret--bez-fotky {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.portret--bez-fotky .inicialy {
	color: var(--pp-ink);
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.4rem );
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
}

a:hover .portret--bez-fotky {
	background: var(--wp--preset--color--stone);
}

.pp-vyber .jmeno {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pp-vyber a:hover .jmeno {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.pp-vyber .roky {
	display: block;
	margin-top: 0.2rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.pp-vyber__vice {
	margin: 2rem 0 0;
	font-size: 1.05rem;
	font-weight: 500;
}

.pp-vyber__vice a {
	color: var(--pp-ink);
	text-decoration: none;
}

.pp-vyber__vice a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

@media (max-width: 1100px) {
	.pp-vyber ul { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

@media (max-width: 560px) {
	.pp-vyber ul { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 16px; }
}

/* Báseň na konci titulní strany. */
.uvod-basen {
	max-width: 34ch;
	margin: 0;
	padding: 0;
	font-size: var(--pp-section);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.uvod-basen cite {
	display: block;
	margin-top: 1rem;
	color: var(--pp-soft);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- patička */

/* Světle šedá plocha na konci stránky — stejný odstín jako podbarvení
   řádku v archivu, takže web zůstává v jedné škále. */
.pp-paticka {
	background: var(--wp--preset--color--surface);
	color: var(--pp-ink);
}

/* Patička drží stejný kontejner jako hlavička; šedá plocha jde do krajů. */
.pp-paticka__inner {
	max-width: var(--container, 1920px);
	margin-inline: auto;
	padding: clamp( 2.5rem, 2rem + 3vw, 4.5rem ) var(--gutter, 28px) 2rem;
}

.pp-paticka .stitek {
	margin-bottom: 0.9rem;
	color: var(--pp-soft);
}

.pp-paticka a {
	color: inherit;
	text-decoration: none;
}

.pp-paticka a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.pp-paticka__hlava {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.pp-paticka__claim {
	max-width: 22ch;
	margin: 0;
	font-size: var(--pp-section);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.pp-paticka__cisla {
	display: flex;
	gap: 32px;
	margin: 0;
	color: var(--pp-soft);
	font-size: 0.9375rem;
}

.pp-paticka__cisla strong {
	display: block;
	color: var(--pp-ink);
	font-size: 2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.pp-paticka__sloupce {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 40px;
	padding: 2.5rem 0;
}

.pp-paticka__sloupec ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.pp-paticka__sloupec li + li {
	margin-top: 0.75rem;
}

.pp-paticka__spodek {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--pp-soft);
	font-size: 0.875rem;
}

.pp-paticka__spodek p {
	margin: 0;
}

@media (max-width: 860px) {
	.pp-paticka__sloupce {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}