/* Migros Home Manager — box "Offerte della settimana" [mhm_offers] */

.mhm-offers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
	margin: 0 0 40px;
}
.mhm-offer-box {
	border-radius: 15px;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	background-color: #222;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	/* Container query: i testi interni (titolo, sottotitolo, date) si
	   ridimensionano in base alla LARGHEZZA DEL BOX (unità cqi), non dello
	   schermo — così funzionano a prescindere dai padding delle colonne
	   WPBakery attorno allo shortcode. Niente overflow:hidden: se il
	   contenuto non ci sta, il box si allunga invece di tagliare il testo. */
	container-type: inline-size;
}
.mhm-offer-top {
	flex: 0 0 auto;
	align-content: center;
	/* min-height invece di height: la metà superiore resta metà box, ma
	   se titolo+sottotitolo sono più alti spinge giù la parte inferiore
	   invece di sovrapporsi alle date. */
	min-height: 50%;
}
.mhm-offer-bottom {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}
.mhm-align-left .mhm-offer-top {
	text-align: left;
}
.mhm-align-center .mhm-offer-top {
	text-align: center;
}
.mhm-align-right .mhm-offer-top {
	text-align: right;
}
.mhm-align-right .mhm-offer-bottom {
	align-items: flex-end;
}
.mhm-offer-title {
	font-size: 45px;
	/* 13cqi: la parola più lunga usata finora ("IMBATTIBILI") sta
	   sempre nella larghezza del box. Browser senza container query:
	   restano i 45px della riga sopra. */
	font-size: min(45px, 13cqi);
	line-height: 1.15;
	overflow-wrap: break-word;
	font-weight: 800;
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	align-content: center;
}
.mhm-offer-subtitle {
	display: inline-block;
	font-size: 25px;
	font-size: min(25px, 9cqi);
	font-weight: 700;
	color: #fff;
	padding: 4px 12px;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 2px;
}
.mhm-offer-date {
	font-size: 20px;
	font-size: min(20px, 7.5cqi);
	font-weight: 800;
	color: #fff;
	padding-bottom: 20px;
	padding-bottom: min(20px, 5cqi);
}
.mhm-offer-btn {
	display: inline-block;
	background: #ff6600;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	text-decoration: none;
	padding: 5px 22px;
	border-radius: 5px;
	text-transform: none;
	text-shadow: none;
}

.mhm-offer-btn:hover {
	color:#fff!important;
	background-color:#333!important;
}

@media (max-width: 1200px) {
	.mhm-offers-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
	.mhm-offer-title {
		font-size: 40px;
		font-size: min(40px, 13cqi);
	}
}
@media (max-width: 640px) {
	.mhm-offers-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.mhm-offer-box {
		padding: 18px 16px;
	}
	.mhm-offer-bottom {
		gap: 10px;
	}
}

/* Schermi molto piccoli (fino a 400px, es. 320/360/375): box più
   compatto e bottone leggermente ridotto. */
@media (max-width: 400px) {
	.mhm-offer-box {
		padding: 14px 12px;
	}
	.mhm-offer-subtitle {
		padding: 3px 8px;
	}
	.mhm-offer-btn {
		padding: 5px 16px;
	}
}