/*
 * Estate listing and detail — implements the client's Figma design.
 *
 * Measured from the 1512px export: container 1256px, card 408px, grid gap 16px,
 * card image 350px tall. Built on the site's own custom properties, which Bricks
 * emits into :root on every page; each var() carries a literal fallback.
 *
 * The site's .wm-card class is deliberately NOT reused: Bricks has cssLoading
 * unset and no global-classes stylesheet, so global class CSS is inlined only on
 * pages where a Bricks element uses the class. Markup rendered by this plugin
 * would inherit nothing.
 */

/* The site publishes separate tokens per width instead of redefining one, so
   these have to be switched over explicitly - reading only --wm-padding__section
   keeps 128px on phones while the rest of the site drops to 64. */
.laner-estates {
	--laner-section-padding: var(--wm-padding__section, 128px);
	--laner-gutter: var(--wm-padding__container, 40px);
}

.laner-estates *,
.laner-estates *::before,
.laner-estates *::after {
	box-sizing: border-box;
}

/* ------------------------------ LAYOUT ------------------------------ */

.laner-section {
	padding-block: var(--laner-section-padding);
}

.laner-section--green {
	background: var(--wm-color__green, #2E4C44);
	color: var(--wm-color__white, #fff);
}

.laner-section--tint {
	background: var(--wm-color__green-50, #F3F6F5);
}

.laner-section--flush {
	padding-block: 0;
}

/* Content is 1256px wide, with the container padding kept as a minimum gutter
   on narrower viewports. The rest of the site resolves to 1176 — estates are
   deliberately wider until the full redesign lands. */
.laner-container {
	box-sizing: border-box;
	width: min(100% - 2 * var(--laner-gutter), 1256px);
	margin-inline: auto;
}

/* ------------------------------ TYPE ------------------------------ */

.laner-h1 {
	font-size: var(--wm-font-size__h1, 6.4rem);
	line-height: var(--wm-line-height__tight, 1.2);
	text-transform: uppercase;
	color: var(--wm-color__white, #fff);
	margin: 0;
	text-wrap: balance;
}

.laner-h2 {
	font-size: var(--wm-font-size__h2, 5.6rem);
	line-height: var(--wm-line-height__tight, 1.2);
	text-transform: uppercase;
	margin: 0 0 32px;
}

.laner-lead {
	color: var(--wm-color__green-light, #97B09B);
	font-size: var(--wm-font-size__default, 1.8rem);
	line-height: 1.6;
	max-width: 740px;
	margin: 24px 0 0;
}

.laner-label {
	display: block;
	/* Sage on white is only 2.3:1. The design's own label green measures 4.07:1,
	   still under AA; the site's meta token is visually the same and reaches 5.19:1. */
	color: var(--wm-color__green-muted, #67705C);
	font-size: var(--wm-font-size__small, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

/* ------------------------------ BUTTONS ------------------------------ */

.laner-btn {
	display: inline-block;
	/* The class lands on a <button> too - the detail's call to action opens a popup
	   and navigates nowhere. A button inherits none of these three, and Bricks'
	   frontend.min.css happens to normalise them for us; stating them keeps the class
	   working on its own. font-family rather than the font shorthand, which would
	   clobber the font-size below. */
	font-family: inherit;
	text-align: inherit;
	cursor: pointer;
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: 0;
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--wm-font-size__small, 1.6rem);
	letter-spacing: 0.02em;
	line-height: normal;
	background: var(--wm-color__green, #2E4C44);
	color: var(--wm-color__white, #fff);
	transition: transform var(--wm-transition-duration__default, 0.5s) ease;
}

.laner-btn:hover {
	transform: translateY(-5px);
}

/* Every other focusable thing this stylesheet owns has one, and the button needs it
   most: the browser default resolves to a white ring on the white price column.
   Deliberately not button.laner-btn - that would outrank .laner-price__cta and take
   its display: block, and with it the 32px margin collapse, along for the ride. */
.laner-btn:focus-visible {
	outline: 2px solid var(--wm-color__green, #2E4C44);
	outline-offset: 3px;
}

/* ------------------------------ TAGS ------------------------------ */

.laner-tag {
	display: inline-block;
	background: var(--wm-color__green-200, #E2E9E3);
	color: var(--wm-color__green, #2E4C44);
	font-size: var(--wm-font-size__small, 1.6rem);
	padding: 6px 16px;
	border-radius: 100px;
}

/* Outlined variant, used on the dark detail header. */
.laner-tag--outline {
	background: none;
	border: 1px solid var(--wm-color__green-light, #97B09B);
	color: var(--wm-color__green-light, #97B09B);
}

/* The only new colour in the design: the site has no warning tone, so this is
   derived from the sage accent rather than borrowed from outside the palette. */
.laner-tag--reserved {
	background: #F0E3C4;
	color: #6B5310;
}

.laner-tag--sold {
	background: var(--wm-color__green-900, #1F2118);
	color: var(--wm-color__white, #fff);
}

/* ------------------------------ GRID + CARD ------------------------------ */

.laner-grid {
	display: grid;
	grid-template-columns: repeat(var(--laner-columns, 3), minmax(0, 1fr));
	/* The design uses different gaps per axis: 16px between columns, but a much
	   larger row gap so one card visibly ends before the next begins. */
	column-gap: 16px;
	row-gap: 40px;
}

.laner-card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform var(--wm-transition-duration__default, 0.5s) ease;
}

.laner-card:hover {
	transform: translateY(-5px);
}

.laner-card:focus-visible {
	outline: 2px solid var(--wm-color__green, #2E4C44);
	outline-offset: 4px;
}

.laner-card__media {
	position: relative;
	overflow: hidden;
	height: 350px;
	margin-bottom: 24px;
	background: #D9D9D9;
}

.laner-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.laner-card__media .laner-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}

.laner-card__meta {
	color: var(--wm-color__green-muted, #67705C);
	font-size: var(--wm-font-size__small, 1.6rem);
	margin: 0 0 8px;
}

.laner-card__title {
	color: var(--wm-color__green, #2E4C44);
	text-transform: uppercase;
	font-size: var(--wm-font-size__h5, 2rem);
	line-height: var(--wm-line-height__tight, 1.2);
	margin: 0 0 12px;
}

.laner-card__price {
	color: var(--wm-color__green-900, #1F2118);
	font-weight: 700;
	font-size: var(--wm-font-size__h5, 2rem);
	text-transform: uppercase;
	margin: 0 0 12px;
}

.laner-card__price del {
	display: block;
	font-weight: 400;
	font-size: var(--wm-font-size__small, 1.6rem);
	color: var(--wm-color__green-muted, #67705C);
	text-transform: none;
}

.laner-card__detail {
	color: var(--wm-color__green, #2E4C44);
	text-decoration: underline;
	font-size: var(--wm-font-size__small, 1.6rem);
	transition: color var(--wm-transition-duration__default, 0.5s) ease;
}

.laner-card:hover .laner-card__detail {
	color: var(--wm-color__black, #000);
}

.laner-empty {
	color: var(--wm-color__green-muted, #67705C);
	margin: 0;
}

/* ------------------------------ DETAIL HEADER ------------------------------ */

.laner-detail__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 64px;
}

.laner-back {
	color: var(--wm-color__green-light, #97B09B);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wm-font-size__small, 1.6rem);
}

.laner-back:hover {
	text-decoration: underline;
}

.laner-detail__tags {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.laner-detail__date {
	color: var(--wm-color__green-light, #97B09B);
	font-size: var(--wm-font-size__small, 1.6rem);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------ HERO PHOTO + STRIP ------------------------------ */

.laner-hero-photo {
	position: relative;
	background: #D9D9D9;
}

.laner-hero-photo img {
	display: block;
	width: 100%;
	height: 800px;
	object-fit: cover;
}

/* Sits on the hero's bottom edge, but its right edge lines up with the content
   container rather than the window — same computation as .laner-container. */
.laner-strip__controls {
	position: absolute;
	right: max(var(--laner-gutter), (100% - 1256px) / 2);
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: stretch;
	gap: 4px;
}

.laner-strip__button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--wm-color__green-light, #97B09B);
	color: var(--wm-color__green, #2E4C44);
	cursor: pointer;
	transition: background var(--wm-transition-duration__default, 0.5s) ease;
}

.laner-strip__button:hover {
	background: var(--wm-color__white, #fff);
}

.laner-strip__button:focus-visible {
	outline: 2px solid var(--wm-color__white, #fff);
	outline-offset: -4px;
}

.laner-strip__icon {
	display: block;
}

.laner-strip__counter {
	display: grid;
	place-items: center;
	width: 87px;
	height: 48px;
	background: var(--wm-color__white, #fff);
	color: var(--wm-color__green-900, #1F2118);
	font-variant-numeric: tabular-nums;
}

/* Full-bleed strip: fixed 360px tiles with an 8px gap, running off both edges. */
.laner-strip {
	margin-top: 8px;
}

.laner-strip .splide__slide a {
	display: block;
	overflow: hidden;
	line-height: 0;
	background: #D9D9D9;
}

.laner-strip .splide__slide img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform var(--wm-transition-duration__default, 0.5s) ease;
}

.laner-strip .splide__slide a:hover img {
	transform: scale(1.04);
}

.laner-strip .splide__slide a:focus-visible {
	outline: 2px solid var(--wm-color__green, #2E4C44);
	outline-offset: -2px;
}

/* ------------------------------ INFO ------------------------------ */

/* Parameters on the narrow left, description on the wide right. */
.laner-info {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 96px;
	align-items: start;
}

.laner-params {
	margin: 0;
}

.laner-params__row + .laner-params__row {
	margin-top: 32px;
}

.laner-params dt {
	color: var(--wm-color__green-muted, #67705C);
	font-size: var(--wm-font-size__small, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 4px;
}

.laner-params dd {
	margin: 0;
	color: var(--wm-color__green-900, #1F2118);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.35;
}

/* Jump links to the media sections. Layout only: the buttons themselves are the
   site's own bricks-button + wm-btn--outline, so they stay in step with the rest of
   the design system rather than being reproduced here. */
.laner-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

/* The theme's design system lifts a button on hover rather than recolouring it, but
   its rule is scoped to .brxe-button - the class Bricks puts on its own button
   element, which this markup is not and should not pretend to be. Same 5px, and the
   transition is already on the element from the Bricks theme style for buttons, so
   only the transform belongs here. */
.laner-jump a:hover {
	transform: translateY(-5px);
}

.laner-price {
	margin-top: 48px;
}

.laner-price__value {
	font-size: var(--wm-font-size__h3, 4rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: var(--wm-color__green-900, #1F2118);
}

.laner-price__original {
	display: block;
	font-size: var(--wm-font-size__small, 1.6rem);
	font-weight: 400;
	color: var(--wm-color__green-muted, #67705C);
	text-transform: none;
	margin-bottom: 16px;
}

/* What the price is composed of: commission, deposit, recurring fees. */
.laner-price__notes {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	color: var(--wm-color__green-muted, #67705C);
	font-size: var(--wm-font-size__small, 1.6rem);
	line-height: 1.5;
}

.laner-broker {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--wm-color__green-200, #E2E9E3);
}

.laner-broker__photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.laner-broker__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--wm-font-size__small, 1.6rem);
	line-height: 1.4;
	min-width: 0;
}

.laner-broker__name {
	font-weight: 700;
	color: var(--wm-color__green-900, #1F2118);
}

.laner-broker__body a {
	color: var(--wm-color__green-muted, #67705C);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.laner-broker__body a:hover,
.laner-broker__body a:focus-visible {
	color: var(--wm-color__green, #2E4C44);
	text-decoration: underline;
}

/* Closes the price block, at its own width rather than the column's - the design
   draws it inline. Deliberately still a block box and not the inline-block .laner-btn
   defaults to: only a block box's top margin collapses with what precedes it, and
   .laner-broker above it has no bottom margin while an estate without a broker leaves
   the price notes' 24px there instead. Collapsing keeps the gap at 32px either way;
   inline-block would add the two together on the second case. */
.laner-price__cta {
	display: block;
	width: fit-content;
	margin-top: 32px;
}

.laner-prose {
	line-height: 1.6;
	color: var(--wm-color__green-900, #1F2118);
}

.laner-prose p {
	margin: 0 0 24px;
}

.laner-prose p:last-child {
	margin-bottom: 0;
}

/* ------------------------------ SPECS ------------------------------ */

/* The full parameter table. Rendered from Estates\Fields, so the number of groups
   and rows varies per estate - a plot fills two groups, a house eight. */

.laner-specs__heading {
	color: var(--wm-color__green, #2E4C44);
	margin: 0 0 48px;
}

.laner-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 96px;
	align-items: start;
}

.laner-specs__title {
	font-size: var(--wm-font-size__h5, 2rem);
	line-height: var(--wm-line-height__tight, 1.2);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wm-color__green, #2E4C44);
	margin: 0 0 16px;
}

.laner-specs__list {
	margin: 0;
}

.laner-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 16px;
	padding-block: 12px;
	border-top: 1px solid var(--wm-color__green-200, #E2E9E3);
}

.laner-specs__row:last-child {
	border-bottom: 1px solid var(--wm-color__green-200, #E2E9E3);
}

.laner-specs__row dt {
	margin: 0;
	color: var(--wm-color__green-muted, #67705C);
	font-size: var(--wm-font-size__small, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Deliberately not uppercase, unlike .laner-params: these values run long
   ("Kompletní síť obchodů a služeb") and caps make them unreadable. */
.laner-specs__row dd {
	margin: 0;
	color: var(--wm-color__green-900, #1F2118);
	font-weight: 600;
	line-height: 1.35;
}

/* ------------------------------ GALLERY ------------------------------ */

.laner-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.laner-gallery a {
	display: block;
	overflow: hidden;
	line-height: 0;
	background: #D9D9D9;
}

/* Photos past the seventh stay in the DOM so PhotoSwipe can page through to the end -
   only the page hides them. Must come after .laner-gallery a: the two selectors are
   equally specific and source order is what decides. */
.laner-gallery a.laner-gallery__rest {
	display: none;
}

/* The feed normalises every image to 3:2, and a fixed height was tuned for the two
   columns this grid used to have. */
.laner-gallery img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--wm-transition-duration__default, 0.5s) ease;
}

.laner-gallery a:hover img {
	transform: scale(1.04);
}

.laner-gallery a:focus-visible {
	outline: 2px solid var(--wm-color__green, #2E4C44);
	outline-offset: 3px;
}

/* The tile standing in for the eighth photo. It is a real gallery link, so the
   label sits over the photo it opens rather than replacing it. */
.laner-gallery__more {
	position: relative;
}

.laner-gallery__more::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(46, 76, 68, 0.72);
}

.laner-gallery__label {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 16px;
	/* .laner-gallery a zeroes line-height for the images. */
	line-height: 1.3;
	color: var(--wm-color__white, #fff);
	font-size: var(--wm-font-size__h4, 2.4rem);
	font-weight: 600;
	text-align: center;
}

.laner-media__heading {
	margin: 0 0 40px;
	/* The anchor target. Without this the heading lands flush against the top of the
	   viewport and reads as if the section had no top edge. */
	scroll-margin-top: 32px;
	color: var(--wm-color__green, #2E4C44);
}

/* minmax(0, 1fr) rather than the implicit auto column: a .laner-video--tour whose
   min-height beats its ratio derives its width from that height, and an auto column
   would widen to fit it instead of clipping - 512px of video inside a 380px phone. */
.laner-videos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 32px;
}

.laner-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.laner-video iframe,
.laner-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* A 3D tour has its own chrome along the bottom and wants more vertical room.
   max-width is load-bearing: once min-height beats the ratio the box derives its
   width from that height instead - 320px of height asks for 512px of width on a
   phone - and without this it would run straight past the container. */
.laner-video--tour {
	aspect-ratio: 16 / 10;
	min-height: 420px;
	max-width: 100%;
}

/* ------------------------------ MAP ------------------------------ */

.laner-map__heading {
	padding-block: var(--laner-section-padding) 40px;
}

.laner-map__heading .laner-h2 {
	color: var(--wm-color__green, #2E4C44);
}

.laner-map {
	position: relative;
}

.laner-map__canvas {
	width: 100%;
	height: 700px;
	background: #D9D9D9;
}

/* Leaflet sets its own z-index stack and it starts high enough to punch through
   anything the page puts after the map. Pin it to the bottom of ours. */
.laner-map__canvas.leaflet-container {
	z-index: 1;
	font: inherit;
}

/* ------------------------------ SOLD ------------------------------ */

.laner-sold {
	background: var(--wm-color__green-50, #F3F6F5);
	padding: 48px;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

.laner-sold h2 {
	font-size: var(--wm-font-size__h4, 2.4rem);
	text-transform: uppercase;
	margin: 24px 0 16px;
}

.laner-sold p {
	color: var(--wm-color__green-muted, #67705C);
	line-height: 1.6;
	margin: 0 0 32px;
}

/* ------------------------------ RESPONSIVE ------------------------------ */
/* The site's own breakpoints: 1024 / 760 / 480. */

@media (max-width: 1024px) {
	.laner-estates {
		--laner-section-padding: var(--wm-padding__section_tablet, 96px);
	}

	.laner-grid {
		grid-template-columns: repeat(min(var(--laner-columns, 3), 2), minmax(0, 1fr));
	}

	.laner-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.laner-specs {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.laner-hero-photo img {
		height: 460px;
	}

	.laner-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.laner-map__canvas {
		height: 520px;
	}
}

@media (max-width: 760px) {
	.laner-estates {
		--laner-section-padding: var(--wm-padding__section_mobile, 64px);
		--laner-gutter: var(--wm-padding__container_mobile, 20px);
	}

	.laner-grid {
		grid-template-columns: 1fr;
	}

	.laner-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.laner-specs__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.laner-video--tour {
		min-height: 320px;
	}

	.laner-detail__top {
		margin-bottom: 40px;
	}

	.laner-hero-photo img {
		height: 280px;
	}

	.laner-strip .splide__slide img {
		height: 160px;
	}

	.laner-map__canvas {
		height: 380px;
	}

	.laner-sold {
		padding: 32px 24px;
	}
}

@media (max-width: 480px) {
	.laner-gallery {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.laner-card,
	.laner-btn,
	.laner-jump a,
	.laner-gallery img,
	.laner-card__detail,
	.laner-strip__button,
	.laner-strip .splide__slide img {
		transition: none;
	}

	.laner-card:hover,
	.laner-btn:hover,
	.laner-jump a:hover {
		transform: none;
	}
}