/**
 * Homepage news list (section_list_news).
 * Same visual behavior as the news column in the Media Inweb section.
 */

.news-list__grid {
	display: grid;
	gap: 15px;
}

.news-list__item {
	border-left: 2px solid var(--color-black);
	padding-left: 15px;
	transition: border-color var(--transition-hover);
}

.news-list__item:hover,
.news-list__item:focus-within {
	border-left-color: var(--color-pink);
}

.news-list__link {
	display: block;
	color: inherit;
}

.news-list__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 18px;
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: color var(--transition-hover);
}

.news-list__link:hover .news-list__title,
.news-list__link:focus-visible .news-list__title {
	color: var(--color-pink);
}

.news-list__date {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	font-weight: var(--font-weight-regular);
	line-height: 1;
	color: var(--color-gray-text);
}

.news-list__more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	color: var(--color-pink);
	font-weight: var(--font-weight-medium);
	transition: transform var(--transition-hover);
}

.news-list__more:hover,
.news-list__more:focus-visible {
	transform: translateX(6px);
}

.news-list__arrow {
	display: block;
	width: 40px;
	height: 16px;
}

/* Desktop: 4 across; items 1–4 already shown in the Media Inweb section. */
@media (min-width: 768px) {
	.news-list__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.news-list__item:nth-child(-n + 4) {
		display: none;
	}
}

/* Mobile: Media Inweb news is hidden, so show the latest 4 here instead. */
@media (max-width: 767px) {
	.news-list__item:nth-child(n + 5) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.news-list__item,
	.news-list__title,
	.news-list__more {
		transition: none;
	}
}