/*
 * MFC unified property gallery.
 * Paired with framework/functions/mfc-gallery.php and js/mfc-gallery.js.
 * Reference UX: 999.md listing gallery — dots (no arrows), click to zoom.
 */

/* ---------- undo Houzez's background-banner sizing ---------- */

/*
 * Houzez sizes the banner pane for a CSS background image:
 *   .property-banner .tab-pane { height: 0; padding-top: 75%; }
 * plus per-layout overrides (v1 700px, v5 600px/380px). Our gallery is real
 * content, so the pane must size to it. The marker class is added in
 * property-details/partials/media-tabs.php.
 */
.property-banner .tab-pane.mfc-has-gallery,
.property-detail-v1 .property-banner .tab-pane.mfc-has-gallery,
.property-detail-v5 .property-banner .tab-pane.mfc-has-gallery {
	height: auto;
	min-height: 0;
	padding-top: 0;
	background-image: none;
}

/* the banner reserves space for the old absolutely-positioned form; not needed */
.property-banner .tab-pane.mfc-has-gallery .property-form-wrap {
	position: static;
	width: auto;
}

.mfc-gallery {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}
.mfc-gallery .slick-dotted.slick-slider{
	margin-bottom: 5px;
}
/* ---------- main slider ---------- */

.mfc-gallery__main {
	position: relative;
	line-height: 0;
}

/* Before Slick initialises, show only the first slide so the page does not
   flash a vertical stack of every image. */
.mfc-gallery__main:not(.slick-initialized) .mfc-gallery__slide + .mfc-gallery__slide {
	display: none;
}

.mfc-gallery__slide {
	position: relative;
}

.mfc-gallery__link {
	display: block;
	position: relative;
	cursor: zoom-in;
	background: #e9ebee;
}

.mfc-gallery__link img {
	display: block;
	width: 100%;
	height: clamp(260px, 46vw, 560px);
	object-fit: cover;
}

/* zoom affordance, bottom-right */
.mfc-gallery__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	transform: scale(.9);
	pointer-events: none;
}

.mfc-gallery__zoom::before,
.mfc-gallery__zoom::after {
	content: "";
	position: absolute;
	background: #fff;
}

/* magnifier glass */
.mfc-gallery__zoom::before {
	left: 11px;
	top: 11px;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
}

.mfc-gallery__zoom::after {
	left: 23px;
	top: 23px;
	width: 7px;
	height: 2px;
	transform: rotate(45deg);
	transform-origin: left center;
}

.mfc-gallery__link:hover .mfc-gallery__zoom,
.mfc-gallery__link:focus-visible .mfc-gallery__zoom {
	opacity: 1;
	transform: scale(1);
}

/* Touch devices have no hover — keep the affordance permanently visible. */
@media (hover: none) {
	.mfc-gallery__zoom {
		opacity: .85;
		transform: scale(1);
	}
}

/* ---------- dots (replacing arrows) ---------- */

.mfc-gallery .slick-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0 12px;
	list-style: none;
	z-index: 3;
	pointer-events: auto;
}

.mfc-gallery .slick-dots li {
	width: auto;
	height: auto;
	margin: 0;
}

.mfc-gallery .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 3px rgba(0, 0, 0, .45);
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.mfc-gallery .slick-dots li button::before {
	display: none; /* kill Slick's default character bullet */
}

.mfc-gallery .slick-dots li.slick-active button {
	background: #fff;
	transform: scale(1.35);
}

/* With many images the dot row becomes noise; shrink it. */
.mfc-gallery[data-count="9"] .slick-dots li button,
.mfc-gallery[data-many] .slick-dots li button {
	width: 6px;
	height: 6px;
}

/* Arrows are removed in JS; belt-and-braces if a Houzez style re-adds them. */
.mfc-gallery .slick-prev,
.mfc-gallery .slick-next {
	display: none !important;
}

/* ---------- counter ---------- */

.mfc-gallery__counter {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 3px 9px;
	border-radius: 20px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	pointer-events: none;
}

/* ---------- thumbnail strip ---------- */

.mfc-gallery__thumbs {
	display: flex;
	gap: 6px;
	padding: 6px;
	overflow-x: auto;
	scrollbar-width: thin;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.mfc-gallery__thumbs::-webkit-scrollbar {
	height: 6px;
}

.mfc-gallery__thumbs::-webkit-scrollbar-thumb {
	background: #c9ced6;
	border-radius: 3px;
}

.mfc-gallery__thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 60px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	opacity: .6;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: opacity .18s ease, outline-color .18s ease;
}

.mfc-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mfc-gallery__thumb:hover {
	opacity: .85;
}

.mfc-gallery__thumb.is-active {
	opacity: 1;
	outline-color: #0d6efd;
}

/* ---------- quick-view context ---------- */

.mfc-gallery--quickview {
	border-radius: 6px;
}

.mfc-gallery--quickview .mfc-gallery__link img {
	height: clamp(220px, 40vh, 420px);
}

.mfc-gallery--quickview .mfc-gallery__thumb {
	width: 64px;
	height: 46px;
}

/* ---------- mobile ---------- */

@media (max-width: 767.98px) {
	.mfc-gallery {
		border-radius: 0;
	}

	.mfc-gallery__link img {
		height: clamp(220px, 62vw, 320px);
	}

	/* Keep the filmstrip on mobile, just smaller. */
	.mfc-gallery__thumbs {
		gap: 5px;
		padding: 5px;
	}

	.mfc-gallery__thumb {
		width: 64px;
		height: 46px;
	}

	.mfc-gallery .slick-dots {
		bottom: 9px;
	}
}

/* ---------- static (no-slider) mode: quick-view modal ---------- */

/*
 * A Slick slider inside a Bootstrap modal measures itself before the modal has
 * finished animating and ends up collapsed. In the quick view we therefore show
 * a single trigger image; Fancybox supplies the gallery as an overlay.
 */
.mfc-gallery--static .mfc-gallery__main {
	display: block;
}

.mfc-gallery--static .mfc-gallery__thumbs {
	display: flex;
}

.mfc-gallery__counter--static {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 3px 9px;
	border-radius: 20px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	pointer-events: none;
}

/* thumbs are real links in static mode */
a.mfc-gallery__thumb {
	display: block;
	opacity: .75;
}

a.mfc-gallery__thumb:hover {
	opacity: 1;
}

/* ---------- Fancybox tuning ---------- */

/*
 * Bootstrap's modal sits at z-index 1050 and Fancybox appends to <body>.
 * Without this the lightbox opens UNDERNEATH the quick-view modal.
 */
.fancybox__container {
	--fancybox-bg: rgba(17, 18, 20, .96);
	--fancybox-zIndex: 1090;
	z-index: 1090;
}

.fancybox__nav {
	--f-button-next-pos: 12px;
	--f-button-prev-pos: 12px;
}

/* Hide Fancybox's own arrows on touch — swipe covers it, matching 999.md. */
@media (hover: none) and (max-width: 767.98px) {
	.fancybox__nav {
		display: none;
	}
}

.fancybox__thumbs {
	--f-thumb-width: 82px;
	--f-thumb-height: 58px;
}