/**
 * Hero — Luxe presentation.
 *
 * Referenced against joycerey.com: a capped-height (not full 100vh)
 * background video with a rounded bottom-left corner, a small eyebrow
 * line, a two-row staggered ("zigzag") serif heading, a subtitle, and a
 * button — site navigation stays exactly where the theme already puts
 * it, not duplicated into this section.
 */

.mainsail-hero--luxe {
	position: relative;
	/* Full viewport height (svh keeps it exact under mobile browser toolbars). */
	height: 100vh;
	height: 100svh;
	min-height: 480px;
	/* Keeps the accent line's mobile bottom:-7% (see .mainsail-hero__
	   accent-line) contained within this section instead of bleeding
	   into whatever section comes after it on the page — the corner
	   cutout below doesn't need overflow:visible for its own reveal
	   (that's entirely self-contained between .mainsail-hero__frame's
	   own border-radius and this element's background, both the same
	   box), so hiding overflow here has no other effect. */
	overflow: hidden;
}

/* .mainsail-hero__frame's rounded bottom-left corner cuts a piece out
   of the video box, revealing THIS element's own background behind it -
   explicit white so that cutout reads as white, not whatever dark color
   happens to sit behind the section otherwise.
   Named bug: the theme's OWN older mainsail-visual-skin.css still has a
   bare `.mainsail-hero{background-color:var(--mainsail-color-dark-
   surface)}` rule left from the previous image-slider hero, which this
   component's section also carries as a base class alongside `--luxe`.
   Both selectors were single-class (equal specificity), so whichever
   stylesheet happened to enqueue last silently won. Kept as its OWN
   compound rule (not merged into the base `.mainsail-hero--luxe` rule
   above) on purpose: an earlier version merged it in, which also raised
   the specificity of that rule's `height`/`min-height`, so it started
   beating the <=782px media query's own single-class height override -
   this way only background-color gets the specificity bump. */
.mainsail-hero.mainsail-hero--luxe {
	background-color: #ffffff;
}

.mainsail-hero--luxe .mainsail-hero__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 0 0 0 64px;
	/* Named bug: this was #111111 (dark), meant only as a video-loading
	   fallback color before the poster/video paints. A border-radius
	   clip anti-aliases against the element's OWN background before
	   compositing over whatever is behind it - so a thin dark fringe
	   bled along the curved edge itself even in spots where a direct
	   pixel-sample test (elementsFromPoint) correctly found white
	   further into the corner. White eliminates the fringe by removing
	   the dark color from the equation entirely, regardless of which
	   engine's clip/compositing quirk was actually behind it. */
	background-color: #ffffff;
}

.mainsail-hero--luxe .mainsail-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Named bug: the corner still painted dark even though a JS
	   diagnostic (elementsFromPoint at the exact corner pixel) proved
	   the DOM/hit-test order was already correct - the white SECTION was
	   genuinely "underneath." That mismatch (correct layout, wrong
	   paint) is the signature of a <video> element's hardware decode
	   surface bypassing an ANCESTOR's border-radius+overflow:hidden clip
	   (.mainsail-hero__frame, two rules up) - a real, separate
	   compositing quirk, not another cascade/specificity bug. A
	   border-radius clips an element's OWN replaced content (video/img)
	   far more reliably than an ancestor's clip does, so it's set here
	   directly on the video itself too, not just relied on from the
	   frame around it. */
	border-radius: 0 0 0 64px;
}

/* Matched against the reference's own computed CSS (div.slideshow-
   ascent_line), not a guess: a tall, very faint (25% opacity) 1px guide
   line, with a short SOLID white 3px tick sitting at its bottom end via
   ::before — the solid tick is what actually reads as "the line", the
   faint 1px line above it is a quiet vertical guide the tick anchors
   to, not a divider in its own right. */
.mainsail-hero--luxe .mainsail-hero__accent-line {
	position: absolute;
	left: 63px;
	top: 0;
	width: 1px;
	height: 62%;
	background: rgba(255, 255, 255, 0.25);
	pointer-events: none;
}

.mainsail-hero--luxe .mainsail-hero__accent-line::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3px;
	height: 28px;
	background: #ffffff;
}

.mainsail-hero--luxe .mainsail-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	pointer-events: none;
	overflow: hidden;
	border-radius: 0 0 0 64px;
	/* Named bug: mainsail-visual-skin.css (the THEME's own stylesheet,
	   for the OLDER image-slider hero this component replaced) has a
	   bare `.mainsail-hero__overlay{background:linear-gradient(rgba(0,
	   0,0,.25),rgba(0,0,0,.35))}` rule. This overlay reuses that same
	   class name and never set its own `background`, so it inherited
	   that leftover dark scrim - and because the overlay is a plain
	   rectangle (inset:0, no radius) while .mainsail-hero__frame below
	   it IS rounded, the scrim visibly squared off past the video's own
	   rounded corner, plus read flatly gray over the frame's white in a
	   first attempt at removing it outright (which then hurt text
	   legibility - this scrim IS the component's real legibility
	   treatment, kept deliberately here, not a leftover to strip).
	   Explicitly re-declaring the same gradient here (not just relying
	   on inheritance) so it's this component's own intentional value,
	   documented, and clipped to match the frame's own corner exactly. */
	background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35));
}

.mainsail-hero--luxe .mainsail-hero__overlay a {
	pointer-events: auto;
}

.mainsail-hero--luxe .mainsail-hero__eyebrow {
	display: block;
	margin-bottom: 1.25rem;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Two-row "zigzag" heading — top row right-aligned, bottom row
   left-aligned and larger, slightly overlapping. Legibility comes from a
   solid highlight band tight behind each line (box-decoration-break so
   it wraps correctly if the text ever wraps), NOT a dark scrim across
   the whole video — the video needs to stay watchable behind the text,
   same reasoning Vivid already applied to the image-slider skins. */
.mainsail-hero--luxe .mainsail-hero__zigzag {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
}

.mainsail-hero--luxe .mainsail-hero__zigzag-top,
.mainsail-hero--luxe .mainsail-hero__zigzag-bottom {
	display: flex;
}

/* Centered rather than the earlier left/right staggered offset — with
   the two lines rarely matching character-count 1:1 (shortcode-driven
   text), a right/left stagger reads unbalanced; centering keeps it
   looking intentional regardless of how long each line is. */
.mainsail-hero--luxe .mainsail-hero__zigzag-top {
	justify-content: center;
}

.mainsail-hero--luxe .mainsail-hero__zigzag-bottom {
	justify-content: center;
	margin-top: -0.08em;
}

.mainsail-hero--luxe .mainsail-hero__zigzag-top span,
.mainsail-hero--luxe .mainsail-hero__zigzag-bottom span {
	display: inline-block;
	color: #ffffff;
	padding: 0.05em 0.35em;
	white-space: nowrap;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mainsail-hero--luxe .mainsail-hero__zigzag-top span {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
}

.mainsail-hero--luxe .mainsail-hero__zigzag-bottom span {
	font-size: clamp(2.75rem, 7vw, 5rem);
}

.mainsail-hero--luxe .mainsail-hero__subtitle {
	display: block;
	margin-top: 1.5rem;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.mainsail-hero--luxe .mainsail-hero__button {
	display: inline-block;
	margin-top: 2.5rem;
	padding: 16px 32px;
	border: 1px solid #ffffff;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 14px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transition: background-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.mainsail-hero--luxe .mainsail-hero__button:hover,
.mainsail-hero--luxe .mainsail-hero__button:focus {
	background-color: #ffffff;
	color: #000000;
	text-shadow: none;
}

@media (max-width: 782px) {
	.mainsail-hero--luxe {
		/* Verified against the reference site directly on mobile: its hero
		   panel ends around 55-58% of the viewport height there too, not
		   the ~78% this used before — a deliberately shorter panel on
		   mobile, not a bug. */
		height: min(58vh, 520px);
		min-height: 380px;
	}

	.mainsail-hero--luxe .mainsail-hero__frame {
		border-radius: 0 0 0 32px;
	}

	.mainsail-hero--luxe .mainsail-hero__video {
		border-radius: 0 0 0 32px;
	}

	.mainsail-hero--luxe .mainsail-hero__overlay {
		border-radius: 0 0 0 32px;
	}

	.mainsail-hero--luxe .mainsail-hero__zigzag-top {
		margin-right: 0;
		justify-content: center;
	}

	.mainsail-hero--luxe .mainsail-hero__zigzag-bottom {
		margin-left: 0;
		justify-content: center;
	}

	/* The reference's own mobile position used bottom:-7% — but the solid
	   tick is anchored to THIS element's own bottom edge (::before,
	   bottom:0), so a negative bottom here always starts the tick past
	   the hero's own boundary, regardless of how tall/short the line
	   above it is — overflow:hidden on the section (above) clips the
	   pixels, but confirmed still visible on a real device, not just this
	   local check. Simplest fix: don't position any part of it past the
	   boundary in the first place. Shortened + kept fully inside instead
	   of relying on a negative offset + clipping. */
	.mainsail-hero--luxe .mainsail-hero__accent-line {
		left: 3%;
		top: auto;
		bottom: 20px;
		height: 70px;
	}

	/* The transparent header floats on top of this section (not inside
	   it) — with the panel this much shorter, centered content collided
	   with the header/logo without this. Pushes content down to clear it
	   instead, and tightens the gaps between eyebrow/heading/subtitle/
	   button so everything still fits inside the shorter panel. */
	.mainsail-hero--luxe .mainsail-hero__overlay {
		justify-content: flex-start;
		padding-top: 150px;
	}

	.mainsail-hero--luxe .mainsail-hero__eyebrow {
		margin-bottom: 0.75rem;
		font-size: 11px;
	}

	/* Smaller vw multiplier than the earlier version — nowrap now means a
	   two-word phrase like "Others Vacation" needs to actually fit the
	   viewport width at this font-size, not just look proportionally
	   right in isolation. */
	.mainsail-hero--luxe .mainsail-hero__zigzag-top span {
		font-size: clamp(1.375rem, 6.5vw, 2.25rem);
	}

	.mainsail-hero--luxe .mainsail-hero__zigzag-bottom span {
		font-size: clamp(1.5rem, 7.5vw, 2.75rem);
	}

	.mainsail-hero--luxe .mainsail-hero__subtitle {
		margin-top: 0.75rem;
	}

	.mainsail-hero--luxe .mainsail-hero__button {
		margin-top: 1.5rem;
	}
}

/* ----------------------------------------------------------------------
   Three-part heading (heading_middle="..."): a big top word in Poiret One,
   a small Montserrat phrase beside it, and a big bottom word in Poiret One,
   left-aligned as one block (LIVE [where others] / VACATION). Both big words
   share one size, so the bottom word sets the block's width. Fonts are the
   same self-hosted files the page banners use.
   ---------------------------------------------------------------------- */
@font-face {
	font-family: "Poiret One";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../PageBanner/fonts/poiret-one-400.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../PageBanner/fonts/montserrat-700.woff2") format("woff2");
}

.mainsail-hero--luxe .mainsail-hero__zigzag--trio {
	/* 40% smaller than the first pass (16.5vw -> 9.9vw). */
	--mainsail-hero-big: clamp(1.8rem, 9.9vw, 10.2rem);
	align-items: flex-start;
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-weight: 400;
	line-height: 1;
}

.mainsail-hero--luxe .mainsail-hero__zigzag--trio .mainsail-hero__zigzag-top,
.mainsail-hero--luxe .mainsail-hero__zigzag--trio .mainsail-hero__zigzag-bottom {
	justify-content: flex-start;
	align-items: center;
	margin-top: 0;
}

/* The small phrase shares the top word's baseline (= the bottom bar of the
   "E"), so it sits in the lower gap of that letter, between its middle and
   bottom bars, rather than centred beside it. */
.mainsail-hero--luxe .mainsail-hero__zigzag--trio .mainsail-hero__zigzag-top {
	align-items: baseline;
}

.mainsail-hero--luxe .mainsail-hero__zigzag--trio .mainsail-hero__zigzag-top > span:first-child,
.mainsail-hero--luxe .mainsail-hero__zigzag--trio .mainsail-hero__zigzag-bottom > span {
	padding: 0;
	font-size: var(--mainsail-hero-big);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* The small phrase: Montserrat Bold (same as the banners), ~1/6 of the big
   words' size, vertically centred beside the top word. */
.mainsail-hero--luxe .mainsail-hero__zigzag--trio .mainsail-hero__zigzag-mid {
	margin-left: 0.4em;
	padding: 0;
	/* Lift off the bottom bar slightly so the text isn't touching it. */
	transform: translateY(calc(var(--mainsail-hero-big) * -0.05));
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: max(calc(var(--mainsail-hero-big) * 0.17), 11px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-hero--luxe .mainsail-hero__button {
		transition: none;
	}
}

/* ----------------------------------------------------------------------
   Hero text size and position (named request).
   Phones: the heading is ~2x larger (the largest size at which "VACATION"
   still fits with a small side margin: ~18.6vw, about 1.9x the old 9.9vw),
   and the block is centred vertically in the space BELOW the transparent
   header (the header floats over the hero, so its height is added as top
   padding and the rest is centred).
   Desktop: the same rule, so the text is centred vertically in the space below
   the transparent header (also 91px tall there), not in the whole 100vh hero.
   Placed last so these win over the earlier equal-specificity rules.
   ---------------------------------------------------------------------- */
@media (max-width: 782px) {
	.mainsail-hero--luxe .mainsail-hero__zigzag--trio {
		--mainsail-hero-big: clamp(3.4rem, 18.6vw, 5.5rem);
	}

	.mainsail-hero--luxe .mainsail-hero__overlay {
		justify-content: center;
		/* 91px = height of the transparent header on phones. */
		padding: 91px 12px 0;
	}
}

@media (min-width: 783px) {
	.mainsail-hero--luxe .mainsail-hero__overlay {
		/* 91px = height of the transparent header on desktop; no bottom padding,
		   so the block sits exactly midway between the header and the hero's bottom edge. */
		padding: 91px 1.5rem 0;
	}
}

/* Logged-in editors: the WordPress admin bar (32px) pushes the hero down, so a 100vh hero ran 32px
   below the fold and its text looked low (219px above vs 183px below on a 14" screen). Subtract the
   bar so the hero fills exactly the visible window and the centred text is centred on screen.
   Visitors have no admin bar, so nothing changes for them. Phones use their own shorter hero. */
@media (min-width: 783px) {
	body.admin-bar .mainsail-hero--luxe {
		height: calc(100vh - 32px);
		height: calc(100svh - 32px);
	}
}