/**
 * News Related Articles - "Scopri anche"
 * Figma desktop: node 1820:21263
 * Figma mobile: node 1820:21484
 */

/* ========================================
   SEZIONE
   ======================================== */

/* Token locale: Figma mobile = 64px, non esiste token globale corrispondente */
:root {
	--news-related-padding-mobile: 64px;
}

.news-related {
	background-color: var(--bg-weak-100);
	padding: var(--spacing-5xl) 0; /* 96px */
}

/* ========================================
   TITOLO
   ======================================== */

.news-related__title {
	/* Font da classe .title-large — nessuna ridefinizione */
	text-transform: uppercase;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: var(--spacing-2xl); /* 32px */
}

/* ========================================
   GRID
   ======================================== */

.news-related__grid {
	display: flex;
	flex-direction: row;
}

/* ========================================
   CARD
   ======================================== */

.news-related__card {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	border: 1px solid var(--stroke-soft-200);
	border-left: none;
	padding: var(--spacing-md) var(--spacing-md) var(--spacing-2xl); /* 20px 20px 32px */
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xs); /* 8px */
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.news-related__card:first-child {
	border-left: 1px solid var(--stroke-soft-200);
}

.news-related__card:hover {
	opacity: 0.85;
}

/* ========================================
   IMMAGINE (aspect ratio 4:5)
   ======================================== */

.news-related__card-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	width: 100%;
	flex-shrink: 0;
}

.news-related__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Label badge (condiviso con news-listing) */
.news-card__label {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-block;
	padding: 10px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.56px;
	text-transform: uppercase;
	font-feature-settings: "liga" off, "calt" off;
	color: #000;
	background: var(--bg-weak-100);
}

.news-card__label--color-blu    { background: var(--color-blu);    color: var(--text-white-0); }
.news-card__label--color-green  { background: var(--color-green);  color: var(--text-white-0); }
.news-card__label--color-orange { background: var(--color-orange); color: var(--text-white-0); }
.news-card__label--color-yellow { background: var(--color-yellow); color: var(--text-main-900); }
.news-card__label--color-pink   { background: var(--color-pink);   color: var(--text-main-900); }
.news-card__label--bg-weak-100  { background: var(--bg-weak-100);  color: var(--text-main-900); }
.news-card__label--bg-white-0   { background: var(--bg-white-0);   color: var(--text-main-900); }

/* ========================================
   BODY
   ======================================== */

.news-related__card-body {
	padding-top: var(--spacing-md); /* 20px */
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs); /* 12px */
}

/* Titolo card — font da .paragraph-xlarge (Merriweather 20px), max 2 righe */
.news-related__card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding-right: var(--spacing-lg); /* 24px */
	color: var(--text-main-900);
	margin: 0;
}

/* Excerpt — clamp 3 righe (integra le classi utility paragraph-medium) */
.news-related__card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* Meta — padding top, testo su una riga */
.news-related__card-meta {
	padding-top: var(--spacing-2xs); /* 8px */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
}

/* ========================================
   RESPONSIVE — Mobile (max 768px)
   ======================================== */

@media (max-width: 768px) {
	.news-related {
		padding: var(--news-related-padding-mobile) 0;
	}

	.news-related__grid {
		flex-direction: column;
	}

	/* Su mobile: card in colonna, bordi condividono il lato inferiore */
	.news-related__card {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		border-left: 1px solid var(--stroke-soft-200);
		border-top: none;
	}

	.news-related__card:first-child {
		border-top: 1px solid var(--stroke-soft-200);
	}
}