/*--------------------------------------------------------------
# Výpis článků

Komponenta pro výpisy z pluginu List Category Posts. Cílí VÝHRADNĚ na markup,
který vyrábí naše šablona themes/_s/list-category-posts/lt-vypis.php - proto
vlastní třídy .vypis-clanku__*, ne .lcp_*.

Používá se na čtyřech stránkách, všude stejně (Tomášovo zadání 26. 8. 2026,
„aby ve finále vypadaly všechny stejně"):
  /pobyt-ve-tme-zkusenosti/   kategorie 12
  /blog/                      kategorie 1
  /blog-o-terapii-tmou/       kategorie 1
  /fotogalerie/               kategorie 555

Vzhled je podle seznamzpravy.cz: první článek velký s fotkou přes celou šířku
a perexem, ostatní jako řádek s malým náhledem vlevo, jednou větou a tlačítkem.

Nahradilo 80-pluginy/seznam-clanku.css, který stylovalo výchozí markup pluginu
(.lcp_catlist li s max-width 47 %, .lcp_thumbnail přes celou šířku). Ten markup
už nevzniká, takže soubor zmizel - viz inc/css-zdroje.php.

Stránkování (ul.lcp_paginator) vypisuje pořád plugin a nese si vlastní
lcp_paginator.css; dorovnává se na konci tohohle souboru.
--------------------------------------------------------------*/

/*
 * Odsazení nahoře a dole.
 *
 * Shortcode býval do 26. 8. 2026 obalený blokem wp:group, který mu z
 * css/50-obsah.css bral padding 3em - výpis pak vycházel na 1104 px místo
 * šířky obsahu. Obal je pryč, takže si svislé odsazení musí komponenta
 * udělat sama; 48 px je přesně to, co dělal ten padding.
 */
.vypis-clanku {
	/*
	 * max-width se musí nastavit tady, ne spoléhat na `.entry-content > *`
	 * z css/30-layout.css: sekce „Podobné zkušenosti“ v single.php stojí
	 * MIMO .entry-content, takže by na ni to pravidlo nemířilo a roztáhla by
	 * se přes celé okno. Je to táž rodina jako past č. 16 (.entry-header).
	 */
	max-width: var(--sirka-obsahu);
	margin: 48px auto;
}

/*
 * Obrázky ve výpisu bez odsazení a zaoblení.
 *
 * css/60-komponenty/obrazky.css dává `.entry-content img { padding:10px;
 * border-radius:20px }` a výpis JE uvnitř .entry-content (shortcode je v obsahu
 * stránky). Bez tohohle by měl každý náhled 10px rámeček uvnitř své buňky
 * a mřížka by se rozjela. Zaoblení si komponenta dělá sama, na obalu.
 */
.vypis-clanku img {
	padding: 0;
	border-radius: 0;
	display: block;
	width: 100%;
	height: auto;
}

.vypis-clanku__media {
	display: block;
	overflow: hidden;
	border-radius: var(--lt-radius);
	/* Bez podtržení - obal obrázku, ne textový odkaz. */
	text-decoration: none;
}

/*--------------------------------------------------------------
## První článek - velký
--------------------------------------------------------------*/

/*
 * Nadpis nahoře, pod ním fotka vlevo a text vpravo.
 *
 * Zadání Tomáše 26. 8. 2026: nadpis musí být NAD fotkou („ať se neobjevuje
 * fotka bez nadpisu jen tak") a fotka má stačit na 50 % šířky. Kdyby zůstalo
 * všechno pod sebou, vedle poloviční fotky by zela díra - proto mřížka
 * a perex s tlačítkem vedle ní.
 *
 * Záhlaví přes obě půlky řeší grid-column: 1 / -1, takže se nemusí psát
 * grid-template-areas a varianta bez fotky níž stačí přepnout na jeden sloupec.
 */
.vypis-clanku__polozka--hlavni {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
	align-items: start;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(245, 241, 230, 0.18);
}

.vypis-clanku__zahlavi {
	grid-column: 1 / -1;
	margin-bottom: 20px;
}

/*
 * Bez fotky se mřížka složí do jednoho sloupce - text by jinak zabíral jen
 * levou půlku a vpravo by zbylo prázdno. Takových článků je dost: v kategorii
 * "Zkušenosti praktikujících" nemá obrázek 83 z 269, na blogu 25 z 93.
 */
.vypis-clanku__polozka--hlavni.vypis-clanku__polozka--bez-media {
	grid-template-columns: 1fr;
}

/*
 * Poměr stran 16:9.
 *
 * Náhledy jsou 1280x720, ale fallbackový obrázek z obsahu článku může mít
 * cokoli (na výšku i čtverec). aspect-ratio + object-fit drží mřížku v klidu
 * a zabrání poskakování při načítání.
 */
.vypis-clanku__polozka--hlavni .vypis-clanku__media img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vypis-clanku__polozka--hlavni .vypis-clanku__nadpis {
	font-size: 30px;
	line-height: 1.3;
	margin: 0 0 8px;
}

.vypis-clanku__polozka--hlavni .vypis-clanku__perex {
	font-size: 18px;
	line-height: 1.6;
	/* Nahoře nic: perex je první v pravém sloupci a musí lícovat s fotkou. */
	margin: 0 0 20px;
}

/*--------------------------------------------------------------
## Ostatní články - řádek s náhledem vlevo
--------------------------------------------------------------*/

/*
 * Je to <ul>, ale vizuálně seznam článků, ne odrážky.
 *
 * Selektor MUSÍ být dvoutřídný (0,2,0): `.entry-content ul { padding: revert;
 * margin: revert; padding-left: 20px }` z css/50-obsah.css je (0,1,1) a
 * samotná třída (0,1,0) by prohrála - položky pak visely o 20 px vpravo.
 * Past č. 3 z poznámky Astra -> _s.
 */
.vypis-clanku .vypis-clanku__seznam {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vypis-clanku .vypis-clanku__seznam > li {
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid rgba(245, 241, 230, 0.12);
}

.vypis-clanku .vypis-clanku__seznam > li:last-child {
	border-bottom: 0;
}

/*
 * Mřížka náhled + text.
 *
 * Grid a ne flex kvůli položkám bez obrázku: ty mají v HTML o buňku míň
 * (šablona .vypis-clanku__media vůbec nevypíše) a modifikátor --bez-media
 * níž jen přepne na jeden sloupec. Žádné prázdné místo po chybějící fotce.
 */
.vypis-clanku__polozka--radek {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 20px;
	align-items: start;
}

.vypis-clanku__polozka--radek.vypis-clanku__polozka--bez-media {
	grid-template-columns: 1fr;
}

.vypis-clanku__polozka--radek .vypis-clanku__media img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vypis-clanku__polozka--radek .vypis-clanku__nadpis {
	font-size: 20px;
	line-height: 1.35;
	margin: 0 0 6px;
}

.vypis-clanku__polozka--radek .vypis-clanku__perex {
	font-size: 15px;
	line-height: 1.55;
	margin: 8px 0 14px;
	opacity: 0.85;
}

/*--------------------------------------------------------------
## Sekce „Podobné zkušenosti“ pod článkem

Vykresluje ji _s_vypis_podobne() z inc/vypis-clanku.php do single.php.
Je to týž seznam jako výpis na stránkách, jen bez úvodní velké položky
a s vlastním nadpisem.
--------------------------------------------------------------*/

.vypis-clanku--podobne {
	padding-top: 32px;
	border-top: 1px solid rgba(245, 241, 230, 0.18);
}

.vypis-clanku__titulek {
	font-size: 24px;
	line-height: 1.3;
	font-weight: var(--nadpis-vaha);
	color: var(--ast-global-color-1);
	margin: 0 0 20px;
}

/*--------------------------------------------------------------
## Společné - nadpis, datum, tlačítko
--------------------------------------------------------------*/

/*
 * Odkazy v nadpisech bez podtržení, hover oranžový - stejně jako v menu.
 *
 * :visited je povinné všude, kde se nastavuje barva odkazu; jinak si
 * navštíveným odkazům dá prohlížeč vlastní a getComputedStyle to zatají.
 */
.vypis-clanku__nadpis a,
.vypis-clanku__nadpis a:visited {
	color: var(--ast-global-color-1);
	text-decoration: none;
}

.vypis-clanku__nadpis a:hover,
.vypis-clanku__nadpis a:focus {
	color: var(--barva-akcent);
}

.vypis-clanku__datum {
	display: block;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.55;
}

.vypis-clanku__perex {
	/* Přebíjí `p, .entry-content p { margin: 24px 0 25.6px }` z 20-zaklad.css. */
	margin-top: 8px;
}

/*
 * Tlačítko.
 *
 * Vzhled (průhledné, obrys, oranžový hover) drží .btn-transparent
 * z 60-komponenty/tlacitka.css - tady se řeší jen to, že ve výpisu má být
 * menší a nesmí se roztáhnout na celou šířku buňky.
 */
.vypis-clanku__akce {
	display: inline-block;
	margin-top: 4px;
}

.vypis-clanku__polozka--radek .vypis-clanku__akce .wp-block-button__link {
	padding: 10px 18px;
	font-size: 14px;
}

/*--------------------------------------------------------------
## Stránkování

Markup vypisuje plugin (ul.lcp_paginator > li, aktivní má .lcp_currentpage).
Jeho vlastní lcp_paginator.css se načítá před naším CSS, takže tohle vyhraje.

POZOR na max-width a `margin: … auto`: stránkování je <ul> a přímý potomek
.entry-content, takže na něj míří `.entry-content ul { padding: revert;
margin: revert; padding-left: 20px }` z css/50-obsah.css. To je (0,1,1),
kdežto vystředění `.entry-content > *:not(…)` z 30-layout.css jen (0,3,0)
s margin zkratkou - a ta by se tu shodila na nulu. Je to past č. 3
z poznámky Astra -> _s, proto se šířka i vystředění píšou natvrdo sem.
--------------------------------------------------------------*/

ul.lcp_paginator {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	max-width: var(--sirka-obsahu);
	margin: 32px auto 48px;
	padding: 0;
	border: 0;
}

.lcp_paginator li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;   /* plugin dává položkám float:left */
	list-style: none;
}

.lcp_paginator li a,
.lcp_paginator li a:visited,
.lcp_paginator li.lcp_currentpage {
	display: block;
	min-width: 40px;
	padding: 8px 10px;
	border: 1px solid rgba(245, 241, 230, 0.3);
	border-radius: var(--lt-radius);
	color: var(--barva-textu);
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
}

.lcp_paginator li a:hover,
.lcp_paginator li a:focus {
	border-color: var(--barva-akcent);
	color: var(--barva-akcent);
}

.lcp_paginator li.lcp_currentpage {
	background: var(--barva-akcent);
	border-color: var(--barva-akcent);
	color: var(--barva-na-akcentu);
	font-weight: 700;
}

.lcp_paginator .lcp_elipsis {
	padding: 0 4px;
	opacity: 0.6;
}

/*--------------------------------------------------------------
## Mobil
--------------------------------------------------------------*/

@media (max-width: 767px) {
	/*
	 * Na mobilu se dvousloupcová mřížka hlavního článku skládá pod sebe -
	 * poloviční fotka by na 375px byla 170px široká, tedy k nepoznání.
	 */
	.vypis-clanku__polozka--hlavni {
		grid-template-columns: 1fr;
	}

	.vypis-clanku__polozka--hlavni .vypis-clanku__media {
		margin-bottom: 16px;
	}

	.vypis-clanku__polozka--hlavni .vypis-clanku__nadpis {
		font-size: 24px;
	}

	.vypis-clanku__polozka--hlavni .vypis-clanku__perex {
		font-size: 16px;
	}

	/*
	 * Náhled zůstává vlevo i na mobilu, jen užší - pod sebou by z každé
	 * položky byla samostatná karta a seznam by se nedal projet očima.
	 */
	.vypis-clanku__polozka--radek {
		grid-template-columns: 110px 1fr;
		gap: 12px;
	}

	.vypis-clanku__polozka--radek .vypis-clanku__nadpis {
		font-size: 17px;
	}

	/*
	 * Tlačítko na mobilu NEROZTAHOVAT.
	 *
	 * 60-komponenty/tlacitka.css má pod 767px `.wp-block-button { width:100%;
	 * margin-bottom:12px }` a `.wp-block-button__link { display:block }` - to
	 * je pro tlačítka v obsahu správně, ale ve výpisu by z každé položky
	 * udělalo pruh přes celou šířku. Specificita (0,2,0) na (0,1,0) stačí.
	 */
	.vypis-clanku .vypis-clanku__akce {
		width: auto;
		margin-bottom: 0;
	}

	.vypis-clanku .vypis-clanku__akce .wp-block-button__link {
		display: inline-block;
		padding: 9px 16px;
		font-size: 13px;
	}
}