/* ==========================================================================
   HERO — jeden dominantný príbeh + tri vedľajšie

   Zámerne bez kariet a bez rámčekov. Hierarchiu drží veľkosť titulku
   a jedna zvislá deliaca linka, nie plochy.
   ========================================================================== */

/*
 * Prvý záber musí obsiahnuť hlavičku, hero a trending. Preto sú odsadenia
 * menšie než v ostatných sekciách a fotka má strop viazaný na výšku okna —
 * na nízkom notebooku sa zmenší, na veľkom monitore nenarastie donekonečna.
 */
.sq-hero {
	padding-block: var(--sq-space-24);
}

.sq-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: var(--sq-space-48);
}

/* ---- Dominantný príbeh -------------------------------------------------- */

.sq-hero__lead {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-12);
}

.sq-hero__title {
	font-size: var(--sq-fs-display);
	font-weight: var(--sq-weight-bold);
	line-height: var(--sq-lh-display);
	letter-spacing: var(--sq-track-display);
	/* Strop 3 riadky — nad ním titulok prestáva fungovať ako titulok. */
	max-width: 24ch;
}

/*
 * Hero fotka je zámerne nižšia než 16:9. Pri 16:9 zaberie v ôsmich
 * stĺpcoch celý prvý záber a titulok spadne pod okraj obrazovky —
 * pritom titulok je to, čo má hero predať.
 */
.sq-hero__media .sq-media {
	aspect-ratio: 21 / 9;
	max-height: min(320px, 30vh);
}

.sq-hero__excerpt {
	max-width: 52ch;
	font-size: var(--sq-fs-lead);
	line-height: 1.55;
	color: var(--sq-text-secondary);
}

.sq-hero__footer {
	display: flex;
	align-items: center;
	gap: var(--sq-space-16);
	flex-wrap: wrap;
}

/* ---- Vedľajšie príbehy -------------------------------------------------- */

.sq-hero__secondary {
	display: flex;
	flex-direction: column;
	/* Zarovnané hore — zmestí sa tak o jednu správu viac. */
	justify-content: flex-start;
	padding-left: var(--sq-space-48);
	border-left: 1px solid var(--sq-border);
	margin-left: calc(-1 * var(--sq-space-24));
}

.sq-hero__rail-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sq-space-16);
	padding-bottom: var(--sq-space-12);
	border-bottom: 1px solid var(--sq-border);
}

.sq-hero__rail-title {
	display: flex;
	align-items: center;
	gap: var(--sq-space-8);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-text-tertiary);
}

.sq-hero__rail-title svg {
	width: 12px;
	height: 12px;
}

.sq-hero__rail-link {
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
}

.sq-hero__rail-link:hover {
	color: var(--sq-text);
}

/* Personalizovaná rubrika je jediné fialové miesto nad prehybom. */
.sq-hero__secondary--personal .sq-hero__rail-head {
	border-bottom-color: rgba(139, 92, 255, 0.5);
}

.sq-hero__secondary--personal .sq-hero__rail-title {
	color: var(--sq-personal);
}

.sq-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-4);
	padding-top: var(--sq-space-12);
}

.sq-hero__chips .sq-chip {
	height: 26px;
	font-size: var(--sq-fs-micro);
}

/*
 * Obrázok je vpravo a malý — rovnako ako vo feede. Titulky tak začínajú
 * na jednej osi a rubrika sa dá prečítať jedným pohľadom zhora nadol.
 */
.sq-hero__story {
	display: grid;
	grid-template-columns: 1fr 104px;
	gap: var(--sq-space-8) var(--sq-space-16);
	align-items: start;
	padding-block: var(--sq-space-16);
	border-bottom: 1px solid var(--sq-border);
}

.sq-hero__story-media {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.sq-hero__story-media .sq-media {
	aspect-ratio: 4 / 3;
}

.sq-hero__story > :not(.sq-hero__story-media) {
	grid-column: 1;
}

.sq-hero__story:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.sq-hero__story-title {
	font-size: var(--sq-fs-feed);
	font-weight: var(--sq-weight-semibold);
	line-height: 1.2;
	letter-spacing: var(--sq-track-card);
}

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1023px) {
	.sq-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--sq-space-32);
	}

	.sq-hero__secondary {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sq-space-24);
		padding-left: 0;
		margin-left: 0;
		border-left: 0;
		border-top: 1px solid var(--sq-border);
		padding-top: var(--sq-space-24);
	}

	.sq-hero__rail-head,
	.sq-hero__chips {
		grid-column: 1 / -1;
	}

	.sq-hero__story {
		padding-block: 0;
		border-bottom: 0;
	}
}

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

@media (max-width: 767px) {
	.sq-hero {
		padding-block: var(--sq-space-24) var(--sq-space-32);
	}

	/* Hero fotka na výšku — na mobile má obraz nosiť viac plochy. */
	.sq-hero__media .sq-media {
		aspect-ratio: 4 / 5;
		max-height: none;
		border-radius: 0;
	}

	.sq-hero__media {
		margin-inline: calc(-1 * var(--sq-gutter));
	}

	.sq-hero__lead {
		gap: var(--sq-space-16);
	}

	.sq-hero__title {
		max-width: none;
	}

	.sq-hero__secondary {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sq-hero__chips {
		padding-bottom: var(--sq-space-8);
	}

	.sq-hero__story {
		display: grid;
		grid-template-columns: 1fr 88px;
		gap: var(--sq-space-16);
		align-items: start;
		padding-block: var(--sq-space-16);
		border-bottom: 1px solid var(--sq-border);
	}

	.sq-hero__story-media .sq-media {
		aspect-ratio: 1 / 1;
	}

	.sq-hero__story .sq-eyebrow,
	.sq-hero__story-title,
	.sq-hero__story .sq-meta {
		grid-column: 1;
	}
}