/**
 * Bedroom Showcase — Front-end Styles
 *
 * Cards for [hrtk_bedrooms], the in-card slideshow for rooms with several
 * photos, plus the photo lightbox.
 *
 * BUILD: edit this file only. The committed .min.css/.debug.css are generated
 * (`npm run build:css`) and are what production/SCRIPT_DEBUG load. The build
 * raises every selector here to (2,x,0) via :not(#\9); see
 * scripts/postcss-hrtk-scope.js and scripts/css-manifest.js.
 */

/* =========================================================================
   Isolation boundary — see assets/css/searchbar-pro.css for the full
   doctrine (why `all: revert` + specificity armor, NOT !important; why svg
   is excluded via zero-specificity :where(); why this rule MUST STAY FIRST —
   later same-specificity rules win by source order).

   Blend-in component: it owns all of its markup but sits inside a property
   page and should read as part of it, so typography and palette are
   re-inherited after the reset. The lightbox <dialog> is promoted to the top
   layer at open time but stays a DOM descendant of the root, so it is
   covered by this same boundary — and inherits these values.

   The reset deliberately reaches the operator's blurb markup (<ul>/<li> out
   of a PMS text field): host themes style bare list elements, and the whole
   point of moving this section out of the page builder is that it renders
   the same on every site.
   ========================================================================= */
.hrtk-bedrooms:not(#\9):not(#\9),
.hrtk-bedrooms:not(#\9):not(#\9)::before,
.hrtk-bedrooms:not(#\9):not(#\9)::after,
.hrtk-bedrooms:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrtk-bedrooms:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrtk-bedrooms:not(#\9):not(#\9) *:where(:not(svg, svg *))::after {
	all: revert;
	box-sizing: border-box;
	color: inherit;
	font-family: inherit;
}

.hrtk-bedrooms:not(#\9):not(#\9) {
	/* Height budget for the lightbox photo. dvh where supported so mobile
	   browser chrome doesn't push the photo under the fold. */
	--hrtk-bedrooms-lightbox-height: 80vh;
	display: block;
}

@supports (height: 1dvh) {
	.hrtk-bedrooms:not(#\9):not(#\9) {
		--hrtk-bedrooms-lightbox-height: 80dvh;
	}
}

/* =========================================================================
   Grid
   ========================================================================= */

.hrtk-bedrooms__grid:not(#\9):not(#\9) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.hrtk-bedrooms__grid:not(#\9):not(#\9) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.hrtk-bedrooms__grid:not(#\9):not(#\9) {
		grid-template-columns: repeat(var(--hrtk-bedrooms-columns, 3), minmax(0, 1fr));
	}
}

.hrtk-bedrooms__item:not(#\9):not(#\9) {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hrtk-bedrooms__card:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   Card media
   ========================================================================= */

.hrtk-bedrooms__media:not(#\9):not(#\9) {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--hrtk-bedrooms-ratio, 4 / 3);
	background: rgba(0, 0, 0, 0.04);
	text-decoration: none;
	cursor: zoom-in;
}

.hrtk-bedrooms__img:not(#\9):not(#\9) {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	transition: transform 0.35s ease;
	/* The slideshow drags the photo; the browser's own image drag-and-drop
	   would otherwise take over a mouse drag. */
	-webkit-user-drag: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

.hrtk-bedrooms__media:hover:not(#\9):not(#\9) .hrtk-bedrooms__img,
.hrtk-bedrooms__media:focus-visible:not(#\9):not(#\9) .hrtk-bedrooms__img {
	transform: scale(1.03);
}

.hrtk-bedrooms__media:focus-visible:not(#\9):not(#\9) {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* =========================================================================
   Slideshow (rooms with several photos)

   Slides are the same photo links as the single-photo card, stacked in a
   box that carries the aspect ratio. The active slide is visible; the
   others are hidden AND off the accessibility tree (aria-hidden, tabindex
   -1, set by the script). Transition flavour is chosen on the root via
   data-hrtk-bedrooms-transition; `visibility` is transitioned with a delay
   so a leaving slide stays painted for the length of its animation.
   Controls are hidden until the script has bound (no-JS: first photo only).
   ========================================================================= */

.hrtk-bedrooms__slides:not(#\9):not(#\9) {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--hrtk-bedrooms-ratio, 4 / 3);
	background: rgba(0, 0, 0, 0.04);
	/* Horizontal swipes step the slideshow; vertical ones still scroll. */
	touch-action: pan-y;
}

.hrtk-bedrooms__slides:not(#\9):not(#\9) .hrtk-bedrooms__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.hrtk-bedrooms__slide:not(#\9):not(#\9) {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.hrtk-bedrooms__slide.is-active:not(#\9):not(#\9) {
	z-index: 2;
	opacity: 1;
	visibility: visible;
}

/* Fade: crossfade, the leaving slide sits under the incoming one. */
[data-hrtk-bedrooms-transition="fade"]:not(#\9):not(#\9) .hrtk-bedrooms__slide {
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

[data-hrtk-bedrooms-transition="fade"]:not(#\9):not(#\9) .hrtk-bedrooms__slide.is-active {
	transition:
		opacity 0.4s ease,
		visibility 0s;
}

/* Slide: the incoming slide enters from the side the visitor is heading,
   the leaving slide exits the other way. Inactive slides do NOT
   transition: their resting side flips with data-hrtk-bedrooms-dir on the
   box, and that flip has to be instant so the incoming slide starts from
   the correct side (the script sets the direction, forces a reflow, then
   swaps the classes). Only the entering (.is-active) and exiting
   (.is-leaving) slides animate; the exiting one stays visible for the
   length of its animation and is settled by the script afterwards. */
[data-hrtk-bedrooms-transition="slide"]:not(#\9):not(#\9) .hrtk-bedrooms__slide {
	opacity: 1;
	transform: translateX(100%);
	transition: none;
}

[data-hrtk-bedrooms-transition="slide"]:not(#\9):not(#\9) .hrtk-bedrooms__slide.is-active {
	transform: none;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-hrtk-bedrooms-transition="slide"]:not(#\9):not(#\9) .hrtk-bedrooms__slide.is-leaving {
	visibility: visible;
	transform: translateX(-100%);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-hrtk-bedrooms-transition="slide"]:not(#\9):not(#\9) [data-hrtk-bedrooms-dir="prev"] .hrtk-bedrooms__slide {
	transform: translateX(-100%);
}

[data-hrtk-bedrooms-transition="slide"]:not(#\9):not(#\9) [data-hrtk-bedrooms-dir="prev"] .hrtk-bedrooms__slide.is-active {
	transform: none;
}

[data-hrtk-bedrooms-transition="slide"]:not(#\9):not(#\9) [data-hrtk-bedrooms-dir="prev"] .hrtk-bedrooms__slide.is-leaving {
	transform: translateX(100%);
}

/* None: instant swap. */
[data-hrtk-bedrooms-transition="none"]:not(#\9):not(#\9) .hrtk-bedrooms__slide,
[data-hrtk-bedrooms-transition="none"]:not(#\9):not(#\9) .hrtk-bedrooms__slide.is-active {
	transition: none;
}

/* Drag: the pointer moves the active slide and the neighbour it is heading
   for (.is-peek) via inline transforms, so transitions are off while
   dragging (the inline transition the script sets for the commit or spring
   back still wins) and the neighbour is forced visible under the active
   one. Ordered after every transition flavour above so it beats them. */
.hrtk-bedrooms__slides.is-dragging:not(#\9):not(#\9) .hrtk-bedrooms__slide,
.hrtk-bedrooms__slide.is-peek:not(#\9):not(#\9) {
	transition: none;
}

.hrtk-bedrooms__slide.is-peek:not(#\9):not(#\9) {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}

.hrtk-bedrooms__slides.is-dragging:not(#\9):not(#\9) .hrtk-bedrooms__media {
	cursor: grabbing;
}

.hrtk-bedrooms__slides.is-dragging:not(#\9):not(#\9) .hrtk-bedrooms__media:hover .hrtk-bedrooms__img {
	transform: none;
}

/* Controls: always visible once bound (no hover-to-reveal). */
.hrtk-bedrooms__slide-nav:not(#\9):not(#\9),
.hrtk-bedrooms__slide-dots:not(#\9):not(#\9),
.hrtk-bedrooms__slide-count:not(#\9):not(#\9) {
	display: none;
	z-index: 3;
}

.hrtk-bedrooms[data-hrtk-bedrooms-bound]:not(#\9):not(#\9) .hrtk-bedrooms__slide-nav,
.hrtk-bedrooms[data-hrtk-bedrooms-bound]:not(#\9):not(#\9) .hrtk-bedrooms__slide-dots {
	display: flex;
}

.hrtk-bedrooms[data-hrtk-bedrooms-bound]:not(#\9):not(#\9) .hrtk-bedrooms__slide-count {
	display: inline-block;
}

.hrtk-bedrooms__slide-nav:not(#\9):not(#\9) {
	position: absolute;
	top: 50%;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.45);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.hrtk-bedrooms__slide-nav:hover:not(#\9):not(#\9),
.hrtk-bedrooms__slide-nav:focus-visible:not(#\9):not(#\9) {
	background: rgba(0, 0, 0, 0.7);
}

.hrtk-bedrooms__slide-nav:focus-visible:not(#\9):not(#\9) {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.hrtk-bedrooms__slide-nav:not(#\9):not(#\9) svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hrtk-bedrooms__slide-nav--prev:not(#\9):not(#\9) {
	left: 8px;
}

.hrtk-bedrooms__slide-nav--next:not(#\9):not(#\9) {
	right: 8px;
}

.hrtk-bedrooms__slide-dots:not(#\9):not(#\9) {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0 48px;
	pointer-events: none;
}

.hrtk-bedrooms__slide-dot:not(#\9):not(#\9) {
	width: 8px;
	height: 8px;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.hrtk-bedrooms__slide-dot:hover:not(#\9):not(#\9),
.hrtk-bedrooms__slide-dot:focus-visible:not(#\9):not(#\9) {
	background: rgba(255, 255, 255, 0.85);
}

.hrtk-bedrooms__slide-dot:focus-visible:not(#\9):not(#\9) {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.hrtk-bedrooms__slide-dot[aria-current="true"]:not(#\9):not(#\9) {
	background: #fff;
	transform: scale(1.25);
}

.hrtk-bedrooms__slide-count:not(#\9):not(#\9) {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	pointer-events: none;
}

/* =========================================================================
   Card body
   ========================================================================= */

.hrtk-bedrooms__body:not(#\9):not(#\9) {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18.4px 20px;
}

.hrtk-bedrooms__title:not(#\9):not(#\9) {
	margin: 0;
	font-size: 16.8px;
	font-weight: 600;
	line-height: 1.3;
}

.hrtk-bedrooms__beds:not(#\9):not(#\9) {
	display: flex;
	flex-wrap: wrap;
	gap: 6.4px 17.6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hrtk-bedrooms__bed:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	gap: 6.4px;
	margin: 0;
	font-size: 14.4px;
	line-height: 1.4;
	list-style: none;
}

.hrtk-bedrooms__bed-icon:not(#\9):not(#\9) {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.75;
}

/* Operator-authored blurb. Arrives as basic HTML (Details::sanitize strips
   everything else) from a PMS text field, so style the generic elements it
   may contain rather than classes we control. */
.hrtk-bedrooms__details:not(#\9):not(#\9) {
	font-size: 14.4px;
	line-height: 1.55;
	opacity: 0.85;
}

.hrtk-bedrooms__details:not(#\9):not(#\9) ul,
.hrtk-bedrooms__details:not(#\9):not(#\9) ol {
	margin: 0;
	padding-left: 1.15em;
}

/* The card grid is itself a <ul>, so the UA sheet would render the blurb's
   list as a nested one (hollow circles). Pin the top-level markers. */
.hrtk-bedrooms__details:not(#\9):not(#\9) ul {
	list-style-type: disc;
}

.hrtk-bedrooms__details:not(#\9):not(#\9) ol {
	list-style-type: decimal;
}

.hrtk-bedrooms__details:not(#\9):not(#\9) li {
	margin: 0 0 3.2px;
}

.hrtk-bedrooms__details:not(#\9):not(#\9) p {
	margin: 0 0 8px;
}

.hrtk-bedrooms__details:not(#\9):not(#\9) > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
   Lightbox

   Sized to the photo, not to a container. `max-height` alone does not
   constrain an image's max-content width contribution — a shrink-wrapped
   wrapper around a height-capped photo still resolves to the photo's
   intrinsic width and leaves dead space beside it. `max-width` does
   constrain it, so the width cap below is derived from the height budget and
   the natural ratio the script publishes as --hrtk-bedrooms-ar. The figure
   is then free to hug the photo at any aspect ratio.
   ========================================================================= */

/* Layout lives on the base rule, not on [open]: during the exit transition
   the element no longer matches [open], and anything declared only there
   would snap back (position: static, no centering) mid-animation. [open]
   carries the visible state and `display` only. */
.hrtk-bedrooms__lightbox:not(#\9):not(#\9) {
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	background: transparent;
	border: 0;
	/* Exit: fade up. `display` and `overlay` need allow-discrete or the
	   dialog leaves the top layer instantly and there is nothing left to
	   animate. Browsers without it just cut, which is the old behaviour. */
	transition:
		opacity 140ms ease,
		translate 140ms ease,
		display 140ms allow-discrete,
		overlay 140ms allow-discrete;
	translate: 0 -12px;
}

.hrtk-bedrooms__lightbox[open]:not(#\9):not(#\9) {
	display: flex;
	opacity: 1;
	transition-duration: 180ms;
	translate: 0 0;
}

/* Entry: fade down. */
@starting-style {
	.hrtk-bedrooms__lightbox[open]:not(#\9):not(#\9) {
		opacity: 0;
		translate: 0 -12px;
	}
}

.hrtk-bedrooms__lightbox:not(#\9):not(#\9)::backdrop {
	opacity: 0;
	background: rgba(0, 0, 0, 0.85);
	transition:
		opacity 140ms ease,
		display 140ms allow-discrete,
		overlay 140ms allow-discrete;
}

.hrtk-bedrooms__lightbox[open]:not(#\9):not(#\9)::backdrop {
	opacity: 1;
	transition-duration: 180ms;
}

@starting-style {
	.hrtk-bedrooms__lightbox[open]:not(#\9):not(#\9)::backdrop {
		opacity: 0;
	}
}

.hrtk-bedrooms__figure:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 94vw;
	margin: 0;
}

.hrtk-bedrooms__lightbox-img:not(#\9):not(#\9) {
	display: block;
	width: auto;
	height: auto;
	max-width: min(
		94vw,
		calc(var(--hrtk-bedrooms-lightbox-height) * var(--hrtk-bedrooms-ar, 1.5))
	);
	max-height: var(--hrtk-bedrooms-lightbox-height);
	-o-object-fit: contain;
	   object-fit: contain;
	border-radius: 4px;
	/* Drag down to close: the script owns vertical pans (pinch-zoom is
	   left to the browser) and moves the photo with inline transforms. */
	touch-action: pinch-zoom;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	cursor: grab;
}

.hrtk-bedrooms__lightbox.is-dragging:not(#\9):not(#\9) .hrtk-bedrooms__lightbox-img {
	cursor: grabbing;
}

/* The backdrop dims with the pull (--hrtk-bedrooms-pull, 1 → 0.35, set
   inline on the dialog by the script). ::backdrop inherits custom
   properties from the dialog in current browsers; older ones keep the
   full backdrop, which only loses the dimming. */
.hrtk-bedrooms__lightbox[open].is-dragging:not(#\9):not(#\9)::backdrop {
	opacity: var(--hrtk-bedrooms-pull, 1);
	transition: none;
}

.hrtk-bedrooms__caption:not(#\9):not(#\9) {
	max-width: 100%;
	color: #fff;
	font-size: 15.2px;
	text-align: center;
}

.hrtk-bedrooms__close:not(#\9):not(#\9),
.hrtk-bedrooms__nav:not(#\9):not(#\9) {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(0, 0, 0, 0.45);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.hrtk-bedrooms__close:hover:not(#\9):not(#\9),
.hrtk-bedrooms__nav:hover:not(#\9):not(#\9),
.hrtk-bedrooms__close:focus-visible:not(#\9):not(#\9),
.hrtk-bedrooms__nav:focus-visible:not(#\9):not(#\9) {
	background: rgba(0, 0, 0, 0.7);
}

.hrtk-bedrooms__close:not(#\9):not(#\9) svg,
.hrtk-bedrooms__nav:not(#\9):not(#\9) svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hrtk-bedrooms__close:not(#\9):not(#\9) {
	top: 16px;
	right: 16px;
}

.hrtk-bedrooms__nav--prev:not(#\9):not(#\9) {
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
}

.hrtk-bedrooms__nav--next:not(#\9):not(#\9) {
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

@media (max-width: 640px) {
	.hrtk-bedrooms__nav--prev:not(#\9):not(#\9) {
		left: 8px;
	}

	.hrtk-bedrooms__nav--next:not(#\9):not(#\9) {
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hrtk-bedrooms__img:not(#\9):not(#\9) {
		transition: none;
	}

	/* Specific enough to beat every per-transition rule above. */
	[data-hrtk-bedrooms-transition]:not(#\9):not(#\9) .hrtk-bedrooms__slide,
	[data-hrtk-bedrooms-transition]:not(#\9):not(#\9) .hrtk-bedrooms__slide.is-active,
	[data-hrtk-bedrooms-transition]:not(#\9):not(#\9) .hrtk-bedrooms__slide.is-leaving,
	.hrtk-bedrooms__slide-dot:not(#\9):not(#\9) {
		transition: none;
	}

	.hrtk-bedrooms__lightbox:not(#\9):not(#\9),
	.hrtk-bedrooms__lightbox[open]:not(#\9):not(#\9) {
		transition: none;
		translate: none;
	}

	.hrtk-bedrooms__lightbox:not(#\9):not(#\9)::backdrop,
	.hrtk-bedrooms__lightbox[open]:not(#\9):not(#\9)::backdrop {
		transition: none;
	}

	.hrtk-bedrooms__media:hover:not(#\9):not(#\9) .hrtk-bedrooms__img,
	.hrtk-bedrooms__media:focus-visible:not(#\9):not(#\9) .hrtk-bedrooms__img {
		transform: none;
	}
}