/*
 * Native layout ownership for the reversible Brisbane City Glimpses pilot.
 * Legacy class names are retained only where existing component CSS and JS
 * use them as DOM contracts; no builder runtime is required to create them.
 */

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page),
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) *,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) *::before,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) *::after {
	box-sizing: border-box;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page),
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-page-section,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-page-section-inner,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .page-section-content,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-padding-wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .column_container,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .vc_column-inner,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .wpb_wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-text-block {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) > .mk-page-section-wrapper {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-right: -50vw;
	margin-left: -50vw;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) > .mk-page-section-wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-page-section,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .page-section-content,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-padding-wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .column_container,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .vc_column-inner,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .wpb_wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-text-block {
	position: relative;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-padding-wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .column_container,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .vc_column-inner,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .wpb_wrapper,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .mk-text-block {
	padding-right: 0;
	padding-left: 0;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .clearboth {
	clear: both;
}

/*
 * Hidden Vale's saved gallery row names a 50px VC custom-CSS rule, but the
 * active original pages have no generated rule for that class. Keep the
 * native render aligned with their computed zero-margin baseline.
 */
:is(body.page-id-6390, body.page-id-20261) .bekaa-route-story-section-shell .vc_inner {
	margin-top: 0 !important;
}

/* Mobile product videos and retained mobile-only rows stay out of desktop flow. */
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-product-mobile-hero-video,
:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .jupiter-donut-visible-sm {
	display: none;
}

@media only screen and (max-width: 765px) {
	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-product-mobile-hero-video {
		position: relative;
		left: 50%;
		display: block;
		width: 100vw;
		aspect-ratio: 16 / 9;
		margin: 0;
		overflow: hidden;
		transform: translateX(-50vw);
		background: #000;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-product-mobile-hero-video__media {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
		background: #000;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .jupiter-donut-visible-sm {
		display: block !important;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .jupiter-donut-hidden-sm {
		display: none !important;
	}

	/* Hidden Vale's retained mobile-only self-hosted video used this Donut geometry. */
	.bekaa-product-native-page > .wpb_row.jupiter-donut-visible-sm {
		position: relative;
		left: 50%;
		width: 100vw !important;
		transform: translateX(-50vw);
	}

	/* Remove the retired builder row's white spacer above and below the video. */
	:is(body.page-id-6390, body.page-id-20261) .bekaa-product-native-page > .wpb_row.jupiter-donut-visible-sm {
		padding-bottom: 0 !important;
	}

	:is(body.page-id-6390, body.page-id-20261) .bekaa-product-native-page > .wpb_row.jupiter-donut-visible-sm > .column_container > .vc_inner {
		margin-top: 0 !important;
	}

	:is(body.page-id-6390, body.page-id-20261) .bekaa-product-native-page > .wpb_row.jupiter-donut-visible-sm > .column_container > .vc_inner .wpb_column {
		min-height: 0;
	}

	.bekaa-product-native-page > .wpb_row.jupiter-donut-visible-sm .wpb_video_widget .video-container {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
	}

	.bekaa-product-native-page > .wpb_row.jupiter-donut-visible-sm .wpb_video_widget .video-container video {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/*
 * The Similar Experiences rail resolves its full-viewport offset from the
 * centered section grid. Jupiter supplied that centering and clipping through
 * the builder runtime; retain the same geometry now that the page is native.
 */
.bekaa-glimpses-native-page #glimpses-similar-experiences {
	overflow: hidden;
}

.bekaa-product-native-page .bekaa-similar-experiences-section {
	overflow: hidden;
}

.bekaa-glimpses-native-page #glimpses-similar-experiences .page-section-content {
	margin-right: auto;
	margin-left: auto;
}

.bekaa-product-native-page .bekaa-similar-experiences-section .page-section-content {
	margin-right: auto;
	margin-left: auto;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-mobile-spacer {
	display: none;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-support--cta .mk-button-container {
	margin: 0 15px 0 0;
	width: 100%;
}

:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-support--call .mk-button-container {
	margin: 35px 0 0;
	width: 100%;
}

@media (max-width: 767px) {
	.bekaa-glimpses-native-page #glimpses-similar-experiences .mk-padding-wrapper {
		padding-right: 20px;
		padding-left: 20px;
	}

	.bekaa-product-native-page .bekaa-similar-experiences-section .mk-padding-wrapper {
		padding-right: 20px;
		padding-left: 20px;
	}

	.bekaa-glimpses-native-page #glimpses-similar-experiences .column_container {
		padding-right: 15px;
		padding-left: 15px;
	}

	.bekaa-product-native-page .bekaa-similar-experiences-section .column_container {
		padding-right: 15px;
		padding-left: 15px;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-glimpses-cloud-hero__transplant .column_container {
		padding-right: 20px;
		padding-left: 20px;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-support--call .mk-button {
		display: inline-block;
		padding: 13.145px 20px;
		line-height: 15px;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-support--cta .mk-button {
		box-sizing: border-box;
		width: 212.5px;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-support--call .mk-button--icon {
		margin: -2px 15px 0 0;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-route-story-section-shell .mk-padding-wrapper {
		padding-right: 20px;
		padding-left: 20px;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-route-story-section-shell .column_container {
		padding-right: 15px;
		padding-left: 15px;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-booking-prototype-section .page-section-content {
		width: calc(100% - 24px);
		margin-right: auto;
		margin-left: auto;
	}

	:is(.bekaa-glimpses-native-page, .bekaa-product-native-page) .bekaa-hero-mobile-spacer {
		display: block;
		height: 150px;
	}
}