:root{
	--gap: 16px;
	--radius: 12px;
	--txt: #ffffff;
	--bg: #f2f4f7;
	--card-bg: #0a0a0a;
	--shadow: 0 10px 30px rgba(0,0,0,.15);
	--blue: #2b7bff;
	--red: #ff2b44;
	--green: #21a179;
	--orange: #ff7a21;

	/* altezza uguale per i 2 box grandi */
	--hero-h: clamp(260px, 38vw, 420px);
	--title-lines: 4;  /* max righe visibili in tutti i box */
}

/* Top area: grande + spalla destra */
.hero-grid{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--gap);
	margin-bottom: 18px;
	align-items: stretch;
}

/* Cards base */
.card{
	position: relative;
	height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--card-bg);
	color: var(--txt);
	box-shadow: var(--shadow);
	isolation: isolate;
}

.card img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .35s ease;
	z-index: 1;
}

.card a{
	position: absolute;
	inset: 0;
	z-index: 4;
	color: inherit;
	text-decoration: none;
}

.card::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
	z-index: 2;
}

.card:hover img{ transform: scale(1.04); }

/* Titolo sovrapposto con clamp */
.card .title{
	position:absolute;
	left:14px; right:14px; bottom:12px;
	z-index:3;
	text-shadow: 0 2px 10px rgba(0,0,0,.7);
	font-weight: 800;

	/* clamp a 4 righe + fallback cross‑browser */
	--lh: 1.15;
	line-height: var(--lh);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: var(--title-lines);
	line-clamp: var(--title-lines);
	max-height: calc(var(--title-lines) * 1em * var(--lh));
}

.card .title.large{  font-size: clamp(20px, 2.6vw, 30px); }
.card .title.medium{ font-size: clamp(16px, 2vw, 20px); }
.card .title.small{  font-size: clamp(15px, 1.6vw, 17px); }	

/* Hero cards: stessa altezza */
.hero-grid > .card{ height: var(--hero-h); }

.thumb-grid{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
}

.thumb{
	aspect-ratio: 16 / 10;
}

/* Responsive */
@media (max-width: 980px){
	.hero-grid{ grid-template-columns: 1fr; }
	.thumb-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Mobile */
@media (max-width: 720px){

	.hero-grid{ 
		padding: 0 17px;
	}

	.thumb-grid{
		padding: 0 17px;
		grid-template-columns: repeat(2, 1fr); 
	}

}

/* Tablets: Portrait + Landscape */
@media (min-width: 600px) and (max-width: 1024px) { 

	.hero-grid{ 
		padding: 0 17px;
		grid-template-columns: 2fr 1fr;
	}

	.thumb-grid{
		padding: 0 17px;
		grid-template-columns: repeat(2, 2fr); 
	}

}

@media (max-width: 480px){
	.thumb-grid{ grid-template-columns: 1fr; }
	.title.large{ font-size: 20px; }
}

@media (prefers-reduced-motion: reduce){
	.card:hover img{ transform: none; }
}