/* =====================================================================
   Home 2026
   Path in theme: /assets/css/home-2026.css
   Loaded only on page-home-2026.php, after rooms-2026.css (shared titles, buttons, reviews, closing photo).
   The <main> also has the class xr-page--rooms, so the director's Canva typography applies here too.
   Every rule starts with html body #xr-page.xr-page--home so it beats xinalani-ui.css.
   ===================================================================== */

/* ---------- Backgrounds and shared layout ---------- */
html body #xr-page.xr-page--home .xr-home-white { background: #fff; }
html body #xr-page.xr-page--home .xr-home-beige { background: #FAF6F0; }
html body #xr-page.xr-page--home .xr-home-center { text-align: center; }
html body #xr-page.xr-page--home .xr-home-center .xr-lead { margin-left: auto; margin-right: auto; }
/* rooms-2026.css leaves room for its sticky section menu; this page has none */
html:has(#xr-page.xr-page--home) { scroll-padding-top: 0; }
html body #xr-page.xr-page--home section[id] { scroll-margin-top: 80px; }
html body #xr-page.xr-page--home .xr-home-wide {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 70px);
}

/* ---------- Sticky section menu: replaces the global menu once the hero is scrolled past ---------- */
html.xr-secnav-on body #xh-header:not(.xh-mobile-open):not(:has(.xh-dropdown[open])) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s ease;
}
body #xh-header { transition: background-color 400ms ease, box-shadow 400ms ease, opacity .25s ease, visibility .25s ease; }
html body .xr-secnav.xr-secnav--home { top: 0; z-index: 1001; }
html body.admin-bar .xr-secnav.xr-secnav--home { top: 32px; }
html body .xr-secnav--home .xr-secnav-inner {
	justify-content: space-between;
	gap: 24px;
	max-width: 1400px;
	min-height: 72px;
	margin: 0 auto;
	padding: 0 clamp(20px, 3vw, 40px);
}
html body .xr-secnav--home .xr-secnav-links { flex: 1; min-width: 0; justify-content: center; gap: clamp(16px, 2.4vw, 36px); }
html body .xr-secnav--home .xr-secnav-cta { flex: none; padding: 13px 28px; white-space: nowrap; }
html body .xr-secnav--home .xr-secnav-cta:focus-visible { outline: 2px solid var(--xr-ink); outline-offset: 3px; }
@media (max-width: 1240px) {
	html body .xr-secnav--home .xr-secnav-link { font-size: 12.5px; letter-spacing: .04em; }
	html body .xr-secnav--home .xr-secnav-cta { padding: 12px 18px; font-size: 12.5px; }
}
/* Small laptops + tablets: short labels, so the links and the button always fit (Spanish labels are long) */
@media (max-width: 1100px) {
	html body .xr-secnav--home .xr-tab-full { display: none; }
	html body .xr-secnav--home .xr-tab-short { display: inline; }
}
/* Tablets + phones: the links scroll sideways, the button stays on the right */
@media (max-width: 960px) {
	html body .xr-secnav--home .xr-secnav-inner { min-height: 56px; gap: 10px; padding: 0 0 0 14px; }
	html body .xr-secnav--home .xr-secnav-links { width: auto; margin: 0; padding: 0 8px 0 0; justify-content: flex-start; gap: 18px; }
	html body .xr-secnav--home .xr-secnav-cta { align-self: stretch; padding: 6px 14px; border-radius: 0; font-size: 11.5px; line-height: 1.25; white-space: normal; width: 104px; text-align: center; }
}
@media (max-width: 782px) {
	html body.admin-bar .xr-secnav.xr-secnav--home { top: 46px; }
}
/* Phones: only the important links, all visible, no sideways scrolling */
@media (max-width: 640px) {
	html body .xr-secnav--home .xr-secnav-nophone { display: none; }
	html body .xr-secnav--home .xr-secnav-links { justify-content: space-between; gap: 10px; padding-right: 4px; overflow: visible; }
}
@media (max-width: 340px) {
	html body .xr-secnav--home .xr-secnav-inner { gap: 6px; padding-left: 10px; }
	html body .xr-secnav--home .xr-secnav-link { font-size: 11.5px; letter-spacing: .02em; }
	html body .xr-secnav--home .xr-secnav-cta { width: 92px; padding: 6px 8px; font-size: 10.5px; }
}

/* ---------- Hero: full screen video ---------- */
html body #xr-page.xr-page--home .xr-home-hero {
	/* The global header reserves space above the page (#xh-content: 72px up to 1100px wide, 60px above),
	   so the hero is that much shorter and ends exactly at the bottom of the screen. */
	height: calc(100vh - 72px);
	height: calc(100svh - 72px);
	min-height: 420px;
	aspect-ratio: auto;
	background: #1a1a1a;
}
@media (min-width: 1101px) {
	html body #xr-page.xr-page--home .xr-home-hero {
		height: calc(100vh - 60px);
		height: calc(100svh - 60px);
	}
}
html body #xr-page.xr-page--home .xr-home-hero::after {
	background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 25%, rgba(0,0,0,.2) 100%);
}
html body #xr-page.xr-page--home .xr-home-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
html body #xr-page.xr-page--home .xr-home-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100vw, 177.78vh);
	height: max(56.25vw, 100vh);
	border: 0;
	transform: translate(-50%, -50%);
}
html body #xr-page.xr-page--home .xr-home-hero-text {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50px 24px 70px;
	text-align: center;
	color: #fff;
}
html body #xr-page.xr-page--home .xr-home-hero-text .xr-eyebrow {
	color: #fff;
	font-size: clamp(12px, 1.25vw, 18px);
	margin-bottom: .8em;
	text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
html body #xr-page.xr-page--home .xr-home-hero-text h1 {
	font-family: var(--xr-prata);
	font-size: clamp(36px, 4.4vw, 60px);
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,.45);
}
/* Scroll arrow: same icon and bounce as the current home */
html body #xr-page.xr-page--home .xr-home-scroll {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(max(30px, 6%) + env(safe-area-inset-bottom, 0px)); /* iPhone: stays above the home bar */
	z-index: 3;
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	font-size: 30px;
	line-height: 44px;
	text-align: center;
	color: #fff;
	animation: xr-home-bounce 2s infinite;
}
@keyframes xr-home-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-14px); }
	60% { transform: translateY(-7px); }
}

/* ---------- Two buttons (section 1) ---------- */
html body #xr-page.xr-page--home .xr-home-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 28px;
	margin-top: clamp(28px, 3.5vw, 44px);
}
html body #xr-page.xr-page--home .xr-home-buttons .xr-btn { min-width: 224px; }

/* ---------- Photo cards (sections 2 and 6) ---------- */
html body #xr-page.xr-page--home .xr-home-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 3.6vw, 52px);
	align-items: center;
	margin-top: clamp(36px, 4.5vw, 64px);
}
html body #xr-page.xr-page--home .xr-home-card {
	position: relative;
	display: block;
	aspect-ratio: 389 / 500;
	overflow: hidden;
	background: #1a1a1a;
	transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease;
	will-change: transform;
}
html body #xr-page.xr-page--home .xr-home-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
html body #xr-page.xr-page--home .xr-home-card::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.88) 100%);
	pointer-events: none;
}
html body #xr-page.xr-page--home .xr-home-card-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 16px 16px;
	text-align: center;
	color: #fff;
}
html body #xr-page.xr-page--home .xr-home-card-title {
	font-family: var(--xr-prata);
	font-size: clamp(19px, 2.05vw, 28px);
	line-height: 1.22;
	margin-bottom: .25em;
}
html body #xr-page.xr-page--home .xr-home-card-text {
	font-size: clamp(14px, 1.2vw, 16.5px);
	line-height: 1.4;
	margin-bottom: .3em;
}
html body #xr-page.xr-page--home .xr-home-card .x-link {
	align-self: center;
	color: #fff !important;
}
html body #xr-page.xr-page--home .xr-home-card .x-link::before { background: rgba(255,255,255,.75); }
html body #xr-page.xr-page--home .xr-home-card .x-link::after { background: #fff; }
html body #xr-page.xr-page--home .xr-home-card:focus-visible { outline: 2px solid var(--xr-clay); outline-offset: 4px; }

/* Desktop: the middle card rests larger (design). The card under the mouse grows and the others shrink. */
@media (min-width: 961px) {
	html body #xr-page.xr-page--home .xr-home-card:nth-child(2) { transform: scale(1.145); z-index: 1; }
}
@media (min-width: 961px) and (hover: hover) {
	html body #xr-page.xr-page--home .xr-home-cards:has(.xr-home-card:hover) .xr-home-card,
	html body #xr-page.xr-page--home .xr-home-cards:has(.xr-home-card:focus-visible) .xr-home-card { transform: scale(.94); z-index: 0; }
	html body #xr-page.xr-page--home .xr-home-cards:has(.xr-home-card:hover) .xr-home-card:hover,
	html body #xr-page.xr-page--home .xr-home-cards:has(.xr-home-card:focus-visible) .xr-home-card:focus-visible {
		transform: scale(1.145);
		z-index: 2;
		box-shadow: 0 18px 40px rgba(0,0,0,.22);
	}
	html body #xr-page.xr-page--home .xr-home-card:hover img,
	html body #xr-page.xr-page--home .xr-home-card:focus-visible img { transform: scale(1.07); }
	html body #xr-page.xr-page--home .xr-home-card:hover .x-link::after { transform: scaleX(1); }
}

/* ---------- Photo/video + text rows (sections 3, 4 and 8) ---------- */
html body #xr-page.xr-page--home .xr-home-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5.5vw, 76px);
	align-items: center;
}
html body #xr-page.xr-page--home .xr-home-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e9e1d4;
}
html body #xr-page.xr-page--home .xr-home-media--square { aspect-ratio: 1 / 1; }
html body #xr-page.xr-page--home .xr-home-media img,
html body #xr-page.xr-page--home .xr-home-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
html body #xr-page.xr-page--home .xr-home-text .section-title { margin-bottom: .55em; }
html body #xr-page.xr-page--home .xr-home-text .xr-lead { max-width: 33em; }
html body #xr-page.xr-page--home .xr-home-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin-top: 1.1em;
}
/* Text on the left of the photo: aligned right, against the photo (design) */
html body #xr-page.xr-page--home .xr-home-row--text-first .xr-home-text { order: -1; text-align: right; }
html body #xr-page.xr-page--home .xr-home-row--text-first .xr-home-text .xr-lead { margin-left: auto; }
html body #xr-page.xr-page--home .xr-home-row--text-first .xr-home-links { justify-content: flex-end; }

/* Section 4: space between the title and the rows */
html body #xr-page.xr-page--home .xr-home-barefoot .xr-home-row { margin-top: clamp(40px, 5.5vw, 76px); }

/* Play button of the room video (phones with autoplay blocked) */
html body #xr-page.xr-page--home .xr-gvideo-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	color: #fff;
	cursor: pointer;
	transform: translate(-50%, -50%);
}
html body #xr-page.xr-page--home .xr-gvideo-play[hidden] { display: none; }

/* ---------- Quote + leaves (section 5) ---------- */
html body #xr-page.xr-page--home .xr-home-quote {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: clamp(72px, 9vw, 120px) 24px;
	text-align: center;
}
html body #xr-page.xr-page--home .xr-home-quote::before,
html body #xr-page.xr-page--home .xr-home-quote::after {
	content: "";
	position: absolute;
	pointer-events: none;
	filter: brightness(.82) sepia(.4); /* the leaf files are pale (made for the beige newsletter): this tints them sand on white */
}
html body #xr-page.xr-page--home .xr-home-quote::before {
	left: 0;
	bottom: 0;
	width: clamp(84px, 10vw, 170px);
	aspect-ratio: 282 / 435;
	background: url('https://xinalaniretreat.com/wp-content/uploads/2026/09/xinalani-leaf-news-left.png') left bottom / contain no-repeat;
}
html body #xr-page.xr-page--home .xr-home-quote::after {
	right: 0;
	top: 0;
	width: clamp(84px, 10vw, 170px);
	aspect-ratio: 260 / 296;
	background: url('https://xinalaniretreat.com/wp-content/uploads/2026/09/xinalani-leaf-boat.png') right top / contain no-repeat;
}
html body #xr-page.xr-page--home .xr-home-quote p {
	position: relative;
	z-index: 1;
	font-family: var(--xr-prata);
	font-size: clamp(20px, 2.1vw, 29px);
	line-height: 1.4;
	color: #1a1a1a;
}

/* ---------- Reviews: same text sizes as the room cards on the Rooms page (values at full card size) ---------- */
html body #xr-page.xr-page--home .xr-review .xr-review-name { font-size: 13.3px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; margin-bottom: .45em; }
html body #xr-page.xr-page--home .xr-review .xr-review-text { font-size: 15.5px; line-height: 1.4; }
html body #xr-page.xr-page--home .xr-review .xr-review-link { font-size: 13.9px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; }
/* Small laptops: narrow cards, keep the link on one line */
@media (min-width: 961px) and (max-width: 1199px) {
	html body #xr-page.xr-page--home .xr-review .xr-review-link { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
}
@media (max-width: 700px) {
	html body #xr-page.xr-page--home .xr-review .xr-review-name { font-size: 12px; letter-spacing: .14em; line-height: 1.2; }
	html body #xr-page.xr-page--home .xr-review .xr-review-text { font-size: 16px; line-height: 1.6; }
	html body #xr-page.xr-page--home .xr-review .xr-review-link { font-size: 13.6px; letter-spacing: .1em; }
}

/* ---------- Upcoming Retreats: leaves + the 3 cards from retreat-finder.css ---------- */
html body #xr-page.xr-page--home .xr-home-upcoming { position: relative; overflow: hidden; }
html body #xr-page.xr-page--home .xr-home-upcoming > .xr-container { position: relative; z-index: 1; }
html body #xr-page.xr-page--home .xr-home-upcoming::before,
html body #xr-page.xr-page--home .xr-home-upcoming::after {
	content: "";
	position: absolute;
	pointer-events: none;
	filter: brightness(.82) sepia(.4); /* same sand tint as the quote section */
}
html body #xr-page.xr-page--home .xr-home-upcoming::before {
	left: 0;
	top: 50px;
	width: clamp(64px, 11.5vw, 170px);
	aspect-ratio: 282 / 435;
	background: url('https://xinalaniretreat.com/wp-content/uploads/2026/09/xinalani-leaf-news-left.png') left top / contain no-repeat;
}
html body #xr-page.xr-page--home .xr-home-upcoming::after {
	right: 0;
	bottom: 40px;
	width: clamp(64px, 11.5vw, 170px);
	aspect-ratio: 260 / 296;
	background: url('https://xinalaniretreat.com/wp-content/uploads/2026/09/xinalani-leaf-boat.png') right top / contain no-repeat;
	transform: scaleY(-1);
}
html body #xr-page.xr-page--home .xr-home-upcoming .xr-lead { max-width: none; }
@media (min-width: 961px) {
	html body #xr-page.xr-page--home .xr-home-upcoming .xrf-cards--compact { max-width: 1180px; }
}
html body #xr-page.xr-page--home .xrf-results--cards-only { padding: 0; background: transparent; text-align: left; }
html body #xr-page.xr-page--home .xrf-card-title,
html body #xr-page.xr-page--home .xrf-card-title a { color: #2b2622; } /* same as the Retreats page */
html body #xr-page.xr-page--home .xr-home-calendar { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }

/* ---------- Tablets ---------- */
@media (max-width: 960px) {
	html body #xr-page.xr-page--home .xr-home-card-body { padding: 0 10px 10px; }
	html body #xr-page.xr-page--home .xr-home-card .x-link { font-size: 11.5px; letter-spacing: .08em; }
}

/* ---------- Your Journey: list on phones (< 768 px) instead of the cards. Figma: B+ stacked list. ---------- */
html body #xr-page.xr-page--home .xr-home-lead-short,
html body #xr-page.xr-page--home .xr-home-mlist { display: none; }
@media (max-width: 767px) {
	html body #xr-page.xr-page--home #your-journey .xr-home-lead-full,
	html body #xr-page.xr-page--home #your-journey .xr-home-cards { display: none; }
	html body #xr-page.xr-page--home #your-journey .xr-home-lead-short { display: block; }
	html body #xr-page.xr-page--home .xr-home-mlist { display: block; margin-top: 36px; }
	html body #xr-page.xr-page--home .xr-home-mrow {
		display: flex;
		align-items: center;
		gap: 16px;
		min-height: 72px;
		padding: 12px 0;
		border-bottom: 1px solid var(--xr-line);
		text-align: left;
		color: #1a1a1a;
	}
	html body #xr-page.xr-page--home .xr-home-mrow:last-child { border-bottom: 0; }
	html body #xr-page.xr-page--home .xr-home-mrow:focus-visible { outline: 2px solid var(--xr-clay); outline-offset: 2px; }
	html body #xr-page.xr-page--home .xr-home-mrow img {
		flex: none;
		display: block;
		width: 88px;
		height: 88px;
		max-width: none;
		border-radius: 4px;
		object-fit: cover;
		object-position: center;
	}
	/* Focal points: hands and sun (Join a Retreat), heads (Host Your Retreat) */
	html body #xr-page.xr-page--home .xr-home-mrow:nth-child(1) img { object-position: center 20%; }
	html body #xr-page.xr-page--home .xr-home-mrow:nth-child(3) img { object-position: center top; }
	html body #xr-page.xr-page--home .xr-home-mrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
	html body #xr-page.xr-page--home .xr-home-mrow-title { font-family: var(--xr-prata); font-size: 20px; line-height: 24.4px; color: #1a1a1a; }
	html body #xr-page.xr-page--home .xr-home-mrow-text { font-family: var(--xr-body); font-size: 14px; line-height: 19.6px; color: #222; }
	html body #xr-page.xr-page--home .xr-home-mrow-arrow { flex: none; color: var(--xr-clay); }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
	html body #xr-page.xr-page--home section[id] { scroll-margin-top: 64px; }

	/* Cards: swipe sideways, the next card peeks in */
	html body #xr-page.xr-page--home .xr-home-cards {
		display: flex;
		gap: 14px;
		margin-left: -24px;
		margin-right: -24px;
		padding: 0 24px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 24px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	html body #xr-page.xr-page--home .xr-home-cards::-webkit-scrollbar { display: none; }
	html body #xr-page.xr-page--home .xr-home-card { flex: 0 0 80%; scroll-snap-align: start; }
	html body #xr-page.xr-page--home .xr-home-card-body { padding: 0 14px 14px; }
	html body #xr-page.xr-page--home .xr-home-card-title { font-size: 24px; }
	html body #xr-page.xr-page--home .xr-home-card-text { font-size: 15px; }
	html body #xr-page.xr-page--home .xr-home-card .x-link { font-size: 13px; letter-spacing: .1em; }

	/* Rows: photo on top, text below, left-aligned */
	html body #xr-page.xr-page--home .xr-home-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	html body #xr-page.xr-page--home .xr-home-row--text-first .xr-home-text { order: 0; text-align: left; }
	html body #xr-page.xr-page--home .xr-home-row--text-first .xr-home-text .xr-lead { margin-left: 0; }
	html body #xr-page.xr-page--home .xr-home-row--text-first .xr-home-links { justify-content: flex-start; }
	html body #xr-page.xr-page--home .xr-home-barefoot .xr-home-row { margin-top: 44px; }
	html body #xr-page.xr-page--home .xr-home-links .x-link { align-self: auto; width: auto; min-width: 0; white-space: normal; text-align: left; }

	html body #xr-page.xr-page--home .xr-home-buttons { flex-direction: column; align-items: center; }
	html body #xr-page.xr-page--home .xr-home-buttons .xr-btn { width: 100%; max-width: 340px; min-width: 0; }
	/* The fixed line breaks would wrap badly on narrow screens */
	html body #xr-page.xr-page--home .xr-home-quote br,
	html body #xr-page.xr-page--home .xr-home-text .section-title br { display: none; }
	html body #xr-page.xr-page--home .xr-home-quote { padding-left: 44px; padding-right: 44px; }
}

/* ---------- People who ask for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html body #xr-page.xr-page--home .xr-home-video { display: none; }
	html body #xr-page.xr-page--home .xr-home-scroll { animation: none; }
	html body #xr-page.xr-page--home .xr-home-card,
	html body #xr-page.xr-page--home .xr-home-card img { transition: none; }
}