/* =====================================================================
   Room Detail 2026 (page-room-2026.php)
   Path in theme: /assets/css/room-2026.css
   Loaded AFTER rooms-2026.css (base, menu, reviews, getting here) and ONLY on this template.

   14 Oct 2026: rebuilt for the director's new section order and the
   Website UI Design System v1.0 (tokens, buttons, card link, cards, motion, focus).
   ===================================================================== */

/* ---------- Design system tokens (Website UI Design System v1.0, p.17) ---------- */
:root {
	--x-terracotta: #A4441E;
	--x-terracotta-dark: #8A3816;
	--x-terracotta-deep: #742E12;
	--x-terracotta-soft: #DEAF8F;
	--x-olive: #757438;        /* lines only */
	--x-olive-text: #6E6D35;   /* text (passes AA) */
	--x-white: #FFFFFF;
	--x-sand: #F7F2EC;
	--x-sand-deep: #EFE7DD;
	--x-line: #E6DCD1;
	--x-ink: #2B2622;
	--x-ink-soft: #6B625A;
	--x-disabled-bg: #ECE6DE;
	--x-disabled-text: #8C8178;

	--x-font-ui: "Karla", "Helvetica Neue", Arial, sans-serif;
	--x-font-head: "Prata", Georgia, serif;

	--x-ease-organic: cubic-bezier(.22,.61,.36,1);
	--x-ease-soft: cubic-bezier(.45,0,.25,1);
	--x-ease-press: cubic-bezier(.3,0,.5,1);
	--x-dur-press: 90ms;  --x-dur-fast: 160ms;
	--x-dur-base: 240ms;  --x-dur-line: 320ms;
	--x-dur-slow: 420ms;  --x-dur-image: 700ms;
	--x-lift: -2px;

	--x-btn-h: 52px; --x-btn-px: 32px; --x-btn-fs: 14px;
	--x-btn-ls: .12em; --x-btn-minw: 200px; --x-btn-gap: 16px;
	--x-radius-pill: 999px; --x-radius-card: 4px;
}
@media (max-width: 1023px) { :root { --x-btn-h: 48px; --x-btn-px: 28px; --x-btn-minw: 180px; } }
@media (max-width: 599px)  { :root { --x-btn-px: 24px; --x-btn-fs: 13px; --x-btn-gap: 12px; } }

/* Hero sits under the fixed menu (same as the Rooms page) */
.xr-page--room { padding-top: 0; background: var(--x-white); }

/* ---------- Buttons (primary) ---------- */
.xr-page--room .xr-btn,
.xr-bookbar .xr-btn {
	/* 15 Oct: font size, letter-spacing and padding come from rooms-2026.css (same as the Rooms page) */
	line-height: 1.2;
	background: var(--x-terracotta);
	border: 1px solid var(--x-terracotta);
	border-radius: var(--x-radius-pill);
	color: var(--x-white) !important;
	transform: none;
	transition: background-color var(--x-dur-base) var(--x-ease-organic), border-color var(--x-dur-base) var(--x-ease-organic),
		box-shadow var(--x-dur-base) var(--x-ease-organic), transform var(--x-dur-base) var(--x-ease-organic);
}
.xr-page--room .xr-btn:hover,
.xr-bookbar .xr-btn:hover { transform: none; } /* hover only on mouse devices, below */
@media (hover: hover) and (pointer: fine) {
	.xr-page--room .xr-btn:hover,
	.xr-bookbar .xr-btn:hover {
		background: var(--x-terracotta-dark);
		border-color: var(--x-terracotta-dark);
		transform: translateY(var(--x-lift));
		box-shadow: 0 8px 18px -8px rgba(138,56,22,.55);
	}
}
.xr-page--room .xr-btn:active,
.xr-bookbar .xr-btn:active {
	background: var(--x-terracotta-deep);
	border-color: var(--x-terracotta-deep);
	transform: translateY(0) scale(.98);
	box-shadow: none;
	transition-duration: var(--x-dur-press);
	transition-timing-function: var(--x-ease-press);
}
.xr-page--room .xr-btn:focus-visible,
.xr-bookbar .xr-btn:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 3px; }


/* ---------- Card link (tertiary) — also used as a <button> ---------- */
.xr-page--room .x-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--x-font-ui);
	font-size: 13px;          /* 14px on desktop, below — same as .xr-room-link on the Rooms page */
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--x-terracotta) !important;
	transition: color var(--x-dur-base) var(--x-ease-organic), transform var(--x-dur-base) var(--x-ease-organic), opacity var(--x-dur-press);
}
.xr-page--room .x-link::before,
.xr-page--room .x-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: calc(50% + 12px);
	height: 1px;
	background: var(--x-terracotta-soft);
}
.xr-page--room .x-link::after {
	background: var(--x-olive);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--x-dur-line) var(--x-ease-organic);
}
@media (hover: hover) and (pointer: fine) {
	.xr-page--room .x-link:hover { color: var(--x-olive-text) !important; transform: translateY(var(--x-lift)); }
	.xr-page--room .x-link:hover::after { transform: scaleX(1); }
}
.xr-page--room .x-link:active { transform: none; opacity: .8; }
.xr-page--room .x-link:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; border-radius: 2px; }

/* Eyebrows, labels, section titles and feature lists: sizes and colors come from rooms-2026.css (Rooms page) */

/* =====================================================================
   1. HERO — taller than the Rooms page hero (that one is 300–480px)
   ===================================================================== */
.xr-rhero {
	position: relative;
	/* 15 Oct: fixed height instead of aspect-ratio + max-height (that combination shrank the width and left a
	   white strip on the right). Height = the photo's shape (2.2:1, ~655px at 1440px), between 520px and 88vh. */
	width: 100%;
	height: clamp(520px, 45.5vw, 88vh);
	overflow: hidden;
	background: var(--x-sand-deep);
}
.xr-rhero-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: center 55%;
}
/* Top shade so the white logo and menu read on any photo (same as the Rooms hero) */
.xr-rhero::after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 16%, rgba(0,0,0,0) 34%);
}
/* ---------- Dates bar (15 Oct) — Check In · Check Out · Check availability → Cloudbeds ----------
   Desktop/tablet: sits on the bottom edge of the photo (director's design). Phones: under the photo. */
.xr-rhero-wrap { position: relative; background: var(--x-sand); }
.xr-dates {
	position: absolute; z-index: 3;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: min(975px, calc(100% - 40px));
	display: grid;
	grid-template-columns: 1fr 1fr minmax(240px, 30%);
	min-height: 64px;
	background: #F7F6F3;
	box-shadow: 0 -10px 30px -18px rgba(43,38,34,.35);
}
.xr-dates-field {
	position: relative;
	display: flex; align-items: center; gap: 24px;
	padding: 0 28px;
	border-right: 1px solid var(--x-line);
	cursor: pointer;
	min-width: 0;
}
.xr-dates-label { font-family: var(--x-font-head); font-size: 18px; color: var(--x-ink); white-space: nowrap; }
.xr-dates-value { font-family: var(--x-font-head); font-size: 17px; color: var(--x-disabled-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr-dates.has-in [data-xr-show="in"],
.xr-dates.has-out [data-xr-show="out"] { color: var(--x-terracotta); }
/* The real date input covers the whole field, invisible: a click anywhere opens the browser's calendar */
.xr-dates-input {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; border: 0; padding: 0; margin: 0;
	cursor: pointer;
	font-size: 16px; /* stops iPhone zooming in */
}
.xr-dates-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.xr-dates-field:focus-within { outline: 2px solid var(--x-ink); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .xr-dates-field:hover { background: #fff; } }
.xr-dates-btn {
	display: flex; align-items: center; justify-content: center;
	padding: 0 24px;
	background: var(--x-terracotta);
	color: #fff !important;
	font-family: var(--x-font-ui); font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	text-align: center;
	transition: background-color var(--x-dur-base) var(--x-ease-organic);
}
@media (hover: hover) and (pointer: fine) { .xr-dates-btn:hover { background: var(--x-terracotta-dark); } }
.xr-dates-btn:active { background: var(--x-terracotta-deep); transition-duration: var(--x-dur-press); }
.xr-dates-btn:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 3px; }

/* =====================================================================
   2. INTRO
   ===================================================================== */
.xr-rintro { background: var(--x-sand); padding: 80px 0 88px; text-align: center; }
.xr-page--room .xr-rintro .section-title { margin: 6px 0 22px; }
.xr-rintro-text { max-width: 860px; margin: 0 auto; font-size: 16px; line-height: 1.8; color: #222; } /* = .xr-stay-text (Rooms page) */

/* =====================================================================
   3. ROOM VERSIONS — card with actions (pattern B)
   ===================================================================== */
.xr-vers { background: var(--x-white); }
.xr-vers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.xr-vers-grid.is-single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.xr-vcard {
	display: flex; flex-direction: column;
	background: var(--x-sand);
	border-radius: var(--x-radius-card);
	overflow: hidden;
	scroll-margin-top: calc(var(--xr-nav-h) + 16px);
	transition: box-shadow var(--x-dur-slow) var(--x-ease-organic);
}
.xr-vcard-media {
	position: relative; display: block;
	aspect-ratio: 3 / 2; overflow: hidden;
	padding: 0; border: 0;
	background: var(--x-sand-deep);
}
.xr-vcard-media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; max-width: none; object-fit: cover;
	transition: transform var(--x-dur-image) var(--x-ease-organic);
}
.xr-vcard-media:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
	.xr-vcard:hover { box-shadow: 0 18px 40px -24px rgba(43,38,34,.35); }
	.xr-vcard:hover .xr-vcard-media img { transform: scale(1.04); }
}
.xr-vcard-body { display: flex; flex-direction: column; flex: 1; padding: 40px 40px 44px; }
.xr-page .xr-vcard-title { font-family: var(--x-font-head); font-weight: 400; font-size: 24px; line-height: 1.3; color: #1a1a1a; margin-bottom: 14px; } /* = .xr-rcard-title */
.xr-vfacts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 20px; }
.xr-vfacts li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #444; } /* = .xr-room-features li */
.xr-vfacts .xr-icon { width: 18px; height: 18px; color: #9c8a5e; flex-shrink: 0; }
.xr-vcard-text { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 32px; } /* = .xr-room-text */
.xr-vcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: auto; }

/* 16 Oct: room-details pop-up removed (Level 3 pages instead) */

/* =====================================================================
   4. GOOD TO KNOW (link = card link). 15 Oct: sand, since Amenities is gone (keeps white/sand alternating)
   ===================================================================== */
.xr-know { background: var(--x-sand); }
.xr-know-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; margin-top: 32px; }
.xr-know-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.xr-know-icon { width: 30px; height: 30px; color: var(--x-terracotta); stroke-width: 1.3; }
.xr-know-list p { font-size: 15px; line-height: 1.6; color: #444; }
.xr-know-more { margin-top: 24px; }

/* =====================================================================
   5. REVIEWS — 15 Oct: white section with sand cards, same as the Rooms page reviews
   ===================================================================== */
.xr-page--room .xr-reviews { background: var(--x-white); }
.xr-page--room .xr-review { background: var(--x-sand); }
.xr-reviews-grid--3 { grid-template-columns: repeat(3, 1fr); }
.xr-reviews-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* =====================================================================
   8. COMPARE ROOMS — photo + sand card, fully clickable (same as Room Version "Explore other rooms")
   ===================================================================== */
.xr-cmp { background: var(--x-white); }
.xr-cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
/* 16 Oct: same card style as "Explore other rooms" on the Room Version page (photo + sand box) */
.xr-cmp-card { display: flex; flex-direction: column; color: inherit !important; }
.xr-cmp-card:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; }
.xr-cmp-img { display: block; aspect-ratio: 1.55 / 1; overflow: hidden; background: var(--x-sand-deep); }
.xr-cmp-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--x-dur-image) var(--x-ease-organic); }
.xr-cmp-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 28px 26px; background: var(--x-sand); }
.xr-cmp-label { font-family: var(--x-font-ui); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--x-terracotta); }
.xr-cmp-title { font-family: var(--x-font-head); font-size: 26px; line-height: 1.3; color: #1a1a1a; margin: 6px 0 10px; transition: color var(--x-dur-base) var(--x-ease-organic); }
.xr-cmp-body .x-link { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
	.xr-cmp-card:hover .xr-cmp-img img { transform: scale(1.04); }
	.xr-cmp-card:hover .xr-cmp-title { color: var(--x-terracotta); }
	.xr-cmp-card:hover .x-link { color: var(--x-olive-text) !important; }
	.xr-cmp-card:hover .x-link::after { transform: scaleX(1); }
}
.xr-cmp-card:active { transform: scale(.99); transition: transform var(--x-dur-press) var(--x-ease-press); }

/* =====================================================================
   9. FAQ — main-page format (title left, questions right, terracotta ↓)
   ===================================================================== */
.xr-faq2 { background: var(--x-sand); }
.xr-faq2-grid { display: grid; grid-template-columns: 1fr 1.9fr; gap: 64px; align-items: start; }
.xr-faq2-head .xr-eyebrow { margin-bottom: 4px; }
.xr-page--room .xr-faq2-head .section-title { max-width: 300px; }
.xr-faq2-list { padding-top: 12px; }
.xr-faq2-item summary {
	list-style: none;
	display: block;            /* arrow follows the last word, also when the question wraps */
	min-height: 44px;
	padding: 6px 0;
	cursor: pointer;
	font-family: var(--x-font-ui);
	font-size: 1.12rem; line-height: 1.45;
	color: #1a1a1a;
	transition: color var(--x-dur-base) var(--x-ease-organic);
}
.xr-faq2-item summary::-webkit-details-marker { display: none; }
.xr-faq2-arrow { display: inline-block; vertical-align: -3px; margin-left: 6px; width: 18px; height: 18px; color: var(--x-terracotta); stroke-width: 1.8; transition: transform var(--x-dur-base) var(--x-ease-organic); }
.xr-faq2-item[open] .xr-faq2-arrow { transform: rotate(180deg); }
.xr-faq2-item summary:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .xr-faq2-item summary:hover { color: var(--x-terracotta); } }
.xr-faq2-answer { padding: 2px 0 18px; max-width: 640px; }
.xr-faq2-answer p { font-size: 16px; line-height: 1.72; color: var(--xr-text); }

/* ---------- Book bar (phones only) ---------- */
.xr-bookbar { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.xr-page--room *, .xr-bookbar * { transition-duration: 1ms !important; animation: none !important; }
	.xr-page--room .xr-btn:hover, .xr-page--room .x-link:hover { transform: none; }
	.xr-vcard:hover .xr-vcard-media img, .xr-cmp-card:hover .xr-cmp-img img { transform: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
/* Desktop text sizes = Rooms page desktop block (13 Oct 2026, director) */
@media (min-width: 961px) {
	.xr-rintro-text { font-size: 18px; max-width: 940px; }
	.xr-page .xr-vcard-title { font-size: 27px; }
	.xr-vfacts li { font-size: 16px; }
	.xr-vcard-text,
	.xr-know-list p { font-size: 16.5px; }
	.xr-page--room .x-link { font-size: 14px; }
	.xr-faq2-item summary { font-size: 1.25rem; }
	.xr-faq2-answer p { font-size: 17.5px; }
}

@media (max-width: 1023px) {
	.xr-vers-grid { gap: 32px; }
	.xr-vcard-body { padding: 28px 24px 32px; }
}

@media (max-width: 960px) {
	.xr-cmp-grid { gap: 22px; }
	.xr-cmp-body { padding: 20px 20px 22px; }
	.xr-cmp-title { font-size: 22px; }
	.xr-reviews-grid--3 { grid-template-columns: 1fr; }
	.xr-faq2-grid { grid-template-columns: 1fr; gap: 16px; }
	.xr-page--room .xr-faq2-head .section-title { max-width: none; }
}

@media (max-width: 700px) {
	/* Phones (15 Oct): photo + dates bar + the whole intro on the first screen */
	.xr-rhero { height: clamp(240px, 42vh, 125vw); height: clamp(240px, 42svh, 125vw); }
	.xr-dates {
		position: static; transform: none; width: auto;
		grid-template-columns: 1fr 1fr;
		background: #fff; box-shadow: none;
		border-bottom: 1px solid var(--x-line);
	}
	.xr-dates-field { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 8px 20px; min-height: 56px; }
	.xr-dates-field + .xr-dates-field { border-right: 0; }
	.xr-dates-label { font-size: 15px; }
	.xr-dates-value { font-size: 15px; max-width: 100%; }
	.xr-dates-btn { grid-column: 1 / -1; height: 46px; }
	.xr-rintro { padding: 26px 0 36px; }
	.xr-rintro .xr-eyebrow { margin-bottom: 4px; }
	.xr-page--room .xr-rintro .section-title { margin: 2px 0 12px; }
	.xr-rintro-text { font-size: 16px; line-height: 1.65; }
	.xr-vers-grid,
	.xr-know-list,
	.xr-reviews-grid--2,
	.xr-cmp-grid { grid-template-columns: 1fr; }
	.xr-vcard-body { padding: 24px 20px 28px; }
	.xr-vcard-actions { gap: 12px 24px; }
	/* Check availability bar: fixed bottom once the hero is off screen; room for the WhatsApp bubble */
	.xr-bookbar {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
		padding: 10px 88px 10px 16px;
		background: #fff;
		border-top: 1px solid var(--x-line);
		box-shadow: 0 -6px 20px -12px rgba(43,38,34,.25);
		transform: translateY(110%);
		transition: transform var(--x-dur-slow) var(--x-ease-organic);
	}
	.xr-bookbar.is-on { transform: none; }
	/* Guide p.16: one full-width Check availability (the room name stays in the HTML for screen readers) */
	.xr-bookbar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.xr-bookbar .xr-btn { box-sizing: border-box; flex: 1; height: 48px; padding: 0 18px; text-decoration: none; } /* 15 Oct: fixed 48px (guide mobile size); was 0 padding with no height → thin */
	.xr-page--room { padding-bottom: 66px; }
}

/* 16 Oct 2026 — same desktop text bump as the Rooms page (screens >= 1360px) */
@media (min-width: 1360px) {
	.xr-page .xr-vcard-title { font-size: 30px; }
	.xr-vfacts li { font-size: 17px; }
	.xr-vcard-text,
	.xr-know-list p { font-size: 17.5px; }
}

/* =====================================================================
   16 Oct 2026 (2nd round, director) — first screen + room versions
   - Desktop: hero = screen height − 300px (360–700px), so photo + label + title + intro text are all on the
     first screen (tested 1280×720, 1366×657, 1440×789, 1536×742, 1920×961). Narrower text column, more air.
   - Phones: centered intro with more line height; hero + dates bar + intro fit the first screen
     (tested 360×640 → 412×780).
   - "Two Ways to Stay Close to Nature" + its short text above the cards.
   - Phones: sticky A/C · Open Air bar under that text; each card fits the screen under the menu + bar
     (photo 2:1; 16:7 on short phones, 3:2 on tall ones).
   - Phones: no white strip between FAQ and footer (the space for the bottom bar moved to the page end).
   ===================================================================== */
.xr-rintro-text { text-wrap: pretty; } /* avoids a single word alone on the last line (newer browsers) */
.xr-rintro-text + .xr-rintro-text { margin-top: 20px; }
.xr-page--room .xr-vers-title { text-align: center; margin: 0 0 14px; }
.xr-vers-lead { max-width: 640px; margin: 0 auto 48px; text-align: center; font-size: 16px; line-height: 1.7; color: #222; text-wrap: pretty; }
.xr-typebar { display: none; } /* phones only */

@media (min-width: 701px) {
	.xr-rhero { height: clamp(360px, calc(100vh - 300px), 700px); }
	.xr-rintro { padding: 56px 0 64px; }
	.xr-page--room .xr-rintro .section-title { margin: 6px 0 22px; }
	.xr-rintro-text { max-width: 760px; line-height: 1.75; } /* was 940px / 1.8 */
}
@media (min-width: 961px) {
	.xr-vers-lead { font-size: 18px; }
}

@media (max-width: 700px) {
	/* First screen */
	.xr-rhero { height: clamp(180px, 28vh, 72vw); height: clamp(180px, 28svh, 72vw); }
	.xr-dates-field { min-height: 46px; padding: 6px 20px; }
	.xr-dates-label { font-size: 14px; line-height: 1.2; }
	.xr-dates-value { font-size: 14px; line-height: 1.3; }
	.xr-dates-btn { height: 44px; }
	.xr-rintro { padding: 24px 0 32px; text-align: center; }
	.xr-rintro .xr-container { padding-left: 24px; padding-right: 24px; }
	.xr-page--room .xr-rintro .section-title { margin: 4px 0 14px; }
	.xr-rintro-text { font-size: 15.5px; line-height: 1.7; }
	.xr-rintro-text + .xr-rintro-text { margin-top: 12px; }

	/* Room versions */
	.xr-vers.xr-section { padding-top: 44px; }
	.xr-page--room .xr-vers-title { margin-bottom: 10px; }
	.xr-vers-lead { font-size: 15.5px; line-height: 1.65; margin-bottom: 18px; }
	.xr-typebar {
		display: flex;
		position: sticky; top: var(--xr-nav-h, 64px); z-index: 50;
		width: 100vw; margin: 0 calc(50% - 50vw) 16px;
		background: #fff;
		border-bottom: 1px solid var(--x-line);
	}
	.xr-typebar-link {
		flex: 1; text-align: center;
		padding: 13px 8px 11px; min-height: 48px; box-sizing: border-box;
		font-family: var(--x-font-ui); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
		color: var(--x-ink-soft) !important;
		border-bottom: 2px solid transparent;
		transition: color var(--x-dur-base) var(--x-ease-organic), background-color var(--x-dur-base) var(--x-ease-organic), border-color var(--x-dur-base) var(--x-ease-organic);
	}
	.xr-typebar-link.is-active { color: var(--x-terracotta) !important; border-bottom-color: var(--x-terracotta); background: var(--x-sand); }
	.xr-typebar-link:focus-visible { outline: 2px solid var(--x-ink); outline-offset: -4px; }
	.xr-vers-grid { gap: 24px; }
	.xr-vcard { scroll-margin-top: calc(var(--xr-nav-h, 64px) + 48px + 12px); }
	.xr-vcard-media { aspect-ratio: 2 / 1; }
	.xr-vcard-body { padding: 18px 20px 20px; }
	.xr-page .xr-vcard-title { font-size: 22px; margin-bottom: 8px; }
	.xr-vfacts { flex-direction: column; gap: 6px; margin-bottom: 14px; }
	.xr-vfacts li { font-size: 15px; }
	.xr-vcard-text { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }

	/* White strip fix: room for the fixed bottom bar at the very end of the page, not under the FAQ */
	.xr-page--room { padding-bottom: 0; }
	body:has(.xr-page--room) { padding-bottom: 66px; }
}
@media (max-width: 700px) and (max-height: 660px) { .xr-vcard-media { aspect-ratio: 16 / 7; } }
@media (max-width: 700px) and (min-height: 740px) { .xr-vcard-media { aspect-ratio: 3 / 2; } }

/* =====================================================================
   16 Oct 2026 (4th round, director)
   - Intro button "Explore Treehouse Options" → room versions; photo + label + title + text + button on the
     first screen (desktop and phones).
   - "+ Photos" back on the card photos → full-screen photo viewer (slider only).
   - Phones: every card fills the space under the menu + A/C · Open Air bar (the next card no longer peeks in);
     Check availability full width with Room details centered under it (same as the Rooms page).
   - Less space between FAQ and footer.
   ===================================================================== */
.xr-rintro-cta { margin-top: 30px; }
.xr-rintro-cta .xr-btn { min-width: 260px; padding: 14px 30px; font-size: 13px; font-weight: 600; letter-spacing: .1em; }
/* the page's filled-button style would otherwise override the outline (secondary button: one primary CTA per screen) */
.xr-page--room .xr-rintro-cta .xr-btn--line { background: transparent; color: var(--x-terracotta) !important; border: 1.5px solid var(--x-terracotta); }
@media (hover: hover) and (pointer: fine) {
	.xr-page--room .xr-rintro-cta .xr-btn--line:hover { background: var(--x-terracotta); color: #fff !important; }
}
@media (min-width: 701px) {
	/* Tested 1280×720, 1366×657, 1440×789, 1536×742, 1920×961: photo + intro + button on the first screen */
	.xr-rhero { height: clamp(300px, calc(100vh - 360px), 680px); }
	.xr-rintro { padding: 44px 0 56px; }
	.xr-rintro-cta { margin-top: 24px; }
}

/* "+ Photos" on the card photo */
button.xr-vcard-media { width: 100%; cursor: zoom-in; }
.xr-vcard-badge {
	position: absolute; right: 16px; bottom: 16px; z-index: 1;
	padding: 6px 12px;
	background: rgba(43,38,34,.6);
	color: #fff;
	font-family: var(--x-font-ui); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	border-radius: 2px;
	transition: background-color var(--x-dur-base) var(--x-ease-organic);
}
@media (hover: hover) and (pointer: fine) { button.xr-vcard-media:hover .xr-vcard-badge { background: var(--x-terracotta); } }
button.xr-vcard-media:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; }

/* Photo viewer */
html.xr-dlg-open { overflow: hidden; }
.xr-lb {
	position: fixed; inset: 0;
	width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: rgba(24,21,19,.96);
	color: #fff;
}
.xr-lb[open] { display: flex; flex-direction: column; animation: xr-lb-in var(--x-dur-slow) var(--x-ease-organic); }
.xr-lb::backdrop { background: rgba(24,21,19,.96); }
@keyframes xr-lb-in { from { opacity: 0; } to { opacity: 1; } }
.xr-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 24px; }
.xr-lb-title { font-family: var(--x-font-head); font-size: 20px; line-height: 1.3; color: #fff; }
.xr-lb-close {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
	background: transparent; color: #fff; cursor: pointer;
	transition: background-color var(--x-dur-base) var(--x-ease-organic);
}
.xr-lb-close:hover { background: rgba(255,255,255,.12); }
.xr-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.xr-lb .xr-slider { flex: 1; width: min(1280px, 100%); margin: 0 auto 24px; display: flex; min-height: 0; }
.xr-lb .xr-slider-track { flex: 1; aspect-ratio: auto; height: auto; background: transparent; }
.xr-lb .xr-slide img { object-fit: contain; }
.xr-lb .xr-slider-prev { left: 16px; }
.xr-lb .xr-slider-next { right: 16px; }
.xr-lb .xr-slider-btn { width: 48px; height: 48px; }
.xr-lb .xr-slider-count { left: 50%; right: auto; bottom: -4px; transform: translateX(-50%); font-size: 13px; }
.xr-lb .xr-slider-track:focus-visible { outline: none; }

/* Less space between FAQ and footer (both sand: 88 + 56px looked like an empty block) */
.xr-page--room .xr-faq2 { padding-bottom: 56px; }
body:has(.xr-page--room) footer .ft-wrap { padding-top: 44px; }
body:has(.xr-page--room) footer { border-top: 1px solid var(--x-line); }

@media (max-width: 700px) {
	/* First screen with the new button */
	.xr-rhero { height: clamp(160px, 25vh, 72vw); height: clamp(160px, 25svh, 72vw); }
	.xr-rintro { padding: 22px 0 28px; }
	.xr-rintro-text { line-height: 1.65; }
	.xr-rintro-cta { margin-top: 18px; }
	.xr-rintro-cta .xr-btn { min-width: 250px; padding: 13px 24px; }

	/* Each card fills the space under menu + version bar */
	.xr-vcard { min-height: calc(100vh - var(--xr-nav-h, 76px) - 48px - 24px); min-height: calc(100svh - var(--xr-nav-h, 76px) - 48px - 24px); }
	.xr-vcard-actions { flex-direction: column; align-items: stretch; gap: 4px; }
	.xr-vcard-actions .xr-btn { width: 100%; min-height: 46px; }
	.xr-vcard-actions .x-link { align-self: center; }

	.xr-page--room .xr-faq2 { padding-bottom: 40px; }
	body:has(.xr-page--room) footer .ft-wrap { padding-top: 36px; }

	.xr-lb-head { padding: 10px 10px 10px 20px; }
	.xr-lb-title { font-size: 17px; }
	.xr-lb .xr-slider { align-items: center; margin-bottom: 40px; }
	.xr-lb .xr-slider-track { height: min(70vh, 100vw); flex: 1; }
	.xr-lb .xr-slider-btn { width: 40px; height: 40px; }
	.xr-lb .xr-slider-prev { left: 8px; }
	.xr-lb .xr-slider-next { right: 8px; }
	.xr-lb .xr-slider-count { bottom: -30px; }
}

/* PATCH 16 Oct 2026 — Room Detail desktop text bump (screens >= 1360px), incl. Explore Other Stays titles */
@media (min-width: 1360px) {
	.xr-page .xr-vcard-title,
	.xr-cmp-title { font-size: 30px; }
	.xr-vfacts li { font-size: 17px; }
	.xr-vcard-text,
	.xr-know-list p { font-size: 17.5px; }
}

/* 19 Oct 2026 — Explore Other Stays: "Explore …" links always on one line (longest: Explore Eco Chic Treehouses).
   Strong selectors because xinalani-ui.css styles .x-link (13px, wide letter spacing, wraps).
   Tested 1440, 1200, 1024, 961, 820, 768, 375 — one line everywhere. */
html body #xr-page .xr-cmp-card .xr-cmp-body .x-link { white-space: nowrap; overflow-wrap: normal; max-width: none; }
@media (max-width: 1199px) {
	html body #xr-page .xr-cmp-card .xr-cmp-body .x-link { letter-spacing: .07em; }
}
@media (min-width: 701px) and (max-width: 960px) {
	html body #xr-page .xr-cmp-card .xr-cmp-body { padding: 18px 16px 20px; }
	html body #xr-page .xr-cmp-card .xr-cmp-body .x-link { font-size: 11.5px; letter-spacing: .05em; }
}

/* 19 Oct 2026 — Room cards (A/C · Open Air), all Level 2 pages
   Desktop (>= 1100px): card title and the two features on one line each
     (was: "Eco Chic Treehouse Open Air" on 2 lines at >= 1360px; features on 2 rows). 961–1099px: features may wrap.
   Phones: "Explore … Options" lands with the heading ~20px under the menu (was ~75px of empty space);
     no big gap between the text and Check availability (the card still fills the screen — the photo takes the
     extra space); Room details centered under the button.
   Tested Eco Chic, Deluxe, Palapa at 1920/1440/1280/1100/1024 and phones 375×667, 412×780. */
@media (min-width: 961px) {
	html body #xr-page .xr-vcard .xr-vcard-body { padding-left: 36px; padding-right: 36px; }
	html body #xr-page .xr-vcard .xr-vcard-title { font-size: 27px; }
	html body #xr-page .xr-vcard .xr-vfacts { flex-wrap: nowrap; gap: 6px 18px; }
	html body #xr-page .xr-vcard .xr-vfacts li { font-size: 15px; white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1099px) {
	html body #xr-page .xr-vcard .xr-vcard-title { font-size: 24px; }
	html body #xr-page .xr-vcard .xr-vfacts { flex-wrap: wrap; }
}
@media (max-width: 700px) {
	html body #xr-page section.xr-vers { scroll-margin-top: calc(var(--xr-nav-h) - 44px); }
	html body #xr-page .xr-vcard .xr-vcard-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 46vw; }
	html body #xr-page .xr-vcard .xr-vcard-body { flex: none; }
	html body #xr-page .xr-vcard .xr-vcard-actions { margin-top: 0; }
	html body #xr-page .xr-vcard .xr-vcard-actions .x-link { align-self: center; }
}

/* 19 Oct 2026 (v2) — Explore Other Stays per the Website UI Design System v1.0.
   Card is no longer a link: only the "Explore …" link is clickable and reacts on hover.
   Overrides the earlier 19 Oct link-size rules (no more 11.5px — the guide says never below 13px). */
html body #xr-page .xr-cmp .xr-cmp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
html body #xr-page .xr-cmp-card .xr-cmp-body { padding: 24px; }
html body #xr-page .xr-cmp-card .xr-cmp-label { font-size: 12px; letter-spacing: .14em; line-height: 1.2; }
html body #xr-page .xr-cmp-card .xr-cmp-title { font-size: 24px; line-height: 1.2; margin: 12px 0; }
html body #xr-page .xr-cmp-card .xr-cmp-body .x-link { font-size: 13px; letter-spacing: .12em; white-space: nowrap; margin-top: auto; }
/* no "whole card" hover any more: title stays dark, the link only reacts to its own hover */
html body #xr-page .xr-cmp-card:hover .xr-cmp-title { color: #1a1a1a; }
html body #xr-page .xr-cmp-card:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
	html body #xr-page .xr-cmp-card:hover .x-link:not(:hover) { color: var(--x-terracotta) !important; transform: none; }
	html body #xr-page .xr-cmp-card:hover .x-link:not(:hover)::after { transform: scaleX(0); }
}
@media (max-width: 1023px) {
	html body #xr-page .xr-cmp .xr-cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 701px) and (max-width: 960px) {
	html body #xr-page .xr-cmp-card .xr-cmp-body { padding: 24px; }
	html body #xr-page .xr-cmp-card .xr-cmp-body .x-link { font-size: 13px; letter-spacing: .12em; }
}
@media (max-width: 700px) {
	html body #xr-page .xr-cmp .xr-cmp-grid { grid-template-columns: 1fr; gap: 16px; }
	html body #xr-page .xr-cmp-card .xr-cmp-body { padding: 20px; }
	html body #xr-page .xr-cmp-card .xr-cmp-title { font-size: 22px; }
}