/* MGH Image + Text widget – two-column layout; colors and typography from MGH design tokens via Elementor controls */
/* Figma: image 686×386px. Section padding: 100px top, 50px left/right; 10px gap image–caption */
.mgh-image-text {
	display: grid;
	grid-template-columns: 686px 1fr;
	align-items: start;
	gap: 40px;
	max-width: 100%;
	padding: 100px 50px 0 50px;
}

.mgh-image-text__media {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 10px;
}

.mgh-image-text__caption {
	margin: 0;
	line-height: 1.4;
}

/* More specific than Elementor's .elementor img so border-radius and other rules apply */
.mgh-image-text .mgh-image-text__img {
	width: 100%;
	aspect-ratio: 686 / 386;
	object-fit: cover;
	display: block;
	vertical-align: middle;
	border-radius: 8px;
}

.mgh-image-text__content {
	min-width: 0;
	--mgh-image-text-gap: 20px;
}

.mgh-image-text__title {
	margin: 0;
	line-height: 1.2;
	margin-bottom: var(--mgh-image-text-gap, 20px);
}

/* Specificity beats Elementor per-page typography CSS (post-*.css). Token: mobile_heading_3 / heading_3. */
div.elementor-widget.elementor-widget-mgh_image_text .mgh-image-text .mgh-image-text__content .mgh-image-text__title {
	font-family: Poppins, sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

.mgh-image-text__description {
	margin: 0;
	line-height: 1.4;
}

/* QR / button: Desktop = QR code only, Mobile = button only (same gap as title–description) */
.mgh-image-text__qr {
	margin-top: var(--mgh-image-text-gap, 20px);
}

.mgh-image-text__qr-desktop {
	display: none; /* shown on desktop via media query */
}

.mgh-image-text__qr-mobile {
	display: block; /* hidden on desktop via media query */
}

.mgh-image-text__qr-always {
	display: block;
}

.mgh-image-text__qr-img {
	display: block;
	max-width: 160px;
	height: auto;
}

/* Blue theme: mge-blue background, white text, golden (mge-gold) button. */
/* Default padding has no bottom; with a filled background we mirror the top padding so the section doesn't look cut off. */
.mgh-image-text--blue {
	background-color: #2c3a60;
	padding-bottom: 100px;
	align-items: center;
}

.mgh-image-text--blue .mgh-image-text__title,
.mgh-image-text--blue .mgh-image-text__description,
.mgh-image-text--blue .mgh-image-text__caption {
	color: #fff;
}

.mgh-image-text--blue .mgh-button {
	background-color: var(--mgh-gold);
}

.mgh-image-text--blue .mgh-button:hover {
	background-color: var(--mgh-gold-hover);
}

/* Reversed: desktop only – text left, image right. Mobile unchanged (image first). */
/* Desktop: show QR code. Mobile: show button. */
@media (min-width: 1280px) {
	.mgh-image-text--reversed {
		grid-template-columns: 1fr 686px;
	}
	.mgh-image-text--reversed .mgh-image-text__media {
		order: 2;
	}
	.mgh-image-text--reversed .mgh-image-text__content {
		order: 1;
	}

	.mgh-image-text__qr-desktop {
		display: block;
	}
	.mgh-image-text__qr-mobile {
		display: none;
	}
	.mgh-image-text__qr-always {
		display: block;
	}

	div.elementor-widget.elementor-widget-mgh_image_text .mgh-image-text .mgh-image-text__content .mgh-image-text__title {
		font-size: 34px;
	}
}

/* Blue variant, 1280–1512px: let the image column shrink with the viewport instead of staying fixed at 686px.
   This keeps the image (and the whole section) shorter and wide, rather than letting the squeezed text column
   wrap onto more lines and make the section very tall. At 1512px the split is already ~50/50, so this is seamless. */
@media (min-width: 1280px) and (max-width: 1512px) {
	.mgh-image-text--blue {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.mgh-image-text--blue.mgh-image-text--reversed {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Mobile/stacked: 0–1279px; content max 884px, gap 20, 60px top / 20px left-right */
@media (max-width: 1279px) {
	.mgh-image-text {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 884px;
		margin-left: auto;
		margin-right: auto;
		padding: 60px 20px 0;
	}

	.mgh-image-text--blue {
		padding-bottom: 60px;
	}
}