/**
 * Stili front-end del widget RSS Aggregator.
 * Caricati solo nelle pagine in cui il widget è presente.
 *
 * Le colonne e la spaziatura sono pilotate da due CSS variable
 * (--rae-columns, --rae-gap) impostate dai controlli Elementor sul
 * wrapper .rae-widget, così ogni layout può leggerle in modo uniforme.
 *
 * --rae-accent raccoglie il colore d'accento di default (badge categoria,
 * pulsante, marker timeline, spinner, focus). I controlli Style di Elementor
 * restano sovraordinati: hanno specificità maggiore grazie a {{WRAPPER}}.
 */

.rae-widget {
	--rae-columns: 3;
	--rae-gap: 24px;
	--rae-accent: #1a73e8;
	width: 100%;
}

/* ---------- Accessibilità ----------
 * Contorno di focus visibile solo per la navigazione da tastiera, così il
 * click col mouse resta pulito. Vale anche per gli elementi inseriti via AJAX.
 */

.rae-widget a:focus-visible,
.rae-widget button:focus-visible,
.rae-widget input:focus-visible,
.rae-widget select:focus-visible {
	outline: 2px solid var(--rae-accent);
	outline-offset: 2px;
}

/* ---------- Card condivisa ---------- */

/* box-sizing esplicito: con height 100%, il padding del controllo "Padding
   card" si sommerebbe all'altezza e la card sborderebbe dalla sua cella. */
.rae-item {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	height: 100%;
}

/* position/overflow qui fanno due lavori: ancorano il badge categoria
   all'immagine e ritagliano lo zoom dell'hover. */
.rae-item__image {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	flex-shrink: 0;
}

.rae-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.rae-item:hover .rae-item__image img {
	transform: scale(1.04);
}

/* Le distanze passano da variabile: i controlli "Ancoraggio" scrivono top/left
   oppure bottom/right (azzerando il lato opposto) e riusano la stessa misura. */
.rae-item__category {
	position: absolute;
	top: var(--rae-badge-v, 10px);
	left: var(--rae-badge-h, 10px);
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	background-color: var(--rae-accent);
	border-radius: 4px;
}

/* Niente gap qui: la spaziatura verticale è per-elemento (vedi sotto), così
   ogni tipo di contenuto porta la propria distanza da quello sotto. */
.rae-item__body {
	display: flex;
	flex-direction: column;
	padding: 16px;
	flex: 1 1 auto;
}

/* Ogni elemento porta la distanza dall'elemento che lo segue. Le variabili
   sono scritte dai controlli Style della rispettiva sezione. L'ultimo azzera
   il margine: altrimenti si sommerebbe al padding inferiore della card e il
   contenuto risulterebbe scentrato. Serve la variabile e non un margin-bottom
   diretto dai controlli, altrimenti quelli (specificità (0,4,0)) vincerebbero
   sulla regola :last-child qui sotto e l'ultimo elemento terrebbe il margine. */
.rae-item__brand {
	margin-bottom: var(--rae-space-logo, 10px);
}

.rae-item__meta {
	margin-bottom: var(--rae-space-meta, 10px);
}

.rae-item__excerpt {
	margin-bottom: var(--rae-space-excerpt, 10px);
}

.rae-item__body > *:last-child {
	margin-bottom: 0;
}

.rae-item__brand {
	display: flex;
	align-items: center;
}

.rae-item__logo {
	height: 24px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	display: block;
}

/* Accento colore brand del feed (attivo solo con "Usa colore brand"). */
/* Gli !important qui sotto sono deliberati, non pigrizia.
   Elementor espande {{WRAPPER}} in
   ".elementor-<post> .elementor-element.elementor-element-<id>", cioè TRE
   classi: i suoi controlli Style ("Bordo" della sezione Card, "Sfondo" della
   sezione Categoria) arrivano quindi a specificità (0,4,0), che nessun
   selettore ragionevole di un foglio statico batte in modo stabile. Quando il
   colore del feed è in gioco deve prevalere (scelta esplicita).

   Le due regole sostituiscono SOLO il colore, lasciando intatti tipo, spessore
   e raggio impostati nella sezione Card. Le card la cui fonte non ha un colore
   brand non ricevono queste classi: per loro vale il colore dei controlli, che
   è esattamente il ruolo di "default" previsto. Per lo stesso motivo qui non
   c'è un fallback in var(): renderebbe quel default irraggiungibile. */

.rae-item--badge-brand .rae-item__category {
	background-color: var(--rae-brand) !important;
}

.rae-item--border-brand {
	border-color: var(--rae-brand) !important;
}

.rae-item__title {
	margin: 0 0 var(--rae-space-title, 10px);
	font-size: 18px;
	line-height: 1.35;
}

.rae-item__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.rae-item__title a:hover {
	color: var(--rae-accent);
}

/* --rae-meta-gap è metà della distanza fra due voci: vale sia come spazio
   prima del separatore (column-gap) sia come spazio dopo (margin-right nella
   regola più sotto). Pilotando entrambi con lo stesso valore, il separatore
   resta centrato fra le voci a qualsiasi distanza. */
.rae-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px var(--rae-meta-gap, 12px);
	font-size: 13px;
	color: #6b7280;
}

/* Selettore su qualsiasi elemento e non su span: la data è un <time>, quindi
   con "span + span" restava l'unica senza separatore davanti.
   Il carattere passa da variabile perché il controllo "Tipo" possa valere
   anche "none", che annulla del tutto lo pseudo-elemento. */
/* line-height: 0 toglie il separatore dal calcolo dell'altezza della riga:
   altrimenti, ingrandendolo, gonfierebbe la riga dei soli elementi che lo
   hanno davanti (autore e data) e la fonte resterebbe più in alto.
   vertical-align: middle lo centra sul testo, così cresce restando in asse.
   Lo spostamento usa position/top e non una lunghezza in vertical-align, che
   sostituirebbe il 'middle': così resta un ritocco puramente visivo, fuori dal
   calcolo del layout come il resto della regola. */
.rae-item__meta > * + *::before {
	content: var(--rae-meta-sep, "\2022");
	margin-right: var(--rae-meta-gap, 12px);
	color: var(--rae-meta-sep-color, #d1d5db);
	line-height: 0;
	vertical-align: middle;
	position: relative;
	top: var(--rae-meta-sep-y, 0);
}

.rae-item__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: #4b5563;
}

.rae-item__more {
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background-color: var(--rae-accent);
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* La prima dichiarazione è il fallback per i browser senza color-mix(). */
.rae-item__more:hover {
	background-color: #1557b0;
	background-color: color-mix(in srgb, var(--rae-accent) 85%, #000000);
	color: #ffffff;
}

.rae-empty {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: #6b7280;
	background-color: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
}

/* ---------- Layout: Grid / Cards ---------- */

.rae-grid {
	display: grid;
	grid-template-columns: repeat(var(--rae-columns, 3), minmax(0, 1fr));
	gap: var(--rae-gap, 24px);
}

.rae-widget--cards .rae-item {
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
	border-color: transparent;
}

/* ---------- Layout: Lista ---------- */

.rae-list {
	display: flex;
	flex-direction: column;
	gap: var(--rae-gap, 24px);
}

.rae-widget--list .rae-item {
	flex-direction: row;
}

/* Unico layout in cui immagine e contenuto sono colonne affiancate, quindi
   l'unico con una larghezza da ripartire. Il tetto è facoltativo e lo decide
   il controllo "Larghezza massima": senza valore, nessun limite. */
.rae-widget--list .rae-item__image {
	width: var(--rae-list-image, 38%);
	max-width: var(--rae-list-image-max, none);
	height: auto;
	min-height: 100%;
}

.rae-widget--list .rae-item__body {
	flex: 1 1 auto;
}

/* ---------- Layout: Masonry ---------- */

.rae-masonry {
	column-count: var(--rae-columns, 3);
	column-gap: var(--rae-gap, 24px);
}

.rae-masonry .rae-item {
	height: auto;
	margin-bottom: var(--rae-gap, 24px);
	break-inside: avoid;
}

.rae-masonry .rae-item__image {
	height: auto;
}

.rae-masonry .rae-item__image img {
	height: auto;
}

/* ---------- Layout: Carousel ---------- */

.rae-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rae-carousel__track {
	display: flex;
	gap: var(--rae-gap, 24px);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	flex: 1 1 auto;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.rae-carousel__track .rae-item {
	flex: 0 0 320px;
	max-width: 320px;
	scroll-snap-align: start;
}

.rae-carousel__nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: #1f2937;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.rae-carousel__nav:hover {
	background-color: #f3f4f6;
}

.rae-carousel__nav[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Layout: Timeline ---------- */

/* Geometria della timeline, tutta derivata da qui: --rae-rail-x (controllo
   "Distanza della linea"), --rae-marker-size ("Dimensione") e --rae-marker-gap
   ("Distanza dal contenuto"). Marker e contenuto si posizionano rispetto al
   CENTRO della linea, calcolato una volta sola in --rae-rail-center: così
   spostare la linea o ingrandire il marker non può scentrarli né farli
   sovrapporre al testo. */
.rae-timeline {
	--rae-rail-x: 20px;
	--rae-rail-width: 2px;
	--rae-rail-center: calc(var(--rae-rail-x) + var(--rae-rail-width) / 2);
	--rae-marker-size: 18px;
	--rae-marker-gap: 26px;
	position: relative;
	padding: 0;
}

.rae-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--rae-rail-x);
	width: var(--rae-rail-width);
	background-color: #e5e7eb;
}

/* Il contenuto parte dal centro della linea, scavalca metà marker e aggiunge
   la distanza scelta: non può sovrapporsi al marker a nessuna dimensione. */
.rae-timeline__item {
	position: relative;
	padding-left: calc(var(--rae-rail-center) + var(--rae-marker-size) / 2 + var(--rae-marker-gap));
	margin-bottom: var(--rae-gap, 24px);
}

.rae-timeline__item:last-child {
	margin-bottom: 0;
}

/* box-sizing esplicito: il controllo "Dimensione" imposta la misura totale,
   bordo incluso, ed è quella su cui si basa il calcolo di centratura qui sotto
   (senza, il bordo si sommerebbe e il marker uscirebbe dalla linea). */
.rae-timeline__marker {
	position: absolute;
	left: calc(var(--rae-rail-center) - var(--rae-marker-size) / 2);
	top: 6px;
	width: var(--rae-marker-size);
	height: var(--rae-marker-size);
	box-sizing: border-box;
	border-radius: var(--rae-marker-radius, 50%);
	transform: rotate(var(--rae-marker-rotate, 0deg));
	background-color: var(--rae-accent);
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 2px #e5e7eb;
	/* Il colletto bianco scala con la dimensione: fisso a 3px si mangerebbe
	   tutto il marker alle misure piccole (a 8px resterebbe un anello vuoto).
	   /6 vale esattamente 3px alla dimensione di default di 18px. */
	border-width: max(2px, calc(var(--rae-marker-size) / 6));
}

/* !important perché il controllo "Colore del marker" genera un selettore
 * {{WRAPPER}} .rae-timeline__marker, più specifico di questa regola: qui il
 * brand deve vincere, mentre quel colore fa da default per i feed senza brand.
 */
.rae-timeline__item--marker-brand .rae-timeline__marker {
	background-color: var(--rae-brand) !important;
}

/* ---------- Filtri ---------- */

.rae-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rae-filters-gap, 12px);
	margin-bottom: var(--rae-gap, 24px);
}

/* box-sizing esplicito: il controllo "Altezza" imposta la misura totale, non
   quella a cui padding e bordo si sommano. */
.rae-filters__field {
	box-sizing: border-box;
	padding: 8px 12px;
	font-size: 14px;
	color: #1f2937;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	line-height: 1.4;
}

.rae-filters__search {
	flex: 1 1 220px;
	min-width: 180px;
}

/* Freccia dei select: triangolo pieno rivolto in basso, la forma classica dei
   menu a tendina. Un <select> non rende pseudo-elementi, quindi va disegnata
   come sfondo, e per essere colorabile da un controllo è composta da due
   gradienti (le sue due metà). Un SVG in data URI avrebbe il colore cotto
   dentro: il '#' di un valore esadecimale spezzerebbe l'URI, e currentColor
   non viene ereditato dentro un data URI. */
.rae-filters__category,
.rae-filters__site {
	-webkit-appearance: none;
	appearance: none;
	padding-right: calc(24px + var(--rae-filter-arrow-size, 6px) * 2);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--rae-filter-arrow, #6b7280) 50%),
		linear-gradient(135deg, var(--rae-filter-arrow, #6b7280) 50%, transparent 50%);
	background-size: var(--rae-filter-arrow-size, 6px) var(--rae-filter-arrow-size, 6px);
	background-position:
		right calc(12px + var(--rae-filter-arrow-size, 6px)) center,
		right 12px center;
	background-repeat: no-repeat;
}

/* ---------- Risultati ---------- */

.rae-results {
	position: relative;
}

/* Indicatore di caricamento. Sta qui e non fra i filtri perché lì era un flex
   item: occupava spazio anche da invisibile e con justify-content: space-between
   si prendeva un'intera fetta della distribuzione. Fuori dal flusso non toglie
   nulla ai filtri e non fa scattare la riga quando compare. */
.rae-results__spinner {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 18px;
	height: 18px;
	border: 2px solid #d1d5db;
	border-top-color: var(--rae-accent);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.rae-results__spinner.is-active {
	opacity: 1;
	animation: rae-spin 0.7s linear infinite;
}

@keyframes rae-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Paginazione ---------- */

.rae-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--rae-gap, 24px);
}

.rae-load-more {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.rae-load-more:hover:not([disabled]) {
	background-color: #f3f4f6;
}

.rae-load-more[disabled] {
	opacity: 0.6;
	cursor: default;
}

.rae-sentinel {
	width: 100%;
	height: 1px;
}

/* ---------- Responsive ----------
 * Le colonne per breakpoint (grid/cards/masonry) sono gestite dal
 * controllo responsive di Elementor, che imposta --rae-columns sul
 * wrapper. Qui restano solo gli adattamenti strutturali dei layout che
 * non dipendono dal numero di colonne.
 */

@media (max-width: 767px) {
	.rae-widget--list .rae-item {
		flex-direction: column;
	}

	/* Card impilata: l'immagine va sempre a piena larghezza. Valori diretti e
	   NON var(): la variabile è impostata dal controllo senza media query,
	   quindi qui varrebbe ancora la misura desktop e il fallback del var() non
	   scatterebbe mai. Queste regole vengono dopo quelle della lista e hanno la
	   stessa specificità, quindi vincono per ordine. */
	.rae-widget--list .rae-item__image {
		width: 100%;
		max-width: none;
		height: 200px;
	}

	.rae-carousel__track .rae-item {
		flex-basis: 82%;
		max-width: 82%;
	}
}

/* ---------- Movimento ridotto ----------
 * Disattiva le animazioni decorative per chi ha chiesto meno movimento.
 * Lo spinner dei filtri resta animato di proposito: è l'unico segnale di
 * caricamento in corso, toglierlo lascerebbe l'utente senza riscontro.
 */

@media (prefers-reduced-motion: reduce) {
	.rae-item__image img,
	.rae-item:hover .rae-item__image img {
		transition: none;
		transform: none;
	}

	.rae-carousel__track {
		scroll-behavior: auto;
	}
}