/* ===================================================
   Griglia eventi Miscela Bistrot
   Usata dagli shortcode [mb_prossimi_eventi] e [mb_eventi_passati]
   Puoi sovrascrivere qualsiasi regola dal CSS del tuo tema Divi
   aggiungendo uno stile con specificità superiore (es. #main .mb-evento-card {})
   =================================================== */

/* --- Contenitore griglia --- */
.mb-eventi-griglia {
	display: grid;
	gap: 24px;
	width: 100%;
	margin: 0 auto 48px;
}

/* Varianti colonne */
.mb-eventi-col-1 { grid-template-columns: 1fr; }
.mb-eventi-col-2 { grid-template-columns: repeat(2, 1fr); }
.mb-eventi-col-3 { grid-template-columns: repeat(3, 1fr); }
.mb-eventi-col-4 { grid-template-columns: repeat(4, 1fr); }
.mb-eventi-col-5 { grid-template-columns: repeat(5, 1fr); }
.mb-eventi-col-6 { grid-template-columns: repeat(6, 1fr); }

/* --- Titolo sezione (opzionale) --- */
.mb-eventi-titolo-sezione {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 32px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- Singola card --- */
.mb-evento-card {
	background: #ffffff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mb-evento-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 24px rgba(0,0,0,0.16);
}

/* --- Link — azzera stili e avvolge tutto il contenuto --- */
.mb-evento-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* --- Immagine (locandina o featured image) --- */
.mb-evento-img-wrap {
	position: relative;
	width: 100%;
	/* Rispetta le proporzioni 4:5 della locandina 1080×1350 */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #1b2e3e;
}

.mb-evento-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.3s ease;
}

.mb-evento-card:hover .mb-evento-img-wrap img {
	transform: scale(1.03);
}

/* --- Info testuali sotto l'immagine --- */
.mb-evento-info {
	padding: 14px 16px 18px;
}

/* Titolo ed excerpt ereditano font, colore e dimensione dal tema Divi */
.mb-eventi-griglia .mb-evento-titolo {
	margin: 0 0 6px;
	line-height: 1.3;
	text-align: center !important;
}

.mb-eventi-griglia .mb-evento-meta {
	line-height: 1.4;
	text-align: center !important;
}

.mb-eventi-griglia .mb-evento-excerpt {
	margin: 0;
	text-align: center !important;
}

/* Font-size separati per prossimi eventi e passati */
.mb-eventi-prossimi .mb-evento-titolo,
.mb-eventi-prossimi .mb-evento-excerpt {
	font-size: 90% !important;
}

.mb-eventi-passati .mb-evento-titolo,
.mb-eventi-passati .mb-evento-excerpt {
	font-size: 80% !important;
}

/* ===================================================
   Responsive
   =================================================== */

/* Tablet: max 2 colonne */
@media (max-width: 900px) {
	.mb-eventi-col-3,
	.mb-eventi-col-4,
	.mb-eventi-col-5,
	.mb-eventi-col-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 colonna */
@media (max-width: 520px) {
	.mb-eventi-griglia {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
}