.mgp-grid {
	display: grid;
	grid-template-columns: repeat(var(--mgp-cols-desktop, 3), 1fr);
	grid-auto-rows: 8px; /* fine-grained row unit; JS sets span per item */
	grid-auto-flow: dense;
	gap: var(--mgp-gap, 20px);
}

@media (max-width: 1024px) {
	.mgp-grid { grid-template-columns: repeat(var(--mgp-cols-tablet, 2), 1fr) !important; }
}
@media (max-width: 600px) {
	.mgp-grid { grid-template-columns: repeat(var(--mgp-cols-mobile, 1), 1fr) !important; }
}

.mgp-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--mgp-radius, 12px);
	background: var(--mgp-card-bg, #fff);
	display: flex;
	flex-direction: column;
	transition: transform .35s ease, box-shadow .35s ease;
	grid-row-end: span 30; /* fallback before JS runs */
}

.mgp-card-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}

/* ---- Size variants: control how much horizontal/vertical space a card claims ---- */
.mgp-item.mgp-size-wide  { grid-column: span 2; }
.mgp-item.mgp-size-big   { grid-column: span 2; }
.mgp-item.mgp-size-tall  .mgp-media { padding-top: 130%; }
.mgp-item.mgp-size-big   .mgp-media { padding-top: 90%; }

@media (max-width: 600px) {
	.mgp-item.mgp-size-wide, .mgp-item.mgp-size-big { grid-column: span 1 !important; }
}

.mgp-hover-lift .mgp-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.mgp-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eee;
}
.mgp-aspect-auto .mgp-media { padding-top: 66%; }
.mgp-aspect-square .mgp-media { padding-top: 100%; }
.mgp-aspect-4-3 .mgp-media { padding-top: 75%; }
.mgp-aspect-16-9 .mgp-media { padding-top: 56.25%; }

/* Specificity + !important on width/height/max-width guards against common
   theme resets like `img { max-width:100%; height:auto; }` (Kadence and most
   themes ship one), which would otherwise collapse this absolutely-positioned
   image back down to its intrinsic height inside the padding-top box above. */
.mgp-grid .mgp-item .mgp-media img {
	position: absolute;
	top: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .6s ease, filter .6s ease;
}

.mgp-body {
	padding: var(--mgp-card-padding, 20px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.mgp-title {
	margin: 0;
	font-family: var(--mgp-card-title-font, var(--mgp-title-font, inherit));
	font-size: var(--mgp-card-title-size, var(--mgp-title-size, 20px));
	font-weight: var(--mgp-title-weight, 600);
	text-transform: var(--mgp-title-transform, none);
	line-height: 1.3;
}
.mgp-title a { color: var(--mgp-card-title-color, var(--mgp-title-color, #111)); text-decoration: none; }
.mgp-title a:hover { text-decoration: underline; }

.mgp-excerpt {
	margin: 0;
	font-family: var(--mgp-card-excerpt-font, var(--mgp-excerpt-font, inherit));
	font-size: var(--mgp-card-excerpt-size, var(--mgp-excerpt-size, 15px));
	color: var(--mgp-card-excerpt-color, var(--mgp-excerpt-color, #555));
	line-height: 1.55;
}

.mgp-btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid var(--mgp-btn-bg, #111);
	transition: opacity .25s ease;
}
.mgp-btn:hover { opacity: .8; }
.mgp-btn-filled { background: var(--mgp-btn-bg, #111); color: var(--mgp-btn-color, #fff); border-color: var(--mgp-btn-bg, #111); }
.mgp-btn-outline { background: transparent; color: var(--mgp-btn-color, var(--mgp-btn-bg, #111)); border-color: var(--mgp-btn-bg, #111); }
.mgp-btn-outline:hover { background: var(--mgp-btn-bg, #111); color: var(--mgp-btn-color, #fff); }
.mgp-btn-link { border: none; padding: 0; background: none; color: var(--mgp-btn-color, var(--mgp-btn-bg, #111)); text-decoration: underline; }

/* ---- Image effects ---- */
.mgp-effect-grayscale-hover .mgp-media img { filter: grayscale(100%); }
.mgp-effect-grayscale-hover .mgp-item:hover .mgp-media img { filter: grayscale(0%); }

.mgp-effect-zoom-hover .mgp-item:hover .mgp-media img { transform: scale(1.08); }

.mgp-effect-blur-up .mgp-media img { filter: blur(6px); transform: scale(1.05); }
.mgp-effect-blur-up .mgp-item:hover .mgp-media img { filter: blur(0); transform: scale(1); }

.mgp-effect-duotone .mgp-media::after {
	content: "";
	position: absolute; inset: 0;
	mix-blend-mode: color;
	background: var(--mgp-duotone-dark, #1a1a1a);
	opacity: .85;
}
.mgp-effect-duotone .mgp-media img { filter: grayscale(100%) contrast(1.1); }
.mgp-effect-duotone .mgp-media::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--mgp-duotone-light, #f5e6c8);
	mix-blend-mode: multiply;
	opacity: .35;
	z-index: 1;
}

.mgp-effect-dark-overlay .mgp-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%);
}