/* mm-card
   Stacked info cards with a glassy gradient background and a brand-blue
   left border. Used in vertical stacks (.mm-card-stack) or 3-column rows
   (.mm-card-row). Backdrop-blur gives the glass effect over busy backgrounds. */

.mm-card-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.mm-card {
	background:
		linear-gradient(135deg,
			rgba(10, 10, 10, 0.25) 0%,
			rgba(10, 10, 10, 0.25) 65%,
			rgba(0, 180, 255, 0.05) 95%,
			rgba(0, 180, 255, 0.09) 100%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-left: 3px solid var(--mm-accent);
	padding: 18px 24px;
	min-height: 70px;
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.92);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.01em;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Three-column equal-height row using flex on the Bootstrap .row */
.mm-card-row { display: flex; flex-wrap: wrap; }
.mm-card-row > [class*="col-"] { display: flex; }
.mm-card-row > [class*="col-"] > .mm-card { flex: 1; }

@media (max-width: 991px) {
	.mm-card-stack { display: grid; grid-auto-rows: 1fr; }
	.mm-card { min-height: 80px; font-size: 16px; padding: 16px 20px; }
	.mm-card-row { display: block; }
	.mm-card-row > [class*="col-"] { display: block; margin-bottom: 18px; }
}
@media (max-width: 575px) {
	.mm-card { font-size: 15px; padding: 14px 18px; min-height: 70px; }
}