/*
 * Design System - AELITA
 * components/news-card.css - editorial news article card + featured story.
 *
 * AELITA newsroom language: image-led, typography-first, no card chrome,
 * sharp geometry, one red accent. Reuses the tokens / motion scale.
 *
 * Consumes tokens.css only. No hex, no shadows, no !important.
 * Hover is gated behind (hover: hover) and (pointer: fine).
 * Loaded on blog category archives only (see inc/enqueue.php).
 */

/* ==================================================================== */
/* Regular news card                                                    */
/* ==================================================================== */
.a-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.a-news-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	/* Matches the WordPress 560x400 thumbnail (7:5) so source banners are not
	 * cropped any further. */
	aspect-ratio: 7 / 5;
	background-color: var(--bg-muted);
}

.a-news-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-overlay) var(--ease-out);
}

.a-news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--space-2);
	padding-block-start: var(--space-4);
}

.a-news-card__brand {
	margin: 0;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.a-news-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4); /* 18px */
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	text-transform: none;
	color: var(--text-primary);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.a-news-card__excerpt {
	display: none;
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--text-secondary);
}

@media (min-width: 768px) {
	.a-news-card__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
}

.a-news-card__link {
	color: inherit;
	text-decoration: none;
}

/* Whole card is the target. */
.a-news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.a-news-card__date {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	margin-block-start: auto;
	padding-block-start: var(--space-1);
	font-size: var(--fs-small);
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.a-news-card__date-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--c-ink-300);
}

@media (hover: hover) and (pointer: fine) {
	.a-news-card:hover .a-news-card__media img {
		transform: scale(1.05);
	}

	.a-news-card:hover .a-news-card__link {
		color: var(--link-hover);
	}
}

/* ==================================================================== */
/* Featured story                                                       */
/* ==================================================================== */
.a-news-featured {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.a-news-featured {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-5);
	}
}

@media (min-width: 1200px) {
	.a-news-featured {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--space-8);
	}
}

.a-news-featured__media {
	display: block;
	overflow: hidden;
	/* Close to the source (~1080x827) so banner artwork is not cropped. */
	aspect-ratio: 4 / 3;
	background-color: var(--bg-muted);
}

.a-news-featured__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-overlay) var(--ease-out);
}

.a-news-featured__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.a-news-featured__brand {
	margin: 0;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.a-news-featured__title {
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: calc(var(--fs-h2) / 2); /* 14px on stacked / tablet (was 28px) */
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--text-primary);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* On phones the single-column measure is narrow: allow one more line so the
 * lead headline is not cut mid-sentence. */
@media (max-width: 767px) {
	.a-news-featured__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}

@media (min-width: 1024px) {
	.a-news-featured__title {
		font-size: calc(var(--fs-display) / 2); /* clamp(16px, 2.5vw, 20px) on desktop */
		line-height: var(--lh-display);
	}
}

.a-news-featured__link {
	color: inherit;
	text-decoration: none;
}

/* Whole featured block is the target. */
.a-news-featured__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.a-news-featured__date {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.a-news-featured__date-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--c-ink-300);
}

.a-news-featured__excerpt {
	max-width: 56ch;
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Bottom row: date left, "Читати" right - mirrors the date-at-the-bottom
 * rhythm of the list cards. Sits right below the excerpt (the block keeps its
 * content height, it is not stretched to the media). */
.a-news-featured__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
}

.a-news-featured__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.a-news-featured__more svg {
	width: 16px;
	height: 16px;
	transition: transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.a-news-featured:hover .a-news-featured__media img {
		transform: scale(1.04);
	}

	.a-news-featured:hover .a-news-featured__link,
	.a-news-featured:hover .a-news-featured__more {
		color: var(--link-hover);
	}

	.a-news-featured:hover .a-news-featured__more svg {
		transform: translateX(3px);
	}
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.a-news-card__media img,
	.a-news-featured__media img,
	.a-news-featured__more svg {
		transition-duration: 0.01ms;
	}

	.a-news-card:hover .a-news-card__media img,
	.a-news-featured:hover .a-news-featured__media img {
		transform: none;
	}
}