.elementor-widget-hero-mosaic-gallery,
.elementor-widget-hero-mosaic-gallery > .elementor-widget-container {
	width: 100%;
	max-width: none;
	overflow: visible !important;
}

.hmg-wrap {
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.hmg-wrap--viewport {
	position: relative;
	left: auto !important;
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Desktop: NWStroy gallery content width */
@media (min-width: 1025px) {
	.hmg-wrap {
		width: min(100%, 1361px);
		max-width: 1361px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Keep older saved widgets (where viewport stretch was enabled) at the same 1361px desktop width. */
	.hmg-wrap.hmg-wrap--viewport {
		left: auto !important;
		width: min(100%, 1361px) !important;
		max-width: 1361px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.hmg-gallery {
	--hmg-columns: 8;
	--hmg-initial-rows: 4;
	--hmg-row-height: 112px;
	--hmg-reference-height: 430px;
	--hmg-gap: 16px;
	--hmg-cutout-width: 4;
	--hmg-cutout-depth: 2;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

/* ---------- Exact 2–3–1–1–1–1–3–2 pattern ---------- */
/*
 * Desktop uses one shared 8-column grid for every loaded batch.
 * The second batch interlocks with the empty lower centre of the hero batch,
 * so expanded photos look like a direct continuation rather than a new block.
 */
.hmg-layout--reference .hmg-patterns {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-auto-rows: var(--hmg-reference-row-height, 28px);
	grid-auto-flow: row;
	gap: var(--hmg-gap);
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.hmg-layout--reference .hmg-pattern {
	display: contents;
}

.hmg-layout--reference .hmg-pattern[hidden] {
	display: none !important;
}

.hmg-layout--reference .hmg-pattern > .hmg-item {
	align-self: stretch;
	justify-self: stretch;
}

/* ---------- Other layouts ---------- */
.hmg-layout--arch,
.hmg-layout--grid,
.hmg-layout--mosaic {
	display: grid;
	grid-template-columns: repeat(var(--hmg-columns), minmax(0, 1fr));
	grid-auto-rows: var(--hmg-row-height);
	grid-auto-flow: dense;
	gap: var(--hmg-gap);
}

.hmg-layout--masonry {
	column-count: var(--hmg-columns);
	column-gap: var(--hmg-gap);
}

.hmg-item {
	position: relative;
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	transform: translateZ(0);
	box-sizing: border-box;
}

.hmg-layout--arch .hmg-item,
.hmg-layout--reference .hmg-item {
	align-self: stretch;
	justify-self: stretch;
}

.hmg-layout--masonry .hmg-item {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0 0 var(--hmg-gap);
	break-inside: avoid;
	vertical-align: top;
}

.hmg-item[hidden] {
	display: none !important;
}

.hmg-layout--mosaic .hmg-span-wide { grid-column: span 2; }
.hmg-layout--mosaic .hmg-span-tall { grid-row: span 2; }
.hmg-layout--mosaic .hmg-span-big { grid-column: span 2; grid-row: span 2; }

.hmg-link {
	position: relative;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0;
	min-height: 0;
}

/* Background media is deliberately used in tiled modes, so Elementor cannot force height:auto. */
.hmg-media {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center;
	transform-origin: center center;
	transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.hmg-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.hmg-layout--masonry .hmg-image {
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

.hmg-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.hmg-item:hover::after { opacity: 1; }

.hmg-actions {
	display: flex;
	justify-content: center;
}

.hmg-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.hmg-toggle:hover { transform: translateY(-2px); }
.hmg-toggle:focus-visible { outline: 3px solid rgba(245,89,61, 0.35); outline-offset: 3px; }

.hmg-toggle__icon {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
}

.hmg-toggle[aria-expanded="true"] .hmg-toggle__icon {
	transform: translateY(2px) rotate(225deg);
}

.hmg-actions[hidden] { display: none !important; }

.hmg-empty {
	padding: 28px;
	border: 1px dashed #cfcfcf;
	border-radius: 12px;
	color: #666;
	text-align: center;
}

/* Tablet and phone: every batch becomes a normal responsive grid. */
@media (max-width: 1024px) {
	.hmg-wrap--viewport {
		left: auto;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
	}

	.hmg-layout--reference .hmg-patterns {
		display: flex;
		flex-direction: column;
		gap: var(--hmg-gap);
	}

	.hmg-layout--reference .hmg-pattern {
		display: grid;
		grid-template-columns: repeat(var(--hmg-columns), minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: var(--hmg-row-height);
		grid-auto-flow: dense;
		gap: var(--hmg-gap);
		height: auto;
	}

	.hmg-layout--reference .hmg-pattern > .hmg-item {
		grid-column: auto !important;
		grid-row: auto !important;
	}
}

@media (max-width: 767px) {
	.hmg-layout--mosaic .hmg-span-wide,
	.hmg-layout--mosaic .hmg-span-big {
		grid-column: span min(2, var(--hmg-columns));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hmg-image,
	.hmg-media,
	.hmg-item::after,
	.hmg-toggle,
	.hmg-toggle__icon {
		transition: none !important;
	}
}