/*
 * Ulistema — home.css (solo home, caricato da ulistema_enqueue_assets)
 * Apertura «hero» (1 grande + 3 laterali) e ritocchi delle sezioni. Le sezioni usano i componenti
 * di base.css (titolo di sezione, carosello, card, slot ADV, .ul-section/.ul-adv-row/.ul-page-end).
 * Design: proiezioni.dc.html righe 126–129 (desktop 1280) e 162–163 (mobile 390).
 * Sotto 1024 px hero come mobile (a tutta larghezza), da 1024 px griglia 12 colonne.
 */

/* ---------- Hero: mobile e tablet (< 1024 px) ----------
   Grande 420 px, poi griglia a 2 colonne alte 190 (la prima laterale a tutta larghezza), gap 3. */
.ul-hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3px;
	max-width: var(--ul-max);
	margin-inline: auto;
}
.ul-hero__item {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	overflow: hidden;
	background: var(--ul-black);
	color: var(--ul-white);
}
.ul-hero__item--main { grid-column: 1 / -1; height: 420px; padding: 20px var(--ul-pad); }
.ul-hero__item--side { height: 190px; padding: 12px; }
.ul-hero__item--s1,
.ul-hero--n3 .ul-hero__item--s2 { grid-column: 1 / -1; }
section.ul-hero.ul-hero--n4 a:hover{
	background-color: var(--ul-white);
	    line-height: normal;
}
/* Foto (al posto dello sfondo center/cover del design) e sfumatura */
.ul-hero__media { position: absolute; inset: 0; z-index: -1; transition: filter .2s; }
.ul-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ul-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 70%);
}
.ul-hero__item--main .ul-hero__media::after {
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, 0));
}

/* Testi */
.ul-hero__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ul-hero__label,
.ul-hero__dek,
.ul-hero__by { display: none; }
/* Parole lunghe nelle laterali strette (es. 1024 px): sillabazione italiana o a capo forzato, mai fuori dal riquadro */
.ul-hero__title { margin: 0; font: 800 14px/1.2 var(--ul-font); letter-spacing: normal; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ul-hero__item--main .ul-hero__title { font: 800 28px/1 var(--ul-font); letter-spacing: -.03em; }
/* Titoli laterali: al massimo le righe che stanno nel riquadro (190 − 24 px qui, 290 − 40 px su desktop) */
.ul-hero__item--side .ul-hero__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 9;
	line-clamp: 9;
}
.ul-hero__link { color: inherit; transition: color .2s ease; }
/* Solo con il mouse: la foto si ingrandisce appena dentro il riquadro (overflow nascosto su .ul-hero__item) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ul-hero__media img { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
	.ul-hero__item:hover .ul-hero__media img { transform: scale(1.04); }
}
.ul-hero__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ul-hero__link:focus-visible { outline: none; }
.ul-hero__item:has(.ul-hero__link:focus-visible) { outline: 2px solid var(--ul-red); outline-offset: -2px; }
.ul-hero__item:hover .ul-hero__link { color: var(--ul-red); }
.ul-hero__item:hover .ul-hero__media { filter: brightness(.92); }
.ul-hero__meta { margin: 0; font-size: 12px; opacity: .85; }
.ul-hero__author { font-weight: inherit; }

/* ---------- Hero: desktop (≥ 1024 px) ----------
   12 colonne, righe 290 + 290, gap 4, padding 4px 32px 0: grande 1/8 su due righe, laterali 8/13, 8/11, 11/13. */
@media (min-width: 1024px) {
	.ul-hero {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: 290px 290px;
		gap: 4px;
		padding: 4px var(--ul-pad) 0;
	}
	.ul-hero__item--main { grid-column: 1 / 8; grid-row: 1 / 3; height: auto; padding: 32px; }
	.ul-hero__item--side { height: auto; padding: 20px; }
	.ul-hero__item--s1 { grid-column: 8 / 13; grid-row: 1; }
	.ul-hero__item--s2 { grid-column: 8 / 11; grid-row: 2; }
	.ul-hero__item--s3 { grid-column: 11 / 13; grid-row: 2; }
	/* Meno di 4 articoli: nessun buco nella griglia */
	.ul-hero--n1 .ul-hero__item--main { grid-column: 1 / -1; }
	.ul-hero--n2 .ul-hero__item--s1 { grid-row: 1 / 3; }
	.ul-hero--n3 .ul-hero__item--s2 { grid-column: 8 / 13; }

	.ul-hero__media::after {
		background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%);
	}
	.ul-hero__item--main .ul-hero__media::after {
		background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0));
	}

	.ul-hero__body { gap: 8px; }
	.ul-hero__item--main .ul-hero__body { gap: 12px; max-width: 620px; }
	.ul-hero__label {
		display: block;
		align-self: flex-start;
		padding: 5px 8px;
		background: var(--ul-red);
		color: var(--ul-white);
		font: 800 10px var(--ul-font);
		letter-spacing: .14em;
		text-transform: uppercase;
	}
	.ul-hero__title { font: 800 19px/1.15 var(--ul-font); letter-spacing: -.02em; }
	.ul-hero__item--side .ul-hero__title { -webkit-line-clamp: 10; line-clamp: 10; }
	.ul-hero__item--main .ul-hero__title { font: 800 46px/1 var(--ul-font); letter-spacing: -.03em; }
	.ul-hero__dek {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		font-size: 15px;
		line-height: 1.45;
		opacity: .9;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
	.ul-hero__by { display: inline; }
	.ul-hero__meta { opacity: .8; }
	.ul-hero__author { font-weight: 700; }
}

/* ---------- Sezioni ----------
   Sommari delle card al massimo su 3 righe: card della stessa riga alte uguali anche con testi lunghi. */
.ul-home .ul-card__dek {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* ---------- Banner promozionale (ulistema_home_promo_html) ----------
   Immagine larga quanto il contenuto, nessun bordo; spazio sopra come la riga ADV (24 / 36). Classe «vetrina»
   e non «banner/promo»: i filtri anti-pubblicità nasconderebbero un banner che è del sito. */
.ul-vetrina { margin-top: 24px; }
.ul-vetrina__link { display: block; }
.ul-vetrina__img { width: 100%; height: auto; transition: filter .2s; }
.ul-vetrina__link:hover .ul-vetrina__img { filter: brightness(.92); }
@media (min-width: 1024px) {
	.ul-vetrina { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.ul-hero__media, .ul-vetrina__img { transition: none; }
}

/* ---------- Core Web Vitals: sezioni sotto la piega disegnate solo quando si avvicinano ----------
   Finché una sezione è lontana dalla finestra il browser non la impagina e non scarica le sue foto lazy (i caroselli
   ne hanno 6 l'una). Lighthouse mobile, 26/10/2026: 28 → 13 foto prima del primo disegno, LCP 8,3 → 4,8 s.
   Altezza di riserva del contenuto (senza il padding-top): 490, media misurata da 390 a 1440; «auto» poi ricorda
   quella vera. content-visibility taglia il disegno al bordo della sezione: overflow-clip-margin lo allarga di
   --ul-pad, quanto esce a destra la traccia del carosello sotto 1024 (e basta per l'anello di focus delle frecce).
   Solo dove overflow-clip-margin esiste (Chrome, Edge, Firefox): Safari resta senza la regola, quindi senza tagli. */
@media screen {
	@supports (overflow-clip-margin: 1px) {
		.ul-home__sec { content-visibility: auto; contain-intrinsic-block-size: auto 490px; overflow-clip-margin: var(--ul-pad); }
	}
}