/**
 * Featured single-property landing page ("special page").
 *
 * Loaded only on kre_listing singles flagged _kre_featured. Styles the bespoke
 * sections (cinematic hero, narrative, location, offer-instructions); the
 * reused components (gallery/lightbox, facts grid, map, mortgage, lead form)
 * keep their styling from listings.css, which still loads underneath this.
 *
 * Scoped under .kre-featured so nothing here can leak into the stock listing
 * template or the rest of the site.
 *
 * @package KrittListings
 */

.kre-featured {
	--kre-gold: var(--wp--preset--color--gold, #D4A84B);
	--kre-gold-hover: var(--wp--preset--color--gold-hover, #E8C77B);
	--kre-bg: var(--wp--preset--color--bg-dark, #0A0A0A);
	--kre-bg-alt: var(--wp--preset--color--bg-dark-alt, #1C1C1C);
	--kre-light: var(--wp--preset--color--text-light, #FAFAFA);
	--kre-body: var(--wp--preset--color--text-body, #E5E5E5);
	--kre-muted: var(--wp--preset--color--text-muted, #BFBFBF);
	--kre-serif: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	--kre-sans: var(--wp--preset--font-family--outfit, "Outfit", Arial, sans-serif);
	background: var(--kre-bg);
	color: var(--kre-body);
}

.kre-featured__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 700px) {
	.kre-featured__wrap { padding: 0 20px; }
}

/* ---------------------------------------------------------------- Hero --- */

.kre-hero {
	position: relative;
	display: block;
	background-color: var(--kre-bg);
}

/* The hero photo is a real full-width <img> banner across the top — the whole
   house is visible, nothing over it — and the property details sit in a band
   directly beneath it. */
.kre-hero__photo {
	display: block;
	width: 100%;
	height: clamp(360px, 52vh, 600px);
	object-fit: cover;
	object-position: center;
}

.kre-hero__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 40px 48px;
}

/* Details band: text on the left, stats + buttons on the right (desktop);
   stacks vertically on phones. */
.kre-hero__card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 28px 56px;
}

.kre-hero__headline {
	flex: 1 1 340px;
	min-width: 0;
}
.kre-hero__headline > *:last-child {
	margin-bottom: 0;
}

.kre-hero__meta {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
.kre-hero__meta .kre-hero__stats {
	margin: 0;
}

@media (max-width: 760px) {
	.kre-hero__photo {
		height: auto;
		max-height: 60vh;
	}
	.kre-hero__inner {
		padding: 26px 20px 40px;
	}
	.kre-hero__card {
		display: block;
	}
	.kre-hero__meta {
		margin-top: 26px;
	}
}

.kre-hero__eyebrow {
	font-family: var(--kre-sans);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kre-gold);
	margin: 0 0 18px;
}

.kre-hero__status {
	display: inline-block;
	margin-left: 12px;
	padding: 4px 12px;
	border: 1px solid var(--kre-gold);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--kre-light);
	background: rgba(10, 10, 10, 0.7);
	vertical-align: middle;
	text-shadow: none;
}

.kre-hero__title {
	font-family: var(--kre-serif);
	font-weight: 400;
	color: var(--kre-light);
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.06;
	margin: 0 0 6px;
}

.kre-hero__sub {
	font-family: var(--kre-sans);
	font-size: clamp(16px, 2.2vw, 22px);
	color: var(--kre-light);
	margin: 0 0 26px;
}

.kre-hero__price {
	font-family: var(--kre-serif);
	font-size: clamp(30px, 4.5vw, 50px);
	color: var(--kre-light);
	margin: 0 0 28px;
}

.kre-hero__price span {
	font-family: var(--kre-sans);
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--kre-muted);
	text-transform: uppercase;
	margin-left: 10px;
}

.kre-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
}

.kre-hero__stats li {
	padding: 0 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	line-height: 1.2;
}

.kre-hero__stats li:first-child { padding-left: 0; border-left: 0; }

.kre-hero__stats strong {
	display: block;
	font-family: var(--kre-serif);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	color: var(--kre-light);
}

.kre-hero__stats span {
	font-family: var(--kre-sans);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kre-muted);
}

@media (max-width: 700px) {
	/* 5 stats don't fit one row on a phone; lay them out as an even 3-col grid
	   (3 + 2) so the 5th ("Built") never orphans onto a line by itself. */
	.kre-hero__stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px 14px;
	}
	.kre-hero__stats li,
	.kre-hero__stats li:first-child {
		padding: 0;
		border-left: 0;
	}
}

.kre-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ----------------------------------------------------------- Buttons --- */

.kre-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 28px;
	border-radius: 4px;
	font-family: var(--kre-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.kre-btn--gold {
	background: var(--kre-gold);
	color: #0A0A0A;
}

.kre-btn--gold:hover { background: var(--kre-gold-hover); color: #0A0A0A; }

.kre-btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	color: var(--kre-light);
	border-color: rgba(255, 255, 255, 0.28);
}

.kre-btn--ghost:hover { border-color: var(--kre-gold); color: var(--kre-gold); }

.kre-btn svg { flex: none; }

/* --------------------------------------------------------- Sections --- */

.kre-section { padding: 88px 0; }
.kre-section--tight { padding: 60px 0; }
.kre-section--alt { background: var(--kre-bg-alt); }

@media (max-width: 700px) {
	.kre-section { padding: 56px 0; }
}

.kre-section__eyebrow {
	font-family: var(--kre-sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kre-gold);
	margin: 0 0 14px;
}

.kre-section__heading {
	font-family: var(--kre-serif);
	font-weight: 400;
	color: var(--kre-light);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	margin: 0 0 28px;
}

.kre-section__heading em {
	font-style: italic;
	color: var(--kre-gold);
}

/* ------------------------------------------------------- Narrative --- */

.kre-narrative {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.kre-narrative__lead {
	font-family: var(--kre-serif);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.35;
	color: var(--kre-light);
	margin: 0;
}

.kre-narrative__body p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--kre-body);
	margin: 0 0 18px;
}

.kre-narrative__body p:last-child { margin-bottom: 0; }

.kre-narrative__note {
	margin-top: 24px;
	padding: 16px 20px;
	border-left: 3px solid var(--kre-gold);
	background: rgba(212, 168, 75, 0.07);
	font-size: 15px;
	color: var(--kre-muted);
	border-radius: 0 4px 4px 0;
}

.kre-narrative__note strong { color: var(--kre-light); }

@media (max-width: 860px) {
	.kre-narrative { grid-template-columns: 1fr; gap: 28px; }
}

/* -------------------------------------------------------- Location --- */

.kre-location__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
	margin-top: 12px;
	grid-auto-rows: 1fr;
}

.kre-location__card {
	background: var(--kre-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 8px;
	padding: 26px 24px;
}

.kre-section--alt .kre-location__card { background: var(--kre-bg-alt); border-color: rgba(255,255,255,0.05); }

.kre-location__card h3 {
	font-family: var(--kre-serif);
	font-weight: 400;
	font-size: 21px;
	color: var(--kre-gold);
	margin: 0 0 10px;
}

.kre-location__card p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--kre-body);
	margin: 0;
}

/* ----------------------------------------------------- Contact CTA --- */

.kre-cta-band {
	text-align: center;
	background:
		linear-gradient(rgba(10,10,10,0.86), rgba(10,10,10,0.86));
	border-top: 1px solid rgba(212, 168, 75, 0.25);
	border-bottom: 1px solid rgba(212, 168, 75, 0.25);
}

.kre-cta-band__inner { max-width: 720px; margin: 0 auto; text-align: center; }

.kre-cta-band .kre-section__heading { margin-bottom: 16px; }

.kre-cta-band__sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--kre-muted);
	margin: 0 auto 30px;
	max-width: 560px;
}

.kre-cta-band .kre-hero__cta { justify-content: center; }

/* ------------------------------------------------- Attribution --- */

.kre-attribution {
	padding: 30px 0 70px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--kre-muted);
}

.kre-attribution a { color: var(--kre-gold); }

.kre-attribution p { margin: 0 0 8px; max-width: 900px; }