/* MGH Gallery widget – horizontal scroll row of image + caption sets */
/* Title: H3 desktop / Mobile H3. Caption: Paragraph Small / Mobile Paragraph Small 2. Image: 323×200 desktop, 300×186 mobile. */
/* Spacing: 20px title→row, 20px between items, 5px image→caption. Width constraints match image-text component. */

.mgh-gallery {
	padding: 60px 20px 0;
	max-width: 884px;
	margin-left: auto;
	margin-right: auto;
}

.mgh-gallery__title {
	margin: 0 0 20px 0;
	line-height: 1.2;
}

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

/* Stack track + scroll hint in one grid cell so the hint overlays the row (avoids broken layout if position:absolute is overridden). */
.mgh-gallery__viewport {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	position: relative;
}

.mgh-gallery__track {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	width: 100%;
	z-index: 1;
	display: flex;
	flex-direction: row;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}

.mgh-gallery__track::-webkit-scrollbar {
	display: none;
}

.mgh-gallery__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Right-edge affordance when the row overflows (shown via JS: .mgh-gallery--overflow, hidden at end: .mgh-gallery--scrolled-end). */
.mgh-gallery__scroll-hint {
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	min-width: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Match .mgh-gallery__image-wrap height so the chevron centers on the image strip only, not captions. */
.mgh-gallery__scroll-hint-band {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	height: 186px;
	box-sizing: border-box;
	padding-right: 0.5rem;
	padding-left: 0.25rem;
}

/* Circular white nav affordance, matching the Jorato cases list card arrows. Acts as a "scroll one item" button. */
.mgh-gallery__scroll-hint-icon {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	background-color: rgba(255, 255, 255, 0.9);
	background-image: url("../images/chevron-arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	pointer-events: none;
}

/* Left-edge affordance mirrors the right one; visibility is driven entirely by JS (desktop + can-scroll-left). */
.mgh-gallery__scroll-hint--prev {
	justify-content: flex-start;
}

.mgh-gallery__scroll-hint--prev .mgh-gallery__scroll-hint-band {
	justify-content: flex-start;
	padding-right: 0.25rem;
	padding-left: 0.5rem;
}

/* Chevron points left for the "scroll back" button. */
.mgh-gallery__scroll-hint-icon--prev {
	transform: scaleX(-1);
}

.mgh-gallery__viewport.mgh-gallery--overflow:not(.mgh-gallery--scrolled-end):not(.mgh-scroll-hint-dismissed) .mgh-gallery__scroll-hint--next {
	opacity: 1;
}

/* Only allow clicks on the affordance while it is actually shown. */
.mgh-gallery__viewport.mgh-gallery--overflow:not(.mgh-gallery--scrolled-end):not(.mgh-scroll-hint-dismissed) .mgh-gallery__scroll-hint--next .mgh-gallery__scroll-hint-icon {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.mgh-gallery__scroll-hint {
		transition: none;
	}
}

.mgh-gallery__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex-shrink: 0;
}

.mgh-gallery__link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.mgh-gallery__link:focus {
	outline: none;
}

.mgh-gallery__link:focus-visible {
	outline: 2px solid rgba(44, 58, 96, 0.5);
	outline-offset: 2px;
}

.mgh-gallery__image-wrap {
	width: 300px;
	height: 186px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mgh-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	vertical-align: middle;
	transition: transform 300ms ease-out;
	transform: scale(1);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Prevent theme/Elementor defaults from forcing height:auto on img tags. */
.mgh-gallery__image-wrap .mgh-gallery__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
}

.mgh-gallery__link:hover .mgh-gallery__img,
.mgh-gallery__link:focus-visible .mgh-gallery__img {
	transform: scale(1.01);
}

.mgh-gallery__placeholder {
	width: 300px;
	height: 186px;
	background: #eee;
	border-radius: 8px;
	flex-shrink: 0;
}

.mgh-gallery__caption {
	margin: 0;
	line-height: 1.4;
	width: 300px;
}

/* Lightbox – matches the Jorato case-detail image popup (swipe + arrows). */
.mgh-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 0.75rem 0.75rem;
	box-sizing: border-box;
}

.mgh-gallery__lightbox[hidden] {
	display: none !important;
}

.mgh-gallery__lightbox-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0.88);
}

.mgh-gallery__lightbox-stage {
	position: relative;
	z-index: 1;
	/* Fixed-size stage so the box (and nav arrow positions) stay constant as you
	   move between images of different aspect ratios. Scales with the viewport but
	   is capped so it never becomes gigantic on very large screens. */
	width: min(1300px, 92vw);
	height: min(760px, 82vh);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}

.mgh-gallery__lightbox-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: default;
	border-radius: 8px;
}

.mgh-gallery__lightbox-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	font-size: 1.5rem;
	line-height: 1;
	color: #2c3a60;
	-webkit-appearance: none;
	appearance: none;
}

.mgh-gallery__lightbox-close::before {
	content: "×";
}

.mgh-gallery__lightbox-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mgh-gallery__lightbox-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	background-color: rgba(255, 255, 255, 0.9);
	background-image: url("../images/chevron-arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	-webkit-appearance: none;
	appearance: none;
}

.mgh-gallery__lightbox-nav[hidden] {
	display: none !important;
}

.mgh-gallery__lightbox-nav--prev {
	left: 0.5rem;
	transform: translateY(-50%) scaleX(-1);
}

.mgh-gallery__lightbox-nav--next {
	right: 0.5rem;
	transform: translateY(-50%);
}

.mgh-gallery__lightbox-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Desktop: image 323×200, padding 100px 50px 0 50px (match image-text) */
@media (min-width: 1280px) {
	.mgh-gallery {
		max-width: 100%;
		padding: 100px 50px 0 50px;
	}

	.mgh-gallery__image-wrap,
	.mgh-gallery__placeholder {
		width: 323px;
		height: 200px;
	}

	.mgh-gallery__caption {
		width: 323px;
	}

	.mgh-gallery__scroll-hint-band {
		height: 200px;
	}

	div.elementor-widget.elementor-widget-mgh_gallery .mgh-gallery .mgh-gallery__title {
		font-size: 34px;
	}

	/* Arrow stays visible on desktop (see gallery.js); keep it clickable whenever the row overflows. */
	.mgh-gallery__viewport.mgh-gallery--overflow .mgh-gallery__scroll-hint--next .mgh-gallery__scroll-hint-icon {
		pointer-events: auto;
	}
}