/* =========================================================================
   Home page (front-page.php). Built on design tokens + reuses .pcard grid.
   ========================================================================= */

/* ---- Hero ---------------------------------------------------------------- */
.hero { background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
.hero__title { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5); }
.hero__lede { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 46ch; margin-bottom: var(--space-6); }
.hero__search { display: flex; gap: var(--space-2); max-width: 520px; position: relative; margin-bottom: var(--space-4); }
.hero__search .field { padding-left: 2.5rem; }
.hero__search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 1.1rem; }
.hero__search .btn { flex-shrink: 0; }
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Hero visual panel (map teaser + featured card overlay) */
.hero__panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 360px; background: linear-gradient(135deg, #dfe7e0, #cdd9d3); }
.hero__panel-map { position: absolute; inset: 0; background:
	repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.5) 38px 40px),
	repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.5) 46px 48px),
	radial-gradient(circle at 75% 80%, #bcd3d6 0 90px, transparent 90px); }
.hero__panel-badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; }
.hero__panel-card { position: absolute; left: var(--space-4); bottom: var(--space-4); right: 30%; padding: var(--space-4); z-index: 2; }
.hero__panel-card h3 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.hero__panel-price { margin: 0; font-weight: var(--weight-semibold); }
.hero__panel-price span { color: var(--color-text-muted); font-weight: var(--weight-regular); font-size: var(--text-sm); }

/* ---- Stats --------------------------------------------------------------- */
.stats { border-bottom: 1px solid var(--color-divider); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.stat-n { font-family: var(--font-display); font-size: var(--text-stat); line-height: var(--lh-stat); font-weight: var(--weight-semibold); }
.stat-l { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---- Section scaffolding ------------------------------------------------- */
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.section__sub { color: var(--color-text-muted); margin-top: var(--space-1); }
.section__link { font-weight: var(--weight-semibold); color: var(--color-accent); white-space: nowrap; }

/* ---- Map teaser ---------------------------------------------------------- */
.mapteaser__panel { display: grid; place-items: center; height: 420px; border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #dfe7e0, #cdd9d3);
	background-image:
		repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.5) 46px 48px),
		repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.5) 54px 56px);
}
.mapteaser__hint { background: var(--paper); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font-weight: var(--weight-semibold); color: var(--color-text); }
.mapteaser__panel:hover { text-decoration: none; }

/* ---- Value props --------------------------------------------------------- */
.valueprops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
.valueprop__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-accent); font-size: 1.25rem; margin-bottom: var(--space-3); }
.valueprop h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.valueprop p { color: var(--color-text-secondary); }

/* ---- Membership CTA ------------------------------------------------------ */
.membercta { background: linear-gradient(135deg, #4a6fa5, #6d8cc0); color: #fff; }
.membercta__inner { text-align: center; }
.membercta__title { color: #fff; font-size: var(--text-h1); margin-bottom: var(--space-4); }
.membercta__copy { color: rgba(255,255,255,.85); max-width: 52ch; margin: 0 auto var(--space-5); }
.membercta__price { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; color: rgba(255,255,255,.9); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.membercta__price em { font-style: normal; color: #fff; font-weight: var(--weight-semibold); }
.membercta__dot { opacity: .5; }
.membercta__actions { display: flex; gap: var(--space-3); justify-content: center; }
.membercta__actions .btn { background: #fff; color: #2f4a75; border-color: #fff; }
.membercta__actions .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
	.hero__panel { min-height: 280px; }
	.valueprops { grid-template-columns: 1fr; }
	.stats__grid { gap: var(--space-4); }
}
@media (max-width: 560px) {
	.stats__grid { grid-template-columns: 1fr; }
	.hero__search { flex-direction: column; }
	.membercta__actions { flex-direction: column; }
}