/* =====================================================================
   Rooms 2026
   Path in theme: /assets/css/rooms-2026.css
   Loaded ONLY on page-rooms-2026.php (see functions.php block).
   Built from retreats-2026.css (8 Oct 2026) minus Signature Retreats,
   old filter/grid and finder. 12 Oct: also removed Intro, Rooms, Day,
   Experience and Banner styles (sections removed from the page). New: Stay at Xinalani, Room cards + sticky room bar,
   Before you arrive (packing list).
   Prefix "xr-" kept so the shared header/footer rules still work.
   ===================================================================== */

:root {
	--xr-sand: #ece9e4;
	--xr-sand-light: #FAF6F0;
	--xr-cream: #F5EAD8;
	--xr-clay: #A4441E;
	--xr-clay-dark: #8c4a32;
	--xr-orange: #d87c13;
	--xr-forest: #757437;
	--xr-ink: #201e1d;
	--xr-text: #565759;
	--xr-line: #BBB3A4;
	--xr-icon: #8a7a63;

	--xr-display: 'Cormorant Garamond', Garamond, serif;
	--xr-body: 'Karla', sans-serif;
	--xr-prata: 'Prata', serif;

	--xr-max: 1100px;
	--xr-radius: 12px;
	--xr-nav-h: 76px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body.xr-body {
	margin: 0;
	font-family: var(--xr-body);
	background: var(--xr-sand-light);
	color: var(--xr-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

:where(.xr-page, .xr-nav) *,
:where(.xr-page, .xr-nav) *::before,
:where(.xr-page, .xr-nav) *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:where(.xr-page) img { display: block; max-width: 100%; height: auto; }
:where(.xr-page, .xr-nav) a { color: inherit; text-decoration: none; }

.xr-page section[id] { scroll-margin-top: calc(var(--xr-nav-h) + 12px); }

/* ---------- Shared pieces ---------- */
.xr-container { max-width: var(--xr-max); margin: 0 auto; padding: 0 24px; }
.xr-section { padding: 88px 0; }
.xr-center { text-align: center; }

.xr-eyebrow {
	font-family: var(--xr-body);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xr-clay);
	margin-bottom: 10px;
}

.section-title {
	font-family: var(--xr-display);
	font-size: clamp(30px, 5vw, 46px);
	font-weight: 700;
	line-height: 1.15;
	color: #000;
	margin-bottom: 16px;
}
.xr-page .section-title {
	font-family: var(--xr-prata);
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 400;
	line-height: 1.25;
	color: #1a1a1a;
	margin-bottom: 14px;
}

.xr-lead { font-size: 16px; line-height: 1.6; max-width: 860px; color: #222; }

.xr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--xr-clay);
	color: #fff !important;
	font-family: var(--xr-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 12px 28px;
	border: 1px solid var(--xr-clay);
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.xr-btn:hover { background: #8a3818; border-color: #8a3818; transform: translateY(-2px); }
.xr-btn--outline { background: transparent; color: var(--xr-forest) !important; border-color: var(--xr-forest); }
.xr-btn--outline:hover { background: var(--xr-forest); border-color: var(--xr-forest); color: #fff !important; }
/* Outlined clay button (design: "Explore accommodations") */
.xr-btn--line { background: transparent; color: var(--xr-clay) !important; border: 1.5px solid var(--xr-clay); }
.xr-btn--line:hover { background: var(--xr-clay); color: #fff !important; }

.xr-actions { margin-top: 48px; text-align: center; }

/* ---------- Nav ---------- */
.xr-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--xr-nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	z-index: 1000;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.admin-bar .xr-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .xr-nav { top: 46px; } }

.xr-nav.is-scrolled {
	background: #fff;
	border-bottom-color: #ECE4D3;
	box-shadow: 0 4px 24px -12px rgba(22, 38, 28, .18);
}
.xr-nav-logo img { display: block; max-width: 150px; height: auto; }

.xr-nav-right { display: flex; align-items: center; gap: 20px; }
.xr-nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.xr-nav-links a {
	position: relative;
	display: inline-block;
	color: var(--xr-ink);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	padding: 4px 0;
	transition: color .3s ease;
}
.xr-nav-links a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 0; height: 1.5px;
	background: currentColor;
	transition: width .25s ease;
}
.xr-nav-links a:hover::after { width: 100%; }
.xr-nav:not(.is-scrolled) .xr-nav-links a { color: #fff; }

.xr-nav-links a.xr-nav-cta {
	background: var(--xr-clay);
	color: #fff;
	padding: 10px 20px;
	border-radius: 100px;
}
.xr-nav-links a.xr-nav-cta::after { display: none; }
.xr-nav-links a.xr-nav-cta:hover { background: var(--xr-forest); }

.xr-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.xr-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--xr-ink); }
.xr-nav:not(.is-scrolled) .xr-nav-toggle span { background: #fff; }

@media (max-width: 960px) {
	.xr-nav { padding: 0 20px; }
	.xr-nav-toggle { display: flex; }
	.xr-nav-links {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: #fff;
		padding: 8px 24px 20px;
		border-bottom: 1px solid #ECE4D3;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
	}
	.xr-nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
	.xr-nav-links li { width: 100%; }
	.xr-nav-links a,
	.xr-nav:not(.is-scrolled) .xr-nav-links a { display: block; padding: 12px 0; color: var(--xr-ink); }
	.xr-nav-links a::after { display: none; }
	.xr-nav-links a.xr-nav-cta,
	.xr-nav:not(.is-scrolled) .xr-nav-links a.xr-nav-cta { display: inline-block; margin-top: 8px; padding: 10px 20px; color: #fff; }
}

/* ---------- Hero ---------- */
.xr-hero {
	position: relative;
	height: clamp(300px, 44vh, 480px);
	overflow: hidden;
	background: var(--xr-forest);
}
.xr-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 55%;
}
.xr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 80%, rgba(0,0,0,.15) 100%);
}

/* ---------- Stay at Xinalani (replaces Signature Retreats) ---------- */
.xr-stay { background: #fff; padding: 64px 0 88px; text-align: center; }
.xr-stay .section-title { margin-bottom: 26px; } /* h1 on this page, same look as the other section titles */
.xr-stay-text { font-size: 16px; line-height: 1.8; max-width: 860px; margin: 0 auto; color: #222; }
.xr-stay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; margin-top: 40px; }
.xr-stay-actions .xr-btn { min-width: 220px; padding: 14px 28px; }

/* ---------- Room cards (#room-types): sticky room bar + 4 stacked cards ---------- */
.xr-rooms2 { background: #F7F2EC; padding-bottom: 96px; }
.xr-roombar {
	position: sticky;
	top: var(--xr-nav-h);
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #ECE4D3;
}
.admin-bar .xr-roombar { top: calc(var(--xr-nav-h) + 32px); }
@media (max-width: 782px) { .admin-bar .xr-roombar { top: calc(var(--xr-nav-h) + 46px); } }
.xr-roombar-list {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 4px;
	max-width: var(--xr-max);
	margin: 0 auto;
	padding: 0 24px;
	overflow-x: auto;
	scrollbar-width: none;
}
.xr-roombar-list::-webkit-scrollbar { display: none; }
.xr-roombar-link {
	display: block;
	white-space: nowrap;
	padding: 16px 24px;
	font-family: var(--xr-prata);
	font-size: 16px;
	color: #8c4a32 !important;
	border-bottom: 2px solid transparent;
	transition: background-color .25s, color .25s, border-color .25s;
}
.xr-roombar-link:hover { background: #FAF6F0; }
.xr-tab-short { display: none; }
.xr-roombar-link.is-active {            /* active room: sand background + clay text + clay underline */
	background: #F7EDE7;
	color: var(--xr-clay) !important;
	border-bottom-color: var(--xr-clay);
}

.xr-rooms2-list { display: flex; flex-direction: column; gap: 128px; padding-top: 64px; }

/* Divider between rooms: fading thin line + small leaf in the middle */
.xr-rcard { position: relative; }
.xr-rcard + .xr-rcard::before {
	content: "";
	position: absolute;
	top: -64px;                 /* half of the gap above */
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, rgba(201,184,158,0) 0%, #c9b89e 18%, #c9b89e 82%, rgba(201,184,158,0) 100%);
	pointer-events: none;
}
.xr-rcard + .xr-rcard::after {
	content: "";
	position: absolute;
	top: -64px;
	left: 50%;
	width: 44px;
	height: 28px;
	transform: translate(-50%, -50%);
	background: #F7F2EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4441E' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10 11 5 20 5c0 9-6 14-14 14'/%3E%3Cpath d='M5 19l9-9'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	pointer-events: none;
}
.xr-rcard {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 32px;
	align-items: start;
	scroll-margin-top: calc(var(--xr-nav-h) + 72px); /* nav + room bar */
}
.admin-bar .xr-rcard { scroll-margin-top: calc(var(--xr-nav-h) + 104px); }

.xr-rcard-video { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #e9e1d4; }
.xr-rcard-video video,
.xr-rcard-video img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Photo slider (swipe or arrows, never auto-moves) */
.xr-slider { position: relative; }
.xr-slider-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	aspect-ratio: 3 / 2;
	background: #e9e1d4;
}
.xr-slider-track::-webkit-scrollbar { display: none; }
.xr-slider-track:focus-visible { outline: 2px solid var(--xr-clay); outline-offset: 2px; }
.xr-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.xr-slide img,
.xr-slide video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.xr-slide--video { display: none; }       /* phones only: the video becomes slide 1 */
.xr-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.9);
	background: rgba(32,30,29,.35);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}
.xr-slider-btn:hover { background: var(--xr-clay); border-color: var(--xr-clay); }
.xr-slider-btn:disabled { opacity: 0; pointer-events: none; }
.xr-slider-prev { left: 12px; }
.xr-slider-next { right: 12px; }
.xr-slider-count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(32,30,29,.55);
	color: #fff;
	font-size: 12px;
	letter-spacing: .06em;
}
.xr-slider.is-single .xr-slider-btn,
.xr-slider.is-single .xr-slider-count { display: none; }

/* Desktop: the 1:1 video square sets the card height, and the right column fills exactly that height —
   the photo slider stretches/shrinks so "Book now / See room details" end level with the bottom of the square. */
@media (min-width: 961px) {
	.xr-rcard { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
	.xr-rcard-video { align-self: start; }
	.xr-rcard-side { display: flex; flex-direction: column; min-height: 0; }
	.xr-rcard-side .xr-slider { flex: 1 0 0; min-height: 170px; display: flex; }
	.xr-rcard-side .xr-slider-track { flex: 1; aspect-ratio: auto; }
	.xr-rcard-body { padding-bottom: 0; }
	.xr-rcard-actions { margin-bottom: -1px; }
}
@media (min-width: 961px) and (max-width: 1199px) {
	.xr-rcard { gap: 28px; grid-template-columns: 1.32fr 1fr; }
	.xr-rcard-side .xr-slider { min-height: 130px; }
	.xr-rcard-body { padding-top: 18px; }
	.xr-room-features li { margin-bottom: 5px; }
	.xr-room-features { margin-bottom: 20px; }
}

/* Room info (same look as the Retreats 2026 room cards) */
.xr-rcard-body { padding: 22px 4px 0; }
.xr-room-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--xr-clay); margin-bottom: 8px; }
.xr-room-tier { margin-left: 4px; }
.xr-page .xr-rcard-title { font-family: var(--xr-prata); font-size: 24px; font-weight: 400; line-height: 1.3; color: #1a1a1a; margin-bottom: 10px; }
.xr-room-text { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 16px; }
.xr-room-features { list-style: none; margin-bottom: 24px; }
.xr-room-features li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #444; margin-bottom: 7px; }
.xr-room-features .xr-icon { flex-shrink: 0; color: #9c8a5e; }
.xr-rcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.xr-room-link {
	padding-bottom: 6px;
	border-bottom: 1px solid #d9a07a;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--xr-clay) !important;
	transition: color .2s, border-color .2s;
}
.xr-room-link:hover { color: var(--xr-forest) !important; border-color: var(--xr-forest); }

/* ---------- Reviews ---------- */
.xr-reviews { background: #fff; }
.xr-reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.xr-review {
	display: flex;
	flex-direction: column;
	background: #F7F2EC;
	border-radius: 28px;
	padding: 28px 26px;
}
.xr-review-name { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--xr-clay); margin-bottom: 4px; }
.xr-review-source { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #1a1a1a; margin-bottom: 12px; }
.xr-review-text { font-size: 14px; line-height: 1.55; color: #222; margin-bottom: 14px; flex: 1; }
.xr-review-stars { color: var(--xr-clay); font-size: 15px; letter-spacing: .15em; }
.xr-review-link {
	align-self: flex-start;
	margin-top: 12px;
	padding-bottom: 2px;
	border-bottom: 1px solid #d9a07a;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--xr-clay) !important;
}
.xr-review-link:hover { color: var(--xr-forest) !important; border-color: var(--xr-forest); }
.xr-reviews-all { margin-top: 32px; text-align: center; }
.xr-reviews-all a { padding-bottom: 4px; border-bottom: 1px solid var(--xr-clay); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--xr-clay) !important; }
.xr-reviews-all a:hover { color: var(--xr-forest) !important; border-color: var(--xr-forest); }

/* ---------- Getting here ---------- */
.xr-getting { background: #FAF6F0; position: relative; overflow: hidden; }
.xr-getting::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: clamp(140px, 14vw, 260px);
	aspect-ratio: 260 / 296;
	background: url('https://xinalaniretreat.com/wp-content/uploads/2026/09/xinalani-leaf-boat.png') right top / contain no-repeat;
	pointer-events: none;
	z-index: 0;
}
.xr-getting-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; min-height: 520px; }
.xr-getting-media { position: relative; min-height: 320px; }
.xr-getting-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.xr-getting-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 7vw, 96px) clamp(24px, 7vw, 120px);
	max-width: 860px;
}
.xr-getting-content .section-title { margin-bottom: 28px; }
.xr-getting-content p:not(.xr-eyebrow) { font-size: 16px; line-height: 1.65; color: #222; max-width: 600px; }
.xr-note { margin-top: 16px; font-size: 13px !important; font-style: italic; }

/* ---------- Plan your stay (seasons) ---------- */
.xr-season { background: #fff; }
.xr-season-grid { display: grid; grid-template-columns: 1.85fr 1fr; align-items: stretch; min-height: 520px; }
.xr-season-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 7vw, 96px) clamp(24px, 8vw, 140px);
}
.xr-season-text .section-title { margin-bottom: 28px; }
.xr-season-text p:not(.xr-eyebrow) { font-size: 16px; line-height: 1.65; color: #222; max-width: 560px; margin-bottom: 18px; }
.xr-season-media { position: relative; min-height: 360px; }
.xr-season-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 55%; }

/* ---------- Before you arrive (packing list) — NEW ---------- */
.xr-pack { background: var(--xr-sand-light); }
.xr-pack .xr-lead { max-width: 900px; }
.xr-pack-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 36px 12px;
	margin-top: 40px;
	padding: 0;
	background: transparent; /* 13 Oct: no white box — icons sit on the section's sand background (#FAF6F0) */
}
.xr-pack-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.xr-pack-icon { width: 46px; height: 46px; color: var(--xr-icon); flex-shrink: 0; }
.xr-pack-item span {
	font-size: 14px;
	letter-spacing: .02em;
	line-height: 1.3;
	color: var(--xr-text);
	max-width: 12ch;      /* long labels wrap to 2 lines instead of being cut */
}

/* ---------- FAQ ---------- */
.xr-faq { background: #fff; } /* white so it separates from the sand packing section above */
.xr-faq-head { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); }
.xr-faq-head .section-title { color: var(--xr-text); margin: 10px 0 18px; }
.xr-sep { width: 40px; height: 2px; background: #cd7c26; margin: 0 auto; }
.xr-faq-list { max-width: 700px; margin: 0 auto; }
.xr-faq-item { border-bottom: 1px solid var(--xr-sand); }
.xr-faq-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	font-family: var(--xr-prata);
	font-size: 1.12rem;
	line-height: 1.4;
	color: var(--xr-text);
	transition: color .2s;
}
.xr-faq-item summary::-webkit-details-marker { display: none; }
.xr-faq-item summary:hover,
.xr-faq-item[open] summary { color: var(--xr-forest); }
.xr-faq-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--xr-forest);
	color: var(--xr-forest);
	transition: all .3s ease;
}
.xr-faq-item[open] .xr-faq-icon { background: var(--xr-forest); color: #fff; transform: rotate(180deg); }
.xr-faq-answer { padding-bottom: 18px; }
.xr-faq-answer p { font-size: 16px; line-height: 1.72; color: var(--xr-text); }
.xr-faq-cta { display: flex; justify-content: center; margin-top: 64px; }

/* ---------- Scroll reveal ---------- */
.xr-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.xr-js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.xr-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.xr-rcard { grid-template-columns: 1fr 1fr; gap: 24px; }
	.xr-reviews-grid { grid-template-columns: 1fr 1fr; }
	.xr-season-grid,
	.xr-getting-grid { grid-template-columns: 1fr; }
	.xr-getting-media { min-height: 0; aspect-ratio: 4 / 3; }
	.xr-getting::after { width: 110px; }
	.xr-pack-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
	/* Room cards: one column, one gallery (video = slide 1), shorter bar */
	.xr-rooms2 { padding-bottom: 64px; }
	.xr-rooms2-list { gap: 80px; padding-top: 32px; }
	.xr-rcard + .xr-rcard::before,
	.xr-rcard + .xr-rcard::after { top: -40px; }
	.xr-rcard { grid-template-columns: 1fr; gap: 0; scroll-margin-top: calc(var(--xr-nav-h) + 56px); }
	.xr-rcard-video { display: none; }
	.xr-slide--video { display: block; }
	.xr-slider-track { aspect-ratio: 4 / 3; }
	.xr-slider-btn { width: 36px; height: 36px; }
	.xr-roombar-list { justify-content: space-between; gap: 0; padding: 0 8px; }
	.xr-roombar-link { padding: 13px 12px; font-size: 15px; }
	.xr-tab-full { display: none; }
	.xr-tab-short { display: inline; }
	.xr-rcard-actions .xr-btn { flex: 1 1 100%; }
	.xr-rcard-actions .xr-room-link { margin: 0 auto; }
	.xr-section { padding: 64px 0; }
	/* First screen on phones: hero + Stay text + BOTH buttons visible without scrolling */
	.xr-hero { height: auto; aspect-ratio: 16 / 10; }
	.xr-stay { padding: 28px 0 56px; }
	.xr-stay .xr-eyebrow { margin-bottom: 6px; }
	.xr-stay .section-title { margin-bottom: 14px; }
	.xr-stay-text { font-size: 15px; line-height: 1.6; }
	.xr-stay-actions { gap: 10px; margin-top: 22px; }
	.xr-stay-actions .xr-btn { width: 100%; min-width: 0; padding: 13px 20px; }

	.xr-reviews-grid { grid-template-columns: 1fr; }

	.xr-pack-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 8px; padding: 0; }
	.xr-pack-icon { width: 40px; height: 40px; }
	.xr-pack-item span { font-size: 13px; }
}

/* Short phones (small screens / big browser bars): shorter hero so both Stay buttons still fit */
@media (max-width: 700px) and (max-height: 640px) {
	.xr-hero { aspect-ratio: 2 / 1; }
}

/* ---------- Desktop text sizes (13 Oct 2026, director): ~10–12% larger on screens ≥ 961px.
   Tablets and phones keep the sizes above. Layout, spacing and alignment rules are not changed. ---------- */
@media (min-width: 961px) {
	.xr-eyebrow { font-size: .92rem; }
	.xr-page .section-title { font-size: clamp(1.8rem, 2.6vw, 2.35rem); }
	.xr-lead { font-size: 18px; }
	.xr-btn { font-size: .875rem; }

	.xr-stay-text { font-size: 18px; max-width: 940px; }

	.xr-roombar-link { font-size: 17px; }
	.xr-room-label { font-size: 14px; }
	.xr-page .xr-rcard-title { font-size: 27px; }
	.xr-room-text { font-size: 16.5px; }
	.xr-room-features li { font-size: 16px; }
	.xr-room-link { font-size: 14px; }
	.xr-slider-count { font-size: 13px; }

	.xr-review-name { font-size: 14px; }
	.xr-review-source { font-size: 12px; }
	.xr-review-text { font-size: 15.5px; }
	.xr-review-link { font-size: 13px; }
	.xr-reviews-all a { font-size: 15px; }

	.xr-getting-content p:not(.xr-eyebrow) { font-size: 18px; }
	.xr-season-text p:not(.xr-eyebrow) { font-size: 18px; }
	.xr-pack-item span { font-size: 15.5px; }

	.xr-faq-item summary { font-size: 1.25rem; }
	.xr-faq-answer p { font-size: 17.5px; }
}
@media (min-width: 1100px) {
	.xr-nav-links a { font-size: 15px; }
}

/* ---------- Day Pass footer: rules it normally gets from daypasses.css ---------- */
#dp-footer,
#dp-footer *,
#dp-footer *::before,
#dp-footer *::after { box-sizing: border-box; }
body #dp-footer,
body #dp-footer p,
body #dp-footer a,
body #dp-footer li,
body #dp-footer input,
body #dp-footer button,
body #dp-footer label {
	font-family: 'Karla', sans-serif;
}
body #dp-footer h1,
body #dp-footer h2,
body #dp-footer h3,
body #dp-footer h4,
body #dp-footer .section-title {
	font-family: 'Prata', serif !important;
	font-weight: 400;
	letter-spacing: 0;
}
#dp-footer input { max-width: 100%; }
#dp-footer a,
#dp-footer a:hover,
#dp-footer a:focus { text-decoration: none; }
#dp-footer ul.social li,
#dp-footer ul.social li a.icon { border: 0; border-bottom: 0; box-shadow: none; background-image: none; }

/* ---------- Site popup ---------- */
#popup-offer {
	--xr-pop-font: 'Open Sans', Arial, sans-serif;
	font-family: var(--xr-pop-font);
	font-size: 13px;
	line-height: 1.4;
	color: #000;
	box-sizing: border-box;
}
#popup-offer p {
	font-family: var(--xr-pop-font);
	font-size: 13px;
	line-height: 1.4;
	margin: 0 0 10px;
}
#popup-offer h3 {
	font-family: 'Prata', serif;
	letter-spacing: normal;
	text-transform: none;
}
#popup-offer #offer-button a {
	display: inline-block;
	font-family: var(--xr-pop-font);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}
#popup-offer #popup-tarifas-close a {
	display: block;
	line-height: 25px;
	text-decoration: none;
}

/* ---------- Getting here: iPhone/iPad video size fix (Safari only) ---------- */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 960px) {
		.xr-getting-media {
			width: 100%;
			justify-self: stretch;
			aspect-ratio: auto;
			height: 0;
			padding-top: 75%;
		}
	}
}

/* ---------- Desktop room cards (15 Oct 2026, director) ----------
   1) Each room fills the screen: card height = space under the room bar (min 560px), and the page
      gently settles on a card when you stop scrolling near it (scroll-snap "proximity", desktop only).
      Clicking a room in the bar lands with the card right under the bar; the divider stays hidden.
   2) Active room in the bar = the card that takes most of the screen (JS in page-rooms-2026.php).
   3) Less empty space on the sides: page width 1100 → 1280px (≥1360px screens) / 1400px (≥1680px),
      slightly bigger room texts on those screens. Tablets and phones unchanged.
   To turn off the "settle on a card" effect only: delete the line `html { scroll-snap-type: y proximity; }`. */
@media (min-width: 961px) {
	:root { --xr-roombar-h: 62px; --xr-room-gap: 20px; --xr-rvid-ratio: .555; } /* bar height is set exactly by JS */
	html { scroll-snap-type: y proximity; }
	.xr-rooms2-list {
		/* video square = the smaller of: width share of the page, or the screen height under the bar (min 560px) */
		--xr-rvid: min(
			calc((min(100vw - 17px, var(--xr-max)) - 48px - 40px) * var(--xr-rvid-ratio)),
			max(560px, calc(100vh - var(--xr-nav-h) - var(--xr-roombar-h) - 2 * var(--xr-room-gap)))
		);
		/* space between rooms: big enough that the next divider is below the screen when a card is shown */
		--xr-card-gap: clamp(128px, calc(2 * (100vh - var(--xr-nav-h) - var(--xr-roombar-h) - var(--xr-room-gap) - var(--xr-rvid)) + 40px), 320px);
		gap: var(--xr-card-gap);
	}
	.xr-rcard + .xr-rcard::before,
	.xr-rcard + .xr-rcard::after { top: calc(var(--xr-card-gap) / -2); }
	.xr-rcard {
		grid-template-columns: var(--xr-rvid) minmax(0, 1fr);
		gap: 40px;
		scroll-snap-align: start;
		scroll-margin-top: calc(var(--xr-nav-h) + var(--xr-roombar-h) + var(--xr-room-gap));
	}
	.admin-bar .xr-rcard { scroll-margin-top: calc(var(--xr-nav-h) + var(--xr-roombar-h) + var(--xr-room-gap) + 32px); }
}
@media (min-width: 961px) and (max-width: 1199px) {
	:root { --xr-rvid-ratio: .569; }
	.xr-rcard { gap: 28px; }
}
@media (min-width: 1360px) {
	:root { --xr-max: 1280px; }
	.xr-page .xr-rcard-title { font-size: 30px; }
	.xr-room-text { font-size: 17.5px; }
	.xr-room-features li { font-size: 17px; margin-bottom: 9px; }
}
@media (min-width: 1680px) {
	:root { --xr-max: 1400px; }
}




/* ---------- Room cards, 19 Oct 2026 (director's layout) ----------
   - One "Explore …" link per room instead of Book now + See room details. It keeps the class xr-room-link,
     so it gets the design-system link style from xinalani-ui.css (terracotta, underline, 44px tap area).
   - Right column: photo on top, then label | tier, title, text, features, link. The text sits directly on the
     section background, left edge = photo edge (xinalani-ui.css gives .xr-rcard-body a padded sand box;
     undone here). Tighter spacing so the photo gets more room and the link ends level with the big square.
   - Room bar: no underline under the active room (sand background only).
   - Desktop screens tall enough for a whole card (>= 740px): the card lands CENTERED under the menu + room
     bar — room bar clicks (JS in the template) and the "settle on a card" scroll. The space above the first
     card matches, so Beach Casita centers too. Shorter screens: card top under the bar, as before.
   Selectors start with "html body #xr-page" because the xinalani-ui.css rules use an id inside :is(). */
html body #xr-page .xr-roombar-link,
html body #xr-page .xr-roombar-link.is-active { border-bottom: 0; }

html body #xr-page .xr-rcard .xr-rcard-side .xr-rcard-body { padding: 20px 0 0; background: transparent; border-radius: 0; }
html body #xr-page .xr-rcard .xr-room-label { margin-bottom: 6px; }
html body #xr-page .xr-rcard .xr-rcard-title { margin-bottom: 8px; }
html body #xr-page .xr-rcard .xr-room-text { margin-bottom: 14px; }
html body #xr-page .xr-rcard .xr-room-features { margin-bottom: 4px; }
html body #xr-page .xr-rcard .xr-room-features li { margin-bottom: 4px; line-height: 1.4; }
html body #xr-page .xr-rcard .xr-rcard-actions { display: block; margin: 0; }

html body #xr-page .xr-rooms2 .xr-rooms2-list { max-width: var(--xr-max); padding-top: 48px; }

@media (min-width: 961px) {
	html body #xr-page .xr-rcard .xr-rcard-side .xr-slider { min-height: 220px; }
	html body #xr-page .xr-rcard .xr-rcard-actions { margin-bottom: -5px; } /* underline level with the bottom of the square */
	/* space above the first card = the centering space, so the first tab lands like the others */
	html body #xr-page .xr-rooms2 .xr-rooms2-list { padding-top: max(24px, calc((100vh - var(--xr-nav-h) - var(--xr-roombar-h) - var(--xr-rvid)) / 2)); }
}
@media (min-width: 961px) and (max-width: 1199px) {
	html body #xr-page .xr-rcard .xr-rcard-side .xr-slider { min-height: 180px; }
	html body #xr-page .xr-rcard .xr-rcard-side .xr-rcard-body { padding-top: 16px; }
	html body #xr-page .xr-rcard .xr-room-features li { margin-bottom: 3px; }
}
@media (min-width: 1360px) {
	html body #xr-page .xr-rcard .xr-room-features li { margin-bottom: 5px; }
}
@media (min-width: 961px) and (min-height: 740px) {
	html { scroll-padding-top: calc(var(--xr-nav-h) + var(--xr-roombar-h)); }
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--xr-nav-h) + var(--xr-roombar-h) + 32px); }
	.xr-page section[id] { scroll-margin-top: calc(12px - var(--xr-roombar-h)); } /* other sections: same landing spot as before */
	.xr-rcard,
	.admin-bar .xr-rcard { scroll-snap-align: center; scroll-margin-top: 0; }
}
@media (max-width: 700px) {
	html body #xr-page .xr-rooms2 .xr-rooms2-list { padding-top: 28px; }
	html body #xr-page .xr-rcard .xr-rcard-side .xr-rcard-body { padding: 18px 0 0; }
	html body #xr-page .xr-rcard .xr-rcard-actions { margin-top: 2px; }
}

/* ---------- Room cards on phones, 19 Oct 2026 (final review) ----------
   Each card (photo + text + "Explore" link) fits the screen under the menu + room bar; the photo takes the
   space the text leaves. Before: Casita, Eco Chic and Dorms ended 12–53px below a 375×667 screen.
   Tested 360×640, 375×667, 412×780 — all 4 cards fully visible, 12px above and below. */
@media (max-width: 700px) {
	html body #xr-page .xr-rcard .xr-rcard-side {
		display: flex;
		flex-direction: column;
		height: max(460px, calc(100svh - var(--xr-nav-h) - var(--xr-roombar-h) - 24px));
	}
	html body #xr-page .xr-rcard .xr-rcard-side .xr-slider { flex: 1 1 auto; min-height: 140px; display: flex; }
	html body #xr-page .xr-rcard .xr-rcard-side .xr-slider-track { flex: 1; aspect-ratio: auto; }
	html body #xr-page .xr-rcard .xr-rcard-side .xr-rcard-body { flex: none; }
}

/*  Why: on desktop screens taller than 740px an earlier rule centres each room card on the screen
   (scroll-snap-align: center). On tall monitors that leaves 100–160px of empty space under the room bar after
   clicking a room tab or "Explore accommodations". Laptops (shorter screens) were already fine (20px).
   Now the card always lands 20px under the room bar, on every desktop size.
   Tested on the live page (not saved): 1280×720, 1440×789, 1545×920, 1545×1100, 1920×961, 1920×1080 →
   20px gap for every room tab and for "Explore accommodations"; the right tab stays highlighted.
   Tablets and phones are not affected. */
@media (min-width: 961px) and (min-height: 740px) {
	html body .xr-rcard,
	html body.admin-bar .xr-rcard { scroll-snap-align: start; scroll-margin-top: var(--xr-room-gap); }
}

@media (min-width: 961px) {
	.xr-getting-grid,
	.xr-season-grid { max-width: 1440px; margin-inline: auto; min-height: clamp(460px, 36vw, 540px); }
	.xr-getting-grid { grid-template-columns: clamp(380px, 36%, 520px) minmax(0, 1fr); }
	.xr-season-grid  { grid-template-columns: minmax(0, 1fr) clamp(380px, 36%, 520px); }
	.xr-getting-media,
	.xr-season-media { min-height: 0; }
	.xr-getting-content { max-width: none; padding: clamp(40px, 5vw, 72px) clamp(32px, 6vw, 96px); }
	.xr-season-text { padding: clamp(40px, 5vw, 72px) clamp(32px, 6vw, 96px); }
	.xr-getting-media video { object-position: center 45%; }
}

@media (min-width: 961px) {
	html { scroll-snap-type: none; scroll-padding-top: calc(var(--xr-nav-h) + var(--xr-roombar-h)); }
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--xr-nav-h) + var(--xr-roombar-h) + 32px); }
	html body .xr-page section[id] { scroll-margin-top: calc(12px - var(--xr-roombar-h)); }
	html body #xr-page .xr-rooms2-list {
		--xr-rvid: clamp(480px, min(calc((min(100vw - 17px, var(--xr-max)) - 48px - 40px) * var(--xr-rvid-ratio)), calc(100vh - var(--xr-nav-h) - var(--xr-roombar-h) - 2 * var(--xr-room-gap))), 620px);
		--xr-card-gap: 112px;
		gap: 112px;
	}
	html body #xr-page .xr-rcard,
	html body.admin-bar #xr-page .xr-rcard { scroll-snap-align: none; scroll-margin-top: var(--xr-room-gap); }
	html body #xr-page .xr-rcard + .xr-rcard::before,
	html body #xr-page .xr-rcard + .xr-rcard::after { top: -56px; }
}
/* Short desktop screens (≤ 720px tall): smaller photo slider so the whole card fits under the bar */
@media (min-width: 961px) and (max-height: 720px) {
	html body #xr-page .xr-rcard .xr-rcard-side .xr-slider { min-height: 170px; }
}

@media (min-width: 961px) and (min-height: 900px) {
	html body #xr-page .xr-rooms2 .xr-rcard { transition: opacity .4s ease; }
	html:not(.xr-scrolling) body #xr-page .xr-rooms2 .xr-rcard:not(.is-current) { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
	html body #xr-page .xr-rooms2 .xr-rcard { transition: none; }
}