/*
 * Sustainability - News.
 *
 * Read from cp-all-designer css/sustain.css:430-540 (.susnews) and
 * css/app.css:2444 (.ncard__more). The card is the newsroom's
 * (news-widget.css).
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

/* the read-more line: the card's foot, wherever its title ends */
.custom-sustainability-news .custom-sustainability-news__card-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.custom-sustainability-news .custom-sustainability-news__card-more i {
	font-style: normal;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-news [data-custom-news-card]:hover .custom-sustainability-news__card-more i {
	transform: translateX(4px);
}

.custom-sustainability-news .custom-sustainability-news__all {
	display: flex;
	justify-content: center;
}

/* app.css:2249 — the picture at 16 : 12.3, never over 340 */
.custom-sustainability-news.custom-sustainability-news [data-custom-news-card-picture] {
	aspect-ratio: 16 / 12.3;
}

@media (max-width: 1024px) {
	.custom-sustainability-news.custom-sustainability-news [data-custom-news-grid] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* a phone: a rail that scrolls sideways, the next card showing at the edge */
@media (max-width: 640px) {
	.custom-sustainability-news.custom-sustainability-news [data-custom-news-grid] {
		display: flex;
		align-items: stretch;
		margin-right: -24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.custom-sustainability-news.custom-sustainability-news [data-custom-news-grid]::-webkit-scrollbar {
		display: none;
	}
	.custom-sustainability-news.custom-sustainability-news [data-custom-news-grid] > [data-custom-news-card] {
		flex: 0 0 calc((100% - 14px * 0.15) / 1.15);
		scroll-snap-align: start;
	}
	.custom-sustainability-news.custom-sustainability-news [data-custom-news-grid]::after {
		content: "";
		flex: 0 0 10px;
	}
	.custom-sustainability-news .custom-sustainability-news__all [data-custom-partner-button] {
		justify-content: center;
		width: 100%;
	}
}