/* ==========================================================================
   DETAIL ČLÁNKU

   Hlavička s názvom a údajmi, fotka na šírku obsahu, text v hlavnom
   stĺpci a bočný panel s obsahom a autorom.
   Dizajn je kreslený na 1728 px.
   ========================================================================== */

.shs-article {
	color: var(--shs-brand);
	background: var(--shs-white);
}

/* ---- Hlavička ----------------------------------------------------------- */

.shs-article__head {
	padding-block: calc(var(--shs-space-96) * 2 + var(--shs-space-42)) var(--shs-space-24);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--shs-sand) 45%, var(--shs-white)) 0%,
		var(--shs-white) 100%
	);
}

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

.shs-article__title {
	max-width: 1100px;
	font-size: var(--shs-fs-title);
	font-weight: var(--shs-weight-extralight);
	line-height: var(--shs-lh-tight);
}

.shs-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--shs-space-24);
	margin-top: var(--shs-space-42);
	padding-bottom: var(--shs-space-24);
	border-bottom: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
}

/* Štítok rubriky je rovnaký prvok ako vo výpise — plný obdĺžnik. */
.shs-article__tag {
	display: inline-block;
	padding: var(--shs-space-12) var(--shs-space-24);
	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-article__tag:hover {
	text-decoration: none;
	opacity: 0.85;
}

.shs-article__facts {
	display: flex;
	gap: var(--shs-space-8);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	color: color-mix(in srgb, var(--shs-brand) 70%, transparent);
}

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

.shs-article__cover {
	margin-top: var(--shs-space-96);
	padding-inline: calc(var(--shs-gutter) + var(--shs-inset));
}

.shs-article__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1422 / 547;
	object-fit: cover;
}

/* ---- Text a bočný panel -------------------------------------------------- */

.shs-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) minmax(0, 310px);
	justify-content: space-between;
	column-gap: var(--shs-space-96);
	margin-top: var(--shs-space-96);

	/*
	 * Text je odsadený hlbšie než nadpis aj fotka — v dizajne začína na
	 * 300 px, teda 17.36 % šírky. Pravý okraj ostáva v línii s fotkou.
	 */
	padding-inline: clamp(var(--shs-gutter), 17.36vw, 300px) calc(var(--shs-gutter) + var(--shs-inset));
	padding-bottom: calc(var(--shs-space-96) + var(--shs-space-24));
}

/* Text článku má 16 px — na dlhé čítanie je 15 px pritesných. */
.shs-article__content {
	font-size: var(--shs-fs-reading);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

.shs-article__content > * + * {
	margin-top: var(--shs-space-24);
}

.shs-article__content h2,
.shs-article__content h3 {
	margin-top: var(--shs-space-48);
	font-family: var(--shs-font-body);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-medium);
	line-height: var(--shs-lh-tight);
	text-transform: none;
}

/*
 * Tretia úroveň musí byť viditeľne nižšia než druhá — články klienta
 * majú obe a v rovnakej veľkosti by sa štruktúra textu stratila.
 */
.shs-article__content h3 {
	margin-top: var(--shs-space-32);
	font-size: var(--shs-fs-base);
}

.shs-article__content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.shs-article__content img {
	height: auto;
}

.shs-article__content ul,
.shs-article__content ol {
	padding-inline-start: var(--shs-space-24);
}

.shs-article__content li + li {
	margin-top: var(--shs-space-12);
}

.shs-article__content li::marker {
	font-size: 0.7em;
}

/*
 * Panel je oddelený vlasovou linkou, nie plochou — v dizajne je len
 * odsadený stĺpec, nie karta.
 */
.shs-article__aside {
	padding-inline-start: var(--shs-space-42);
	border-inline-start: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
}

.shs-article__box + .shs-article__box {
	margin-top: var(--shs-space-48);
}

.shs-article__box-title {
	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;
	letter-spacing: 0.06em;
}

.shs-article__box-text {
	margin-top: var(--shs-space-16);
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

.shs-article__box-text > * + * {
	margin-top: var(--shs-space-12);
}

.shs-article__author {
	margin-top: var(--shs-space-16);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
}

/* ---- Súvisiace ---------------------------------------------------------- */

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

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

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

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

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

@media (max-width: 900px) {
	.shs-article__head {
		padding-block: calc(var(--shs-space-96) + var(--shs-space-48)) var(--shs-space-24);
	}

	.shs-article__head-inner,
	.shs-article__cover,
	.shs-related__inner {
		padding-inline: var(--shs-gutter);
	}

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

	.shs-article__cover {
		margin-top: var(--shs-space-48);
	}

	.shs-article__cover img {
		aspect-ratio: 4 / 3;
	}

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

	/*
	 * Panel sa presúva pod text — zvislá linka by na plnú šírku pôsobila
	 * ako omyl, preto sa mení na vodorovnú nad ním.
	 */
	.shs-article__aside {
		padding-inline-start: 0;
		padding-top: var(--shs-space-32);
		border-inline-start: 0;
		border-top: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
	}

	.shs-related {
		padding-block: var(--shs-space-64);
	}

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

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