/* ===== Masonry Gallery Pro ===== */
.mgp-gallery {
	--mgp-cols: 3;
	--mgp-gap: 12px;
	--mgp-row: 260px;
	--mgp-ratio: 1 / 1;
	--mgp-dur: 350ms;
	--mgp-delay: 0ms;
	--mgp-ease: ease;
	--mgp-ov-opacity: 1;
	--mgp-ih: 8;
	position: relative;
	width: 100%;
}

/* ---------- Layouts ---------- */
/* Masonry: CSS columns, natural image height */
.mgp-layout-masonry .mgp-gallery {
	column-count: var(--mgp-cols);
	column-gap: var(--mgp-gap);
}
.mgp-layout-masonry .mgp-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: var(--mgp-gap);
}
.mgp-layout-masonry .mgp-media img { height: auto; }

/* Fixed aspect ratio grid */
.mgp-layout-fixed .mgp-gallery {
	display: grid;
	grid-template-columns: repeat(var(--mgp-cols), minmax(0, 1fr));
	gap: var(--mgp-gap);
}
.mgp-layout-fixed .mgp-media { aspect-ratio: var(--mgp-ratio); }
.mgp-layout-fixed .mgp-media img { height: 100%; }

/* Mosaic / bento grid */
.mgp-layout-mosaic .mgp-gallery {
	display: grid;
	grid-template-columns: repeat(var(--mgp-cols), minmax(0, 1fr));
	grid-auto-rows: var(--mgp-row);
	gap: var(--mgp-gap);
}
.mgp-dense-yes.mgp-layout-mosaic .mgp-gallery { grid-auto-flow: dense; }

.mgp-layout-mosaic .mgp-item {
	--cs: var(--cs-d, 1);
	--rs: var(--rs-d, 1);
	grid-column: span var(--cs);
	grid-row: span var(--rs);
}
/* Elementor default breakpoints: tablet 1024px, mobile 767px */
@media (max-width: 1024px) {
	.mgp-layout-mosaic .mgp-item { --cs: var(--cs-t, 1); --rs: var(--rs-t, 1); }
}
@media (max-width: 767px) {
	.mgp-layout-mosaic .mgp-item { --cs: var(--cs-m, 1); --rs: var(--rs-m, 1); }
}
/* Tile fills its grid cell */
.mgp-layout-mosaic .mgp-link { position: absolute; inset: 0; }
.mgp-layout-mosaic .mgp-media,
.mgp-layout-mosaic .mgp-media img { height: 100%; }

/* ---------- Tile ---------- */
.mgp-item { position: relative; min-width: 0; overflow: hidden; }
.mgp-link {
	display: block;
	position: relative;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.mgp-link:focus-visible { outline: 3px solid #2684ff; outline-offset: -3px; }

.mgp-media {
	position: relative;
	overflow: hidden;
	transition: filter var(--mgp-dur) var(--mgp-ease), opacity var(--mgp-dur) var(--mgp-ease);
}
/* low specificity on purpose, so the Image Fit / Position controls win */
.mgp-media img {
	display: block;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform var(--mgp-dur) var(--mgp-ease), filter var(--mgp-dur) var(--mgp-ease);
}

/* ---------- Overlay ---------- */
.mgp-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.mgp-ov-bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--mgp-dur) var(--mgp-ease);
}
.mgp-title-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
}
.mgp-title {
	margin: 0;
	color: #fff;
	max-width: 100%;
	opacity: 0;
	transform: var(--mgp-from, none);
	transition:
		opacity var(--mgp-dur) var(--mgp-ease) var(--mgp-delay),
		transform var(--mgp-dur) var(--mgp-ease) var(--mgp-delay),
		color 0.3s ease;
}

/* Overlay types (defaults are low-specificity so the Background control wins) */
:where(.mgp-ov-solid) .mgp-ov-bg    { background: rgba(0, 0, 0, 0.45); }
:where(.mgp-ov-gradient) .mgp-ov-bg { background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 70%); }
:where(.mgp-ov-blur) .mgp-ov-bg     { background: rgba(0, 0, 0, 0.2); }
.mgp-ov-blur .mgp-ov-bg {
	-webkit-backdrop-filter: blur(var(--mgp-blur, 6px));
	backdrop-filter: blur(var(--mgp-blur, 6px));
}
.mgp-ov-none .mgp-ov-bg { display: none; }

.mgp-ov-border .mgp-ov-bg {
	inset: var(--mgp-frame-inset, 14px);
	border: var(--mgp-frame-w, 2px) solid var(--mgp-frame-color, #fff);
	background: none !important;
}
.mgp-ov-corners .mgp-ov-bg { background: none !important; }
.mgp-ov-corners .mgp-ov-bg::before,
.mgp-ov-corners .mgp-ov-bg::after {
	content: "";
	position: absolute;
	width: var(--mgp-corner, 28px);
	height: var(--mgp-corner, 28px);
	border: var(--mgp-frame-w, 2px) solid var(--mgp-frame-color, #fff);
}
.mgp-ov-corners .mgp-ov-bg::before {
	top: var(--mgp-frame-inset, 14px);
	left: var(--mgp-frame-inset, 14px);
	border-right: 0;
	border-bottom: 0;
}
.mgp-ov-corners .mgp-ov-bg::after {
	bottom: var(--mgp-frame-inset, 14px);
	right: var(--mgp-frame-inset, 14px);
	border-left: 0;
	border-top: 0;
}

/* Title position */
.mgp-pos-top-left      .mgp-title-wrap { justify-content: flex-start; align-items: flex-start; text-align: left; }
.mgp-pos-top-center    .mgp-title-wrap { justify-content: flex-start; align-items: center;     text-align: center; }
.mgp-pos-top-right     .mgp-title-wrap { justify-content: flex-start; align-items: flex-end;   text-align: right; }
.mgp-pos-center-left   .mgp-title-wrap { justify-content: center;     align-items: flex-start; text-align: left; }
.mgp-pos-center        .mgp-title-wrap { justify-content: center;     align-items: center;     text-align: center; }
.mgp-pos-center-right  .mgp-title-wrap { justify-content: center;     align-items: flex-end;   text-align: right; }
.mgp-pos-bottom-left   .mgp-title-wrap { justify-content: flex-end;   align-items: flex-start; text-align: left; }
.mgp-pos-bottom-center .mgp-title-wrap { justify-content: flex-end;   align-items: center;     text-align: center; }
.mgp-pos-bottom-right  .mgp-title-wrap { justify-content: flex-end;   align-items: flex-end;   text-align: right; }

/* Title entrance animation: the "from" state */
.mgp-anim-slide_up    { --mgp-from: translateY(24px); }
.mgp-anim-slide_down  { --mgp-from: translateY(-24px); }
.mgp-anim-slide_left  { --mgp-from: translateX(24px); }
.mgp-anim-slide_right { --mgp-from: translateX(-24px); }
.mgp-anim-zoom_in     { --mgp-from: scale(0.85); }
.mgp-anim-zoom_out    { --mgp-from: scale(1.15); }
.mgp-anim-scale       { --mgp-from: scale(0); }
.mgp-anim-none .mgp-ov-bg,
.mgp-anim-none .mgp-title { transition: none; }

/* Visibility: on hover (default) */
.mgp-vis-hover .mgp-item:hover .mgp-ov-bg,
.mgp-vis-hover .mgp-item:focus-within .mgp-ov-bg,
.mgp-vis-always .mgp-ov-bg { opacity: var(--mgp-ov-opacity, 1); }

.mgp-vis-hover .mgp-item:hover .mgp-title,
.mgp-vis-hover .mgp-item:focus-within .mgp-title,
.mgp-vis-always .mgp-title { opacity: 1; transform: none; }

/* Visibility: hidden on hover */
.mgp-vis-hidden_hover .mgp-ov-bg { opacity: var(--mgp-ov-opacity, 1); }
.mgp-vis-hidden_hover .mgp-title { opacity: 1; transform: none; }
.mgp-vis-hidden_hover .mgp-item:hover .mgp-ov-bg,
.mgp-vis-hidden_hover .mgp-item:focus-within .mgp-ov-bg { opacity: 0; }
.mgp-vis-hidden_hover .mgp-item:hover .mgp-title,
.mgp-vis-hidden_hover .mgp-item:focus-within .mgp-title { opacity: 0; transform: var(--mgp-from, none); }

/* Touch devices: no hover, so optionally keep the overlay visible */
@media (hover: none) {
	.mgp-touch-always .mgp-ov-bg { opacity: var(--mgp-ov-opacity, 1); }
	.mgp-touch-always .mgp-title { opacity: 1; transform: none; }
}

/* ---------- Image hover effects ---------- */
.mgp-ih-zoom_in .mgp-item:hover .mgp-media img,
.mgp-ih-zoom_in .mgp-item:focus-within .mgp-media img { transform: scale(calc(1 + var(--mgp-ih) / 100)); }

.mgp-ih-zoom_out .mgp-media img { transform: scale(calc(1 + var(--mgp-ih) / 100)); }
.mgp-ih-zoom_out .mgp-item:hover .mgp-media img,
.mgp-ih-zoom_out .mgp-item:focus-within .mgp-media img { transform: none; }

.mgp-ih-gray_to_color .mgp-media img { filter: grayscale(1); }
.mgp-ih-gray_to_color .mgp-item:hover .mgp-media img,
.mgp-ih-gray_to_color .mgp-item:focus-within .mgp-media img { filter: none; }

.mgp-ih-color_to_gray .mgp-item:hover .mgp-media img,
.mgp-ih-color_to_gray .mgp-item:focus-within .mgp-media img { filter: grayscale(1); }

.mgp-ih-blur .mgp-item:hover .mgp-media img,
.mgp-ih-blur .mgp-item:focus-within .mgp-media img { filter: blur(calc(var(--mgp-ih) * 0.5px)); }

.mgp-ih-brightness .mgp-item:hover .mgp-media img,
.mgp-ih-brightness .mgp-item:focus-within .mgp-media img { filter: brightness(calc(1 + var(--mgp-ih) / 100)); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mgp-gallery * { transition: none !important; }
	.mgp-gallery .mgp-title,
	.mgp-gallery .mgp-media img { transform: none !important; }
}