/* cards.css – card articoli */
:root {
	/* Spaziatura coerente: terms, link, immagine, anteprima, CTA (home + griglie generiche + orizzontale).
	   Orizzontale etichette = stesso inset del corpo (anteprima/titolo) sotto .post-card-link. */
	--card-terms-padding: 1rem var(--card-link-padding-x) 0.5rem;
	--card-link-padding-x: 1rem;
	--card-link-padding-bottom: 0;
	--card-terms-gap-below: 0.5rem; /* margine sotto il blocco etichette */
	--card-image-gap-below: 1rem;
	/* Stessa altezza minima per foto e placeholder (allinea i bordi inferiori in griglia). */
	--card-image-min-height: 140px;
	--card-cta-bottom: 1rem;
	/* Altezza minima del bottone (padding 0.5×2 + bordo + ~linea a font 0.7rem): evita che in
	   resize il flex ignori lo spazio del CTA (opacity 0) e l’anteprima finisca sotto overflow. */
	--card-cta-min-height: calc(1rem + 2px + 0.95rem);
	--card-excerpt-gap: 0.75rem;
	/* Desktop orizzontale: padding-top 0 in .post-grid-horizontal (titolo allineato all’immagine) */
	--card-horizontal-body-padding: 0.5rem 1.25rem 0;
	--card-horizontal-body-inset-x: 1.25rem;
	/* Alias usato dalla variante orizzontale desktop (immagine + allineamento CTA) */
	--card-bottom-gap: var(--card-cta-bottom);
}

.post-card {
	break-inside: avoid;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	min-width: 0; /* in griglia: la card può restringersi senza far uscire il testo dal bordo */
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.post-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	color: inherit;
	text-decoration: none;
	min-width: 0; /* consente al testo di restringersi in griglia/flex senza overflow */
	padding: 0 var(--card-link-padding-x) var(--card-link-padding-bottom);
	box-sizing: border-box;
}
.post-card-link:hover { text-decoration: none; }
.post-card-image {
	aspect-ratio: 16/10;
	min-height: var(--card-image-min-height);
	overflow: hidden;
	border-radius: 4px;
	margin: 0 calc(-1 * var(--card-link-padding-x)) var(--card-image-gap-below);
	background: #eee;
	flex-shrink: 0;
}
.post-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ritaglio verticale: mostra la parte alta (teste, titoli in foto), non il centro. */
	object-position: center top;
}
.post-card-image-placeholder { background: #e8e8e8; }
.post-card-body {
	padding: 0;
	padding-bottom: var(--card-cta-bottom);
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	/* Serve per ancorare "post-card-read-more" al fondo quando la card
	   viene allungata (es. home / griglie con righe a 1fr). */
	flex: 1 1 auto;
	min-height: 0;
}
.post-card-excerpt { font-size: 0.9375rem; color: #444; margin: 0; display: block; }

/* Titoli card: sempre allineati a sinistra (verticali e orizzontali) */
.post-card-title,
.post-card-horizontal-title {
	text-align: justify;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	/* Se in qualche sezione viene forzato il justify, usa l'inter-word per ridurre gli spazi enormi. */
	text-justify: inter-word;
	text-align-last: left;
}

/* Card: solo anteprime giustificate (verticali e orizzontali) */
.post-card-excerpt,
.post-card-horizontal-lead {
	text-align: justify;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.post-card-excerpt {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	margin-bottom: var(--card-excerpt-gap);
}

/* Sillabazione/ spezzatura parole: attenua gli spazi enormi in anteprima */
.post-card-excerpt,
.post-card-horizontal-lead {
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}
.post-card-read-more {
	/* CTA "Continua a leggere" come la hero: invisibile su desktop, visibile in mobile */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	min-height: var(--card-cta-min-height);
	/* flex-basis fissa: il browser non può “collassare” lo slot al resize (opacity 0). */
	flex: 0 0 var(--card-cta-min-height);
	flex-shrink: 0;
	white-space: nowrap;
	/* Sempre ancorato al fondo card, a prescindere dal contenuto. */
	margin-top: auto;
	align-self: flex-start;
	margin-left: 0;
	/* Margine sotto CTA: padding-bottom del .post-card-body */
	margin-bottom: 0;
	padding: 0.5rem 1rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid #333;
	border-radius: 4px;
	background: #333;
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Nella variante orizzontale il link già ha padding laterale: non aggiungere extra margine */
.post-grid-horizontal .post-card-read-more {
	margin-left: 0;
	margin-bottom: 0;
}

/* Desktop: visibile solo al passaggio del mouse come la hero */
.post-card:hover .post-card-read-more,
.post-card-horizontal:hover .post-card-read-more {
	opacity: 1;
	background: #111;
	border-color: #111;
}

/* Mobile: sempre visibile come la hero mobile */
@media (max-width: 899px) {
	.post-card-read-more {
		opacity: 1;
		background: #333;
		border-color: #333;
	}
}

/* Card orizzontale (markup separato): evita overflow del testo nel contenitore */
.post-card-horizontal-link {
	display: block;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}
.post-card-horizontal-link:hover { text-decoration: none; }
.post-card-horizontal {
	min-width: 0;
	max-width: 100%;
}
.post-card-horizontal-body {
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: var(--card-cta-bottom);
	box-sizing: border-box;
}
.post-card-horizontal-lead {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	margin-bottom: var(--card-excerpt-gap);
}

/* Etichette card: massimo 2 righe visibili — riga 1 autore+data, riga 2 categorie/tag (nessun wrap interno). */
.post-card .post-card-terms {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem 0;
	/* Stesso inset orizzontale del blocco titolo/anteprima (padding di .post-card-link) */
	padding-top: 1rem;
	padding-left: var(--card-link-padding-x);
	padding-right: var(--card-link-padding-x);
	padding-bottom: 0.5rem;
	margin-bottom: var(--card-terms-gap-below);
	box-sizing: border-box;
	font-size: 0.75rem;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	min-height: 5rem;
	flex-shrink: 0;
	text-align: left;
	/* Su WebKit, overflow-x + padding sullo stesso box può far sparire il padding destro. */
	overflow-x: visible;
	overflow-y: visible;
}
/* Entrambe le righe (meta e categorie/tag) su una sola linea: il markup limita le pill e usa +N. */
.post-card-terms-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.35rem 0.75rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: visible;
}
.post-card-terms-meta {
	margin-bottom: 0.15rem;
}
/* Pill autore e data: larghezza al contenuto, niente ellipsis né troncamento */
.post-card-terms-meta .post-card-term-author,
.post-card-terms-meta .post-card-term-date {
	flex: 0 0 auto;
	width: fit-content;
	max-width: none;
	min-width: 0;
	justify-content: flex-start;
	text-align: left;
	overflow: visible;
}
.post-card-terms-taxonomies {
	/* Se le pill superano la larghezza, scorri orizzontalmente (mobile + desktop). */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox: nasconde scrollbar */
	-ms-overflow-style: none; /* IE/Edge legacy */
	flex: 1 1 auto;
	max-width: 100%;
	min-width: 0;
	cursor: grab;
	user-select: none;
	/* Touch: pan orizzontale nativo (overflow-x) + pan verticale pagina; il drag JS resta solo per mouse. */
	touch-action: pan-x pan-y;
	/* Evita "chain scrolling" orizzontale verso la pagina */
	overscroll-behavior-x: contain;
}
.post-card-terms-taxonomies.is-dragging { cursor: grabbing; }
.post-card-terms-taxonomies::-webkit-scrollbar { display: none; height: 0; }
.post-card-term {
	/* Stesso spazio a sinistra e a destra del testo (un solo valore → padding-inline) */
	--post-card-term-pad-x: max(0.5em, 10px);
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	padding-block: max(0.2em, 4px);
	padding-inline: var(--post-card-term-pad-x);
	background: #e8e8e8;
	color: #444;
	text-decoration: none;
	border-radius: 3px;
	width: fit-content;
	max-width: none;
	min-width: 0;
	overflow: visible;
	flex: 0 0 auto;
}
/* Testo etichetta: dimensione naturale, una riga senza puntini */
.post-card-term-inner {
	display: block;
	width: max-content;
	max-width: none;
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
	text-align: start;
}
/* Retrocompatibilità se manca lo span (es. markup vecchio) */
.post-card-term:not(:has(.post-card-term-inner)) {
	overflow: visible;
	white-space: nowrap;
}
.post-card-term:hover {
	color: #222;
	text-decoration: none;
}
.post-card-term-author {
	background: #ddd;
	font-weight: 600;
}
.post-card-term-author:hover { background: #ccc; }
.post-card-term-date {
	background: #eee;
	color: #666;
	font-size: 0.9em;
	/* Spazio testo–bordo orizzontale: 75% rispetto alle altre pill (−25% per lato). */
	padding-inline: calc(var(--post-card-term-pad-x) * 0.75);
}
.post-card-term-date:hover { background: #e2e2e2; }
.post-card-term-category {
	background: #e5e9ec;
}
.post-card-term-category:hover { background: #d8dee3; }
.post-card-term-tag {
	background: #e0e8f0;
}
.post-card-term-tag:hover { background: #cfdce8; }
.post-card-term-more {
	background: #e0e0e0;
	color: #555;
	cursor: default;
	flex: 0 0 auto;
}

/* Card orizzontale: stessa card della home, layout orizzontale solo per pagina Articoli / Autore (desktop) */
.post-grid-horizontal {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.post-grid-horizontal .post-card {
	width: 100%;
	min-width: 0;
}
/* Stesso respiro interno delle card in home: etichette e contenuto non attaccati ai bordi */
.post-grid-horizontal .post-card-terms {
	padding: var(--card-terms-padding);
	margin-bottom: 0;
}
.post-grid-horizontal .post-card-link {
	padding: 0 var(--card-link-padding-x) var(--card-link-padding-bottom);
}
@media (min-width: 960px) {
	/*
	 * Allineamento bordo inferiore immagine ↔ bordo inferiore CTA:
	 * stessa altezza delle due colonne (align-items: stretch), niente margin sotto l’immagine
	 * né padding-bottom sul body: il respiro sotto entrambi è un solo padding-bottom sul link.
	 */
	.post-grid-horizontal .post-card-link {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		padding-bottom: var(--card-cta-bottom);
	}
	.post-grid-horizontal .post-card-image {
		width: 240px;
		min-width: 240px;
		flex-shrink: 0;
		align-self: stretch;
		min-height: 0;
		margin: 0;
		background: #e0e0e0;
	}
	.post-grid-horizontal .post-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
	.post-grid-horizontal .post-card-body {
		flex: 1;
		min-width: 0;
		min-height: 0;
		/* Top 0: titolo e anteprima partono in linea col bordo superiore dell’immagine; più altezza per l’anteprima.
		   CTA: invariato (margin-top: auto, flex, padding-bottom sul link). */
		padding: 0 var(--card-horizontal-body-inset-x);
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
}