/* ==========================================================================
   Rooms carousel (mobile)
   ========================================================================== */
@media (max-width: 767px) {
	.rooms-carousel .rc-track {
		display: flex;
		gap: 16px;
		position: relative;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rooms-carousel .rc-track::-webkit-scrollbar {
		display: none;
	}
	.rooms-carousel .rc-track > .wp-block-kadence-column {
		flex: 0 0 100%;
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* The child rows are empty once their sections move into the carousel */
	.rooms-carousel .rc-source-empty {
		display: none !important;
	}

	/* Give every slide image the same portrait ratio (set by the script from
	   the most common image shape), so the landscape one is cropped to match */
	.rooms-carousel .rc-track .wp-block-kadence-image figure,
	.rooms-carousel .rc-track .wp-block-kadence-image .kb-is-ratio-image {
		width: 100%;
		height: auto !important;
		padding-bottom: 0 !important;
		max-width: none;
	}
	.rooms-carousel .rc-track .wp-block-kadence-image img {
		position: static !important;
		display: block;
		width: 100% !important;
		height: auto !important;
		max-width: none;
		aspect-ratio: var(--rc-ratio, 3 / 4);
		object-fit: cover;
	}

	/* Dots, matched to the Kadence (Splide) carousel dots used elsewhere */
	.rooms-carousel .rc-dots {
		display: flex;
		justify-content: center;
		margin-top: 16px;
	}
	.rooms-carousel .rc-dot {
		position: relative;
		width: 16px;
		height: 24px;
		padding: 0;
		margin: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.rooms-carousel .rc-dot::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 10px;
		margin: -5px 0 0 -5px;
		border-radius: 50%;
		background: #000;
		opacity: 0.5;
		transition: opacity 0.2s ease;
	}
	.rooms-carousel .rc-dot.is-active::before {
		opacity: 0.75;
	}
	.rooms-carousel .rc-dot:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 0;
	}
}