/* ==========================================================================
   VÝPIS ČLÁNKOV

   Filtre rubrík, vyzdvihnutý prvý článok a mriežka troch stĺpcov.
   Dizajn je kreslený na 1728 px: obsah medzi 150 a 1578 px.
   ========================================================================== */

.shs-posts {
	padding-block: var(--shs-space-80) var(--shs-space-96);
	color: var(--shs-brand);
	background: var(--shs-white);
}

.shs-posts__inner {
	padding-inline: calc(var(--shs-gutter) + var(--shs-inset));
}

.shs-posts__empty {
	padding-block: var(--shs-space-96);
	text-align: center;
}

/* ---- Filtre ------------------------------------------------------------- */

.shs-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shs-space-11);
}

.shs-filter__item {
	padding: var(--shs-space-12) var(--shs-space-24);
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 35%, transparent);
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition:
		background-color var(--shs-duration) var(--shs-ease),
		border-color var(--shs-duration) var(--shs-ease),
		color var(--shs-duration) var(--shs-ease);
}

.shs-filter__item:hover {
	border-color: var(--shs-brand);
	text-decoration: none;
}

/* Zvolená rubrika je plná plocha, nie zvýraznený rámik. */
.shs-filter__item.is-active {
	color: var(--shs-cream);
	background: var(--shs-brand);
	border-color: var(--shs-brand);
}

/* ---- Mriežka ------------------------------------------------------------ */

.shs-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--shs-space-96) var(--shs-space-19);
	margin: var(--shs-space-96) 0 0;
	padding: 0;
	list-style: none;
}

.shs-posts__more {
	display: flex;
	justify-content: center;
	margin-top: var(--shs-space-80);
}

.shs-posts__more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--shs-space-19) var(--shs-space-31);
	border: var(--shs-hairline) solid var(--shs-brand);
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	transition:
		background-color var(--shs-duration) var(--shs-ease),
		color var(--shs-duration) var(--shs-ease);
}

.shs-posts__more a:hover {
	color: var(--shs-cream);
	background: var(--shs-brand);
	text-decoration: none;
}

/* ---- Karta -------------------------------------------------------------- */

.shs-postcard__media {
	display: block;
	aspect-ratio: 463 / 380;
	overflow: hidden;
	background: color-mix(in srgb, var(--shs-brand) 10%, transparent);
}

.shs-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--shs-duration) var(--shs-ease);
}

.shs-postcard:hover .shs-postcard__media img {
	scale: 1.03;
}

/* Štítok rubriky je plný obdĺžnik — rovnaký ako v sekcii médií. */
.shs-postcard__tag {
	display: inline-block;
	padding: var(--shs-space-8) var(--shs-space-16);
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--shs-cream);
	background: var(--shs-brand);
}

.shs-postcard__body {
	margin-top: var(--shs-space-19);
}

.shs-postcard__title {
	margin-top: var(--shs-space-16);
	font-size: var(--shs-fs-heading);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
}

.shs-postcard__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.shs-postcard__excerpt {
	margin-top: var(--shs-space-12);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

.shs-postcard__meta {
	display: flex;
	gap: var(--shs-space-8);
	margin-top: var(--shs-space-19);
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	color: color-mix(in srgb, var(--shs-brand) 65%, transparent);
}

/* ---- Vyzdvihnutý článok ------------------------------------------------- */

/*
 * Prvý článok na prvej strane má fotku vedľa textu, nie nad ním —
 * v dizajne otvára výpis.
 */
.shs-postcard--featured {
	display: grid;
	grid-template-columns: minmax(0, 438px) minmax(0, 1fr);
	column-gap: var(--shs-space-48);
	align-items: center;
	margin-top: var(--shs-space-80);
}

.shs-postcard--featured .shs-postcard__media {
	aspect-ratio: 438 / 378;
}

.shs-postcard--featured .shs-postcard__body {
	margin-top: 0;
}

.shs-postcard--featured .shs-postcard__title {
	font-size: var(--shs-fs-script);
}

.shs-postcard--featured .shs-postcard__excerpt {
	max-width: 520px;
	font-size: var(--shs-fs-base);
}

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

@media (max-width: 900px) {
	.shs-posts {
		padding-block: var(--shs-space-48) var(--shs-space-64);
	}

	.shs-posts__inner {
		padding-inline: var(--shs-gutter);
	}

	.shs-posts__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--shs-space-48);
		margin-top: var(--shs-space-48);
	}

	.shs-postcard--featured {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-19);
		margin-top: var(--shs-space-48);
	}

	.shs-postcard--featured .shs-postcard__title {
		font-size: var(--shs-fs-heading);
	}
}

/*
 * Prepnutie rubriky beží bez načítania stránky (assets/js/posts.js).
 * Kým sa zoznam vymieňa, len sa zjemní — poskakovanie rieši skript,
 * ktorý si na ten čas zamkne výšku plochy.
 */
.shs-posts__inner {
	transition: opacity var(--shs-duration) var(--shs-ease);
}

.shs-posts__inner.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.shs-posts__inner {
		transition: none;
	}
}