/* home.css – homepage magazine */
/*
 * Soglia layout “largo” viewport: da 1240px 4 col In evidenza (2 card piccole) e 4 col categorie.
 * Sotto: 3 col + una sola card piccola visibile.
 */
body.home { background: linear-gradient(180deg, #000 0, #000 12rem, #fff 12rem); }
body.home .site-main { padding-top: 0; }
.hero-section { margin-bottom: 1rem; margin-top: 0; padding-top: 2rem; } /* Cross-browser: evita disallineamenti Safari/Chrome dovuti a margin-collapsing sui primi elementi della pagina */

/* Safari desktop: piccola correzione dell'altezza visiva tra navbar e hero,
   per allineare la distanza pattern → "ULTIMO ARTICOLO" a quella di Chrome. */
@supports (-webkit-hyphens: none) {
	@media (min-width: 900px) {
		.navbar {
			padding-top: 1rem;
			padding-bottom: 1rem;
		}
		.hero-section {
			padding-top: 1.75rem;
		}
	}
}
.hero-article {
	background: #000;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-article:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.hero-content {
	position: relative;
	padding: 2.5rem max(var(--space-x), env(safe-area-inset-right, 0px)) 2.5rem max(var(--space-x), env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	max-width: 100%;
	color: #fff;
}
.hero-link {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	text-decoration: none;
}
.hero-link:hover { text-decoration: none; }
.hero-content-inner {
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.hero-content-inner .hero-author { pointer-events: auto; }
.hero-labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5em;
	margin-bottom: 0.5em;
}
.hero-label {
	font-size: 0.75rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
}
.hero-label-sep {
	line-height: 1.25;
	color: rgba(255,255,255,0.6);
	font-weight: 700;
	user-select: none;
}
.hero-author {
	font-size: 0.75rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: rgba(255,255,255,0.9);
	text-decoration: none;
}
.hero-author:hover {
	text-decoration: underline;
}
.hero-labels a.hero-author:hover {
	color: #fff;
}
.hero-title { margin: 0 0 0.35em; color: #fff; overflow-wrap: break-word; word-break: break-word; line-height: 1.2; text-align: justify; }
.hero-excerpt {
	margin: 0;
	font-size: 1rem;
	color: #fff;
	opacity: 1;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align: justify;
	line-height: 1.5;
}
.hero-read-more {
	display: block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 0.75em;
	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;
}

/* Desktop: slot CTA fisso + ::after come le card; spazio anteprima→bottone come prima (fuori dalla pill) */
@media (min-width: 900px) {
	.hero-content-inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.hero-excerpt {
		flex: 1 1 auto;
		min-height: 0;
		margin-bottom: 0.75em;
	}
	.hero-read-more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 var(--card-cta-min-height);
		flex-shrink: 0;
		margin-top: 0;
		margin-bottom: 0;
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}
	.hero-content-inner::after {
		content: "";
		flex: 0 0 var(--card-cta-bottom);
		min-height: var(--card-cta-bottom);
		width: 0;
		overflow: hidden;
		pointer-events: none;
		visibility: hidden;
	}
}

.hero-article:hover .hero-read-more { opacity: 1; }
.hero-article:hover .hero-read-more {
	background: #333;
	border-color: #333;
}
@media (max-width: 899px) {
	.hero-read-more { opacity: 1; }
}
.featured-section, .latest-section, .category-section { padding: 1rem 0; }

/*
 * Contenitori delle card (solo sezioni in front-page.php): max-width 1280px (+80 vs layout 1200px);
 * il gutter laterale resta quello del .container (minimo --space-x).
 */
@media (min-width: 900px) {
	.site-main .featured-section > .container,
	.site-main .category-columns-section > .container {
		max-width: min(1280px, 100%);
	}
}

/* In evidenza: titolo di sezione in stile etichetta (come ULTIMO ARTICOLO in hero) */
.featured-section .section-title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #555;
	margin-bottom: 1rem;
}

/* Header In evidenza / Altri articoli */
.featured-header {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 1.5rem;
	/* Un solo 1rem fino alle card: come titolo categoria → card (.category-columns-section .section-title).
	   I titoli h2 non hanno margin-bottom qui (grid: altrimenti si somma al margine del box e supera 1rem). */
	margin-bottom: 1rem;
}
.featured-section .featured-header .section-title {
	margin-bottom: 0;
}
.section-title-primary {
	grid-column: 1 / span 2;
}
.section-title-secondary-desktop {
	grid-column: 3 / span 2;
}
/* Versione mobile del titolo "Altri articoli": per default nascosta */
.section-title-secondary-mobile {
	display: none;
}

/* Stessa griglia della riga card sotto: evidenza 2/3 + una card 1/3 → “Altri articoli” sopra la terza colonna */
@media (min-width: 900px) and (max-width: 1239px) {
	.featured-header {
		grid-template-columns: repeat(3, 1fr);
	}
	.section-title-secondary-desktop {
		grid-column: 3;
	}
}

@media (max-width: 899px) {
	/* Su mobile i titoli vanno in colonna; nascondi la versione desktop di "Altri articoli" */
	.featured-header {
		display: block;
	}
	.section-title-secondary-desktop {
		display: none;
	}
}

/* In evidenza: griglia e card vere (contenitore visibile) */
.featured-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

/* Mobile: deve stare DOPO la regola .featured-grid { gap: 1.5rem } sopra, altrimenti il gap “largo”
   vince in cascata e «Altri articoli» → card risulta più distante del margin-bottom 1rem di «In evidenza». */
@media (max-width: 899px) {
	.featured-section .featured-grid {
		gap: 1rem;
	}
	/* margin-top 0.5rem + row-gap 1rem ≈ 1.5rem sotto la card grande (scala --space-x / gap categorie). */
	.featured-section .featured-grid > .section-title.section-title-secondary-mobile {
		display: block;
		margin-top: 0.5rem;
		margin-bottom: 0;
	}
}

@media (min-width: 900px) {
	.featured-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.featured-first-card {
		grid-column: span 2;
		display: flex;
		flex-direction: column;
		min-width: 0;
		min-height: 0;
	}
	.featured-first-card .post-card {
		flex: 1 1 auto;
		min-height: 0;
		height: 100%;
		align-self: stretch;
		width: 100%;
	}
}

/* Breakpoint di coerenza layout:
   quando le card piccole iniziano a degradare (etichette/immagini/disallineamenti),
   mostra solo 2 card nella prima riga: evidenza + una a destra. */
@media (min-width: 900px) and (max-width: 1239px) {
	.featured-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.featured-first-card {
		grid-column: span 2;
	}
	/* Nasconde eventuali card extra a destra in questa fascia. */
	.featured-grid > .post-card:nth-of-type(n+2) {
		display: none;
	}
}

/* Card in evidenza: box con sfondo, bordo e ombra + lift al hover; griglia con riga etichette a altezza fissa per allineare le immagini */
.featured-section .post-card {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 0;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.featured-section .post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.featured-section .post-card-terms {
	grid-row: 1;
	/* padding / overflow-x / allineamento: cards.css (stesso inset orizzontale dell’anteprima) */
	min-height: 0;
}
.featured-section .post-card-link {
	grid-row: 2;
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* padding link: var(--card-link-padding-x) in cards.css */
}
.featured-section .post-card-image {
	/* margin immagine: cards.css (bleed + var(--card-image-gap-below)) */
	border-radius: 0;
}
.featured-section .post-card-image img {
	border-radius: 0;
}
.featured-section .post-card-body {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: var(--card-cta-bottom);
}

/* Titoli categorie in home: stile etichetta (come IN EVIDENZA) */
.category-columns-section .section-title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #555;
	margin-bottom: 1rem;
}

/* Sotto: 4 colonne, una per categoria (ultimo articolo per categoria).
   Stessa soglia della griglia In evidenza: sotto 1240px restano 2 colonne (come la prima riga
   che in 900–1239 mostra evidenza + una card), 4 colonne da 1240px in su. */
.category-columns-section { padding: 2rem 0; }
.category-columns-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	/* minmax(0,1fr): colonne sempre uguali anche con contenuto “largo” (etichette, titoli) */
	.category-columns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
	.category-columns-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.category-columns-grid .category-section {
	padding: 0;
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
/* Una sola card per categoria: occupa tutta la colonna (evita larghezze diverse tra categorie) */
.category-columns-grid .category-section .post-grid {
	grid-template-columns: 1fr;
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	min-height: 0;
}
.category-columns-grid .category-section .post-grid > * {
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
}
.category-columns-grid .category-section > .section-title {
	min-width: 0;
	max-width: 100%;
}

/* Mobile: carosello (swipe) per gli articoli dentro ogni categoria */
@media (max-width: 639px) {
	.category-section-carousel {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 0.25rem; /* evita taglio ombra/bordi durante lo scroll */
		cursor: grab;
	}
	.category-section-carousel:active { cursor: grabbing; }
	.category-section-carousel::-webkit-scrollbar { display: none; height: 0; }

	.category-section-carousel-item {
		flex: 0 0 85%;
		max-width: 85%;
		scroll-snap-align: start;
		min-width: 0;
	}

	/* In mobile, la card deve comportarsi come “box intero” dentro l’item */
	.category-section-carousel-item .post-card {
		height: 100%;
	}

	/* Mostra il cursore “grab” su tutta la card (immagine/testo), ma non sulle etichette cliccabili. */
	.category-section-carousel-item,
	.category-section-carousel-item .post-card,
	.category-section-carousel-item .post-card-link,
	.category-section-carousel-item .post-card-image,
	.category-section-carousel-item .post-card-image img,
	.category-section-carousel-item .post-card-body,
	.category-section-carousel-item .post-card-title,
	.category-section-carousel-item .post-card-lead,
	.category-section-carousel-item .post-card-cta {
		cursor: grab;
	}
	.category-section-carousel:active .category-section-carousel-item,
	.category-section-carousel:active .category-section-carousel-item .post-card,
	.category-section-carousel:active .category-section-carousel-item .post-card-link,
	.category-section-carousel:active .category-section-carousel-item .post-card-image,
	.category-section-carousel:active .category-section-carousel-item .post-card-image img,
	.category-section-carousel:active .category-section-carousel-item .post-card-body,
	.category-section-carousel:active .category-section-carousel-item .post-card-title,
	.category-section-carousel:active .category-section-carousel-item .post-card-lead,
	.category-section-carousel:active .category-section-carousel-item .post-card-cta {
		cursor: grabbing;
	}

	/* Etichette (autore/categoria/tag): restano “isolati” e cliccabili come link. */
	.category-section-carousel .post-card-term,
	.category-section-carousel .post-card-term * {
		cursor: pointer;
	}
}
/* Card categorie: stessa altezza della fila e stesso stile box della fila In evidenza; griglia con riga etichette a altezza fissa per allineare le immagini */
.category-columns-section .post-card {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 0;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.category-columns-section .post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.category-columns-section .post-card-link {
	grid-row: 2;
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.category-columns-section .post-card-terms {
	grid-row: 1;
	min-height: 0;
}
.category-columns-section .post-card-image {
	border-radius: 0;
}
.category-columns-section .post-card-image img {
	border-radius: 0;
}
.category-columns-section .post-card-body {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: var(--card-cta-bottom);
}

.more-link-wrap { margin-top: 1.5rem; text-align: center; }
.more-link { font-weight: 600; }