/*
==========================================================
REAL ESTATE VIDEO SLIDER
COMPLETE RESPONSIVE CSS
==========================================================

IMPORTANT:
- Scrolling is controlled by JavaScript.
- Dragging is controlled by JavaScript.
- Width/height/gap come from Admin settings.
- Videos are NOT cropped.
- No CSS animation is used.
==========================================================
*/


/*
==========================================================
MAIN WRAPPER
==========================================================
*/

.scroll-wrap {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;

	padding: 60px 0 40px;

	text-align: center;

	overflow: hidden;

	box-sizing: border-box;
}


/*
==========================================================
TITLE
==========================================================
*/

.scroll-title {
	margin: 0 0 40px;

	padding: 0 20px;

	font-size: 32px;
	font-weight: 600;

	line-height: 1.25;

	color: #757575;

	box-sizing: border-box;
}


/*
==========================================================
SLIDER
==========================================================
*/

.scroll-slider {
	position: relative;

	width: 100%;
	max-width: 100%;

	overflow: hidden;

	box-sizing: border-box;

	cursor: grab;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

	-webkit-touch-callout: none;

	touch-action: pan-y;


	/*
	 * Edge fade.
	 */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 60px,
		#000 calc(100% - 60px),
		transparent 100%
	);

	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 60px,
		#000 calc(100% - 60px),
		transparent 100%
	);
}


/*
==========================================================
DRAGGING
==========================================================
*/

.scroll-slider.is-dragging {
	cursor: grabbing;
}


/*
==========================================================
TRACK
==========================================================
*/

.scroll-track {
	display: flex;

	align-items: center;

	width: max-content;

	gap: 20px;

	transform: translate3d(0, 0, 0);

	will-change: transform;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}


/*
==========================================================
VIDEO CARD
==========================================================
*/

.scroll-item {
	position: relative;

	flex: 0 0 auto;

	overflow: hidden;

	box-sizing: border-box;

	border-radius: 10px;

	background: transparent;

	box-shadow:
		0 15px 30px rgba(0, 0, 0, .15);

	cursor: grab;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

	-webkit-user-drag: none;

	transition:
		transform .4s ease,
		box-shadow .4s ease;
}


/*
==========================================================
DRAGGING CARD
==========================================================
*/

.scroll-slider.is-dragging .scroll-item {
	cursor: grabbing;
}


/*
==========================================================
VIDEO
==========================================================
*/

.scroll-item video {
	display: block;

	width: 100%;

	height: 100%;

	object-fit: contain;

	object-position: center center;

	background: transparent;

	pointer-events: none;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

	-webkit-user-drag: none;

	backface-visibility: hidden;

	transform: translateZ(0);
}


/*
==========================================================
CARD HOVER
==========================================================
*/

.scroll-item:hover {
	transform: scale(1.05);

	z-index: 10;

	box-shadow:
		0 25px 50px rgba(0, 0, 0, .30);
}


/*
==========================================================
DISABLE HOVER DURING DRAG
==========================================================
*/

.scroll-slider.is-dragging .scroll-item:hover {
	transform: none;
}


/*
==========================================================
BUTTON
==========================================================
*/

.scroll-btn {
	display: inline-block;

	margin-top: 40px;

	padding: 12px 30px;

	background: #f5891f;

	color: #fff;

	font-size: 16px;

	font-weight: 600;

	line-height: 1.2;

	border-radius: 30px;

	text-decoration: none;

	box-sizing: border-box;

	transition:
		background .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}


/*
==========================================================
BUTTON HOVER
==========================================================
*/

.scroll-btn:hover {
	background: #d9760f;

	color: #fff;

	transform: translateY(-2px);

	box-shadow:
		0 8px 20px rgba(0, 0, 0, .15);
}


/*
==========================================================
LARGE DESKTOP
==========================================================
*/

@media (min-width: 1400px) {

	.scroll-wrap {
		padding-top: 60px;
		padding-bottom: 40px;
	}


	.scroll-title {
		font-size: 34px;

		margin-bottom: 40px;
	}


	.scroll-slider {

		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 80px,
			#000 calc(100% - 80px),
			transparent 100%
		);

		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 80px,
			#000 calc(100% - 80px),
			transparent 100%
		);
	}
}


/*
==========================================================
LAPTOP
==========================================================
*/

@media (min-width: 1025px) and (max-width: 1399px) {

	.scroll-wrap {
		padding: 55px 0 40px;
	}


	.scroll-title {
		font-size: 30px;

		margin-bottom: 35px;
	}
}


/*
==========================================================
TABLET
==========================================================
*/

@media (min-width: 769px) and (max-width: 1024px) {

	.scroll-wrap {
		width: 100%;

		padding: 45px 0 35px;
	}


	.scroll-title {
		font-size: 28px;

		margin-bottom: 30px;
	}


	.scroll-slider {

		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 40px,
			#000 calc(100% - 40px),
			transparent 100%
		);

		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 40px,
			#000 calc(100% - 40px),
			transparent 100%
		);
	}


	.scroll-item {
		border-radius: 9px;
	}


	.scroll-btn {
		margin-top: 35px;
	}
}


/*
==========================================================
MOBILE
==========================================================
*/

@media (max-width: 768px) {

	.scroll-wrap {
		width: 100%;
		max-width: 100%;

		padding: 35px 0 30px;
	}


	.scroll-title {
		font-size: 24px;

		line-height: 1.3;

		margin: 0 15px 25px;

		padding: 0;
	}


	.scroll-slider {
		width: 100%;

		touch-action: pan-y;


		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 25px,
			#000 calc(100% - 25px),
			transparent 100%
		);

		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 25px,
			#000 calc(100% - 25px),
			transparent 100%
		);
	}


	.scroll-track {
		gap: 15px;
	}


	.scroll-item {
		border-radius: 9px;
	}


	.scroll-btn {
		margin-top: 30px;

		padding: 11px 25px;

		font-size: 15px;
	}
}


/*
==========================================================
SMALL MOBILE
==========================================================
*/

@media (max-width: 480px) {

	.scroll-wrap {
		padding: 25px 0;
	}


	.scroll-title {
		font-size: 21px;

		line-height: 1.3;

		margin: 0 12px 20px;
	}


	.scroll-slider {

		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 18px,
			#000 calc(100% - 18px),
			transparent 100%
		);

		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 18px,
			#000 calc(100% - 18px),
			transparent 100%
		);
	}


	.scroll-track {
		gap: 12px;
	}


	.scroll-item {
		border-radius: 8px;
	}


	.scroll-btn {
		margin-top: 25px;

		padding: 10px 22px;

		font-size: 14px;
	}
}


/*
==========================================================
VERY SMALL PHONES
==========================================================
*/

@media (max-width: 360px) {

	.scroll-wrap {
		padding-top: 20px;

		padding-bottom: 20px;
	}


	.scroll-title {
		font-size: 19px;

		margin-bottom: 18px;
	}


	.scroll-track {
		gap: 10px;
	}


	.scroll-item {
		border-radius: 7px;
	}


	.scroll-btn {
		margin-top: 22px;

		padding: 9px 20px;

		font-size: 13px;
	}
}


/*
==========================================================
INSTAGRAM REEL CARDS
==========================================================

Instagram Reel cards:
- 9:16 frame
- No black background
- No extra iframe margin
- Overflow hidden
- Existing JS scaling/positioning retained
==========================================================
*/

.scroll-wrap {
	--res-ig-header: 56;
	--res-ig-zoom: 1.25;

	/*
	 * PLAY INSIDE THE SLIDER:
	 * --res-ig-pointer: auto;
	 * --res-ig-click: none;
	 *
	 * OPEN ON INSTAGRAM:
	 * --res-ig-pointer: none;
	 * --res-ig-click: block;
	 */
	--res-ig-pointer: auto;
	--res-ig-click: none;
}


/*
==========================================================
INSTAGRAM CARD
==========================================================
*/

.scroll-item.res-ig-card {
	display: flex;

	flex-direction: column;

	border-radius: 0;

	box-shadow: none;

	background: transparent !important;

	text-align: left;

	container-type: inline-size;
}


.scroll-item.res-ig-card:hover {
	box-shadow: none;
}


/*
==========================================================
INSTAGRAM FRAME
==========================================================
*/

.res-ig-frame {
	position: relative;

	flex: 0 0 auto;

	width: 100%;

	aspect-ratio: 9 / 16;

	overflow: hidden;

	background: transparent !important;

	box-sizing: border-box;
}


/*
==========================================================
INSTAGRAM PLACEHOLDER
==========================================================
*/

.res-ig-ph {
	position: absolute;

	inset: 0;

	z-index: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 8px;

	box-sizing: border-box;

	color: #fff;

	font:
		600 13px
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;

	text-align: center;

	text-decoration: none;

	background: transparent;
}


.res-ig-frame.is-ready .res-ig-ph {
	display: none;
}


/*
==========================================================
INSTAGRAM CLICK LAYER
==========================================================
*/

.res-ig-click {
	position: absolute;

	inset: 0;

	z-index: 3;

	display: var(--res-ig-click, none);

	background: transparent;

	cursor: inherit;
}


/*
==========================================================
INSTAGRAM HIDDEN BLOCKQUOTE
==========================================================
*/

.res-ig-frame blockquote.instagram-media {
	position: absolute !important;

	left: 0;

	top: 0;

	width: 326px !important;

	min-width: 326px !important;

	max-height: 0;

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	overflow: hidden;

	opacity: 0;

	pointer-events: none;
}


/*
==========================================================
INSTAGRAM IFRAME
==========================================================
*/

.res-ig-frame iframe.instagram-media {
	position: absolute !important;

	left: 0 !important;

	top: 0 !important;

	z-index: 1;

	display: block !important;

	width: 326px !important;

	min-width: 326px !important;

	max-width: none !important;

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	border-radius: 0 !important;

	box-shadow: none !important;

	background: transparent !important;

	transform-origin: 0 0 !important;

	transform:
		translate(
			var(--res-tx, 0px),
			var(--res-ty, 0px)
		)
		scale(
			var(--res-sz, 1)
		) !important;

	/*
	 * Keeps dragging smooth.
	 */
	pointer-events: var(--res-ig-pointer, auto);

	/*
	 * Prevents unwanted inline spacing.
	 */
	vertical-align: top;

}


/*
==========================================================
INSTAGRAM FOOTER
==========================================================
*/

.res-ig-footer {
	flex: 0 0 auto;

	background: #fff;

	color: #262626;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;
}


.res-ig-footer a {
	text-decoration: none;

	color: inherit;
}


/*
==========================================================
VIEW LINK
==========================================================
*/

.res-ig-view {
	display: block;

	padding: 14px 16px 4px;

	font-size: 14px;

	font-weight: 600;

	line-height: 18px;

	color: #3897f0 !important;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;
}


/*
==========================================================
INSTAGRAM ICONS
==========================================================
*/

.res-ig-icons {
	display: flex;

	align-items: center;

	gap: 14px;

	padding: 10px 16px;
}


.res-ig-icon {
	display: flex;

	align-items: center;

	justify-content: center;

	width: 24px;

	height: 24px;

	color: #262626;
}


.res-ig-icon svg {
	display: block;

	width: 24px;

	height: 24px;

	fill: none;

	stroke: currentColor;

	stroke-width: 2;

	stroke-linejoin: round;

	stroke-linecap: round;
}


.res-ig-icon.res-ig-right {
	margin-left: auto;
}


/*
==========================================================
INSTAGRAM COMMENT
==========================================================
*/

.res-ig-comment {
	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 6px 16px 14px;

	font-size: 14px;

	line-height: 18px;

	color: #8e8e8e !important;
}


.res-ig-comment .res-ig-icon,
.res-ig-comment .res-ig-icon svg {
	width: 20px;

	height: 20px;

	color: #8e8e8e;
}


/*
==========================================================
NARROW CARDS
==========================================================
*/

@container (max-width: 220px) {

	.res-ig-view {
		padding: 8px 8px 2px;

		font-size: 10px;

		line-height: 13px;
	}


	.res-ig-icons {
		gap: 8px;

		padding: 6px 8px;
	}


	.res-ig-icon,
	.res-ig-icon svg,
	.res-ig-comment .res-ig-icon,
	.res-ig-comment .res-ig-icon svg {
		width: 16px;

		height: 16px;
	}


	.res-ig-comment {
		padding: 3px 8px 8px;

		font-size: 10px;

		line-height: 13px;
	}


	.res-ig-ph {
		font-size: 10px;
	}
}


/*
==========================================================
FINAL INSTAGRAM BLACK-BACKGROUND OVERRIDE
==========================================================

This prevents the Reel frame/card from becoming black
through another stylesheet or Elementor rule.
==========================================================
*/

.res-ig-card,
.res-ig-frame,
.res-ig-frame iframe.instagram-media {
	background-color: transparent !important;
}


/*
==========================================================
REMOVE ANY EXTRA IFRAME SPACING
==========================================================
*/

.res-ig-frame iframe.instagram-media {
	margin-bottom: 0 !important;

	padding-bottom: 0 !important;
}



.res-ig-card {
    gap: 0 !important;
}

.res-ig-frame {
    margin: 0 !important;
    padding: 0 !important;
}

.res-ig-footer {
    margin: 0 !important;
    padding-top: 0 !important;
}

.res-ig-frame iframe.instagram-media {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: top !important;
}