/*
 * Karta článku a mriežka kariet – Figma ArticleCard 459:4067.
 * Používa ju zoznam Príbehov (blok ndi/stories), najnovšie články na domovskej stránke (ndi/latest-stories)
 * a „Ďalšie príbehy“ pod článkom.
 */

.ndi-story-grid,
.ndi-story-grid * {
	box-sizing: border-box;
}

/* ---------- Mriežka kariet ---------- */

.ndi-story-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px var(--wp--preset--spacing--24);
}

@media (max-width: 1100px) {
	.ndi-story-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ndi-story-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}
}

/* ---------- Karta článku ---------- */

.ndi-story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy); /* aj na tmavom pozadí sekcie */
	box-shadow: inset 0 0 0 var(--wp--custom--border--thin) var(--wp--preset--color--gray-light);
}

/* Okraj nad fotkou, aby ho fotka neprekryla */
.ndi-story-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 var(--wp--custom--border--thin) var(--wp--preset--color--gray-light);
	pointer-events: none;
	transition: box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.ndi-story-card__media {
	overflow: hidden; /* bez toho by výška fotky prebila pomer strán */
	aspect-ratio: 424 / 250;
	background: var(--wp--preset--color--light-blue) url(../img/brand/tile-wave.svg) center / 30% no-repeat;
}

.ndi-story-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ndi-story-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--space--10);
	padding: var(--wp--custom--space--14) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
}

.ndi-story-card__badge {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--electric);
	border-radius: 6px;
	color: var(--wp--preset--color--electric);
	font-size: var(--wp--preset--font-size--label-s);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

.ndi-story-card .ndi-story-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-xs);
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: 0;
}

.ndi-story-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Celá karta je odkaz */
.ndi-story-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ndi-story-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* perex na 2–3 riadky ako vo Figme */
	margin: 0;
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--label-m);
	line-height: 1.46;
}

.ndi-story-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin-block-start: auto;
	padding-block-start: var(--wp--custom--space--2);
	font-size: var(--wp--preset--font-size--label-m);
	font-weight: 600;
	line-height: 20px;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.ndi-story-card__more::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/arrow.svg) center / contain no-repeat;
	mask: url(../img/icons/arrow.svg) center / contain no-repeat;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--wp--custom--motion--fast) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

/* Hover / fokus – modrý okraj 2 px, „Čítať viac“ modrou so šípkou */
.ndi-story-card:is(:hover, :focus-within)::after {
	box-shadow: inset 0 0 0 var(--wp--custom--border--thick) var(--wp--preset--color--electric);
}

.ndi-story-card:is(:hover, :focus-within) .ndi-story-card__more {
	color: var(--wp--preset--color--electric);
}

.ndi-story-card:is(:hover, :focus-within) .ndi-story-card__more::after {
	opacity: 1;
	transform: none;
}

.ndi-story-card__title a:focus-visible {
	outline: none;
}

.ndi-story-card:has(.ndi-story-card__title a:focus-visible) {
	outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--electric);
	outline-offset: var(--wp--custom--border--thick);
}

@media (prefers-reduced-motion: reduce) {
	.ndi-story-card__more::after {
		transition: none;
		transform: none;
	}
}