/* ==========================================================================
   MÉDIÁ A PUBLIKÁCIE

   Tri karty v rade: náhľad, štítok, nadpis, popis.
   Dizajn: karty 468 px so 12 px medzerou.
   ========================================================================== */

.shs-media {
	padding-block: calc(var(--shs-space-96) + var(--shs-space-19));
	color: var(--shs-brand);
	background: var(--shs-cream);
}

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

.shs-media__title {
	text-align: center;
}

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

.shs-media__cover {
	display: block;
	aspect-ratio: 468 / 452;
	overflow: hidden;
	background: color-mix(in srgb, var(--shs-brand) 12%, transparent);
}

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

.shs-media__card:hover .shs-media__cover img {
	scale: 1.03;
}

/*
 * Logá tlačových médií: celý obrázok a ŽIADNY podklad. Logo je kresba
 * na priehľadnom pozadí — orez by mu odrezal pätky a sivá plocha pod
 * ním by v sekcii pôsobila ako nedotiahnutá fotka. Pomer strán ostáva,
 * aby karty v riadku začínali textom v jednej línii.
 */
.shs-media--contain .shs-media__cover {
	background: none;
}

.shs-media--contain .shs-media__cover img {
	object-fit: contain;
}

/* Štítok je plný obdĺžnik, nie rámik — v dizajne nesie druh obsahu. */
.shs-media__tag {
	display: inline-block;
	margin-top: var(--shs-space-19);
	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-media__name {
	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-media__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

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

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

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

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

	.shs-media__title {
		text-align: left;
	}

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