/**
 * Featured Communities — Luxe Grid presentation (the /communities/
 * browse-all page). Split out from the homepage's own Luxe skin — see
 * this folder's template.php docblock for why. Every selector here uses
 * its own `ki-fc-luxegrid__` prefix so nothing can collide with
 * Luxe's `ki-fc-luxe__` classes even if both stylesheets ever load
 * on the same page.
 *
 * Heading typography mirrors FeaturedProperties/Luxe/style.css's own
 * eyebrow/title (named feedback: "apply same heading design as featured
 * listings") — values (font/size/letter-spacing, the eyebrow underline's
 * own right-anchored tick) kept in sync by literal value with that file.
 * No parallax here (named request — see template.php), so this is a
 * plain, auto-height heading with nothing that can overflow it.
 *
 * The "cross": named request ("that cross design... which we used on our
 * listings page") — a vertical rule down the heading block's own left
 * edge, matching the archive heading's own
 * __inner::before treatment (same color, same technique), paired with
 * the eyebrow's existing horizontal line.
 *
 * 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.
 *
 * Gradient color: white at the top, the reference site's own real cyan at the
 * bottom (#25C6FB — confirmed via getComputedStyle on an actual
 * reference element AND its own --secondary CSS custom property read
 * directly off :root — same value both times).
 *
 * Named bug: a real mouse hover was drifting slightly rightward, only on
 * cards with an image — the image rule mixed `inset` with explicit
 * width:100%/height:100%, an over-constrained absolutely-positioned
 * replaced element; the browser kept top+left+width+height and silently
 * dropped right/bottom, so the image only ever translated diagonally
 * instead of shrinking. Fixed by specifying top+left+width+height only,
 * never all four sides at once — see the .ki-fc-luxegrid__image
 * rule below for the full reasoning.
 */

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

.ki-fc--luxegrid,
.ki-fc-luxegrid__heading {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------- Heading (plain, auto-height, no parallax) ---------- */

.ki-fc-luxegrid__heading-wrap {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 0 0 26px;
}

/* The vertical half of the "cross" — matches
   the archive heading's own __inner::before exactly
   (color, 1px width, same bottom overshoot). */
.ki-fc-luxegrid__heading-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: -12px;
	left: 0;
	width: 1px;
	background: #d8d8d8;
}

.ki-fc-luxegrid__heading {
	position: relative;
	z-index: 1;
	max-width: calc(100vw - 64px);
}

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

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

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

/* Named bug: this WP Page wraps its content in Kadence's own
   `.single-content`, whose own `.single-content h1{margin:1.5em 0 0.5em}`
   rule (0,1,1) outranks a bare `.ki-fc-luxegrid__title{margin:0}`
   (0,1,0) — at this title's own 80px font-size, 1.5em resolved to a real
   120px margin-top (confirmed live), reading as "a lot of padding between
   eyebrow and heading" even though nothing here ever set one. Same bug,
   same fix the archive heading already documents against
   this exact Kadence rule: two-class scoping (0,2,0) wins regardless of
   source order, no !important needed. */
.ki-fc-luxegrid__heading .ki-fc-luxegrid__title {
	margin: 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.8vw, 4rem); /* 20% smaller than the original 5rem */
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: #171717;
	text-transform: uppercase;
}

/* Named bug: "Featured" and "Locations" were rendering at the same
   visual weight — this skin's own stylesheet enqueue never loaded
   Cormorant's 300/700 weight faces (only Archive/Luxe and
   FeaturedProperties/Luxe self-enqueue those explicitly; the sitewide
   Customizer default only pulls 400/500/600), so the browser silently
   substituted the nearest weight it actually had for both, and they
   looked nearly identical. Fixed at the PHP level — see
   FeaturedCommunities::enqueue_skin_assets(), which now enqueues the
   same font-weight stylesheet Archive/Luxe and FeaturedProperties/Luxe
   already do. */
.ki-fc-luxegrid__title > span {
	font-weight: 300;
}

.ki-fc-luxegrid__title strong {
	font-weight: 700;
}

/* ---------- Region filter pills ---------- */

.ki-fc-luxegrid__filter {
	max-width: 1320px;
	/* Named request: 70px between the heading and the filter pills. */
	margin: 70px auto 0;
	padding-left: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ki-fc-luxegrid__filter-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid rgba(23, 23, 23, 0.2);
	background: transparent;
	color: #171717;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ki-fc-luxegrid__filter-pill:hover {
	border-color: var(--ki-color-accent, #24bef5);
}

.ki-fc-luxegrid__filter-pill.is-active {
	background: #171717;
	border-color: #171717;
	color: #ffffff;
}

/* Specificity matches the card's own base rule (0-3-0) — a lower-specificity
   [hidden] override loses to it, same bug already found and fixed on the
   homepage's own Luxe skin (see that skin's own style.css docblock). */
.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__card[hidden] {
	display: none;
}

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

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

@media (max-width: 900px) {
	.ki-fc-luxegrid__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 ---------- */

.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__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, var(--ki-color-accent, #25c6fb) 0%, #ffffff 100%);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	transform: translateY(0);
	transition: box-shadow 0.45s ease;
	will-change: transform;
}

/* Transform transition only applies once the entrance reveal has finished
   — see the homepage Luxe skin's own style.css for the full reasoning
   (the same "jerk" bug fix, reused verbatim here). */
.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__card:not([data-ki-reveal]),
.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__card.is-revealed {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

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

.ki-fc-luxegrid__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);
}

.ki-fc-luxegrid__text {
	position: absolute;
	right: 24px;
	bottom: 22px;
	left: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ki-fc-luxegrid__name {
	font: 500 16px/1.3 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.ki-fc-luxegrid__count {
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}

.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__card:hover,
.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__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);
}

.ki-fc-luxegrid__card:hover .ki-fc-luxegrid__image,
.ki-fc-luxegrid__card:focus-visible .ki-fc-luxegrid__image {
	top: 3px;
	left: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	filter: grayscale(1);
}

.ki-fc-luxegrid__card:hover .ki-fc-luxegrid__overlay,
.ki-fc-luxegrid__card:focus-visible .ki-fc-luxegrid__overlay {
	inset: 3px;
}

@media (max-width: 900px) {
	.ki-fc-luxegrid__heading-wrap,
	.ki-fc-luxegrid__filter {
		padding-left: 18px;
	}
}

/* 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). */
/* Named bug: this page still read as having "lot of margin both side on
   mobile" even after cutting this section's own padding to 3/4 — because
   this section isn't the only thing adding side inset here. Unlike the
   homepage (where this same component sits in a wide/full-width block),
   this WP Page wraps it in Kadence's own `.entry-content-wrap` (its own
   real 24px padding) inside `article` (a real -16px "wide align" margin
   from Kadence itself) — together a fixed, non-negotiable +32px on each
   side (confirmed live: identical at 375px and 390px, so a fixed value,
   not vw-based) BEFORE this section's own padding below even applies.
   Measured live: this section's grid was starting 52px from the real
   viewport edge, while the homepage's identical grid starts at 20px —
   the extra 32px is that theme wrapper, not this component. Pulling the
   section out by that same fixed 32px (the same "break out of the
   parent's padding" technique Kadence's own article element already
   uses, just for this component instead) cancels it back out, so this
   section's own padding below is the only inset left — matching the
   homepage's own clean single-layer margin. */
@media (max-width: 600px) {
	.ki-fc--luxegrid {
		margin-left: -32px;
		margin-right: -32px;
		padding-left: max(5.15625vw, 18px);
		padding-right: max(5.15625vw, 18px);
	}
}

/* Mobile audit finding: at the 2-column width a card's own text area is
   only ~80px wide (card width minus the __text wrapper's 24px side
   inset), and a longer name like "MANCHESTER"/"FORT LAUDERDALE" at 16px
   doesn't fit on one line — word-break:break-word (inherited, not
   declared here) was hyphenating it mid-word ("MANCHE/STER"). Smaller
   inset + smaller font gives real single-city names room to wrap on a
   real word boundary (multi-word names) or fit on one line (single-word
   ones) instead. */
@media (max-width: 600px) {
	.ki-fc-luxegrid__text {
		right: 14px;
		bottom: 14px;
		left: 14px;
	}

	.ki-fc-luxegrid__name {
		font-size: 13px;
	}

	.ki-fc-luxegrid__count {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ki-fc--luxegrid .ki-fc-luxegrid__grid .ki-fc-luxegrid__card,
	.ki-fc-luxegrid__image,
	.ki-fc-luxegrid__overlay {
		transition: none;
	}
}

/* Named request: no breadcrumb on the Locations page. Hidden with
   display:none (not white text — Google treats invisible text as spam) via
   :has() so it follows the component, not a page ID. The Kadence page-title
   banner above still shows the page name. */
body:has(.ki-fc--luxegrid) .kadence-breadcrumb-container {
	display: none;
}