/* ==========================================================================
   StopPDFL — domovská stránka (A1 desktop / A2 mobil)
   Len to, čo je vlastné domovu. Pás dôvery, karty článkov a kategórií
   žijú v front.css — tu ich už neopakujeme.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Výška je zvieraná zhora aj zdola: na vysokých monitoroch nechceme
   prázdny obraz, na nízkych zas nechceme text mimo záberu.
   --------------------------------------------------------------------------- */

.hero {
	position: relative;
	height: clamp(620px, 88vh, 820px);
	overflow: hidden;
	background: #3D372E;
}

.hero__media { position: absolute; inset: 0; }

.hero__video,
.hero__still,
.hero__still img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Poster je záloha: nastupuje, keď video nemá bežať (reduced-motion alebo šetrenie dát).
   Prepínač drží JavaScript triedou .hero--poster, aby to platilo rovnako na všetkých šírkach. */
.hero__still { display: none; }
.hero--poster .hero__video { display: none; }
.hero--poster .hero__still { display: block; }
.hero--poster .hero__still img { animation: spdl-kenburns 14s var(--ease-inout) infinite alternate; }

.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(31, 27, 22, .66) 0%,
		rgba(31, 27, 22, .44) 32%,
		rgba(31, 27, 22, 0) 58%);
}

/* Spodný prechod do papiera, aby hero nekončil tvrdou hranou */
.hero__fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 170px;
	background: linear-gradient(180deg, rgba(246, 241, 231, 0) 0%, var(--paper) 100%);
}

.hero__inner {
	position: relative;
	max-width: 700px;
	padding: 132px 0 0 96px;
}

.hero__eyebrow {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, .92);
}

.hero__title {
	margin: 22px 0 0;
	font-size: 76px;
	line-height: 1.04;
	color: var(--paper);
}
.hero__title em { font-style: italic; color: var(--signal-scrim); }

.hero__lede {
	margin: 26px 0 0;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.6;
	color: rgba(246, 241, 231, .92);
	max-width: 47ch;
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 36px;
	flex-wrap: wrap;
}

.hero__link {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	min-height: 44px;
	justify-content: center;
	text-decoration: none;
	color: var(--paper);
}
.hero__link:hover { color: var(--paper); }
.hero__link-text { font-weight: 500; font-size: 16px; }
.hero__link-rule {
	height: 1px;
	background: rgba(246, 241, 231, .55);
	transform: scaleX(1);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease-out);
}
.hero__link:hover .hero__link-rule { transform: scaleX(1.06); }

.hero__seal {
	margin-top: 44px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, .85);
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.hero__scroll-line { width: 1px; height: 26px; background: rgba(31, 27, 22, .45); }
.hero__scroll-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--signal-deep);
	animation: spdl-drift 1.8s ease-in-out infinite;
}

@keyframes spdl-drift {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* Ken Burns na posteri — pomalý, aby pôsobil ako dych, nie ako zoom */
@keyframes spdl-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.05); }
}

/* --- 01 Tri kroky ---------------------------------------------------------- */

.steps { position: relative; margin-top: 64px; }

/* Spojnica medzi číslami krokov; nabieha zľava doprava pri odkrytí sekcie */
.steps__rule {
	position: absolute;
	left: 70px; right: 70px;
	top: 23px;
	height: 2px;
	background: var(--line);
}
.steps__rule[data-reveal] {
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 700ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}
.steps__rule[data-reveal].is-revealed { transform: scaleX(1); }

.steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.step { position: relative; }

.step__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--signal-deep);
	margin: 0 0 20px 47px;
}

.step__card { height: 100%; }
.step__card svg { color: var(--ink); }

.step__title {
	margin-top: 14px;
	font-family: var(--font-ui);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--ink);
}

.step__text {
	margin: 8px 0 0;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.step__code { font-size: 14px; }

/* --- 02 Čo môžete nahlásiť ------------------------------------------------- */

.topics {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 72px;
	align-items: start;
}

.topics__aside { position: sticky; top: 40px; }
.topics__lede { max-width: 44ch; }
.topics__note { display: block; margin: 28px 0 0; letter-spacing: .08em; }

.topics__photo {
	position: relative;
	height: 300px;
	overflow: hidden;
	margin: 36px 0 0;
}
.topics__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.topics__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	/* Odsadenie zarovnáva prvú kartu pod perex vľavo */
	padding-top: 96px;
}

/* --- 03 Váš podnet je spis ------------------------------------------------- */

.dossier {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 88px;
	align-items: center;
}

.dossier__para { max-width: 56ch; margin-top: 18px; line-height: 1.7; }
.dossier__para:first-of-type { margin-top: 26px; }

.case-sample {
	padding: 30px 32px;
	/* Karta leží na tmavom podklade, preto hlbší tieň než --shadow-card */
	box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .35);
}
.case-sample.card--tabbed::before { width: 76px; left: 20px; }

.case-sample__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.case-sample__code {
	font-size: 17px;
	letter-spacing: .06em;
	font-weight: 500;
	color: var(--ink);
}

.case-sample__rows { margin: 22px 0 0; border-top: 1px solid var(--line); }
.case-sample__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--paper-deep);
	font-family: var(--font-mono);
	font-size: 12.5px;
}
.case-sample__row:last-child { border-bottom-color: var(--line); }
.case-sample__row dt { color: var(--ink-quiet); text-transform: uppercase; }
.case-sample__row dd { margin: 0; color: var(--ink); text-align: right; }

.case-sample__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	flex-wrap: wrap;
}

/* Ukážka tlačidla, nie tlačidlo — zámerne bez odkazu a bez hover stavu */
.case-sample__button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--ink);
	color: var(--paper);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 18px;
	border-radius: var(--radius);
}

.case-sample__caption {
	display: block;
	margin-top: 14px;
	text-align: right;
	color: rgba(246, 241, 231, .66);
	letter-spacing: .08em;
}

/* --- Fotopás --------------------------------------------------------------- */

.photo-band {
	position: relative;
	height: 280px;
	overflow: hidden;
	background: var(--paper-deep);
}
.photo-band img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 04 Čísla -------------------------------------------------------------- */

.numbers { text-align: center; }

.numbers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 56px;
}

.numbers__item { padding: 0 32px; border-right: 1px solid var(--line); }
.numbers__item:last-child { border-right: 0; }

.numbers__value {
	display: block;
	font-size: 58px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--ink);
}

.numbers__label {
	display: block;
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--ink-soft);
}

.numbers__note { display: block; margin-top: 44px; letter-spacing: .08em; }

/* --- 05 Vzdelávanie -------------------------------------------------------- */

.articles { margin-top: 56px; }
.articles .article-card__meta { text-transform: uppercase; letter-spacing: .06em; }

/* --- Responzívne ----------------------------------------------------------- */

@media (max-width: 1180px) {
	.hero__inner { padding: 112px 0 0 var(--gutter); }
	.hero__title { font-size: 62px; }
	.topics { gap: 48px; }
	.dossier { gap: 56px; }
}

@media (max-width: 980px) {
	.hero__inner { max-width: 620px; }
	.hero__title { font-size: 52px; }
	.hero__lede { font-size: 18px; }

	.steps__rule { display: none; }
	.steps__grid { grid-template-columns: 1fr; gap: 22px; }
	.step__num { margin-left: 0; }

	.topics { grid-template-columns: 1fr; }
	.topics__aside { position: static; }
	.topics__list { padding-top: 0; }

	.dossier { grid-template-columns: 1fr; gap: 40px; }
	.dossier__sample { max-width: 480px; }

	.numbers__grid { grid-template-columns: 1fr; margin-top: 28px; border-top: 1px solid var(--line); }
	.numbers__item { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
	.numbers__value { font-size: 38px; }
	.numbers__label { font-size: 15px; margin-top: 4px; }
}

/* Mobil (A2): video vystrieda poster s pomalým Ken Burns efektom,
   text sa zlomí — nadpis ostáva na fotke, zvyšok padne na papier. */
@media (max-width: 720px) {
	.hero { height: auto; overflow: visible; background: var(--paper); }

	.hero__media { position: absolute; inset: 0 0 auto; height: 430px; overflow: hidden; }
	/* Video ide aj na mobile — 1,5 MB je za ten dojem prijateľná cena.
	   Kto šetrí dáta alebo nechce pohyb, dostane poster cez .hero--poster. */
	.hero__video { display: block; }
	.hero__still { display: none; }

	.hero__scrim {
		background: linear-gradient(180deg,
			rgba(31, 27, 22, 0) 30%,
			rgba(31, 27, 22, .55) 78%,
			rgba(31, 27, 22, .72) 100%);
	}
	.hero__fade { display: none; }

	.hero__inner { max-width: none; padding: 0; }
	.hero__head {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 430px;
		padding: 0 var(--gutter-sm) 22px;
	}
	.hero__eyebrow { font-size: 11px; }
	.hero__title { margin-top: 12px; font-size: 42px; line-height: 1.05; }

	.hero__body { background: var(--paper); padding: 22px var(--gutter-sm) 28px; }
	.hero__lede { margin: 0; max-width: none; font-size: 17px; color: var(--ink-soft); }

	.hero__actions { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 20px; }
	.hero__cta { width: 100%; }

	.hero__link { align-items: center; }
	.hero__link-text { color: var(--signal-deep); font-size: 15px; }
	.hero__link-rule { display: none; }

	.hero__seal {
		margin-top: 18px;
		text-align: center;
		font-size: 10.5px;
		letter-spacing: .12em;
		color: var(--ink-soft);
	}

	.hero__scroll { display: none; }

	.steps { margin-top: 30px; }
	.step__num { width: 34px; height: 34px; font-size: 11px; margin-bottom: 14px; }
	.step__title { font-size: 16px; }
	.step__text { font-size: 15px; }

	.topics__photo { height: 220px; }
	.case-sample { padding: 22px 20px; }
	.case-sample__code { font-size: 14px; }
	.case-sample__caption { text-align: left; }
	.photo-band { height: 200px; }
	.articles { margin-top: 28px; }
}


/* --- Prvá pomoc -------------------------------------------------------------
   Jediné miesto na domovskej stránke, kde je červená plochou, nie akcentom.
   Dizajnové tokeny ju vyhradzujú pre to, čo má zastaviť oko — a kroky pre dieťa,
   kamaráta a rodiča sú presne to, čo tu niekto potrebuje nájsť na prvý pohľad.
   --------------------------------------------------------------------------- */

.firstaid {
	background: var(--signal);
	color: var(--paper);
	padding: 78px var(--gutter) 68px;
}

.firstaid__eyebrow {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, .78);
}

.firstaid__title {
	margin: 14px 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--paper);
	text-wrap: balance;
}

.firstaid__lede {
	margin: 16px 0 0;
	max-width: 62ch;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.6;
	color: rgba(246, 241, 231, .88);
}

.firstaid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}

/* --- Karta jedného postupu --------------------------------------------------- */

.fcard {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.fcard:hover { transform: translateY(-4px); color: var(--ink); box-shadow: 0 22px 44px rgba(31, 27, 22, .24); }
.fcard:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.fcard__photo { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-deep); }
.fcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fcard__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 0 var(--radius-sm) 0 0;
}

.fcard__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }

.fcard__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 25px;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.fcard__steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.fcard__step {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink-soft);
}

.fcard__num {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}

.fcard__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--signal-deep);
}
.fcard:hover .fcard__more svg { transform: translateX(4px); }
.fcard__more svg { transition: transform var(--dur-fast) var(--ease-out); }

.firstaid__foot {
	margin: 34px 0 0;
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	color: rgba(246, 241, 231, .82);
}
.firstaid__foot a { color: var(--paper); font-weight: 500; text-underline-offset: 3px; }
.firstaid__foot a:hover { color: var(--paper); }

@media (max-width: 1000px) {
	.firstaid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.firstaid__title { font-size: 40px; }
}

@media (max-width: 720px) {
	.firstaid { padding: 54px var(--gutter) 48px; }
	.firstaid__title { font-size: 32px; }
	.firstaid__lede { font-size: 17px; }
	.firstaid__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.fcard__title { font-size: 23px; }
	.fcard__step { font-size: 15px; }
}