/**
 * Stili frontend dei correlati.
 *
 * Due modalità:
 *  1. NATIVO (default) — UI a card del plugin (.airp-rp), isolata e progettata
 *     per NON essere sovrascritta dagli stili del tema: prefisso di classe
 *     dedicato, reset locale e proprietà chiave protette. Solo immagine, titolo
 *     e breve descrizione.
 *  2. ADATTATO — quando l'utente attiva l'adattamento al tema, il markup usa le
 *     classi del tema (vedi related-posts.php) e questa CSS non interviene, a
 *     parte l'eventuale titolo di sezione.
 *
 * @package AIRelatedPosts
 */

/* Titolo di sezione (usato anche dal template adattato). */
.airp-related__heading,
.airp-rp__heading {
	margin: 2.5rem 0 1.25rem;
	font-size: 1.5rem;
	line-height: 1.2;
}

/* =====================================================================
   STILE NATIVO ISOLATO
   Root con variabili proprie (il tema non può cambiarle) e reset locale.
   ===================================================================== */
.airp-rp {
	--airp-rp-card-bg: #ffffff;
	--airp-rp-card-border: #ececf2;
	--airp-rp-title: #14151c;
	--airp-rp-text: #5b6170;
	--airp-rp-media: linear-gradient( 135deg, #e9ebf3, #dfe3ee );
	--airp-rp-shadow: 0 1px 2px rgba( 17, 24, 39, 0.04 ), 0 10px 30px rgba( 17, 24, 39, 0.08 );
	--airp-rp-shadow-hover: 0 8px 20px rgba( 17, 24, 39, 0.10 ), 0 20px 50px rgba( 17, 24, 39, 0.14 );
	--airp-rp-radius: 16px;

	/* Box sempre centrato orizzontalmente, a prescindere da larghezza e
	   posizione del contenitore in cui viene inserito. */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	margin: 2.5rem auto !important;
	padding: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: var( --airp-rp-text ) !important;
}
.airp-rp__heading {
	text-align: center !important;
	width: 100% !important;
}

/* Reset locale: neutralizza gli stili ereditati dal tema sui nostri elementi. */
.airp-rp *,
.airp-rp *::before,
.airp-rp *::after {
	box-sizing: border-box !important;
}
.airp-rp .airp-rp__grid,
.airp-rp .airp-rp__card,
.airp-rp .airp-rp__media,
.airp-rp .airp-rp__body {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none;
	list-style: none !important;
	float: none !important;
	width: auto !important;
}

/* Griglia responsive centrata (nessuna dipendenza dal tema). Le colonne hanno
   una larghezza massima definita e il gruppo di card resta centrato nella
   pagina anche quando non riempie tutta la riga. */
.airp-rp .airp-rp__grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 300px ) ) !important;
	gap: 24px !important;
	align-items: stretch !important;
	justify-content: center !important;
	width: 100% !important;
}

/* Card. */
.airp-rp .airp-rp__card {
	position: relative !important;
	display: flex !important;
	background: var( --airp-rp-card-bg ) !important;
	border: 1px solid var( --airp-rp-card-border ) !important;
	border-radius: var( --airp-rp-radius ) !important;
	overflow: hidden !important;
	box-shadow: var( --airp-rp-shadow ) !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.airp-rp .airp-rp__card:hover {
	transform: translateY( -4px ) !important;
	box-shadow: var( --airp-rp-shadow-hover ) !important;
}

/* Link che avvolge l'intera card. */
.airp-rp .airp-rp__link {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: 100% !important;
	text-decoration: none !important;
	color: inherit !important;
	box-shadow: none !important;
	background: none !important;
}
.airp-rp .airp-rp__link:hover,
.airp-rp .airp-rp__link:focus {
	text-decoration: none !important;
	color: inherit !important;
}

/* Media / immagine. */
.airp-rp .airp-rp__media {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	overflow: hidden !important;
	background: var( --airp-rp-media ) !important;
}
.airp-rp .airp-rp__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	max-width: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: transform 0.4s ease !important;
}
.airp-rp .airp-rp__card:hover .airp-rp__img {
	transform: scale( 1.05 ) !important;
}
.airp-rp .airp-rp__placeholder {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	background: var( --airp-rp-media ) !important;
}

/* Corpo testuale. */
.airp-rp .airp-rp__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 16px 18px 20px !important;
	flex: 1 1 auto !important;
}
.airp-rp .airp-rp__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	color: var( --airp-rp-title ) !important;
	letter-spacing: -0.01em !important;
	/* Massimo 3 righe. */
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
.airp-rp .airp-rp__excerpt {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.9rem !important;
	line-height: 1.55 !important;
	color: var( --airp-rp-text ) !important;
	font-weight: 400 !important;
	/* Massimo 3 righe. */
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Tema scuro: si adatta al contesto senza permettere override dal tema. */
@media ( prefers-color-scheme: dark ) {
	.airp-rp {
		--airp-rp-card-bg: #1b1c24;
		--airp-rp-card-border: #2b2d3a;
		--airp-rp-title: #f2f3f7;
		--airp-rp-text: #a6acbd;
		--airp-rp-media: linear-gradient( 135deg, #262835, #1f2130 );
		--airp-rp-shadow: 0 1px 2px rgba( 0, 0, 0, 0.4 ), 0 10px 30px rgba( 0, 0, 0, 0.5 );
		--airp-rp-shadow-hover: 0 10px 26px rgba( 0, 0, 0, 0.55 );
	}
}

/* Riduzione motion. */
@media ( prefers-reduced-motion: reduce ) {
	.airp-rp .airp-rp__card,
	.airp-rp .airp-rp__img {
		transition: none !important;
	}
}