/* =============================================================================
   Home Filter Grid — Stylesheet
   S&S Homes | Colors: #cc0000 · #ffffff · #1a1a1a · #f9f8f6
   Fonts: Playfair Display (headings) · Inter (body)
   ============================================================================= */

:root {
	--fpg-accent:       #cc0000;
	--fpg-accent-hover: #a30000;
	--fpg-text:         #1a1a1a;
	--fpg-text-muted:   #6b7280;
	--fpg-text-light:   #9ca3af;
	--fpg-border:       #e5e7eb;
	--fpg-bg:           #ffffff;
	--fpg-bg-page:      #f9f8f6;
	--fpg-radius:       6px;
	--fpg-gap:          24px;
	--fpg-font-heading: 'Playfair Display', Georgia, serif;
	--fpg-font-body:    'Inter', system-ui, sans-serif;
}

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.fpg-wrapper {
	font-family: var(--fpg-font-body);
	font-size:   15px;
	color:       var(--fpg-text);
	line-height: 1.5;
}

/* ============================================================================
   FILTER BAR
   ============================================================================ */

.fpg-filter-bar {
	background:    var(--fpg-bg);
	border:        1px solid var(--fpg-border);
	border-radius: var(--fpg-radius);
	padding:       12px 16px;
	margin-bottom: 16px;
}

/* ── Mobile-only header row (hidden on desktop) ──────────────────────────── */

.fpg-mobile-row {
	display:         none; /* shown only on mobile via media query */
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
}

/* Mobile "Filters" toggle button */
.fpg-mobile-toggle {
	display:       inline-flex;
	align-items:   center;
	gap:           7px;
	height:        40px;
	padding:       0 16px;
	border:        1.5px solid var(--fpg-border);
	border-radius: var(--fpg-radius);
	background:    var(--fpg-bg);
	color:         var(--fpg-text);
	font-family:   var(--fpg-font-body);
	font-size:     0.9375rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    border-color 0.15s;
}

.fpg-mobile-toggle:hover,
.fpg-mobile-toggle[aria-expanded="true"] {
	border-color: var(--fpg-accent);
	color:        var(--fpg-accent);
}

/* Active filter count badge on mobile toggle */
.fpg-active-badge {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	min-width:     20px;
	height:        20px;
	padding:       0 5px;
	border-radius: 10px;
	background:    var(--fpg-accent);
	color:         #ffffff;
	font-size:     0.6875rem;
	font-weight:   700;
	line-height:   1;
}

/* ── Pills panel (always visible desktop, collapsible mobile) ────────────── */

.fpg-pills-panel {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         10px;
}

/* ── Filter pills container ──────────────────────────────────────────────── */

.fpg-filter-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	flex:      1;
	min-width: 0;
}

.fpg-pill-wrap {
	position: relative;
}

/* ── Pill select (styled native <select>) ────────────────────────────────── */

.fpg-pill-select {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	display:            inline-flex;
	align-items:        center;
	height:             36px;
	padding:            0 32px 0 13px;
	cursor:             pointer;
	font-family:        var(--fpg-font-body);
	font-size:          0.8125rem;
	font-weight:        500;
	color:              var(--fpg-text);
	background:         var(--fpg-bg);
	border:             1px solid var(--fpg-border);
	border-radius:      var(--fpg-radius);
	white-space:        nowrap;
	transition:         border-color 0.15s, box-shadow 0.15s;
	background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:  no-repeat;
	background-position: right 10px center;
}

.fpg-pill-select:hover {
	border-color: var(--fpg-accent);
}

.fpg-pill-select:focus {
	outline:      none;
	border-color: var(--fpg-accent);
	box-shadow:   0 0 0 2px rgba(204, 0, 0, 0.15);
}

/* Active — a value is selected */
.fpg-pill-select.fpg-pill-active {
	border-color:     var(--fpg-accent);
	color:            var(--fpg-accent);
	background-color: rgba(204, 0, 0, 0.04);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cc0000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Filter action buttons ───────────────────────────────────────────────── */

.fpg-filter-actions {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-shrink: 0;
}

/* Red "Filter" button */
.fpg-filter-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	height:         36px;
	padding:        0 18px;
	border:         none;
	border-radius:  var(--fpg-radius);
	background:     var(--fpg-accent);
	color:          #ffffff;
	font-family:    var(--fpg-font-body);
	font-size:      0.8125rem;
	font-weight:    600;
	letter-spacing: 0.03em;
	cursor:         pointer;
	transition:     background 0.15s;
	white-space:    nowrap;
}

.fpg-filter-btn:hover {
	background: var(--fpg-accent-hover);
}

.fpg-filter-btn:focus {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.25);
}

/* "Clear" button — text style, only visible when filters are active */
.fpg-clear-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	height:          36px;
	padding:         0 12px;
	border:          1px solid var(--fpg-border);
	border-radius:   var(--fpg-radius);
	background:      transparent;
	color:           var(--fpg-text-muted);
	font-family:     var(--fpg-font-body);
	font-size:       0.8125rem;
	font-weight:     500;
	cursor:          pointer;
	transition:      color 0.15s, border-color 0.15s;
	white-space:     nowrap;
}

.fpg-clear-btn:hover {
	color:        var(--fpg-accent);
	border-color: var(--fpg-accent);
}

/* Mobile clear — in the mobile toggle row */
.fpg-clear-mobile {
	height:     40px;
	font-size:  0.9375rem;
	font-weight: 600;
}

/* ============================================================================
   RESULTS BAR
   ============================================================================ */

.fpg-results-bar {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   20px;
	flex-wrap:       wrap;
	gap:             10px;
}

.fpg-properties-count {
	font-family: var(--fpg-font-body);
	font-size:   0.9375rem;
	font-weight: 400;
	color:       var(--fpg-text-muted);
}

.fpg-properties-count strong {
	color:       var(--fpg-text);
	font-weight: 700;
}

.fpg-results-bar-right {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-wrap:   wrap;
}

.fpg-sort-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.875rem;
	color:       var(--fpg-text-muted);
}

.fpg-sort-label {
	font-weight: 500;
	white-space: nowrap;
}

.fpg-sort-select {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	font-family:        var(--fpg-font-body);
	font-size:          0.875rem;
	font-weight:        500;
	color:              var(--fpg-text);
	background:         var(--fpg-bg);
	border:             1px solid var(--fpg-border);
	border-radius:      var(--fpg-radius);
	padding:            5px 28px 5px 10px;
	cursor:             pointer;
	background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:  no-repeat;
	background-position: right 8px center;
}

.fpg-sort-select:focus {
	outline:      none;
	border-color: var(--fpg-accent);
	box-shadow:   0 0 0 2px rgba(204, 0, 0, 0.12);
}

/* "Show Map" outlined toggle button */
.fpg-map-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	height:        34px;
	padding:       0 14px;
	border:        1.5px solid var(--fpg-accent);
	border-radius: var(--fpg-radius);
	background:    transparent;
	color:         var(--fpg-accent);
	font-family:   var(--fpg-font-body);
	font-size:     0.8125rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    background 0.15s, color 0.15s;
	white-space:   nowrap;
}

.fpg-map-btn:hover {
	background: rgba(204, 0, 0, 0.05);
}

.fpg-map-toggle {
	display:       inline-block;
	width:         32px;
	height:        18px;
	border-radius: 9px;
	background:    var(--fpg-border);
	position:      relative;
	transition:    background 0.2s;
	flex-shrink:   0;
}

.fpg-map-toggle::after {
	content:       '';
	display:       block;
	width:         12px;
	height:        12px;
	border-radius: 50%;
	background:    #ffffff;
	position:      absolute;
	top:           3px;
	left:          3px;
	transition:    left 0.2s;
	box-shadow:    0 1px 3px rgba(0,0,0,0.2);
}

.fpg-map-btn.fpg-map-active .fpg-map-toggle {
	background: var(--fpg-accent);
}

.fpg-map-btn.fpg-map-active .fpg-map-toggle::after {
	left: 17px;
}

/* ============================================================================
   CONTENT ROW: grid left + map right
   ============================================================================ */

.fpg-content-row {
	display:     flex;
	gap:         20px;
	align-items: flex-start;
}

.fpg-grid-wrap {
	flex:      1;
	min-width: 0;
}

/* ── Map panel ───────────────────────────────────────────────────────────── */

.fpg-map-panel {
	flex:          0 0 50%;
	max-width:     50%;
	position:      sticky;
	top:           20px;
	height:        75vh;
	min-height:    500px;
	border:        1px solid var(--fpg-border);
	border-radius: var(--fpg-radius);
	overflow:      hidden;
}

#fpg-map {
	width:  100%;
	height: 100%;
}

/* When map is active, grid columns compress a touch */
.fpg-wrapper.fpg-map-active .fpg-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ── Google Maps info window ─────────────────────────────────────────────── */

.fpg-info-window {
	display:     flex;
	gap:         10px;
	align-items: flex-start;
	max-width:   260px;
	font-family: var(--fpg-font-body, 'Inter', sans-serif);
}

.fpg-iw-thumb {
	width:         80px;
	height:        60px;
	object-fit:    cover;
	border-radius: 4px;
	flex-shrink:   0;
}

.fpg-iw-thumb-placeholder {
	width:            80px;
	height:           60px;
	background:       #f3f4f6;
	border-radius:    4px;
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            #d1d5db;
}

.fpg-iw-body {
	display:        flex;
	flex-direction: column;
	gap:            3px;
	min-width:      0;
}

.fpg-iw-title {
	margin:      0;
	font-size:   0.8125rem;
	font-weight: 600;
	color:       #1a1a1a;
	line-height: 1.3;
}

.fpg-iw-price {
	margin:      0;
	font-size:   0.875rem;
	font-weight: 700;
	color:       #cc0000;
}

.fpg-iw-link {
	display:         inline-block;
	margin-top:      4px;
	font-size:       0.8125rem;
	font-weight:     600;
	color:           #cc0000;
	text-decoration: none;
}

.fpg-iw-link:hover {
	text-decoration: underline;
}

/* ============================================================================
   CARD GRID
   ============================================================================ */

.fpg-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   var(--fpg-gap);
	transition:            opacity 0.2s ease;
}

.fpg-grid.fpg-loading {
	opacity:        0.4;
	pointer-events: none;
}

/* ============================================================================
   HOME CARD
   ============================================================================ */

.fpg-card {
	background:     var(--fpg-bg);
	border:         1px solid var(--fpg-border);
	border-radius:  var(--fpg-radius);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.fpg-card:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
	transform:  translateY(-3px);
}

.fpg-card-image-wrap {
	display:         block;
	position:        relative;
	aspect-ratio:    16 / 10;
	overflow:        hidden;
	background:      var(--fpg-bg-page);
	text-decoration: none;
}

.fpg-card-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.35s ease;
}

.fpg-card:hover .fpg-card-image {
	transform: scale(1.04);
}

.fpg-card-placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f3f4f6;
	color:           #d1d5db;
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.fpg-card-badges {
	position: absolute;
	top:      12px;
	left:     12px;
	display:  flex;
	flex-wrap: wrap;
	gap:      6px;
	z-index:  2;
}

.fpg-badge {
	display:        inline-block;
	padding:        4px 10px;
	font-family:    var(--fpg-font-body);
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.07em;
	color:          #ffffff;
	border-radius:  3px;
	line-height:    1.4;
	white-space:    nowrap;
}

.fpg-badge-primary  { background: var(--fpg-accent); }
.fpg-badge-secondary { background: var(--fpg-text); }

/* ── Card body ───────────────────────────────────────────────────────────── */

.fpg-card-body {
	padding:        20px 20px 18px;
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.fpg-card-title {
	margin:      0 0 2px;
	font-family: var(--fpg-font-heading);
	font-size:   1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.fpg-card-title a {
	color:           var(--fpg-text);
	text-decoration: none;
	transition:      color 0.15s;
}

.fpg-card-title a:hover { color: var(--fpg-accent); }

.fpg-card-community {
	margin:      0;
	font-size:   0.8125rem;
	font-weight: 500;
	color:       var(--fpg-accent);
	line-height: 1.4;
}

.fpg-community-link {
	color:           var(--fpg-accent);
	text-decoration: none;
}

.fpg-community-link:hover { text-decoration: underline; }

.fpg-lot-number { color: var(--fpg-accent); }

.fpg-card-stats {
	margin:      4px 0 0;
	font-size:   0.875rem;
	font-weight: 400;
	color:       var(--fpg-text-muted);
	line-height: 1.5;
}

.fpg-card-divider {
	border:     none;
	border-top: 1px solid var(--fpg-border);
	margin:     12px 0 10px;
}

.fpg-card-price {
	margin:      0 0 10px;
	font-family: var(--fpg-font-body);
	font-size:   1.3125rem;
	font-weight: 700;
	color:       var(--fpg-text);
	line-height: 1.2;
}

.fpg-card-tour {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	font-family:     var(--fpg-font-body);
	font-size:       0.875rem;
	font-weight:     600;
	color:           var(--fpg-accent);
	text-decoration: none;
	margin-top:      auto;
	transition:      color 0.15s;
}

.fpg-card-tour:hover {
	color:                 var(--fpg-accent-hover);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

/* ── No results ──────────────────────────────────────────────────────────── */

.fpg-no-results {
	grid-column: 1 / -1;
	text-align:  center;
	color:       var(--fpg-text-muted);
	padding:     56px 24px;
	font-size:   1rem;
	font-family: var(--fpg-font-body);
}

/* ============================================================================
   RESPONSIVE — TABLET  ≤ 1024px
   ============================================================================ */

@media (max-width: 1024px) {
	/* Map panel takes a bit more space on tablet */
	.fpg-map-panel {
		flex:      0 0 46%;
		max-width: 46%;
	}

	.fpg-wrapper.fpg-map-active .fpg-grid {
		grid-template-columns: 1fr;
	}

	.fpg-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* ============================================================================
   RESPONSIVE — MOBILE  ≤ 680px
   The filter bar collapses to a single toggle row. Pills expand in a panel.
   ============================================================================ */

@media (max-width: 680px) {

	/* Show the mobile toggle row */
	.fpg-mobile-row {
		display: flex;
	}

	/* Hide pills panel by default; JS adds .fpg-panel-open to show it */
	.fpg-pills-panel {
		display:       none;
		flex-direction: column;
		align-items:   stretch;
		border-top:    1px solid var(--fpg-border);
		margin-top:    12px;
		padding-top:   14px;
		gap:           12px;
	}

	.fpg-pills-panel.fpg-panel-open {
		display: flex;
	}

	/* Pills in a 2-column grid */
	.fpg-filter-pills {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap:     10px;
	}

	.fpg-pill-wrap {
		width: 100%;
	}

	.fpg-pill-select {
		width:      100%;
		box-sizing: border-box;
		height:     42px;
		font-size:  0.875rem;
	}

	/* Actions row: full-width buttons */
	.fpg-filter-actions {
		display: flex;
		gap:     10px;
	}

	.fpg-filter-btn,
	.fpg-clear-btn {
		flex:            1;
		justify-content: center;
		height:          44px;
		font-size:       0.9375rem;
	}

	/* Results bar stacks on mobile */
	.fpg-results-bar {
		flex-direction: column;
		align-items:    flex-start;
	}

	.fpg-results-bar-right {
		width:           100%;
		justify-content: space-between;
	}

	/* Card grid: single column */
	.fpg-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Map panel: full-width below cards */
	.fpg-content-row {
		flex-direction: column;
	}

	.fpg-map-panel {
		flex:       none;
		width:      100%;
		max-width:  100%;
		height:     380px;
		min-height: 0;
		position:   static;
	}
}

@media (max-width: 400px) {
	/* Very small screens: single column pills */
	.fpg-filter-pills {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   FLOOR PLAN SPECIFIC
   ───────────────────────────────────────────────────────────────────────── */

/* Price range is free text ("$450,000 – $520,000"), so it needs to wrap and
   sit a touch smaller than the single price used on home cards. */
.fpg-card-price {
	font-size:   1.125rem;
	line-height: 1.3;
	word-break:  break-word;
}

/* Virtual tour + brochure links */
.fpg-card-links {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px 16px;
	margin:    0 0 12px;
}

.fpg-card-link {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	font-family:     var(--fpg-font-body);
	font-size:       0.8125rem;
	font-weight:     500;
	color:           var(--fpg-text-muted);
	text-decoration: none;
	transition:      color 0.15s;
}

.fpg-card-link:hover {
	color:                 var(--fpg-accent);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.fpg-card-link svg { flex-shrink: 0; }

/* The [hidden] attribute must beat the display rules above — the Clear buttons
   and the active-filter badge are toggled via .prop('hidden', …) in JS. */
.fpg-clear-btn[hidden],
.fpg-active-badge[hidden],
[hidden] { display: none !important; }

/* ── Card image: floor plan renderings, not photos ────────────────────────────
   Plan images are a mix of shapes — round badge graphics, wide renderings — so
   no single aspect ratio suits them all. A fixed frame height plus `contain`
   lets each image sit whole inside the same-size box, whatever its proportions. */

.fpg-card-image-wrap {
	aspect-ratio: auto;
	height:       225px;
	background:   var(--fpg-bg);
}

.fpg-card-image {
	box-sizing:  border-box;
	width:       100%;
	height:      100%;
	max-height:  100%;
	object-fit:  contain;
	padding:     10px;
}

/* A contained image scaling up looks like it's drifting inside its frame,
   so soften the hover to a gentle lift instead. */
.fpg-card:hover .fpg-card-image { transform: scale(1.015); }