/* ==========================================================================
   StopPDFL — vzdelávanie (A6): filtračné chipy, odporúčaný článok, editoriálny detail
   Nadväzuje na .article-card, .card-grid, .helpline a .info-panel z front.css.
   ========================================================================== */

/* --- Filtračné chipy ------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}

/* Aktívny chip je <span>, neaktívny <a> — obidva musia vyzerať rovnako a mať dotykový cieľ 44 px. */
.chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- Zoznam článkov -------------------------------------------------------- */

.education { padding-bottom: 120px; }
.education__grid { margin-top: 40px; }

/* Stagger kariet rieši CSS, nie inline štýl — pri šiestich článkoch to plne stačí. */
.education__grid > *:nth-child(2) { --reveal-delay: 60ms; }
.education__grid > *:nth-child(3) { --reveal-delay: 120ms; }
.education__grid > *:nth-child(4) { --reveal-delay: 180ms; }
.education__grid > *:nth-child(5) { --reveal-delay: 240ms; }
.education__grid > *:nth-child(6) { --reveal-delay: 300ms; }

.education__empty {
	margin-top: 40px;
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* --- Odporúčaný článok ----------------------------------------------------- */

.featured {
	position: relative;
	display: grid;
	grid-template-columns: 7fr 5fr;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	margin-top: 44px;
	transition: box-shadow var(--dur) var(--ease-out);
}
.featured:hover { box-shadow: var(--shadow-raised); }

.featured__media {
	position: relative;
	min-height: 400px;
	background: var(--paper-deep);
	overflow: hidden;
}
.featured__media picture { display: block; }
.featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured__body { padding: 44px 44px 40px; }

.featured__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ochre);
}

.featured__title {
	margin-top: 14px;
	font-size: 34px;
	line-height: 1.14;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}
.featured__link { color: var(--ink); text-decoration: none; }
/* Klikateľná je celá karta, prístupný odkaz však zostáva jeden — titulok. */
.featured__link::after { content: ""; position: absolute; inset: 0; }
.featured:hover .featured__link { text-decoration: underline; text-underline-offset: 4px; }

.featured__perex {
	margin-top: 18px;
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-soft);
}
/* Iniciála ako editoriálny podpis — cez ::first-letter, aby text zostal jedným odsekom. */
.featured__perex::first-letter {
	float: left;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 56px;
	line-height: .82;
	padding: 6px 10px 0 0;
	color: var(--ink);
}

.featured__meta {
	margin-top: 22px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}
.featured__cta { margin-top: 18px; }

/* --- Materiály pre školy (namiesto newslettera) ---------------------------- */

.materials {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	background: var(--paper-deep);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 36px 44px;
	margin-top: 52px;
}
.materials__title { font-size: 24px; }
.materials__lede {
	margin-top: 8px;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 56ch;
}
.materials__btn {
	flex: none;
	background: transparent;
	border: 1.5px solid var(--ink);
	font-weight: 600;
}
.materials__btn:hover { background: var(--ink); color: var(--paper); }

/* --- Detail článku: hlavička ----------------------------------------------- */

.article { padding-bottom: 120px; }

.article__head {
	max-width: 780px;
	margin: 0 auto;
	padding: 72px var(--gutter-md) 0;
}

.crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}
.crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--ink-quiet);
	text-decoration: none;
}
.crumbs a:hover { color: var(--ink); }
.crumbs__sep { color: var(--line-strong); }

.article__title {
	margin-top: 20px;
	font-size: 46px;
	line-height: 1.08;
}
.article__perex {
	margin-top: 20px;
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 62ch;
}
.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}
.article__dot { color: var(--line-strong); }

.article__hero {
	max-width: 1040px;
	margin: 44px auto 0;
	padding: 0 var(--gutter-md);
}
.article__hero img {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* --- Detail článku: sadzba ------------------------------------------------- */

.article__body {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 var(--gutter-md);
	font-family: var(--font-display);
}
/* 70 ch je horná hranica pohodlného riadka; Newsreader v 19 px ju drží okolo 700 px. */
.article__body p {
	max-width: 70ch;
	margin-top: 24px;
	font-size: 19px;
	line-height: 1.72;
	color: var(--ink-soft);
}
.article__h2 {
	max-width: 70ch;
	margin-top: 52px;
	font-size: 30px;
	line-height: 1.18;
}
.article__list {
	max-width: 70ch;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.article__list li {
	position: relative;
	margin-top: 12px;
	padding-left: 26px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.article__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 14px;
	width: 10px;
	height: 1.5px;
	background: var(--signal);
}

.article__note {
	max-width: 70ch;
	margin-top: 36px;
	background: var(--paper-deep);
	border-left: 3px solid var(--signal);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 20px 24px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
}

/* --- Detail článku: pätička s linkami a CTA -------------------------------- */

.article__foot {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 28px;
	align-items: start;
	max-width: 1000px;
	margin: 80px auto 0;
	padding: 0 var(--gutter-md);
}
.article__foot-col {
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 30px;
	box-shadow: var(--shadow-card);
}
.article__foot-col--cta { background: var(--paper-deep); box-shadow: none; }

.article__lines { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }

.article__cta-title { font-size: 24px; line-height: 1.2; }
.article__cta-text {
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.article__foot-col--cta .btn { margin-top: 20px; }
.article__cta-note {
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-quiet);
}

/* --- Súvisiace články ------------------------------------------------------ */

.related {
	max-width: var(--content-max);
	margin: 96px auto 0;
	padding: 0 var(--gutter-md);
}
.related__title { font-size: 30px; }
.related .card-grid { margin-top: 28px; }

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

@media (max-width: 1080px) {
	.featured__body { padding: 34px 32px 32px; }
	.featured__title { font-size: 30px; }
}

@media (max-width: 980px) {
	.featured { grid-template-columns: 1fr; }
	.featured__media { min-height: 0; aspect-ratio: 16 / 10; }
	.article__foot { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.education, .article { padding-bottom: 72px; }
	.chips { gap: 8px; }
	.featured { margin-top: 32px; }
	.featured__body { padding: 26px 22px 28px; }
	.featured__title { font-size: 26px; }
	.featured__perex::first-letter { font-size: 44px; padding: 4px 8px 0 0; }
	.materials { padding: 26px 22px; gap: 22px; margin-top: 40px; }
	.materials__btn { width: 100%; }
	.article__head { padding-top: 44px; }
	.article__title { font-size: 32px; }
	.article__perex { font-size: 18px; }
	.article__hero { margin-top: 32px; }
	.article__body p { font-size: 18px; margin-top: 20px; }
	.article__h2 { font-size: 25px; margin-top: 40px; }
	.article__list li { font-size: 17px; }
	.article__foot { margin-top: 56px; }
	.article__foot-col { padding: 24px 22px; }
	.related { margin-top: 64px; }
	.related__title { font-size: 25px; }
}


/* Na dotyk potrebujú aj omrvinky plnú výšku prsta. */
@media (max-width: 720px) {
	.crumbs a { min-height: 44px; }
}