/**
 * Featured Communities — Luxe presentation.
 *
 * Heading typography AND behavior now literally mirror
 * FeaturedProperties/Luxe/style.css's own eyebrow/title/parallax — named
 * feedback: "apply same heading design as featured listings" plus a
 * follow-up round asking for the same scroll-parallax + static View All
 * button pairing too, not just the typography. Values (font/size/
 * letter-spacing, the --mshm-fp-x parallax mechanism, the eyebrow
 * underline's own right-anchored tick) are kept in sync by literal value
 * with that file, same approach its own docblock already uses against
 * Components/Archive/Luxe/search.css — no shared class between the two,
 * this section has no other archive-heading markup to anchor one to.
 *
 * Card hover mechanic (reference: joycerey.com/communities/ "Lifestyles in
 * Southern California" — ground-truth extracted live via
 * document.styleSheets, not guessed): the card itself carries the
 * gradient as its own background; the <img> normally covers it edge to
 * edge, and insets by 3px on hover, revealing a 3px gradient ring as a
 * "border". The reference does this with a <canvas> element sitting
 * behind the image — a plain CSS background-image gradient on the card
 * produces the identical visual result without the extra element, so
 * that's what this uses instead of a literal <canvas>.
 *
 * Gradient color: white at the top, mainsailre.com's own real cyan at the
 * bottom (#25C6FB — confirmed twice now: getComputedStyle on an actual
 * mainsailre.com element AND, on the second round, its own --secondary
 * CSS custom property read directly off :root — same value both times,
 * brighter than this project's --mainsail-color-accent token), replacing
 * the reference's own white-to-gold. Scoped to this component only (not
 * written into the shared --mainsail-color-accent token) since only this
 * card treatment was asked to use the brighter value.
 *
 * Named bug: a real mouse hover (not a class-toggle simulation — that
 * reproduces zero horizontal movement, confirmed live) was drifting
 * slightly rightward on image cards only, never on the plain-gradient
 * (no-image) cards — the differentiator being .mainsail-fc-luxe__image's
 * own filter:grayscale() transition, animated in lockstep with `inset`.
 * Chromium/WebKit recompute a filtered element's paint bounds every
 * frame, and doing that alongside an animating `inset` on the same
 * element can round those bounds asymmetrically frame-to-frame — a known
 * class of filter+layout-animation compositing artifact. Promoting the
 * image (and its sibling overlay, for the same reason) to its own stable
 * GPU layer via translateZ(0)/backface-visibility avoids the drift by
 * giving the browser a fixed layer to composite into rather than
 * recomputing bounds each frame.
 */

.mainsail-fc--luxe {
	position: relative;
	padding: 0 max(6.875vw, 24px) 90px;
	overflow: hidden;
}

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

/* ---------- Parallax intro (literal match: FeaturedProperties/Luxe) ---------- */

.mainsail-fc-luxe__intro {
	position: relative;
	/* Auto height (parallax distance no longer needed): the heading's bottom
	   edge is the box's bottom edge, so the subtext's 50px margin is the
	   exact 50px gap. 16px on top keeps the old spacing above the heading. */
	padding-top: 16px;
	display: flex;
	align-items: center;
}

.mainsail-fc-luxe__heading-wrap {
	position: relative;
	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-fc-luxe__heading {
	position: relative;
	z-index: 1;
	width: max-content;
	max-width: calc(100vw - 64px);
	/* Parallax removed (named request): the heading sits still, flush with the grid. */
	--mshm-fc-x: 0;
}

.mainsail-fc-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;
}

/* Named bug: these were both anchored `left:0`, putting the short, bright
   "tick" mark at the START of the line instead of the end — the opposite
   of FeaturedProperties/Luxe's own treatment, which anchors both to the
   right so the bright tick sits at the line's far end, past the text. */
.mainsail-fc-luxe__eyebrow::after {
	content: "";
	position: absolute;
	bottom: -11px;
	right: 0;
	width: 100vw;
	height: 1px;
	background: var(--mainsail-color-accent, #24bef5);
	opacity: 0.45;
}

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

.mainsail-fc-luxe__title {
	margin: 0;
	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;
	white-space: nowrap;
}

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

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

/* Same bordered-rectangle button pattern as
   FeaturedProperties/Luxe/__view-all — static, doesn't travel with the
   heading's own parallax transform, sits at the row's other end. */
.mainsail-fc-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-fc-luxe__view-all:hover,
.mainsail-fc-luxe__view-all:focus-visible {
	background-color: #171717;
	color: #ffffff;
}

/* Hidden by default (desktop) — the ≤600px block below is the only place
   this becomes visible, and the ORIGINAL button (in the heading row)
   hides there instead, so exactly one is ever shown. */
.mainsail-fc-luxe__view-all--mobile {
	display: none;
}

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

.mainsail-fc-luxe__subtext-wrap {
	max-width: 1320px;
	/* 50px between the heading row and the punch line (named request). */
	margin: 50px auto 48px;
}

/* Punch line (named request): centered, double the previous 16px body size
   (script face, scaled down on smaller screens), with a text shadow. */
.mainsail-fc-luxe__subtext {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	/* Signature script: Brittany Signature, falling back to Herr Von Muellerhoff (see PageBanner/fonts.css).
	   Thin script faces have a small x-height, so the size is larger than the old sans. */
	font-family: "Brittany Signature", "Herr Von Muellerhoff", "Brush Script MT", cursive;
	font-weight: 400;
	font-size: 50px;
	line-height: 1.7;
	color: #171717;
}

@media (max-width: 900px) {
	.mainsail-fc-luxe__subtext {
		font-size: 42px;
	}
}

@media (max-width: 600px) {
	.mainsail-fc-luxe__subtext {
		font-size: 31px;
		padding: 0 16px;
	}
}

/* ---------- 4-column grid ---------- */

.mainsail-fc-luxe__grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

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

/* Named request: stays 2 columns all the way down to phone widths — no
   further collapse to a single column. */

/* ---------- Card ---------- */

.mainsail-fc--luxe .mainsail-fc-luxe__grid .mainsail-fc-luxe__card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 30px;
	overflow: hidden;
	/* Bottom = cyan, top = white — "0deg" here reads bottom-to-top, so the
	   first stop sits at the bottom. */
	background: linear-gradient(0deg, #25c6fb 0%, #ffffff 100%);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	transform: translateY(0);
	transition: box-shadow 0.45s ease;
	/* Named bug: a real mouse hover was drifting slightly rightward, only
	   on cards with an image (the photo's own detail reveals sub-pixel
	   antialiasing shimmer during the translateY animation; a flat
	   gradient has no detail to reveal the same shimmer). The earlier fix
	   promoted the CHILD <img> to its own GPU layer, but this card is the
	   element that actually animates — promoting a child separately from
	   an unpromoted, animating parent forces the browser to reconcile two
	   layers' positions every frame, which is itself a source of drift.
	   Promoting the card itself keeps the whole subtree (image + overlay
	   together) as one atomic layer that simply translates, no
	   per-frame reconciliation needed. */
	will-change: transform;
}

/* Named bug (part 2): this card's `transform` transition duration only
   applies once the entrance reveal has actually finished — while
   [data-mainsail-reveal] is still mid-reveal, mainsail-reveal.css's own
   1.1s transition (shared by opacity + transform together) must be left
   alone. This rule used to apply unconditionally at higher specificity
   than that one, silently cutting the reveal's own transform down to this
   rule's 0.45s while opacity kept running the real 1.1s — the two
   properties finishing at different times is exactly what read as a
   "jerk" partway through the zoom-in. Gating this on .is-revealed (added
   by mainsail-reveal.js only once the reveal transition has completed)
   keeps the entrance smooth, and still gives hover its own snappier
   transform duration afterward. */
.mainsail-fc--luxe .mainsail-fc-luxe__grid .mainsail-fc-luxe__card:not([data-mainsail-reveal]),
.mainsail-fc--luxe .mainsail-fc-luxe__grid .mainsail-fc-luxe__card.is-revealed {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

/* Named bug, found via real getBoundingClientRect sampling during an
   actual mouse hover: the image's LEFT edge moved right by exactly the
   3px `inset` amount, but its RIGHT edge never moved — this used to be
   `inset` (a shorthand for top/right/bottom/left) PLUS explicit
   width:100%/height:100%, an over-constrained absolutely-positioned box.
   An <img> is a "replaced element" — unlike a plain box, it needs an
   explicit width/height to stretch-fill at all (inset alone isn't
   enough, confirmed live: removing width/height made it shrink to its
   own intrinsic aspect ratio instead of filling the card). But once
   width/height ARE specified alongside all four inset offsets, the box
   is over-constrained, and per spec the browser keeps top+left+width+
   height and silently drops right/bottom — so hovering only ever
   translated the image diagonally via its top/left offset while its size
   stayed fixed, sliding it past the card's right/bottom edge (clipped by
   the card's own overflow:hidden) instead of shrinking symmetrically —
   exactly why the border only ever appeared at top-left, never at
   bottom-right.
   Fix: never set all four sides — top+left+width+height fully describe
   the box on their own (right/bottom are left implicit, derived, not
   independently specified), so there's nothing left for the browser to
   silently drop. .mainsail-fc-luxe__overlay right below never had this
   bug (a plain non-replaced <span>, `inset` alone stretches it fine),
   which is why its own border ring was always symmetric. */
.mainsail-fc-luxe__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.45s ease;
}

/* Base legibility gradient behind the name — always present, insets in
   lockstep with the image so it never overshoots the revealed border. */
.mainsail-fc-luxe__overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
	transition: inset 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mainsail-fc-luxe__name {
	position: absolute;
	right: 24px;
	bottom: 22px;
	left: 24px;
	z-index: 1;
	font: 500 16px/1.3 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.mainsail-fc--luxe .mainsail-fc-luxe__grid .mainsail-fc-luxe__card:hover,
.mainsail-fc--luxe .mainsail-fc-luxe__grid .mainsail-fc-luxe__card:focus-visible {
	transform: translateY(-18px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35);
}

.mainsail-fc-luxe__card:hover .mainsail-fc-luxe__image,
.mainsail-fc-luxe__card:focus-visible .mainsail-fc-luxe__image {
	top: 3px;
	left: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	/* Present in the joycerey.com reference, not explicitly requested —
	   flagged in the handoff notes; remove this one declaration to keep
	   full color on hover instead. */
	filter: grayscale(1);
}

.mainsail-fc-luxe__card:hover .mainsail-fc-luxe__overlay,
.mainsail-fc-luxe__card:focus-visible .mainsail-fc-luxe__overlay {
	inset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-fc--luxe .mainsail-fc-luxe__grid .mainsail-fc-luxe__card,
	.mainsail-fc-luxe__image,
	.mainsail-fc-luxe__overlay {
		transition: none;
	}
}

/* Named request: side margin read as too much on phones — cut to 3/4 of
   the base max(6.875vw,24px) formula (6.875*0.75=5.15625, 24*0.75=18). */
@media (max-width: 600px) {
	.mainsail-fc--luxe {
		padding-left: max(5.15625vw, 18px);
		padding-right: max(5.15625vw, 18px);
	}
}

/* Mobile audit finding (same issue on LuxeGrid, fixed there identically):
   at the 2-column width a card's text area is only ~80px wide (card width
   minus this 24px side inset), and a longer name like "MANCHESTER" at
   16px doesn't fit on one line — inherited word-break:break-word was
   hyphenating it mid-word ("MANCHE/STER"). Smaller inset + smaller font
   gives it room. */
@media (max-width: 600px) {
	.mainsail-fc-luxe__name {
		right: 14px;
		bottom: 14px;
		left: 14px;
		font-size: 13px;
	}
}

/* Named request: wrap the heading on mobile instead of forcing the
   single line the desktop parallax layout needs (nowrap made sense
   there — the heading's own width:max-content sizing depends on it —
   but at phone widths "FEATURED LOCATIONS" in one line either overflows
   past the viewport or sits right at the edge of it, depending on exact
   width). Letting it wrap, and letting the heading box size to the row's
   full width instead of shrink-to-fit, keeps it fully on-screen. */
@media (max-width: 600px) {
	.mainsail-fc-luxe__title {
		white-space: normal;
	}

	.mainsail-fc-luxe__heading {
		width: 100%;
	}
}


/* Named request: the View All button moves below the grid on mobile —
   see template.php's own docblock for why this is a DOM duplicate
   (.mainsail-fc-luxe__view-all--mobile) rather than a CSS reposition.
   Exactly one of the two is ever visible: the original hides here, the
   duplicate (hidden by default, no rule needed above) only shows here. */
@media (max-width: 600px) {
	.mainsail-fc-luxe__heading-wrap > .mainsail-fc-luxe__view-all {
		display: none;
	}

	.mainsail-fc-luxe__view-all--mobile {
		display: flex;
		justify-content: center;
		margin: 32px auto 0;
		width: max-content;
	}
}