/* =========================================================
   SG Articoli Griglia
   Le variabili --sg-ag-* vengono impostate inline dal plugin
   (pannello Impostazioni). I valori qui sono solo fallback.
   ========================================================= */
/* Montserrat su TUTTI i testi del plugin (già importato da Elementor).
   Niente "*" sul contenuto del single per non rompere i font delle icone. */
.sg-ag,
.sg-ag *,
.sg-articolo-wrap,
.sg-articolo-titolo,
.sg-articolo-data,
.sg-articolo-categorie,
.sg-articolo-categorie a,
.sg-articolo-meta,
.sg-articolo-indietro,
.sg-articolo-contenuto,
.sg-articolo-contenuto p,
.sg-articolo-contenuto h1,
.sg-articolo-contenuto h2,
.sg-articolo-contenuto h3,
.sg-articolo-contenuto h4,
.sg-articolo-contenuto h5,
.sg-articolo-contenuto h6,
.sg-articolo-contenuto li,
.sg-articolo-contenuto a,
.sg-articolo-contenuto span,
.sg-articolo-contenuto blockquote {
	font-family: "Montserrat", Sans-serif !important;
}

.sg-ag {
	--sg-ag-gap: 28px;
	--sg-ag-radius: 14px;
	--sg-ag-accent: #b48a5a;
	--sg-ag-text: #1c1c1c;
	--sg-ag-muted: #8a8a8a;
	--sg-ag-card-bg: #ffffff;
	--sg-ag-border: #eceae6;
	--sg-ag-border-width: 1px;
	--sg-ag-border-style: solid;
	--sg-ag-card-padding: 20px;
	--sg-ag-content-gap: 8px;
	--sg-ag-image-ratio: 3/2;
	--sg-ag-title-size: 18px;
	--sg-ag-cat-size: 12px;
	--sg-ag-anim-duration: 450ms;

	max-width: 100%;
	color: var(--sg-ag-text);
}

/* --------- Barra filtri --------- */
.sg-ag-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--sg-ag-gap);
}

.sg-ag-filtro {
	appearance: none;
	border: 1px solid var(--sg-ag-border);
	background: transparent;
	color: var(--sg-ag-muted);
	font: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	line-height: 1.2;
}

.sg-ag-filtro:hover {
	color: var(--sg-ag-text);
	border-color: var(--sg-ag-accent);
}

.sg-ag-filtro.is-active {
	background: var(--sg-ag-accent);
	border-color: var(--sg-ag-accent);
	color: #fff;
}

/* --------- Griglia --------- */
.sg-ag-griglia {
	display: grid;
	grid-template-columns: repeat(var(--sg-ag-columns, 3), minmax(0, 1fr));
	gap: var(--sg-ag-gap);
}

/* --------- Card --------- */
.sg-ag .sg-ag-card {
	background: var(--sg-ag-card-bg) !important;
	border: var(--sg-ag-border-width) var(--sg-ag-border-style) var(--sg-ag-border) !important;
	border-radius: var(--sg-ag-radius);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	margin: 0;
	padding: 0;
}

/* Effetto sollevamento al passaggio del mouse (disattivabile). */
.sg-ag[data-hover="yes"] .sg-ag-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.sg-ag[data-hover="yes"] .sg-ag-card:hover .sg-ag-img {
	transform: scale(1.05);
}

.sg-ag-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.sg-ag .sg-ag-card__media {
	position: relative;
	aspect-ratio: var(--sg-ag-image-ratio);
	overflow: hidden;
	background: #f3f1ee;
}

/* Cover garantito: width/height/object-fit con !important per vincere
   su regole del tema tipo "img { height: auto !important }". */
.sg-ag .sg-ag-card__media .sg-ag-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.sg-ag-img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #efece7 0%, #e2ddd4 100%);
}

.sg-ag .sg-ag-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sg-ag-content-gap);
	padding: var(--sg-ag-card-padding);
}

/* Specificità alta + !important: questi valori arrivano dal pannello
   e devono vincere sugli stili di heading/testo del tema o di Elementor. */
.sg-ag .sg-ag-card__cat {
	align-self: flex-start;
	font-size: var(--sg-ag-cat-size) !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sg-ag-accent) !important;
	font-weight: 600;
}

.sg-ag .sg-ag-card__title {
	margin: 0 !important;
	font-size: var(--sg-ag-title-size) !important;
	line-height: 1.35 !important;
	font-weight: 600;
	color: var(--sg-ag-text);
}

.sg-ag .sg-ag-card__date {
	font-size: 0.8rem;
	color: var(--sg-ag-muted) !important;
	margin-top: auto;
}

/* =========================================================
   Animazione di ingresso delle card (filtro + lazy load).
   La classe --enter viene aggiunta da JS all'inserimento.
   ========================================================= */
.sg-ag[data-anim="fade-up"] .sg-ag-card--enter {
	animation: sg-ag-fade-up var(--sg-ag-anim-duration) ease both;
}
.sg-ag[data-anim="fade"] .sg-ag-card--enter {
	animation: sg-ag-fade var(--sg-ag-anim-duration) ease both;
}
.sg-ag[data-anim="zoom"] .sg-ag-card--enter {
	animation: sg-ag-zoom var(--sg-ag-anim-duration) ease both;
}

@keyframes sg-ag-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
@keyframes sg-ag-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sg-ag-zoom {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: none; }
}

/* Rispetta la preferenza di ridurre le animazioni. */
@media (prefers-reduced-motion: reduce) {
	.sg-ag-card--enter { animation: none !important; }
}

/* --------- Stato vuoto --------- */
.sg-ag-nessuno {
	margin-top: var(--sg-ag-gap);
	color: var(--sg-ag-muted);
	font-style: italic;
}

/* --------- Lazy load: sentinella, loader, bottone fallback --------- */
.sg-ag-sentinel {
	width: 100%;
	height: 1px;
}

/* IMPORTANTE: rispetta l'attributo [hidden] così il loader
   compare solo mentre sta effettivamente caricando. */
.sg-ag-loader[hidden] {
	display: none;
}

.sg-ag-loader {
	display: flex;
	justify-content: center;
	padding: 26px 0;
}

.sg-ag-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--sg-ag-border);
	border-top-color: var(--sg-ag-accent);
	animation: sg-ag-spin 0.7s linear infinite;
}

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

.sg-ag-loadmore {
	display: block;
	margin: var(--sg-ag-gap) auto 0;
	padding: 12px 28px;
	border: 1px solid var(--sg-ag-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--sg-ag-accent);
	font: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.sg-ag-loadmore:hover {
	background: var(--sg-ag-accent);
	color: #fff;
}

/* --------- Segnaposto del single-template --------- */
.sg-articolo-wrap .sg-articolo-img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Ereditano la tipografia dal widget Elementor che li contiene:
   così "rispettano" font/dimensione/colore impostati in Elementor. */
.sg-articolo-titolo,
.sg-articolo-data,
.sg-articolo-categorie,
.sg-articolo-categorie a,
.sg-articolo-meta {
	font: inherit;
	color: inherit;
	margin: 0;
	letter-spacing: inherit;
	line-height: inherit;
}

.sg-articolo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* --------- Pulsante "torna agli articoli" --------- */
/* Usa currentColor e font: inherit per adattarsi allo stile circostante. */
.sg-articolo-indietro {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	font: inherit;
	color: inherit;
	line-height: 1.2;
	transition: opacity 0.2s ease;
}

.sg-articolo-indietro:hover {
	opacity: 0.7;
}

/* --------- Responsive --------- */
/* Da 1050px in giù (incluso): 2 colonne. */
@media (max-width: 1050px) {
	.sg-ag-griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Da 767px in giù (incluso): mobile, 1 colonna. */
@media (max-width: 767px) {
	.sg-ag-griglia {
		grid-template-columns: 1fr;
	}
}

/* Blocco "ultimi articoli": desktop 3 news, da 1050px in giù solo 2 news
   (la 3ª sparisce). In mobile le 2 restano, impilate in colonna.
   Da 1050px in giù aggiunge anche un padding laterale di 30px (0 su desktop). */
@media (max-width: 1050px) {
	.sg-ag--ultimi .sg-ag-card:nth-child(n+3) {
		display: none;
	}

	.sg-ag--ultimi {
		box-sizing: border-box;
		padding-left: 30px;
		padding-right: 30px;
	}
}