/* ==========================================================================
   STM Team Card — Divi 5

   Jedna sada podčástí (fotka, titulek, jméno, tělo) a pět rozvržení, která
   je přeskupují. Markup je pro všechna rozvržení stejný, mění se jen grid.

   Míra naklonění (--stm-tilt) je jediné číslo, ze kterého se počítají všechny
   úhly a rotace. 0 = korporátní, všechno rovné. 1 = původní předloha. 2 = divočina.
   ========================================================================== */

.stm-card {
	/* --- paleta: dvě základní barvy, ze kterých ostatní dědí --- */
	--stm-accent: #ffdd40;
	--stm-dark: #2f313a;

	--stm-card-bg: var(--stm-accent);
	--stm-frame: var(--stm-dark);
	--stm-wedge: var(--stm-accent);
	--stm-name-bg: var(--stm-dark);
	--stm-name-fg: var(--stm-accent);
	--stm-role-bg: var(--stm-accent);
	--stm-role-fg: var(--stm-dark);
	--stm-desc-fg: var(--stm-dark);
	--stm-tag-bg: var(--stm-dark);
	--stm-tag-fg: var(--stm-accent);
	--stm-link-bg: var(--stm-dark);
	--stm-link-fg: var(--stm-accent);
	--stm-num-bg: var(--stm-dark);
	--stm-num-fg: var(--stm-accent);

	/* --- rozměry --- */
	--stm-tilt: 1;
	--stm-radius: 4px;
	--stm-thumb: 13vmin;
	--stm-photo-w: 34%;
	--stm-scale: 0.85;
	--stm-gap: 1.25em;
	--stm-img-filter: grayscale(1);
	--stm-trans: all 0.4s ease 0s;

	/* --- fotka uvnitř rámečku ---
	   Výřez a zarovnání. `cover` fotku zvětší, dokud rámeček nezakryje, a
	   přebytek ořízne; `contain` ji zmenší, dokud není celá vidět. Poměr stran
	   fotky zůstává v obou případech zachovaný — deformovat ji neumí ani jedno.
	   Zarovnání říká, která část se při ořezu nechá vidět: u portrétů obvykle
	   ta horní, protože ořez odspodu je mnohem méně nápadný než uříznuté temeno. */
	--stm-img-fit: cover;
	--stm-img-pos: 50% 50%;

	/* --- poměr stran rámečku fotky ---
	   Rámeček je odjakživa čtverec, protože --stm-thumb dává zároveň šířku
	   i výšku. Dva násobitele z toho dělají libovolný obdélník, aniž by se
	   cokoli jiného muselo přepočítávat:

	   --stm-thumb-kw/kh  základní tvar podle nastavení (Tvar rámečku fotky);
	                      vypisuje je renderer, 1 = čtverec jako dosud.
	   --stm-fit-kw/kh    tentýž pár dopočítaný ze skutečného poměru fotky,
	                      zapisuje ho až skript v prohlížeči (Přizpůsobit
	                      rámeček poměru fotky). Když existuje, má přednost.

	   Dvě dvojice proto, že o inline styl karty se ve Visual Builderu dělí
	   React s tímhle skriptem. Kdyby psaly do stejné proměnné, přepisovaly by
	   si výsledek navzájem při každém překreslení.

	   --stm-frame-ratio je základní poměr (šířka ÷ výška) v čitelné podobě;
	   čte ho skript, protože ze samotných násobitelů by ho zpětně nesestavil,
	   aniž by věděl, který rozměr zůstává pevný. */
	--stm-frame-ratio: 1;
	--stm-thumb-kw: 1;
	--stm-thumb-kh: 1;
	--stm-thumb-fw: var(--stm-fit-kw, var(--stm-thumb-kw, 1));
	--stm-thumb-fh: var(--stm-fit-kh, var(--stm-thumb-kh, 1));
	--stm-thumb-w: calc(var(--stm-thumb, 13vmin) * var(--stm-thumb-fw, 1));
	--stm-thumb-h: calc(var(--stm-thumb, 13vmin) * var(--stm-thumb-fh, 1));

	/* --- rozsvícení textů při najetí myší ---
	   1 = beze změny (efekt vypnutý), víc = světlejší, míň = tmavší.
	   Modul obě proměnné vypisuje jen tehdy, když je efekt zapnutý. */
	--stm-glow: 1;
	--stm-glow-time: 0.4s;

	/* --- velikosti písma cedulek ---
	   Běžně se nastavují v Divi (Návrh → Text) a tyhle hodnoty jsou jen
	   výchozí. Proměnné jsou tu pro zápisy, které se do číselného pole v Divi
	   nevejdou, například clamp() nebo min(): přepište je ve vlastním CSS na
	   .stm-card, ne v souboru pluginu. */
	--stm-name-size: 1.35em;
	--stm-role-size: 0.75em;
	--stm-tag-size: 0.8em;
	--stm-num-size: 0.85em;

	/* --- meze velikosti písma ---
	   Tvrdý strop a tvrdá podlaha v pixelech, platné bez ohledu na to, co je
	   nastaveno v typografii a co z toho udělá auto-fit. Nula znamená vypnuto,
	   takže se karta bez těchhle nastavení chová přesně jako dosud.

	   Hlídá je assets/stm-team-card.js, ne CSS: typografie nastavená v Divi
	   míří přímo na .stm-card__name a spol., takže by se clamp() zapsaný tady
	   nikdy neuplatnil. Skript čte dopočítanou velikost a jen ji ořízne, ať
	   pochází odkudkoli. */
	--stm-text-min: 0;
	--stm-text-max: 0;

	/* --- svislé odsazení uvnitř karty ---
	   Každé rozvržení má vlastní výchozí hodnotu (viz oddíl na konci sekce
	   rozvržení); tahle proměnná je přebije všem naráz. Vodorovné odsazení
	   zůstává, kde bylo — o výšku karty se nehádá. */

	/* --- začátek barevné plochy karty ---
	   O kolik níž má plocha karty začínat oproti hornímu okraji. Cedulky se
	   nehýbou, takže při nenulové hodnotě začnou přes horní hranu přesahovat —
	   přesně to dělá Klasické rozvržení odjakživa. Vizuálně tím karta zhubne
	   na nízký pruh, do kterého zbývá vejít se jen popisu. */
	--stm-card-top: 0px;

	/* --- odvozené z míry naklonění --- */
	--stm-angle: calc(90deg - 7deg * var(--stm-tilt));
	--stm-cut: calc(97% + 3% * (1 - var(--stm-tilt)));
	--stm-rot-thumb: calc(-4deg * var(--stm-tilt));
	--stm-rot-name: calc(-2deg * var(--stm-tilt));
	--stm-rot-role: calc(3deg * var(--stm-tilt));
	--stm-frame-angle: calc(-90deg + 4deg * var(--stm-tilt));
	--stm-frame-stop: calc(100% - 30% * var(--stm-tilt));
	/* Sklon plochy pod jménem se od 1.6.0 počítá z písma cedulky
	   (--stm-name-cut níže), ne z procent gradientové osy. Proměnná tu
	   zůstává jen pro cizí CSS, které se na ni mohlo navázat. */
	--stm-name-slant: calc(8% * var(--stm-tilt));

	position: relative;
	display: block;
	width: 100%;
	margin: 2.25em 0 0.5em;
	padding: 0.73em;
	list-style: none;
	text-align: left;
	border-radius: var(--stm-radius, 4px);
	transform: scale(var(--stm-scale, 0.85));
	transition: var(--stm-trans, all 0.4s ease 0s);

	/* Vlastní vrstvící kontext, aby plocha karty (::before se záporným
	   z-indexem) zůstala uvnitř karty a nepropadla se pod pozadí sekce.
	   Na desktopu ho stejně dělá už transform: scale(), tohle ho jistí
	   i tam, kde se transform vypne. */
	isolation: isolate;
}

/* ------------------------------------------------------- Plocha karty
   Barevná plocha se šikmou hranou nesedí na kartě samotné, ale na
   pseudoprvku pod obsahem. Důvod: šikmá hrana potřebuje ořez tvarem
   (clip-path), jenže ořez na kartě by uřízl i to, co z ní schválně
   vyčnívá — cedulky nad horní hranou a fotku za bokem. Na pseudoprvku
   se ořezává jen plocha, obsah zůstává nedotčený.

   Zakulacení a naklonění se tím přestanou vylučovat. Dřív dělal šikmou
   hranu průhledný konec gradientu: `border-radius` sice zakulatil roh
   karty, ale gradient ten zakulacený roh vzápětí odřízl a v místě řezu
   nechal dva ostré cípy. Proto při vyšším naklonění vypadalo zakulacení
   jako vypnuté.

   Zůstávají dvě varianty téhož tvaru:

   a) Bez skriptu — původní gradient s tvrdou zarážkou. Vypadá přesně
      jako dosud, zakulacené jsou jen rohy mimo řez. Pojistka pro
      prohlížeče bez `clip-path: path()`.

   b) Se skriptem — `--stm-shape` nese přesnou cestu zaobleného
      lichoběžníku spočítanou ze stejného úhlu i řezu, takže se zakulatí
      i oba rohy na šikmé hraně. Plocha je pak jednolitá barva a hranu
      dělá ořez; přepíná se atributem data-stm-shape, aby se gradient a
      ořez nepřekrývaly na stejné hraně. Viz assets/stm-team-card.js.
   ------------------------------------------------------------------ */

/* `inset` místo `top: 0` má jediný důvod: --stm-card-top umí plochu shodit
   níž, aniž by se hnul obsah. Skript si tutéž hodnotu přečte z dopočítaného
   stylu pseudoprvku, aby šikmou hranu spočítal ze skutečné výšky plochy, ne
   z výšky celé karty. */
.stm-card::before {
	content: "";
	position: absolute;
	inset: var(--stm-card-top, 0px) 0 0 0;
	z-index: -1;
	pointer-events: none;
	border-radius: var(--stm-radius, 4px);
	transition: var(--stm-trans, all 0.4s ease 0s);
	clip-path: var(--stm-shape, none);
	background: linear-gradient(
		var(--stm-angle, 83deg),
		var(--stm-card-bg, #ffdd40) 0 var(--stm-cut, 97%),
		#fff0 calc(var(--stm-cut, 97%) + 1px) 100%
	);
}

.stm-card[data-stm-shape="on"]::before {
	background: var(--stm-card-bg, #ffdd40);
}

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

/* Cedulky přečnívají nad horní hranu karty — modulový obal je nesmí uříznout. */
.stm_team_card,
.stm_team_card > .et_pb_module_inner,
.stm-card {
	overflow: visible;
}

.stm-card--right::before {
	background: linear-gradient(
		calc(var(--stm-angle, 83deg) * -1),
		var(--stm-card-bg, #ffdd40) 0 var(--stm-cut, 97%),
		#fff0 calc(var(--stm-cut, 97%) + 1px) 100%
	);
}

.stm-card--right[data-stm-shape="on"]::before {
	background: var(--stm-card-bg, #ffdd40);
}

.stm-card:hover {
	transform: scale(1);
	filter: drop-shadow(0 20px 10px #0008);
}

/* ------------------------------------------------------------------ Fotka */

/* Vnitřní odsazení rámečku jde přes proměnnou, protože přesně tu samou
   hodnotu potřebuje i vrstva s číslem v rohu: díky ní se číslo drží rohu
   samotné fotky, ne vnějšího okraje rámečku — a to i během hover animace,
   kdy se odsazení mění. `position: relative` je tu proto, aby vrstva měla
   se čeho chytit i v Banneru, kde je rotace rámečku vypnutá. */
.stm-card__thumb {
	--stm-thumb-pad: 0.5em;

	position: relative;
	width: var(--stm-thumb-w, var(--stm-thumb, 13vmin));
	height: var(--stm-thumb-h, var(--stm-thumb, 13vmin));
	flex: 0 0 auto;
	overflow: hidden;
	padding: var(--stm-thumb-pad, 0.5em);
	border-radius: var(--stm-radius, 4px);
	transform: rotate(var(--stm-rot-thumb, -4deg));
	transition: var(--stm-trans, all 0.4s ease 0s);
	background: linear-gradient(
		var(--stm-frame-angle, -86deg),
		var(--stm-frame, #2f313a) 0 var(--stm-frame-stop, 70%),
		var(--stm-wedge, #ffdd40) 0 100%
	);
}

/* Plocha, která u `contain` zbude kolem fotky, je barva rámečku — ne díra do
   karty. Vlastní proměnná je tu pro ty, kdo chtějí místo toho nechat prosvítat
   gradient s klínem: stačí `--stm-img-bg: transparent`. */
.stm-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--stm-img-fit, cover);
	object-position: var(--stm-img-pos, 50% 50%);
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-img-bg, var(--stm-frame, #2f313a));
	filter: var(--stm-img-filter, grayscale(1));
	transition: var(--stm-trans, all 0.4s ease 0s);
}

.stm-card:hover .stm-card__thumb {
	--stm-thumb-pad: calc(0.5em - 0.4em * var(--stm-tilt, 1));
	--stm-frame-stop: calc(100% - 4% * var(--stm-tilt));

	padding: var(--stm-thumb-pad, 0.5em);
	transform: rotate(calc(var(--stm-rot-thumb, -4deg) * 0.25));
}

.stm-card:hover .stm-card__thumb img {
	filter: none;
}

/* ------------------------------------------------------- Číslo v rohu fotky

   Číslo sedí uvnitř rámečku fotky, ne na kartě. Tím se s fotkou naklání,
   otáčí i zmenšuje — během celé hover choreografie zůstává přilepené přesně
   ve svém rohu a nikam neuteče. Rámeček má `overflow: hidden`, takže z fotky
   nemůže vylézt ven ani při velkém písmu.

   Vrstva `__nums` je natažená přes samotnou fotku: `inset` má stejnou hodnotu
   jako vnitřní odsazení rámečku, takže roh vrstvy leží přesně na rohu fotky.
   Odsazení se při najetí myší zmenšuje, proto se vrstva animuje spolu s ním.

   Vrstva má písmo karty (nedědí --stm-num-size), takže se `em` v odsazení
   počítá pořád ze stejného základu bez ohledu na to, jak velké číslo je.
   Vlastní velikost dostává až cedulka uvnitř.
   ------------------------------------------------------------------------ */

.stm-card__nums {
	position: absolute;
	inset: var(--stm-thumb-pad, 0.5em);
	z-index: 2;
	display: flex;
	pointer-events: none;
	transition: var(--stm-trans, all 0.4s ease 0s);
}

.stm-card__nums--tl {
	align-items: flex-start;
	justify-content: flex-start;
}

.stm-card__nums--tr {
	align-items: flex-start;
	justify-content: flex-end;
}

.stm-card__nums--bl {
	align-items: flex-end;
	justify-content: flex-start;
}

.stm-card__nums--br {
	align-items: flex-end;
	justify-content: flex-end;
}

/* Zakulacení schválně sdílí --stm-radius s kartou i rámečkem, aby cedulka
   v rohu kopírovala tvar fotky pod sebou. */
.stm-card__num {
	display: inline-block;
	min-width: 1.8em;
	padding: 0.12em 0.35em 0.2em;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-num-bg, #2f313a);
	color: var(--stm-num-fg, #ffdd40);
	font-size: var(--stm-num-size, 0.85em);
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Jméno */

/* Tmavá plocha kryje celou cedulku; naklonění ukrojí jen proužek nahoře,
   takže text je vždy celý na tmavém podkladu.

   Dřív ten proužek dělal gradient a jeho hloubka se počítala v procentech
   gradientové osy, tedy i z délky cedulky: čím delší jméno, tím hlouběji
   se šikmý řez u pravého okraje zakousl. Při vyšším naklonění ukrojil
   klidně půlku výšky a spolkl horní části písmen včetně háčků a čárek.

   Teď je hloubka řezu daná písmem cedulky, ne její délkou, a horní
   odsazení ji vždycky pokryje s rezervou. Krátké i dlouhé jméno tak má
   stejně výrazný řez a text zůstává celý na tmavé ploše při jakémkoli
   naklonění — cedulka místo ukusování textu naroste nahoru. */
/* --stm-fit-max je podíl šířky karty, který cedulka smí zabrat, než ji
   auto-fit začne zmenšovat. Výchozí hodnota je tu proto jen fallbackem:
   --stm-name-fit vypsané na kartě ji přebije ve všech rozvrženích naráz,
   takže „titulek si zmenšuje vlastní text" má jedno místo, kde se vypne. */
.stm-card__name {
	--stm-fit-max: var(--stm-name-fit, 0.7);
	--stm-fit-min: 0.6;

	/* Hloubka šikmého řezu u pravého okraje. Stejné číslo (0,4 em × míra
	   naklonění) používá i skript, když řez převádí na zaoblený tvar —
	   konstanta NAME_CUT_EM v assets/stm-team-card.js. */
	--stm-name-cut: calc(0.4em * var(--stm-tilt, 1));
	--stm-name-pad-top: max(0.5em, var(--stm-name-cut) + 0.22em);

	position: relative;
	display: inline-block;
	margin: 0;
	padding: var(--stm-name-pad-top) 0.75em 0.5em;
	border-radius: var(--stm-radius, 4px);
	color: var(--stm-name-fg, #ffdd40);
	font-size: var(--stm-name-size, 1.35em);
	line-height: 1.2;
	white-space: nowrap;
	transform: rotate(var(--stm-rot-name, -2deg));
	transition:
		var(--stm-trans, all 0.4s ease 0s),
		filter var(--stm-glow-time, 0.4s) ease;
}

/* Plocha cedulky. Ze stejného důvodu jako u karty sedí na pseudoprvku:
   ořez tvarem na samotné cedulce by ořízl i text.

   Bez skriptu ji tvaruje `polygon()` — hloubku řezu umí CSS spočítat samo,
   protože nezávisí na výšce cedulky. Zaoblení rohů zůstává na
   `border-radius`, takže se s řezem nevylučují: řez ukrojí jen klín
   vpravo nahoře. Se skriptem `--stm-name-shape` nahradí polygon cestou,
   která zakulatí i oba rohy na šikmé hraně. */
.stm-card__name::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-name-bg, #2f313a);
	clip-path: var(
		--stm-name-shape,
		polygon(0 0, 100% var(--stm-name-cut, 0px), 100% 100%, 0 100%)
	);
}

/* ---------------------------------------------------------------- Titulek */

.stm-card__role {
	--stm-fit-max: var(--stm-role-fit, 0.5);
	--stm-fit-min: 0.6;
	display: inline-block;
	padding: 0.35em 0.75em 0.5em;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-role-bg, #ffdd40);
	color: var(--stm-role-fg, #2f313a);
	font-size: var(--stm-role-size, 0.75em);
	font-weight: bold;
	line-height: 1.25;
	white-space: nowrap;
	transform: rotate(var(--stm-rot-role, 3deg));
	transition:
		var(--stm-trans, all 0.4s ease 0s),
		filter var(--stm-glow-time, 0.4s) ease;
}

.stm-card:hover .stm-card__name,
.stm-card:hover .stm-card__role {
	transform: rotate(0deg);
}

/* -------------------------------------------------------------------- Tělo */

.stm-card__desc {
	color: var(--stm-desc-fg, #2f313a);
	transition: filter var(--stm-glow-time, 0.4s) ease;
}

.stm-card__desc p {
	margin: 0 0 0.75em;
}

.stm-card__desc p:last-child {
	margin-bottom: 0;
}

.stm-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.75em;
}

.stm-card__tag {
	display: inline-block;
	padding: 0.15em 0.6em 0.3em;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-tag-bg, #2f313a);
	color: var(--stm-tag-fg, #ffdd40);
	font-size: var(--stm-tag-size, 0.8em);
	line-height: 1.5;
	white-space: nowrap;
	transition: filter var(--stm-glow-time, 0.4s) ease;
}

.stm-card__link-wrap {
	margin-top: 0.75em;
}

.stm-card__link {
	display: inline-block;
	padding: 0.1em 0.5em 0.35em;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-link-bg, #2f313a);
	color: var(--stm-link-fg, #ffdd40);
	text-decoration: none;
	transition:
		var(--stm-trans, all 0.4s ease 0s),
		filter var(--stm-glow-time, 0.4s) ease;
}

.stm-card__link:hover,
.stm-card__link:focus {
	background: var(--stm-accent, #ffdd40);
	color: var(--stm-dark, #2f313a);
	font-weight: bold;
}

.stm-card a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------- Rozsvícení textů při najetí

   Karta při najetí myší dostane stín a texty tím můžou ztratit na
   čitelnosti. Tahle sekce umí kterýkoli z pěti textových prvků při najetí
   projasnit — nebo naopak ztmavit, což na světlé kartě s tmavým písmem
   čitelnosti pomáhá víc.

   Dělá to `filter: brightness()`, protože jako jediný funguje bez ohledu na
   to, jakou barvu si uživatel nastavil: nemusí se nikde dopočítávat nová
   barva a přechod se plynule animuje. U cedulek se rozsvítí i jejich
   podklad, protože filtr platí na celý prvek včetně pseudoprvku s plochou.

   Míru nese --stm-glow (1 = beze změny), délku přechodu --stm-glow-time;
   ta je zvlášť právě proto, aby šlo rozsvícení ladit nezávisle na zbytku
   hover choreografie, která si drží svých 0,4 s z --stm-trans.

   Je-li míra 1, modul třídy níže vůbec nevypíše. Na prvky se pak nedostane
   ani neutrální filtr a vykreslování textu zůstane úplně netknuté — proto
   se u existujících karet po aktualizaci nemá co změnit.
   ---------------------------------------------------------------------- */

.stm-card--glow-name:hover .stm-card__name,
.stm-card--glow-role:hover .stm-card__role,
.stm-card--glow-desc:hover .stm-card__desc,
.stm-card--glow-tags:hover .stm-card__tag,
.stm-card--glow-link:hover .stm-card__link {
	filter: brightness(var(--stm-glow, 1));
}

/* ==========================================================================
   ROZVRŽENÍ 1 — Klasické (předloha)
   Fotka obtéká vlevo a přečnívá, obě cedulky visí nad horní hranou.
   ========================================================================== */

.stm-card--classic .stm-card__thumb {
	float: left;
	margin-left: -3em;
	margin-right: var(--stm-gap, 1.25em);
}

.stm-card--classic.stm-card--right {
	text-align: right;
}

.stm-card--classic.stm-card--right .stm-card__thumb {
	float: right;
	margin-left: 2em;
	margin-right: -3em;
	transform: rotate(calc(var(--stm-rot-thumb, -4deg) * -1));
	--stm-frame-angle: calc(90deg - 4deg * var(--stm-tilt));
}

.stm-card--classic.stm-card--right:hover .stm-card__thumb {
	transform: rotate(calc(var(--stm-rot-thumb, -4deg) * -0.25));
}

.stm-card--classic .stm-card__name {
	position: absolute;
	top: 0;
	left: calc(var(--stm-thumb-w, var(--stm-thumb, 13vmin)) * 0.7);
	margin-top: -1.15em;
	transform-origin: left bottom;
	z-index: 2;
}

.stm-card--classic.stm-card--right .stm-card__name {
	left: auto;
	right: calc(var(--stm-thumb-w, var(--stm-thumb, 13vmin)) * 0.7);
	transform: rotate(calc(var(--stm-rot-name, -2deg) * -1));
	transform-origin: right bottom;
}

.stm-card--classic .stm-card__role {
	position: absolute;
	top: -1.5em;
	right: 4em;
	z-index: 3;
}

.stm-card--classic.stm-card--right .stm-card__role {
	right: auto;
	left: 4em;
	transform: rotate(calc(var(--stm-rot-role, 3deg) * -1));
}

.stm-card--classic .stm-card__body {
	padding: 1.25em 2em 0.5em;
	overflow: hidden;
}

.stm-card--classic.stm-card--right .stm-card__tags {
	justify-content: flex-end;
}

/* ==========================================================================
   ROZVRŽENÍ 2 — Banner
   Fotka přes celou výšku karty, zarovnaná k hraně. Obsah vedle ní.
   ========================================================================== */

.stm-card--banner {
	display: grid;
	grid-template-columns: var(--stm-photo-w, 34%) 1fr;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"thumb role"
		"thumb name"
		"thumb body";
	align-items: start;
	column-gap: var(--stm-gap, 1.25em);
	padding: 0;
	overflow: hidden;
}

.stm-card--banner.stm-card--right {
	grid-template-columns: 1fr var(--stm-photo-w, 34%);
	grid-template-areas:
		"role  thumb"
		"name  thumb"
		"body  thumb";
	text-align: right;
}

/* Banner si poměr rámečku neurčuje sám: šířku dává --stm-photo-w a výšku
   celá karta, takže oba násobitele tvaru tady schválně nic neznamenají.
   Výřez a zarovnání fotky uvnitř ovšem platí i tady — a právě v Banneru
   jsou nejpotřebnější, protože rámeček je vždycky vysoký přes celou kartu. */
.stm-card--banner .stm-card__thumb {
	--stm-thumb-pad: 0px;

	grid-area: thumb;
	width: 100%;
	height: 100%;
	min-height: 100%;
	align-self: stretch;
	margin: 0;
	padding: 0;
	border-radius: 0;
	transform: none;
	background: var(--stm-frame, #2f313a);
}

.stm-card--banner:hover .stm-card__thumb {
	--stm-thumb-pad: 0px;

	padding: 0;
	transform: none;
}

.stm-card--banner .stm-card__thumb img {
	border-radius: 0;
	min-height: 100%;
}

.stm-card--banner .stm-card__role {
	grid-area: role;
	justify-self: start;
	margin: 1.25em 1.5em 0 0;
}

.stm-card--banner.stm-card--right .stm-card__role {
	justify-self: end;
	margin: 1.25em 0 0 1.5em;
}

.stm-card--banner .stm-card__name {
	grid-area: name;
	justify-self: start;
	margin: 0.5em 1.5em 0 0;
}

.stm-card--banner.stm-card--right .stm-card__name {
	justify-self: end;
	margin: 0.5em 0 0 1.5em;
}

.stm-card--banner .stm-card__body {
	grid-area: body;
	padding: 0.75em 1.5em 1.5em 0;
}

.stm-card--banner.stm-card--right .stm-card__body {
	padding: 0.75em 0 1.5em 1.5em;
}

.stm-card--banner.stm-card--right .stm-card__tags {
	justify-content: flex-end;
}

/* ==========================================================================
   ROZVRŽENÍ 3 — Placaté (dva řádky)
   Fotka vlevo přes obě řádky, nahoře jméno a titulek vedle sebe, dole text.
   ========================================================================== */

.stm-card--flat {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas:
		"thumb name role"
		"thumb body body";
	align-items: center;
	column-gap: var(--stm-gap, 1.25em);
	row-gap: 0.5em;
	padding: 1em 1.5em;
}

.stm-card--flat.stm-card--right {
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		"role name thumb"
		"body body thumb";
	text-align: right;
}

.stm-card--flat .stm-card__thumb {
	grid-area: thumb;
	align-self: center;
}

.stm-card--flat .stm-card__name {
	grid-area: name;
	justify-self: start;
}

.stm-card--flat.stm-card--right .stm-card__name {
	justify-self: end;
}

.stm-card--flat .stm-card__role {
	grid-area: role;
	justify-self: start;
}

.stm-card--flat.stm-card--right .stm-card__role {
	justify-self: end;
}

.stm-card--flat .stm-card__body {
	grid-area: body;
	align-self: start;
}

.stm-card--flat.stm-card--right .stm-card__tags {
	justify-content: flex-end;
}

/* ==========================================================================
   ROZVRŽENÍ 3b — Placaté V2 (dva řádky, hlavička v jedné lince)
   Jméno → titulek → štítky těsně za sebou v jedné lince, pod nimi text.

   Štítky jsou v markupu uvnitř těla, protože všechna rozvržení sdílejí jeden
   markup. Aby mohly nahoru k titulku a popis zůstal pod nimi, tělo se tady
   rozpustí přes `display: contents` — jeho děti se stanou přímými položkami
   mřížky. Do markupu ani do obou rendererů se tím nemusí sahat.

   Vodorovné rozestupy drží `column-gap` na mřížce, ne marginy na cedulkách:
   `em` v proměnné se totiž vyhodnocuje až v místě použití, takže stejné
   --stm-gap by na jméně (1,35em) vyšlo jinak než na titulku (0,75em) a mezery
   by nebyly stejné. Na mřížce se počítají z písma karty, tedy jednotně.
   Mezera fotka–jméno má zůstat velká (--stm-gap), proto ji fotka dorovná
   marginem o zbytek do --stm-gap.

   Nulový `row-gap` znamená, že prázdný řádek odkazu (když odkaz není
   vyplněný) nepřidá dolů ani pixel; svislé rozestupy dělají marginy.
   ========================================================================== */

.stm-card--flat2 {
	/* Cedulky jsou proti sobě natočené, takže při větším naklonění potřebují
	   o kousek víc místa, aby se jejich rohy nedotýkaly. */
	--stm-gap-inline: calc(0.45em + 0.12em * var(--stm-tilt, 1));

	display: grid;
	grid-template-columns: auto auto auto minmax(0, 1fr);
	grid-template-areas:
		"thumb name role tags"
		"thumb desc desc desc"
		"thumb link link link";
	align-items: center;
	column-gap: var(--stm-gap-inline);
	row-gap: 0;
	padding: 0.65em 1.35em;
}

.stm-card--flat2.stm-card--right {
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	grid-template-areas:
		"tags role name thumb"
		"desc desc desc thumb"
		"link link link thumb";
	text-align: right;
}

.stm-card--flat2 .stm-card__body {
	display: contents;
}

/* Fotka má vlastní velikost písma 1em, takže se v jejím marginu obě proměnné
   vyhodnotí z písma karty — mezera fotka–jméno tak vyjde přesně --stm-gap. */
.stm-card--flat2 .stm-card__thumb {
	grid-area: thumb;
	align-self: center;
	margin-right: calc(var(--stm-gap, 1.25em) - var(--stm-gap-inline));
}

.stm-card--flat2.stm-card--right .stm-card__thumb {
	margin-right: 0;
	margin-left: calc(var(--stm-gap, 1.25em) - var(--stm-gap-inline));
}

/* Tři cedulky vedle sebe se do šířky karty vejdou jen s přísnějšími mezemi,
   než má výchozí jednořádková hlavička; auto-fit v JS je čte odsud. */
.stm-card--flat2 .stm-card__name {
	--stm-fit-max: var(--stm-name-fit, 0.42);

	grid-area: name;
	justify-self: start;
}

.stm-card--flat2.stm-card--right .stm-card__name {
	justify-self: end;
}

.stm-card--flat2 .stm-card__role {
	--stm-fit-max: var(--stm-role-fit, 0.26);

	grid-area: role;
	justify-self: start;
}

.stm-card--flat2.stm-card--right .stm-card__role {
	justify-self: end;
}

/* `min-width: 0` je tu jako záchranná brzda. Bez něj má položka mřížky
   min-width: auto, tedy nejmenší možnou šířku danou nejširším štítkem —
   sloupec se kvůli němu roztáhne, mřížka přeroste kartu a štítky vylezou
   ven, kde je překryje sousední modul. S nulou se sloupec smí smrsknout
   a štítky se místo toho zalomí do víc řádků. Uplatní se i tehdy, když
   skript neběží; ten pak řeší už jen estetiku, ne přetečení. */
.stm-card--flat2 .stm-card__tags {
	grid-area: tags;
	justify-self: start;
	min-width: 0;
	margin-top: 0;
}

.stm-card--flat2.stm-card--right .stm-card__tags {
	justify-self: end;
	justify-content: flex-end;
}

/* Popis i odkaz začínají na stejné svislici jako cedulka jména. */
.stm-card--flat2 .stm-card__desc {
	grid-area: desc;
	align-self: start;
	margin-top: 0.3em;
}

.stm-card--flat2 .stm-card__link-wrap {
	grid-area: link;
	align-self: start;
	margin-top: 0.35em;
}

/* ------------------------- Placaté V2 se štítky zalomenými pod hlavičku

   Do jedné linky patří jméno, titulek i štítky — jenže v úzkém sloupci se
   tam prostě nevejdou. Zmenšovat je donekonečna nejde: jméno a titulek už
   auto-fit drží na 42 % a 26 % šířky karty, takže na štítky zbývá zlomek,
   do kterého se delší obec nevejde.

   Místo přetečení nebo drolení textu do svislého sloupečku se proto štítky
   přesunou na vlastní řádek hned pod hlavičku. Rozvržení tím zůstává svoje:
   fotka pořád stojí vlevo přes celou výšku, jméno a titulek pořád tvoří
   jednu linku vedle sebe a pod nimi pokračuje popis. Ubyde jen ta jedna
   linka navíc, o kterou nebylo místo.

   Skript k tomu ještě štítky o kousek zmenší (--stm-tag-fit), aby bylo na
   první pohled poznat, že je to doplňková informace, ne třetí cedulka
   stejné váhy jako jméno a titulek.

   Třídu přidává assets/stm-team-card.js až po změření; bez skriptu zůstane
   v platnosti jednořádková hlavička s brzdou `min-width: 0` výše.
   ------------------------------------------------------------------- */

.stm-card--stack-tags {
	/* Podíl velikosti písma štítků po zalomení. Skript ho čte a výslednou
	   velikost zapisuje inline, aby přebil i typografii nastavenou v Divi. */
	--stm-tag-fit: 0.85;
}

.stm-card--flat2.stm-card--stack-tags {
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas:
		"thumb name role"
		"thumb tags tags"
		"thumb desc desc"
		"thumb link link";
}

.stm-card--flat2.stm-card--stack-tags.stm-card--right {
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"role name thumb"
		"tags tags thumb"
		"desc desc thumb"
		"link link thumb";
}

.stm-card--flat2.stm-card--stack-tags .stm-card__tags {
	margin-top: 0.3em;
}

.stm-card--flat2.stm-card--stack-tags .stm-card__desc {
	margin-top: 0.35em;
}

/* ==========================================================================
   ROZVRŽENÍ 4 — Svislé (klasická karta)
   Fotka nahoře, pod ní vystředěný obsah.
   ========================================================================== */

.stm-card--vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5em;
}

.stm-card--vertical .stm-card__thumb {
	order: 1;
	margin-bottom: 0.9em;
}

.stm-card--vertical .stm-card__name {
	order: 2;
	margin-bottom: 0.4em;
}

.stm-card--vertical .stm-card__role {
	order: 3;
	margin-bottom: 0.9em;
}

.stm-card--vertical .stm-card__body {
	order: 4;
	width: 100%;
}

.stm-card--vertical .stm-card__tags,
.stm-card--vertical .stm-card__link-wrap {
	justify-content: center;
	text-align: center;
}

/* ==========================================================================
   SVISLÉ ODSAZENÍ UVNITŘ KARTY

   Každé rozvržení si výše nastavuje `padding` zkratkou, takže by ho jedna
   proměnná na .stm-card nepřebila — zkratka je specifičtější a stojí až za ní.
   Proto se svislá polovina odsazení opakuje tady, longhandem a s výchozí
   hodnotou každého rozvržení jako fallbackem: nenastavená proměnná znamená
   přesně to, co platilo dosud, nastavená přebije všechna rozvržení naráz.

   Vodorovné odsazení schválně zůstává, kde bylo. Ubírat ho by kartu nezúžilo
   ani o pixel (šířku dává sloupec), jen by text přilepilo k hraně.

   Banner tu není: má odsazení nulové a o vnitřní okraje se mu stará tělo,
   protože fotka sahá přes celou výšku karty.
   ========================================================================== */

.stm-card--classic {
	padding-block: var(--stm-pad-y, 0.73em);
}

.stm-card--flat {
	padding-block: var(--stm-pad-y, 1em);
}

.stm-card--flat2 {
	padding-block: var(--stm-pad-y, 0.65em);
}

.stm-card--vertical {
	padding-block: var(--stm-pad-y, 1.5em);
}

/* ==========================================================================
   FOTKA MIMO RÁMEČEK — přepínač „Fotka musí být v rámečku" vypnutý

   Zapnutý přepínač (výchozí) nic nemění, tahle sekce se vůbec neuplatní.

   Vypnutý přepínač dělá dvě věci naráz, obojí jen zápornými marginy:

   a) Svislé marginy −50 % výšky srazí příspěvek fotky do výšky řádku na nulu.
      O výšce karty pak rozhoduje výhradně text a fotka může být klidně vyšší
      než karta — přeteče symetricky nahoru i dolů (align-items: center).
      Tohle je ten rozdíl proti „skrčkovi": fotku už nesvazuje výška obsahu.

   b) Záporný margin na straně, kde fotka stojí, ji vysune ven za hranu karty.
      Protože margin ukrajuje z okraje karty, malý přesah se nejdřív schová do
      vnitřního odsazení a teprve větší vyleze ven — nemusí se dopočítávat.

   Fotka zůstává v mřížce, takže si sloupec dál drží svou šířku a text do ní
   nezateče. Kdyby byla absolutně pozicovaná, musela by se šířka sloupce
   dopočítávat z odsazení každého rozvržení zvlášť.

   Klasické a Banner se schválně nemění: v Klasickém fotka přečnívá odjakživa
   (je to jeho princip) a v Banneru vyplňuje celou výšku karty. Přepínač se
   proto týká Placatého, Placatého V2 a Svislého.

   Celá sekce běží až od 641 px. Pod tím se karta skládá do sloupce, kde by
   přesah neměl smysl — a protože se pravidla vůbec neuplatní, nemusí je
   mobilní sekce nijak přebíjet.
   ========================================================================== */

@media (min-width: 641px) {
	.stm-card--photo-free.stm-card--flat .stm-card__thumb,
	.stm-card--photo-free.stm-card--flat2 .stm-card__thumb {
		margin-top: calc(var(--stm-thumb-h, var(--stm-thumb, 13vmin)) * -0.5);
		margin-bottom: calc(var(--stm-thumb-h, var(--stm-thumb, 13vmin)) * -0.5);
	}

	.stm-card--photo-free.stm-card--flat.stm-card--left .stm-card__thumb,
	.stm-card--photo-free.stm-card--flat2.stm-card--left .stm-card__thumb {
		margin-left: calc(var(--stm-thumb-w, var(--stm-thumb, 13vmin)) * var(--stm-overhang, 0.25) * -1);
	}

	.stm-card--photo-free.stm-card--flat.stm-card--right .stm-card__thumb,
	.stm-card--photo-free.stm-card--flat2.stm-card--right .stm-card__thumb {
		margin-right: calc(var(--stm-thumb-w, var(--stm-thumb, 13vmin)) * var(--stm-overhang, 0.25) * -1);
	}

	/* Svislé má fotku nahoře, takže „ven" znamená nad horní hranu karty. */
	.stm-card--photo-free.stm-card--vertical .stm-card__thumb {
		margin-top: calc(var(--stm-thumb-h, var(--stm-thumb, 13vmin)) * var(--stm-overhang, 0.25) * -1);
	}
}

/* ------------------------------------------------------------ Přístupnost */

@media (prefers-reduced-motion: reduce) {
	/* Hvězdička pseudoprvky nechytá, plocha karty a cedulky proto zvlášť. */
	.stm-card,
	.stm-card *,
	.stm-card::before,
	.stm-card__name::before {
		transition: none !important;
	}

	.stm-card:hover {
		transform: scale(var(--stm-scale, 0.85));
	}
}

/* ----------------------------------------------------------- Malé displeje */

@media (max-width: 640px) {
	.stm-card,
	.stm-card--right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		grid-template-areas: none;
		transform: none;
		padding: var(--stm-pad-y, 1.25em) 1.25em;
		margin: 1em 0;
		background: var(--stm-card-bg, #ffdd40);
	}

	/* Ve sloupci se hrana nekloní, takže plocha nepotřebuje ani tvarování,
	   ani pseudoprvek — barvu si karta výše nastavuje sama. */
	.stm-card::before {
		display: none;
	}

	.stm-card:hover {
		transform: none;
	}

	.stm-card .stm-card__thumb {
		order: 1;
		float: none;
		width: calc(22vmin * var(--stm-thumb-fw, 1));
		height: calc(22vmin * var(--stm-thumb-fh, 1));
		min-height: 0;
		margin: 0 0 0.9em;
	}

	/* `relative` místo `static` jen proto, aby plocha cedulky (pseudoprvek
	   s inset: 0) měla dál co obkreslit. Bez posunů se chová stejně jako
	   statická, takže z Klasického se cedulka do sloupce vrátí beze změny. */
	.stm-card .stm-card__name {
		order: 2;
		position: relative;
		margin: 0 0 0.4em;
		left: auto;
		right: auto;
		white-space: normal;
	}

	.stm-card .stm-card__role {
		order: 3;
		position: static;
		margin: 0 0 0.9em;
		left: auto;
		right: auto;
		white-space: normal;
	}

	.stm-card .stm-card__body {
		order: 4;
		width: 100%;
		padding: 0;
	}

	.stm-card .stm-card__tags {
		justify-content: flex-start;
	}

	/* Placaté V2 rozpouští tělo do mřížky. Ve svislém sloupci musí být zase
	   blok, jinak se popis, štítky a odkaz stanou přímými položkami flexboxu
	   a s výchozím order:0 by přeskočily před fotku. */
	.stm-card--flat2 .stm-card__body {
		display: block;
	}

	.stm-card--flat2 .stm-card__desc {
		margin-top: 0;
	}

	.stm-card--flat2 .stm-card__tags {
		margin-top: 0.75em;
	}

	.stm-card--flat2 .stm-card__link-wrap {
		margin-top: 0.75em;
	}

	/* ------------------------------- Úsporné rozvržení na úzkých displejích

	   Sloupec pod sebou je bezpečný, ale plýtvá místem: vedle fotky i vedle
	   obou cedulek zůstává prázdno přes půl šířky karty a karta kvůli tomu
	   naroste do zbytečné výšky.

	   Když se vedle fotky vejde ještě rozumný kus textu, skript přidá
	   .stm-card--compact a karta se složí do dvou sloupců: fotka vlevo,
	   vedle ní jméno, titulek a štítky pod sebou, popis a odkaz přes celou
	   šířku pod tím. Blíž je to i původní předloze, kde fotka odjakživa
	   stojí bokem.

	   Rozhoduje se měřením, ne pevným zlomem: záleží na šířce sloupce, do
	   kterého je modul vložený, i na velikosti fotky, kterou si uživatel
	   nastavil. Nevejde-li se, zůstane sloupec pod sebou.

	   Svislé rozvržení je z toho vyňaté schválně — fotka nahoře a
	   vystředěný obsah jsou jeho celý smysl, otočit ho na bok by byl zásah
	   do uživatelova záměru, ne jeho naplnění.
	   ------------------------------------------------------------------ */

	.stm-card--compact,
	.stm-card--compact.stm-card--right {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"thumb role"
			"thumb tags"
			"desc  desc"
			"link  link";
		align-items: start;
		align-content: start;
		column-gap: var(--stm-gap, 1.25em);
		row-gap: 0;
		text-align: left;
	}

	/* Popis, štítky i odkaz musí spadnout přímo do mřížky karty, jinak by
	   se tělo chovalo jako jeden blok a do sloupce vedle fotky by se nedalo
	   rozdělit. */
	.stm-card--compact .stm-card__body {
		display: contents;
	}

	.stm-card--compact .stm-card__thumb {
		grid-area: thumb;
		align-self: start;
		margin: 0;
	}

	.stm-card--compact .stm-card__name {
		grid-area: name;
		justify-self: start;
		margin: 0 0 0.35em;
	}

	.stm-card--compact .stm-card__role {
		grid-area: role;
		justify-self: start;
		margin: 0 0 0.45em;
	}

	.stm-card--compact .stm-card__tags {
		grid-area: tags;
		justify-self: start;
		min-width: 0;
		margin: 0;
	}

	.stm-card--compact .stm-card__desc {
		grid-area: desc;
		margin-top: 0.85em;
	}

	.stm-card--compact .stm-card__link-wrap {
		grid-area: link;
		margin-top: 0.75em;
	}
}

/* ==========================================================================
   Odznak stavu presetu

   Vykresluje se jen v builderu — `edit` renderer ho přidá do karty, frontendový
   PHP renderer o něm neví. Proto tu není nic, co by se muselo na ostrém webu
   potlačovat.
   ========================================================================== */

.stm-preset-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 20;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f0f0f1;
	color: #50575e;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.stm-preset-badge--clean {
	background: #d4f4de;
	color: #00733f;
}

.stm-preset-badge--modified {
	background: #fcf0d8;
	color: #8a5b00;
}

.stm-preset-badge--stale {
	background: #d8ebfb;
	color: #0b5e9c;
}

.stm-preset-badge--modified_stale,
.stm-preset-badge--missing {
	background: #fbdada;
	color: #b32d2e;
}

/* ==========================================================================
   DETAIL ČLENA TÝMU — tlačítko a pop-up okno

   Přibylo ve verzi 2.2.0 a je celé podmíněné: dokud je „Dlouhý popis (pop-up)"
   prázdný, renderer nevypíše ani tlačítko, ani okno, takže se na existujících
   kartách nemá co změnit. Celá tahle sekce jsou proto jen nové třídy — žádné
   pravidlo výše se neupravuje.

   Okno je nativní <dialog> otevíraný přes showModal(). Není to rozmar:
   .stm-card má transform: scale(), a transformovaný předek zakládá vztažný
   rámec pro position: fixed. Obyčejný <div> s fixed by se tedy nepřilepil na
   okno prohlížeče, ale na kartu — a v Placatém V2 by ho navíc ořízla mřížka.
   Prvek otevřený jako showModal() se přesune do horní vrstvy (top layer), kde
   na něj předkovy transformace, ořezy ani vrstvící kontexty nedosáhnou.

   Zároveň zůstává v DOM uvnitř .stm-card, takže dědí všechny její proměnné —
   barvy pop-upu se tím berou z nastavení karty samy od sebe, bez jediného
   dopočítávání. Nastavení pop-upu jen některé z nich přebíjí inline stylem.

   Zavřený <dialog> má z prohlížeče display: none, proto se v Placatém V2 ani
   v úsporném rozvržení nestane položkou mřížky a nezabere ani pixel. Kvůli
   tomu tu nikde není `display` na samotné .stm-card__modal, vždycky jen na
   .stm-card__modal[open] — jinak by se výchozí skrytí přebilo a okno by se
   vysypalo do karty.
   ========================================================================== */

/* ------------------------------------------------------- Tlačítko na kartě */

.stm-card__more-wrap {
	margin-top: 0.75em;
}

/* Placaté V2 a úsporné rozvržení rozpouštějí tělo karty do mřížky karty
   (display: contents), takže se obal tlačítka stane položkou mřížky. Vlastní
   oblast v šabloně nemá — s `grid-column: 1 / -1` si vyžádá celý řádek a
   automatické umístění mu ho založí až pod poslední obsazený. Prázdný řádek
   nevzniká, protože bez tlačítka tu položka vůbec není. */
.stm-card--flat2 .stm-card__more-wrap,
.stm-card--compact .stm-card__more-wrap {
	grid-column: 1 / -1;
}

.stm-card--vertical .stm-card__more-wrap {
	text-align: center;
}

.stm-card__more {
	display: inline-block;
	padding: 0.1em 0.7em 0.35em;
	border: 0;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-more-bg, var(--stm-link-bg, #2f313a));
	color: var(--stm-more-fg, var(--stm-link-fg, #ffdd40));
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	text-decoration: none;
	cursor: pointer;
	transition:
		var(--stm-trans, all 0.4s ease 0s),
		filter var(--stm-glow-time, 0.4s) ease;
}

.stm-card__more:hover,
.stm-card__more:focus {
	background: var(--stm-more-hover-bg, var(--stm-accent, #ffdd40));
	color: var(--stm-more-hover-fg, var(--stm-dark, #2f313a));
	font-weight: bold;
}

.stm-card__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Rozsvícení při najetí sdílí přepínač s odkazem — tlačítko je z pohledu
   karty totéž co odkaz, jen vede dovnitř místo ven. */
.stm-card--glow-link:hover .stm-card__more {
	filter: brightness(var(--stm-glow, 1));
}

/* ---------------------------------------------------------- Okno s detailem */

.stm-card__modal {
	/* Rozměry okna. Nastavení je přebíjí inline stylem na tomtéž prvku, takže
	   se tu píšou jen výchozí hodnoty. */
	--stm-modal-w: 720px;
	--stm-modal-pad: 1.75em;
	--stm-modal-photo: 7.5em;

	/* Barvy. Prázdné nastavení znamená „vezmi z karty" a přesně tak to tady
	   je zapsané — proměnné karty jsou k dispozici, protože okno je pořád
	   jejím potomkem, i když se kreslí v horní vrstvě. */
	--stm-modal-bg: var(--stm-card-bg, #ffdd40);
	--stm-modal-fg: var(--stm-desc-fg, #2f313a);
	--stm-modal-overlay: rgba(20, 21, 26, 0.62);

	/* Jednotlivé prvky okna. Každý řádek popisuje barvu, kterou prvek bral i
	   předtím, než šla nastavit zvlášť — nadpis a křížek z barev okna,
	   cedulka titulku a plocha za fotkou z karty. Nevyplněné nastavení tedy
	   nechává vzhled beze změny.

	   Řetězení var() se vyhodnocuje až v místě použití, ne tady, takže
	   --stm-modal-title-fg zachytí i hodnotu, kterou --stm-modal-fg přebije
	   inline styl z nastavení. */
	--stm-modal-title-fg: var(--stm-modal-fg);
	--stm-modal-role-bg: var(--stm-role-bg, #ffdd40);
	--stm-modal-role-fg: var(--stm-role-fg, #2f313a);
	--stm-modal-close-bg: var(--stm-modal-fg);
	--stm-modal-close-fg: var(--stm-modal-bg);
	--stm-modal-photo-bg: var(--stm-frame, #2f313a);

	/* Rámeček okna. Nulová tloušťka se počítá stejně jako `border: 0`, takže
	   je výchozí stav shodný s tím dosavadním do posledního pixelu. */
	--stm-modal-border: transparent;
	--stm-modal-border-w: 0;

	width: min(92vw, var(--stm-modal-w, 720px));
	max-width: 92vw;
	max-height: 88vh;
	padding: 0;
	/* Posouvá se vnitřek, ne okno samo — jinak by křížek odjel s textem
	   nahoru. Zaoblení rohů proto musí ořezávat okno, aby dlouhý text
	   nevykoukl za zaoblenou hranou. */
	overflow: hidden;
	border: var(--stm-modal-border-w, 0) solid var(--stm-modal-border, transparent);
	border-radius: calc(var(--stm-radius, 4px) * 2);
	background: var(--stm-modal-bg);
	color: var(--stm-modal-fg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	text-align: left;
}

/* Skrytí zavřeného okna je jinak jen ve stylopisu prohlížeče. Zopakované
   natvrdo pro případ, že by ho přebilo cizí pravidlo na `dialog`. */
.stm-card__modal:not([open]) {
	display: none;
}

.stm-card__modal[open] {
	display: block;
}

.stm-card__modal::backdrop {
	background: var(--stm-modal-overlay, rgba(20, 21, 26, 0.62));
}

/* Záložní cesta pro prohlížeč bez showModal(). Skript v ní okno přesune na
   konec <body>, takže transform karty už nemá co pokazit, a překryv nakreslí
   pseudoprvek — ::backdrop bez showModal() neexistuje. */
.stm-card__modal--fallback[open] {
	position: fixed;
	z-index: 100000;
	inset: 0;
	margin: auto;
}

.stm-card__modal--fallback[open]::before {
	position: fixed;
	z-index: -1;
	inset: 0;
	background: var(--stm-modal-overlay, rgba(20, 21, 26, 0.62));
	content: "";
}

/* Svislé usazení okna. Výchozí je na střed, což při showModal() obstará
   `margin: auto` z prohlížeče; volba „nahoře" jen spodní okraj uvolní. */
.stm-card__modal--top {
	margin-top: 5vh;
	margin-bottom: auto;
}

.stm-card__modal-inner {
	display: grid;
	max-height: 88vh;
	align-items: start;
	overflow: auto;
	gap: 0 var(--stm-gap, 1.25em);
	padding: var(--stm-modal-pad, 1.75em);
}

.stm-card__modal-close {
	position: absolute;
	top: 0.55em;
	right: 0.55em;
	z-index: 2;
	display: flex;
	width: 1.9em;
	height: 1.9em;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--stm-modal-close-bg, #2f313a);
	color: var(--stm-modal-close-fg, #ffdd40);
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.stm-card__modal-close:hover,
.stm-card__modal-close:focus {
	opacity: 1;
}

.stm-card__modal-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.stm-card__modal-media {
	grid-area: media;
	align-self: start;
}

.stm-card__modal-photo {
	overflow: hidden;
	width: var(--stm-modal-photo, 7.5em);
	height: calc(var(--stm-modal-photo, 7.5em) * var(--stm-thumb-fh, 1) / var(--stm-thumb-fw, 1));
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-modal-photo-bg, #2f313a);
}

.stm-card__modal-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--stm-img-fit, cover);
	object-position: var(--stm-img-pos, 50% 50%);
	/* Fotka v detailu zůstává barevná i tam, kde je na kartě černobílá:
	   v okně jde o obsah, ne o grafický efekt. */
	filter: none;
}

.stm-card__modal-head {
	grid-area: head;
	align-self: center;
	min-width: 0;
}

.stm-card__modal-role {
	display: inline-block;
	margin-bottom: 0.45em;
	padding: 0.15em 0.7em 0.3em;
	border-radius: var(--stm-radius, 4px);
	background: var(--stm-modal-role-bg, #ffdd40);
	color: var(--stm-modal-role-fg, #2f313a);
	font-size: var(--stm-role-size, 0.75em);
	line-height: 1.5;
}

.stm-card__modal-title {
	margin: 0;
	color: var(--stm-modal-title-fg, #2f313a);
	font-size: var(--stm-name-size, 1.35em);
	line-height: 1.25;
}

.stm-card__modal-text {
	grid-area: text;
	min-width: 0;
}

.stm-card__long {
	color: var(--stm-modal-fg, #2f313a);
}

.stm-card__long p {
	margin: 0 0 0.85em;
}

.stm-card__long p:last-child {
	margin-bottom: 0;
}

.stm-card__long ul,
.stm-card__long ol {
	margin: 0 0 0.85em;
	padding-left: 1.4em;
}

.stm-card__long a {
	color: inherit;
}

/* Štítky a odkaz v okně používají tytéž třídy jako na kartě, takže si berou
   i typografii nastavenou v Divi. Liší se jen odsazením. */
.stm-card__modal-text .stm-card__tags {
	margin-top: 1.1em;
}

.stm-card__modal-text .stm-card__link-wrap {
	margin-top: 1.1em;
}

/* ------------------------------------------------- Rozvržení okna: prosté */

.stm-card__modal--plain .stm-card__modal-inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"text";
	row-gap: 1.1em;
}

/* --------------------------------------- Rozvržení okna: s hlavičkou nahoře */

.stm-card__modal--header .stm-card__modal-inner {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"media head"
		"text  text";
	row-gap: 1.25em;
}

/* ------------------------------------ Rozvržení okna: fotka ve vlastním sloupci */

.stm-card__modal--side .stm-card__modal-inner {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"media head"
		"media text";
	row-gap: 0.9em;
}

/* --------------------------------------- Rozvržení okna: široká fotka nahoře */

.stm-card__modal--hero .stm-card__modal-inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"media"
		"head"
		"text";
	row-gap: 1.1em;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
}

.stm-card__modal--hero .stm-card__modal-media {
	justify-self: stretch;
}

.stm-card__modal--hero .stm-card__modal-photo {
	width: 100%;
	height: var(--stm-modal-photo, 7.5em);
	border-radius: 0;
}

.stm-card__modal--hero .stm-card__modal-head,
.stm-card__modal--hero .stm-card__modal-text {
	padding-right: var(--stm-modal-pad, 1.75em);
	padding-left: var(--stm-modal-pad, 1.75em);
}

/* Bez fotky nemá smysl držet pro ni sloupec ani řádek — okno se srovná na
   jeden sloupec, ať je zvolené kterékoli rozvržení. */
.stm-card__modal--nophoto .stm-card__modal-inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"text";
	row-gap: 1.1em;
	padding: var(--stm-modal-pad, 1.75em);
}

/* -------------------------------------------------------- Malé displeje */

@media (max-width: 640px) {
	.stm-card__modal {
		--stm-modal-pad: 1.25em;

		width: 94vw;
		max-height: 90vh;
	}

	.stm-card__modal-inner {
		max-height: 90vh;
	}

	/* Ve sloupci se fotka a text vedle sebe nevejdou, takže se všechna
	   rozvržení srovnají pod sebe. Banner si ponechá fotku přes celou šířku,
	   ta v úzkém okně funguje dobře. */
	.stm-card__modal--header .stm-card__modal-inner,
	.stm-card__modal--side .stm-card__modal-inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"head"
			"text";
		row-gap: 0.9em;
	}
}

/* Uzamčení posouvání stránky pod otevřeným oknem. Třídu nasazuje i snímá
   assets/stm-team-card.js podle události `close`, která u <dialog> nastane
   i po stisku Esc — proto se nemůže stát, že by na stránce zůstala viset. */
html.stm-modal-open,
body.stm-modal-open {
	overflow: hidden;
}