/**
 * Sacrantica — stile bacheca Memorie (masonry stile Pinterest)
 *
 * Il layout "a colonne di altezze diverse" è ottenuto con CSS multi-column
 * (column-count), senza librerie JS di masonry: è l'approccio più semplice
 * e performante per card di altezza naturale variabile. Ogni card evita di
 * spezzarsi tra una colonna e l'altra grazie a break-inside: avoid.
 */

.sacrantica-memorie {
	position: relative;
}

.sacrantica-memorie.is-loading .sacrantica-memorie-risultati {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ---------- Filtri ---------- */
.sacrantica-memorie-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: flex-end;
	margin-bottom: 24px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #543718;
}

@media (max-width: 560px) {
	.sacrantica-memorie-filtri {
		justify-content: center;
		text-align: center;
	}
}

.sacrantica-memorie-filtri__campo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.sacrantica-memorie-filtri__campo select {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	padding: 4px 8px;
	border: 1px solid #d8cdb8;
	border-radius: 4px;
	background: #F2E6D1;
	color: #2F3524;
}

/* ---------- Bacheca a colonne (masonry) ----------
 * !important su display/column-*: un tema o uno stile globale di Elementor
 * (es. reset "grid" su liste/archivi) può avere una specificità pari o
 * superiore a un singolo selettore di classe e forzare un layout a griglia
 * uniforme, vanificando l'effetto "a colonne di altezze diverse" — stesso
 * tipo di conflitto già risolto altrove nel plugin (card Luoghi/Eventi).
 *
 * Questo column-count è solo il fallback senza JS: il bilanciamento nativo
 * del browser distribuisce le card per altezza totale, ma NON mette ogni
 * card nella colonna più bassa in quel momento, quindi con poche card le
 * ultime finiscono ammucchiate nell'ultima colonna. Con JS attivo,
 * sacrantica-memorie-filter.js ricostruisce la board in vere colonne flex
 * (.sacrantica-memorie-board--js), assegnando ogni card alla colonna più
 * bassa — masonry "alla Pinterest" senza librerie esterne.
 */
.sacrantica-memorie-board {
	display: block !important;
	column-count: var(--sac-columns, 3) !important;
	column-gap: 16px;
}

@media (max-width: 900px) {
	.sacrantica-memorie-board {
		column-count: 2 !important;
	}
}

@media (max-width: 767px) {
	.sacrantica-memorie-board {
		column-count: 1 !important;
	}
}

.sacrantica-memorie-board--js {
	display: flex !important;
	column-count: initial !important;
	align-items: flex-start;
	gap: 16px;
}

.sacrantica-memorie-board__colonna {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 0;
	min-width: 0;
}

.sacrantica-memorie-board--js .sacrantica-memoria-card {
	margin-bottom: 0; /* lo spazio tra le card è dato dal gap della colonna */
}

/* ---------- Card ---------- */
.sacrantica-memoria-card {
	display: flex !important;
	align-items: flex-end;
	break-inside: avoid; /* evita che una card venga tagliata tra due colonne */
	width: 100%;
	margin-bottom: 16px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	min-height: 180px; /* fallback, sovrascritto inline con l'altezza variabile per card */
	height: auto !important;
	/* L'altezza minima varia per card (vedi style inline in memorie-board.php)
	   per un vero effetto masonry; cresce oltre il minimo se il contenuto
	   (titolo/sottotitolo lunghi) lo richiede. */
	padding: 24px 20px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	background-size: cover;
	background-position: center;
}

.sacrantica-memoria-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(47, 53, 36, 0.18);
}

/* Se la card ha un'immagine di sfondo, scurisce leggermente per leggibilità testo. */
.sacrantica-memoria-card.has-image {
	color: #F2E6D1 !important;
}

.sacrantica-memoria-card.has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2; /* sopra il filtro colore (1), sotto il testo (3) */
	/* --sac-card-rgb è il colore della card (campo ACF "colore_card"),
	 * passato inline da sacrantica_render_memoria_card() — il fallback
	 * 47, 53, 36 (verde ardesia) copre il solo caso in cui la variabile
	 * non fosse impostata. */
	background: linear-gradient(to top, rgba(var(--sac-card-rgb, 47, 53, 36), 0.75) 20%, rgba(var(--sac-card-rgb, 47, 53, 36), 0) 70%);
}

/* Filtro colore piatto sopra la foto, stesso colore impostato per la card
 * (campo ACF "colore_card") — overlay a tinta uniforme (nessun blend), sotto
 * la sfumatura di leggibilità.
 */
.sacrantica-memoria-card__tint {
	position: absolute;
	inset: 0;
	z-index: 1; /* sotto il gradiente di leggibilità (2) e il testo (3) */
	pointer-events: none;
	opacity: 0.45;
}

.sacrantica-memoria-card__overlay {
	position: relative;
	z-index: 3;
}

.sacrantica-memoria-card__title {
	font-family: "Baskerville URW", Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	margin: 0 0 4px;
}

.sacrantica-memoria-card__sottotitolo {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	margin: 0 0 8px;
	opacity: 0.9;
}

.sacrantica-memoria-card__autore {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	margin: 0;
	opacity: 0.75;
}

.sacrantica-memoria-card__data {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	margin: 4px 0 0;
	opacity: 0.6;
}

/* Ombra testo sulle card con foto: il gradiente scuro (.has-image::before)
 * copre solo la parte bassa della card, ma titolo+sottotitolo possono
 * occupare più spazio di quello scurito (es. titoli su due righe) — con
 * una foto chiara in quel punto il testo diventa illeggibile. L'ombra
 * garantisce contrasto ovunque, indipendentemente da cosa c'è sotto,
 * senza dover indovinare l'altezza esatta del gradiente per ogni card.
 */
.sacrantica-memoria-card.has-image .sacrantica-memoria-card__title,
.sacrantica-memoria-card.has-image .sacrantica-memoria-card__sottotitolo,
.sacrantica-memoria-card.has-image .sacrantica-memoria-card__autore,
.sacrantica-memoria-card.has-image .sacrantica-memoria-card__data {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ---------- Paginazione (stessa struttura di Eventi) ---------- */
.sacrantica-memorie-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	font-family: "Open Sans", sans-serif;
}

.sacrantica-memorie-pagination button {
	min-width: 32px;
	height: 32px;
	border: 1px solid #d8cdb8;
	border-radius: 4px;
	background: #F2E6D1;
	color: #2F3524;
	cursor: pointer;
	font-size: 14px;
}

.sacrantica-memorie-pagination button:disabled {
	opacity: 0.4;
	cursor: default;
}

.sacrantica-memorie-pagination button.is-active {
	background: #543718;
	border-color: #543718;
	color: #F2E6D1;
}

.sacrantica-memorie-pagination__ellissi {
	font-family: "Open Sans", sans-serif;
	color: #543718;
	padding: 0 2px;
}

/* ---------- Scroll infinito ---------- */
.sacrantica-memorie-sentinella {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.sacrantica-memorie-carica-altri {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border: 1px solid #d8cdb8;
	border-radius: 999px;
	background-color: #F2E6D1;
	color: #543718;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.sacrantica-memorie-carica-altri:hover {
	filter: brightness(0.9);
}

.sacrantica-memorie-caricamento {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	color: #543718;
}

.sacrantica-memorie-empty {
	font-family: "Open Sans", sans-serif;
	color: #543718;
	text-align: center;
	padding: 40px 0;
}