/**
 * Moduł: karta aktualności.
 * Figma: obraz 308 px wysokości z chipem kategorii w lewym górnym rogu, 16 px odstępu,
 * data 16/24, tytuł 24/33,6, opcjonalny skrót 16/24, CTA tekstowe.
 * Treść ma 8 px wcięcia względem obrazu.
 */

.card-news {
	display: flex;
	flex-direction: column;
}

.card-news__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.card-news__img {
	width: 100%;
	height: 308px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.card-news__category {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	margin: 0;
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(6px);
	font-size: var(--fs-body-sm);
	line-height: 24px;
	color: var(--color-muted);
}

.card-news__body {
	display: flex;
	flex-direction: column;
	padding: 16px 8px 0;
}

.card-news__date {
	margin: 0 0 16px;
	font-size: var(--fs-body-sm);
	line-height: 24px;
	color: var(--color-muted);
}

.card-news__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 500;
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
	color: var(--color-title);
}

.card-news__link {
	color: inherit;
	transition: color var(--transition-fast);
}

.card-news__link:hover {
	color: var(--color-primary);
}

.card-news__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.card-news__excerpt {
	margin: 12px 0 0;
	font-size: var(--fs-body-sm);
	line-height: 24px;
	color: var(--color-muted);
}

/* Karta wyróżniona ma 552 px, ale bloki tekstu w makiecie są węższe (tytuł 467,
   skrót 413) — bez tego ograniczenia tytuł łamie się o słowo dalej niż w projekcie. */
.card-news--featured .card-news__title {
	max-width: 467px;
}

.card-news--featured .card-news__excerpt {
	max-width: 413px;
}

.card-news__cta {
	margin-top: var(--space-md);
}

/* Figma: „Czytaj więcej” / „Sprawdź ofertę” w zieleni firmowej. Kolor jest tu,
   bo .btn--text w module przycisku jest wspólny i domyślnie czarny. */
.card-news__cta .btn--text,
.card-news__cta .btn--text:hover {
	color: var(--color-primary);
}

.card-news:hover .card-news__img {
	transform: scale(1.03);
}

@media (max-width: 767px) {
	.card-news__link {
		display: inline-block;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-news__img {
		transition: none;
	}

	.card-news:hover .card-news__img {
		transform: none;
	}
}