/**
 * Single listing layout — editorial property-sheet styling.
 *
 * Retune the whole page from these tokens; every rule below reads from them.
 * Put overrides in Appearance > Customize > Additional CSS under `.ll-detail`.
 */

.ll-detail {
	--ll-d-ink: #1a1c1a;
	--ll-d-soft: #6d6f6b;
	--ll-d-line: #e0dcd4;
	--ll-d-paper: #fbf8f3;
	--ll-d-accent: var(--ll-accent, #14532d);
	--ll-d-accent-ink: #ffffff;

	/* Display face. Inherits the theme's heading font by default — set this to
	   a serif (e.g. Georgia, serif) for a more traditional look. */
	--ll-d-display: inherit;
	--ll-d-tracking: 0.06em;

	--ll-d-gutter: clamp(20px, 5vw, 64px);
	--ll-d-measure: 1180px;

	/* Hero framing. A taller hero crops less; --ll-d-focus sets which part of
	   the photo survives the crop (lower % keeps more of the top). */
	--ll-d-hero-height: clamp(320px, 68vh, 760px);
	--ll-d-focus: 32%;

	color: var(--ll-d-ink);
	background: var(--ll-d-paper);
	padding-bottom: clamp(48px, 8vw, 110px);
	box-sizing: border-box;
}

.ll-detail *,
.ll-detail *::before,
.ll-detail *::after {
	box-sizing: inherit;
}

/* Break out of a theme's content container so the hero runs edge to edge.

   --ll-vw is set from document.documentElement.clientWidth, which excludes a
   classic scrollbar; 100vw does not, and using it here pushes the page ~15px
   wider than the viewport on Windows and gives every page a horizontal
   scrollbar. 100vw stays as the no-JS fallback. */
.ll-detail {
	width: var(--ll-vw, 100vw);
	max-width: var(--ll-vw, 100vw);
	margin-left: calc(50% - var(--ll-vw, 100vw) / 2);
	margin-right: calc(50% - var(--ll-vw, 100vw) / 2);
}

.ll-detail-inner {
	max-width: var(--ll-d-measure);
	margin: 0 auto;
	padding: 0 var(--ll-d-gutter);
}

/* ------------------------------------------------------------------ hero */

.ll-hero {
	position: relative;
	background: #11130f;
	margin-bottom: clamp(28px, 5vw, 56px);
}

.ll-hero-stage {
	position: relative;
	height: var(--ll-d-hero-height, clamp(320px, 68vh, 760px));
	overflow: hidden;
}

.ll-hero-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.ll-hero-slide.is-current {
	opacity: 1;
	pointer-events: auto;
}

.ll-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A full-bleed hero is far wider than a 3:2 photo, so cover has to crop.
	   Centring it takes equal bites out of the top and bottom, which costs you
	   the roofline. Biasing the window upwards keeps the building and gives up
	   foreground lawn instead. Raise towards 50% to re-centre. */
	object-position: center var(--ll-d-focus, 32%);
	display: block;
}

.ll-detail .ll-hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: #1a1c1a;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ll-detail .ll-hero-nav:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}

.ll-hero-prev {
	left: clamp(10px, 2vw, 26px);
}

.ll-hero-next {
	right: clamp(10px, 2vw, 26px);
}

.ll-detail .ll-hero-all {
	position: absolute;
	right: clamp(12px, 2.5vw, 30px);
	bottom: clamp(12px, 2.5vw, 30px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, 0.93);
	color: #1a1c1a;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 13px 20px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ll-detail .ll-hero-all:hover {
	background: #fff;
}

.ll-hero-count {
	position: absolute;
	left: clamp(12px, 2.5vw, 30px);
	bottom: clamp(12px, 2.5vw, 30px);
	z-index: 3;
	margin: 0;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.ll-hero-thumbs {
	display: flex;
	gap: 2px;
	height: clamp(62px, 7.5vw, 104px);
	overflow-x: auto;
	scrollbar-width: thin;
	background: #11130f;
}

.ll-detail .ll-hero-thumb {
	/* The strip sets the height, so thumbs can grow sideways to fill it
	   exactly when there are few photos, and hold their basis and scroll
	   once there are many. No leftover strip of background either way. */
	flex: 1 0 clamp(88px, 12vw, 168px);
	height: 100%;
	appearance: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease;
	background: none;
}

.ll-detail .ll-hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ll-detail .ll-hero-thumb:hover {
	opacity: 0.85;
}

.ll-detail .ll-hero-thumb.is-current {
	opacity: 1;
}

/* ------------------------------------------------------------------ head */

.ll-detail-head {
	max-width: var(--ll-d-measure);
	margin: 0 auto;
	padding: 0 var(--ll-d-gutter) clamp(26px, 4vw, 44px);
	border-bottom: 1px solid var(--ll-d-line);
}

.ll-detail .ll-detail-badge {
	display: inline-block;
	margin: 0 0 18px;
	background: var(--ll-badge, #1f8a4c);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 9px 18px;
}

.ll-detail .ll-detail-title {
	margin: 0;
	font-family: var(--ll-d-display);
	font-size: clamp(2rem, 5.6vw, 4rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: var(--ll-d-tracking);
	text-transform: uppercase;
	color: var(--ll-d-ink);
}

.ll-detail .ll-detail-address {
	margin: 14px 0 0;
	font-size: clamp(0.85rem, 1.5vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ll-d-soft);
}

.ll-detail .ll-detail-price {
	margin: clamp(18px, 3vw, 30px) 0 0;
	font-family: var(--ll-d-display);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--ll-d-ink);
}

.ll-detail .ll-detail-price span {
	font-size: 0.5em;
	letter-spacing: 0.08em;
	color: var(--ll-d-soft);
}

/* ------------------------------------------------------------------ body */

.ll-detail-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-top: clamp(30px, 5vw, 56px);
}

.ll-detail-facts {
	list-style: none;
	margin: 0 0 clamp(30px, 4vw, 46px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 1px;
	background: var(--ll-d-line);
	border: 1px solid var(--ll-d-line);
}

.ll-detail-facts li {
	background: var(--ll-d-paper);
	padding: clamp(16px, 2.5vw, 26px) 12px;
	text-align: center;
}

.ll-detail-facts strong {
	display: block;
	font-family: var(--ll-d-display);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.1;
}

.ll-detail-facts li.is-text strong {
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	line-height: 1.35;
	text-wrap: balance;
}

.ll-detail-facts span {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ll-d-soft);
}

/* Description, clamped until "Read more" */

.ll-detail-description {
	margin-bottom: clamp(34px, 5vw, 56px);
}

.ll-detail-prose {
	font-size: clamp(1rem, 1.2vw, 1.075rem);
	line-height: 1.8;
	color: #35383a;
	max-width: 70ch;
}

.ll-detail-prose > *:first-child {
	margin-top: 0;
}

.ll-detail-description.is-clamped .ll-detail-prose {
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ll-detail .ll-read-more {
	margin-top: 14px;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0 0 2px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ll-d-accent);
	cursor: pointer;
}

/* ---------------------------------------------------------- section bits */

.ll-detail-section {
	margin-bottom: clamp(38px, 6vw, 68px);
}

.ll-detail .ll-detail-h2 {
	margin: 0 0 clamp(16px, 2.4vw, 26px);
	font-family: var(--ll-d-display);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ll-d-ink);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ll-d-line);
}

.ll-detail .ll-embed {
	border-radius: 0;
}

.ll-detail-map {
	height: clamp(300px, 42vh, 460px);
	background: #eee9e1;
	border: 1px solid var(--ll-d-line);
}

/* ----------------------------------------------------------- spec tables */

.ll-spec-group + .ll-spec-group {
	margin-top: clamp(24px, 3.5vw, 40px);
}

.ll-detail .ll-spec-title {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ll-d-accent);
}

.ll-spec-list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 clamp(24px, 4vw, 56px);
}

.ll-spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 13px 0;
	border-bottom: 1px solid var(--ll-d-line);
}

.ll-detail .ll-spec-row dt {
	flex: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ll-d-soft);
}

.ll-detail .ll-spec-row dd {
	margin: 0;
	text-align: right;
	font-size: 0.95rem;
	color: var(--ll-d-ink);
}

/* -------------------------------------------------------- similar listings */

/* The inner .ll-app is a styling scope only — it carries no data-ll-app, so the
   map script never tries to boot a second instance off it. */
.ll-similar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
}

.ll-similar-grid .ll-card {
	background: #fff;
}

/* ------------------------------------------------------------- side rail */

.ll-detail-aside {
	position: sticky;
	top: 24px;
}

.ll-enquire {
	background: #fff;
	border: 1px solid var(--ll-d-line);
	padding: clamp(22px, 3vw, 32px);
}

.ll-detail .ll-enquire-price {
	margin: 0 0 18px;
	font-family: var(--ll-d-display);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.ll-detail .ll-enquire-price span {
	font-size: 0.5em;
	color: var(--ll-d-soft);
}

.ll-enquire-meta {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.ll-enquire-meta li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--ll-d-line);
}

.ll-enquire-meta span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ll-d-soft);
}

.ll-enquire-meta strong {
	font-weight: 500;
	text-align: right;
	font-size: 0.92rem;
}

.ll-detail .ll-btn {
	display: inline-block;
	background: var(--ll-d-accent);
	color: var(--ll-d-accent-ink) !important;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 26px;
	border-radius: 0;
	text-align: center;
	transition: opacity 0.2s ease;
}

.ll-detail .ll-btn:hover {
	opacity: 0.88;
}

.ll-detail .ll-btn-ghost {
	background: transparent;
	color: var(--ll-d-accent) !important;
	border: 1px solid var(--ll-d-accent);
}

.ll-detail .ll-btn-block {
	display: block;
	width: 100%;
}

.ll-detail .ll-btn-block + .ll-btn-block {
	margin-top: 10px;
}

.ll-enquire-archived {
	margin: 0;
	padding: 14px 16px;
	background: #f2efe9;
	border-left: 3px solid var(--ll-d-soft);
	font-size: 0.92rem;
	color: var(--ll-d-soft);
}

.ll-detail .ll-share {
	margin-top: 12px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	appearance: none;
	background: transparent;
	border: 1px solid var(--ll-d-line);
	border-radius: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ll-d-soft);
	padding: 13px 16px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ll-detail .ll-share:hover {
	color: var(--ll-d-ink);
	border-color: var(--ll-d-soft);
}

.ll-detail .ll-share.is-done {
	color: var(--ll-d-accent);
	border-color: var(--ll-d-accent);
}

.ll-detail .ll-enquire-back {
	display: block;
	margin-top: 18px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ll-d-soft);
	text-decoration: none;
}

.ll-detail .ll-enquire-back:hover {
	color: var(--ll-d-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------- lightbox */

.ll-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(10, 11, 10, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 56px);
}

.ll-lightbox[hidden] {
	display: none !important;
}

.ll-lightbox-stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ll-lightbox-stage img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	object-fit: contain;
	display: block;
}

.ll-lightbox button {
	position: absolute;
	appearance: none;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 12px;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.ll-lightbox button:hover {
	opacity: 1;
}

.ll-lightbox-close {
	top: clamp(8px, 2vw, 26px);
	right: clamp(8px, 2vw, 26px);
}

.ll-lightbox-prev {
	left: clamp(4px, 2vw, 30px);
	top: 50%;
	transform: translateY(-50%);
}

.ll-lightbox-next {
	right: clamp(4px, 2vw, 30px);
	top: 50%;
	transform: translateY(-50%);
}

.ll-lightbox-count {
	position: absolute;
	bottom: clamp(12px, 3vw, 30px);
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	letter-spacing: 0.1em;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1020px) {
	.ll-detail-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ll-detail-aside {
		position: static;
		order: -1;
	}
}

@media (max-width: 600px) {
	.ll-detail .ll-hero-nav {
		width: 42px;
		height: 42px;
	}

	/* Fixed two-up, so four stats read as a tidy 2x2 rather than 3 + 1. */
	.ll-detail-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ll-hero-count {
		display: none;
	}

	.ll-spec-row {
		flex-direction: column;
		gap: 3px;
	}

	.ll-detail .ll-spec-row dd {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ll-hero-slide,
	.ll-detail .ll-hero-nav,
	.ll-detail .ll-hero-thumb,
	.ll-detail .ll-btn {
		transition: none !important;
	}
}