/**
 * Stránka blogu (is_home / stránka „blog") – výpis příspěvků.
 *
 * Načítá se podmíněně ve functions.php se závislostí na hlavním style.css,
 * takže přepisuje výchozí styly bloků a má k dispozici design tokeny
 * (--mz-radius-*, --wp--preset--color--*).
 *
 * @package mamou-zodpovedne
 */

/* ------------------------------------------------------------------ *
 * Nástrojová lišta nad výpisem (vyhledávání + filtr rubrik)
 * ------------------------------------------------------------------ */

.mz-blog-nastroje {
	align-items: center;
	margin-bottom: 8px;
}

/* --- Vyhledávací pole (formulář přes wp:html) --- */
.mz-blog-hledani {
	/* Formulář hledání = pilulka. POZOR: NESMÍ mít overflow:hidden — do formuláře
	   se totiž absolutně vkládá rozbalovací seznam našeptávače (ul.mz-naseptavac,
	   umístěný pod polem přes top:calc(100%+6px)). S overflow:hidden by se celý
	   seznam oříznul pod spodní hranou pilulky a návštěvník by ho vůbec neviděl.
	   Zaoblené rohy pole a tlačítka drží jejich vlastní border-radius, clip netřeba.
	   position:relative dělá z formuláře kotvu pro absolutní pozici seznamu — přidává
	   ho JS třídou .mz-ma-naseptavac, tady ho jen pojistíme i pro případ bez JS. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e8dcd8;
	border-radius: var(--mz-radius-pill);
	background: var(--wp--preset--color--bila);
	padding: 3px 4px 3px 14px;
}

.mz-blog-hledani__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--antracit);
	font-size: 14px;
	padding: 8px 4px;
	box-shadow: none;
}

.mz-blog-hledani__input:focus {
	outline: none;
	box-shadow: none;
}

.mz-blog-hledani__input::placeholder {
	color: var(--wp--preset--color--seda);
	opacity: 1;
}

.mz-blog-hledani__tlacitko {
	flex: 0 0 auto;
	background: var(--wp--preset--color--koralova-syta);
	color: var(--wp--preset--color--bila);
	border: none;
	border-radius: var(--mz-radius-pill);
	margin: 0;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mz-blog-hledani__tlacitko:hover {
	background: var(--wp--preset--color--koralova-tmava);
}

/* --- Filtr rubrik (core blok wp:categories jako dropdown) --- */
.mz-blog-filtr {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.mz-blog-rubriky {
	width: 100%;
}

/*
 * Select rubrik – vlastní vzhled (shodný princip jako select „Seřadit“).
 * appearance:none vypne nativní šipku a dokreslíme vlastní chevron (inline SVG)
 * s odstupem 16 px od pravého okraje; padding-right 40 px vyhradí místo, ať
 * šipka nepřekrývá text. Zaoblení na pilulku sjednocuje tvar s hledáním vedle.
 * Pozn.: rozbalený seznam možností kreslí prohlížeč a jeho rámeček nejde přes
 * CSS spolehlivě zaoblit – stylujeme proto co nejlépe zavřené pole.
 */
.mz-blog-rubriky select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #e8dcd8;
	border-radius: var(--mz-radius-pill);
	background-color: var(--wp--preset--color--bila);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233E3E40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	color: var(--wp--preset--color--antracit);
	font-size: 14px;
	padding: 10px 40px 10px 16px;
	cursor: pointer;
}

.mz-blog-rubriky select:hover,
.mz-blog-rubriky select:focus {
	outline: none;
	border-color: var(--wp--preset--color--koralova);
}

/* ------------------------------------------------------------------ *
 * Asymetrická mřížka karet (blog-wrapper)
 * Střídavě široká (65 %) / úzká (35 %) karta v cyklu po 4.
 * ------------------------------------------------------------------ */

.blog-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: 1400px;
	margin: 0 auto;
	gap: 2rem;
	list-style: none;
	padding: 0;
}

.blog-wrapper > * {
	margin-bottom: 1rem;
	align-self: stretch; /* karty v řadě mají stejnou výšku */
}

/* WP layout „flow" (třída wp-block-post-template-is-layout-flow) přidává
   každé další položce `margin-block-start` — ve flex řádku to druhou kartu
   posouvalo dolů a karty pak nebyly zarovnané. Vynulujeme (náš selektor je
   specifičtější než ten WordPresní, není potřeba !important). */
.blog-wrapper.wp-block-post-template-is-layout-flow > * + * {
	margin-block-start: 0;
}

/* WP layout „flow" zároveň POSLEDNÍ položce nuluje spodní margin. Ve flexu
   se ale výška karty (align-self: stretch) počítá včetně marginu — poslední
   karta by tak byla o 1rem vyšší než ostatní v řadě. Vracíme jí stejný
   spodní margin, jaký mají všechny karty výše (.blog-wrapper > *). */
.blog-wrapper.wp-block-post-template-is-layout-flow > :last-child {
	margin-block-end: 1rem;
}

/* Šířky karet přes nth-child v cyklu po 4 prvcích (2 řady × 2 karty):
   liché řady Široká|Úzká, sudé obráceně → vizuální rytmus výpisu.
   `calc(x% - 1rem)` odečítá polovinu mezery (gap 2rem / 2 na kartu),
   aby se dvojice karet vešla do řady přesně na 100 %. */

/* Řada lichá: Široká | Úzká */
.blog-wrapper > *:nth-child(4n+1) { width: calc(65% - 1rem); }
.blog-wrapper > *:nth-child(4n+2) { width: calc(35% - 1rem); }
/* Řada sudá: Úzká | Široká */
.blog-wrapper > *:nth-child(4n+3) { width: calc(35% - 1rem); }
.blog-wrapper > *:nth-child(4n+4) { width: calc(65% - 1rem); }

/* ------------------------------------------------------------------ *
 * Karta článku
 * ------------------------------------------------------------------ */

.article-wrapper {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--bila);
	border: 1px solid #f0e4e0;
	border-radius: var(--mz-radius-karta);
	overflow: hidden;
	padding: 0;
	height: 100%;
	box-shadow: var(--mz-stin-karta);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-wrapper:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(62, 62, 64, 0.1);
}

/* Rubrika nad titulkem */
.article-wrapper .wp-block-post-terms {
	padding: 1.25rem 1.5rem 0;
	font-weight: 500;
}

.article-wrapper .wp-block-post-title {
	font-family: var(--wp--preset--font-family--nadpisy);
	font-size: 24px;
	font-weight: 400;
	padding: 0.75rem 1.5rem 0.5rem;
	margin: 0;
}

/* Titulek bez rubriky dostane odsazení shora */
.article-wrapper > .wp-block-post-title:first-child,
.article-wrapper .nahledovy-obrazek-prispevku + .wp-block-post-title {
	padding-top: 1.25rem;
}

.article-wrapper .wp-block-post-title a,
.article-wrapper .wp-block-post-title a:visited,
.article-wrapper .wp-block-post-title a:hover,
.article-wrapper .wp-block-post-title a:active {
	color: inherit;
	text-decoration: none;
}

.article-wrapper .wp-block-post-title a:hover {
	color: var(--wp--preset--color--koralova-tmava);
}

.article-wrapper .wp-block-post-excerpt {
	padding: 0 1.5rem;
	margin: 0;
	color: var(--wp--preset--color--seda);
	font-size: 15px;
	flex-grow: 1; /* perex vyplní zbytek → tlačítka zarovnaná napříč kartami */
}

/* Skrytí výchozího inline more-linku excerptu (máme vlastní tlačítko) */
.article-wrapper .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link,
.article-wrapper .wp-block-post-excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Náhledový obrázek – pevná výška + ořez
 * ------------------------------------------------------------------ */

.nahledovy-obrazek-prispevku {
	margin: 0;
	width: 100%;
	height: 220px !important; /* jednotná výška úzkých karet */
	overflow: hidden;
}

.nahledovy-obrazek-prispevku > a {
	display: block;
	width: 100%;
	height: 100% !important;
}

.nahledovy-obrazek-prispevku img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover; /* ořez místo deformace */
	border-radius: 0 !important;
}

/* Široké karty (65 %) mají vyšší náhled – selektor kopíruje nth-child logiku
   a musí zasáhnout figure, <a> i <img> (inline height z editoru → !important). */
.blog-wrapper > *:nth-child(4n+1) .nahledovy-obrazek-prispevku,
.blog-wrapper > *:nth-child(4n+1) .nahledovy-obrazek-prispevku > a,
.blog-wrapper > *:nth-child(4n+1) .nahledovy-obrazek-prispevku img,
.blog-wrapper > *:nth-child(4n+4) .nahledovy-obrazek-prispevku,
.blog-wrapper > *:nth-child(4n+4) .nahledovy-obrazek-prispevku > a,
.blog-wrapper > *:nth-child(4n+4) .nahledovy-obrazek-prispevku img {
	height: 368px !important;
}

/* ------------------------------------------------------------------ *
 * Fallback pro kartu BEZ náhledového obrázku
 * ------------------------------------------------------------------ *
 * CO: Když článek nemá nastavený náhledový obrázek, blok
 *     wp:post-featured-image nevyrenderuje vůbec nic → v kartě chybí
 *     element `.nahledovy-obrazek-prispevku` a horní část karty působí
 *     prázdně. Tohle pravidlo takové kartě dokreslí dekorativní pruh
 *     v duchu webu (pudrové pozadí + ilustrace hlaviček výpisů), aby
 *     karta vypadala záměrně a ne rozbitě.
 *
 * K ČEMU: Sjednotí vzhled výpisu blogu i pro články bez fotky.
 *
 * JAK: Selektor `.article-wrapper:not(:has(.nahledovy-obrazek-prispevku))`
 *      zasáhne jen karty, které náhledový obrázek NEobsahují. Pruh se
 *      vykreslí přes pseudoelement `::before` na začátku karty.
 *
 * ⚠️ ZÁVISLOST NA `:has()`: Selektor `:has()` umí jen moderní prohlížeče.
 *    Jde o progresivní vylepšení — ve starším prohlížeči se pravidlo
 *    prostě neuplatní (a `::before` přidáváme JEN uvnitř tohoto pravidla),
 *    takže se nic nerozbije: karta bez fotky zůstane bez pruhu, layout
 *    zůstane v pořádku.
 */

.article-wrapper:not(:has(.nahledovy-obrazek-prispevku))::before {
	content: "";
	display: block;
	height: 220px; /* stejná výška jako reálná fotka úzké karty → karty v řadě lícují */
	background-color: var(--wp--preset--color--pudrova);
	/* Cesta relativně z assets/css/ → assets/images/ (o úroveň výš a do images) */
	background-image: url(../images/hlavicka-dekor.svg);
	background-repeat: no-repeat;
	background-position: center;
	/* Výška ilustrace: 45 % pruhu, ale max 140 px — u vyššího pruhu široké karty
	   se dekor nezvětšuje donekonečna a zachová vzdušný odstup okolo */
	background-size: auto min(45%, 140px);
}

/* Široká karta (65 %) bez obrázku: pruh kopíruje výšku reálné fotky (368 px),
   selektor přebírá nth-child logiku šířek výše */
.blog-wrapper > *:nth-child(4n+1) .article-wrapper:not(:has(.nahledovy-obrazek-prispevku))::before,
.blog-wrapper > *:nth-child(4n+4) .article-wrapper:not(:has(.nahledovy-obrazek-prispevku))::before {
	height: 368px;
}

/* ------------------------------------------------------------------ *
 * Tlačítko „Pokračovat ve čtení" (wp:read-more)
 * ------------------------------------------------------------------ */

.continue-reading {
	display: inline-block;
	align-self: flex-start;
	text-decoration: none;
	background: var(--wp--preset--color--koralova-syta);
	color: var(--wp--preset--color--bila) !important;
	font-weight: 500;
	font-size: 14px;
	padding: 0.7rem 1.4rem;
	margin: 1.5rem;
	border: none;
	border-radius: var(--mz-radius-pill);
	transition: background 0.2s ease, transform 0.15s ease;
}

.continue-reading:hover {
	background: var(--wp--preset--color--koralova-tmava);
	transform: translateY(-1px);
}

/* WP layout „flow" nuluje poslednímu dítěti karty `margin-block-end`, takže
   tlačítko sedělo nalepené na spodní hraně. Vracíme mu spodní odstup
   (selektor s vyšší specificitou než generované pravidlo WordPressu). */
.article-wrapper > .continue-reading:last-child {
	margin-block-end: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * Responzivita – do 782 px vše na plnou šířku pod sebou
 * ------------------------------------------------------------------ */

@media (max-width: 782px) {
	.blog-wrapper {
		gap: 1.25rem;
	}

	.blog-wrapper > * {
		width: 100% !important;
	}

	/* Všechny náhledy sjednotit na střední výšku */
	.blog-wrapper > * .nahledovy-obrazek-prispevku,
	.blog-wrapper > * .nahledovy-obrazek-prispevku > a,
	.blog-wrapper > * .nahledovy-obrazek-prispevku img {
		height: 240px !important;
	}

	/* Fallback pruh karet bez obrázku sjednotit na stejnou výšku jako fotky.
	   `:nth-child(n)` platí pro všechny položky — má ale stejnou specificitu
	   jako desktopové pravidlo s :nth-child(4n+…) výše, takže ho tady
	   v media query přebije bez !important. */
	.blog-wrapper > *:nth-child(n) .article-wrapper:not(:has(.nahledovy-obrazek-prispevku))::before {
		height: 240px;
	}

	/* Vyhledávání + filtr pod sebe */
	.mz-blog-nastroje {
		gap: 10px;
	}

	.mz-blog-filtr {
		justify-content: stretch;
	}
}