/**
 * Featured Properties — Luxe presentation.
 *
 * Named-request reset: only the eyebrow element (text + its horizontal
 * underline/tick) is copied from Components/Archive/Luxe/heading.php's own
 * treatment — no tinted background, no watermark, no vertical rule. Those
 * were an earlier round's over-copy of the archive heading's full visual
 * language and were explicitly asked to be removed. Cards are the real
 * archive Luxe card (Components/Archive/Luxe/style.css, enqueued alongside
 * this file) in a 5-card bento grid, not the column-count masonry an
 * earlier version used.
 */

/* Named bug: matching Welcome's own real structure exactly — that section
   applies its side padding on the OUTER section, with max-width:1320px on
   a separate INNER container (.mainsail-welcome__container). Putting both
   the padding AND the max-width on the same single element (an earlier
   attempt at this fix) computes a different, wider effective width at
   this viewport (1320px cap hit directly) than Welcome's own two-level
   nesting produces (1207.5px, padding-constrained, cap not yet reached) —
   confirmed by measuring both live. */
.mainsail-fp--luxe {
	position: relative;
	padding: 50px max(6.875vw, 24px) 60px;
	overflow: hidden;
}

.mainsail-fp--luxe,
.mainsail-fp-luxe__heading {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------- Parallax intro ---------- */

/* Named bug: a full 100vh (480-760px) box, vertically centering a much
   shorter heading, left roughly 300px of dead empty space above AND below
   it (between the search bar and this section, and between this section
   and the cards) — still tall enough to give the parallax scroll a real
   distance to animate over, just nowhere near a full viewport height. */
.mainsail-fp-luxe__intro {
	position: relative;
	/* Named request: half the previous 38vh/260-360px. */
	height: 19vh;
	min-height: 130px;
	max-height: 180px;
	display: flex;
	align-items: center;
}

/* Named bug: this section's own width (min(1400px, 100vw-64px)) read as
   noticeably wider/closer to the viewport edge than the Welcome section
   right above it — matches that section's own real container exactly now
   (.mainsail-welcome__container: max-width 1320px, same
   max(6.875vw,24px) side padding), instead of a separate ad hoc formula.
   Also now the row for BOTH the heading (left, still parallax-animated)
   and the View All button (right, static — named request: "parallel to
   featured listing text at other end") — the heading's own left:0 resting
   position still lines up with the grid's left edge below, since both
   share this exact same width/padding. */
.mainsail-fp-luxe__heading-wrap {
	position: relative;
	/* Named bug: as a flex item of .mainsail-fp-luxe__intro (display:flex),
	   this shrank to fit its own content (heading + button, ~1078px)
	   instead of filling the row, then its own margin:auto centered THAT
	   narrower box — pushing the heading ~65px right of the grid's left
	   edge and the button the same ~65px short of the grid's right edge
	   instead of lining up with either. width:100% makes it fill the row
	   first, so max-width/margin:auto only ever kick in on viewports wide
	   enough to exceed 1320px. */
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.mainsail-fp-luxe__heading {
	position: relative;
	z-index: 1;
	/* Named bug: a fixed 900px box claimed far more width than the title
	   text actually needs at most viewports (e.g. ~980px "desktop site on
	   mobile") — more than the whole row had room for once the button and
	   its gap were added, forcing an unwanted wrap onto its own line with
	   a large empty gap above it. Shrink-to-fit the text itself instead,
	   only capped to avoid overflow at truly narrow widths (the carousel
	   breakpoint below 601px takes over before this would ever bind). */
	width: max-content;
	max-width: calc(100vw - 64px);
	/* JS drives this every scroll frame: a real CSS length going from
	   ~58vw (named request: "almost 55-60% of the view width" when the
	   section first appears) down to 0 (flush with the heading-wrap's own
	   left edge, i.e. in line with the grid) as the intro scrolls by. */
	/* Parallax removed (named request): the heading sits still, flush with the grid. */
	--mshm-fp-x: 0;
}

/* Eyebrow: text + underline/tick copied from Components/Archive/Luxe/
   search.css's own .mshm-luxe-heading__eyebrow rules (kept in sync by
   using the literal same values, not a shared class, since this section
   has no other archive-heading markup around it to anchor a shared
   selector to). */
.mainsail-fp-luxe__eyebrow {
	position: relative;
	display: inline-block;
	margin-bottom: 18px;
	font: 500 13.5px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #171717;
}

.mainsail-fp-luxe__eyebrow::after {
	content: "";
	position: absolute;
	bottom: -11px;
	right: 0;
	width: 100vw;
	height: 1px;
	background: var(--mainsail-color-accent, #24bef5);
	opacity: 0.45;
}

.mainsail-fp-luxe__eyebrow::before {
	content: "";
	position: absolute;
	bottom: -12px;
	right: 0;
	width: 52px;
	height: 3px;
	background: var(--mainsail-color-accent, #24bef5);
	z-index: 1;
}

.mainsail-fp-luxe__title {
	margin: 0 0 30px;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: 0;
	color: #171717;
	text-transform: uppercase;
	/* Named request: single line, never wrap. */
	white-space: nowrap;
}

.mainsail-fp-luxe__title > span {
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-weight: 400;
}

.mainsail-fp-luxe__title strong {
	font-weight: 700;
}

/* Named request: match the homepage's own button pattern (same as
   Featured Properties' own Panorama skin ".mainsail-fp__cta" — bordered
   rectangle, ink color, fills solid ink on hover) instead of the earlier
   underlined-text-with-arrow style. */
.mainsail-fp-luxe__view-all {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 40px;
	border: 1px solid #171717;
	color: #171717;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.mainsail-fp-luxe__view-all:hover,
.mainsail-fp-luxe__view-all:focus-visible {
	background-color: #171717;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-fp-luxe__heading {
		--mshm-fp-x: 0 !important;
		transition: none !important;
	}
}

/* ---------- 5-card bento grid ---------- */

/* Named layout: row 1 = one regular card + one double-width card, row 2 =
   three regular cards. Explicit placement (not auto-flow) since it only
   makes sense for exactly 5 cards — see template.php's fixed query
   limit of 5. */
.mainsail-fp-luxe__grid {
	/* Same container formula as .mainsail-fp-luxe__heading-wrap above,
	   matching the Welcome section's own width — side padding lives on
	   the outer .mainsail-fp--luxe section, not here. */
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Named request: half the previous 24px gutter. */
	gap: 12px;
}

/* Named request: 1.5x the regular archive card's own height (Archive/Luxe/
   style.css's shared aspect-ratio: 575/307) — scoped to this grid only, so
   the real /properties/ archive's own card height is untouched ("lock the
   archive design"). Same width, height x1.5 means the aspect-ratio's
   height side must also x1.5: 575/(307*1.5) = 575/460.5. */
.mainsail-fp-luxe__grid .mshm-archive-card--luxe__img {
	aspect-ratio: 575 / 460.5;
}

.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(1) {
	grid-column: 1 / span 1;
	grid-row: 1;
}

.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(2) {
	grid-column: 2 / span 2;
	grid-row: 1;
}

/* Named request: the double-width card must render at the SAME height as
   the regular cards (now 1.5x the base card height, see the grid's own
   575/460.5 rule above), not proportionally taller. Since this card is
   (approximately, ignoring the 12px grid gap) exactly 2x as wide as a
   regular card, doubling that same aspect-ratio's width side —
   1150/460.5 — makes its own width-driven height land back at the same
   value as a regular card's, without needing any grid-row-stretch trick. */
.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(2) .mshm-archive-card--luxe__img {
	aspect-ratio: 1150 / 460.5;
}

.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(3) {
	grid-column: 1;
	grid-row: 2;
}

.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}

.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(5) {
	grid-column: 3;
	grid-row: 2;
}

@media (max-width: 900px) {
	.mainsail-fp-luxe__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(2) {
		grid-column: 1 / span 2;
		grid-row: 2;
	}

	.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(3) {
		grid-column: 1;
		grid-row: 3;
	}

	.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(4) {
		grid-column: 2;
		grid-row: 3;
	}

	.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(5) {
		grid-column: 1 / span 2;
		grid-row: 4;
	}
}

/* ---------- Mobile: swipeable carousel + bottom controls ---------- */

/* Named request: the bento grid becomes a finger-swipeable carousel on
   mobile (native CSS scroll-snap — no JS carousel library needed for the
   swipe itself, same idea as Equinox/Panorama's own arrow controls but a
   real touch-native scroller instead of a Splide instance), with the View
   All button moved down next to prev/next arrows below the cards ("upper
   part button would come down"). Hidden above the breakpoint — exactly
   one of the two View All copies (heading row vs foot row) is ever
   visible at a time. */
.mainsail-fp-luxe__foot,
.mainsail-fp-luxe__view-all--mobile {
	display: none;
}

@media (max-width: 600px) {
	.mainsail-fp-luxe__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.mainsail-fp-luxe__grid::-webkit-scrollbar {
		display: none;
	}

	/* Named request: a simple one-card-at-a-time carousel — no adjacent-
	   card "peek" like Equinox/Panorama use, full width instead. */
	.mainsail-fp-luxe__grid > .mshm-archive-card {
		flex: 0 0 100%;
		scroll-snap-align: start;
		grid-column: auto;
		grid-row: auto;
	}

	/* Named request: keep the same 1.5x height boost the bento grid uses
	   (.mainsail-fp-luxe__grid .mshm-archive-card--luxe__img, defined
	   above, already applies here too — nothing to reset). Only the
	   double-width card's own EXTRA aspect-ratio (1150/460.5, for
	   spanning 2 grid columns) needs resetting back to the normal
	   1.5x-height ratio, since every slide is the same single-card width
	   now. */
	.mainsail-fp-luxe__grid > .mshm-archive-card:nth-child(2) .mshm-archive-card--luxe__img {
		aspect-ratio: 575 / 460.5;
	}

	.mainsail-fp-luxe__intro {
		height: auto;
		min-height: 0;
		max-height: none;
		/* Named request: half the previous 80px/40px. */
		padding: 40px 0 20px;
	}

	.mainsail-fp-luxe__heading {
		--mshm-fp-x: 0 !important;
		transform: none;
	}

	/* Named bug: nowrap (set so it never wraps at desktop's own larger
	   font size) overflowed the viewport at mobile widths instead. */
	.mainsail-fp-luxe__title {
		white-space: normal;
	}

	.mainsail-fp-luxe__heading-wrap .mainsail-fp-luxe__view-all {
		display: none;
	}

	.mainsail-fp-luxe__foot {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-top: 24px;
	}

	.mainsail-fp-luxe__view-all--mobile {
		display: inline-flex;
	}

	/* Same visual pattern as Equinox/Panorama's own .mainsail-fp__arrow. */
	.mainsail-fp-luxe__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		flex: 0 0 auto;
		border-radius: 50%;
		border: 1px solid #171717;
		background: transparent;
		color: #171717;
		cursor: pointer;
		padding: 0;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.mainsail-fp-luxe__arrow:hover,
	.mainsail-fp-luxe__arrow:focus-visible {
		background-color: #171717;
		color: #ffffff;
	}
}

/* Home page Featured Listings: no decorative three-dot mark at the bottom of each card (the
   archive card design draws it with ::after; it is kept on the Properties archive cards). */
.mainsail-fp--luxe .mshm-archive-card--luxe::after {
	display: none;
}