/* Caravans for sale: search page and cards (JOB A). */
.has-lqip { background-size: cover; background-position: center; background-color: var(--mist-2, #e1eae6); }

/* Cards */
.lcard { position: relative; background: var(--surface, #fbfcfb); border: 1px solid var(--line); border-radius: var(--radius, 6px); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.lcard[hidden] { display: none; }
.lcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.lcard__link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.lcard__link:focus-visible { outline: 3px solid var(--sand); outline-offset: -3px; }
.lcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist-2); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.lcard:hover .lcard__media img { transform: scale(1.04); }
.lcard__badges { position: absolute; left: .6rem; top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.lbadge { display: inline-block; padding: .2rem .6rem; border-radius: var(--pill, 999px); background: rgba(251, 252, 251, .94); color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.4; }
.lbadge--new { background: var(--sand); color: var(--ink); }
.lbadge--status { background: var(--ink); color: var(--on-dark); }
.lbadge--example { position: absolute; right: .6rem; bottom: .6rem; background: rgba(16, 48, 44, .82); color: var(--on-dark); font-weight: 500; }
.lcard__count { position: absolute; left: .6rem; bottom: .6rem; padding: .15rem .55rem .15rem 1.6rem; border-radius: var(--pill); background: rgba(16, 48, 44, .7); color: #fff; font-size: .8rem; }
.lcard__count::before { content: ""; position: absolute; left: .55rem; top: 50%; width: .8rem; height: .6rem; margin-top: -.3rem; border: 1.5px solid #fff; border-radius: 2px; }
.lcard__body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.lcard__kicker { font-size: .85rem; color: var(--muted); font-weight: 500; }
.lcard__title { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; font-weight: 600; }
.lcard__facts { font-size: .95rem; color: var(--muted); }
.lcard__money { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; }
.lcard__price { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.lcard__fee { font-size: .85rem; color: var(--muted); }

/* Search page */
.lsearch { padding-bottom: var(--section, 5rem); }
.lsearch__head { padding-top: clamp(2rem, 5vw, 4rem); }
.lsearch__title { margin: 0 0 .5rem; }
.lsearch__intro { max-width: 52ch; color: var(--muted); }
.lsearch__intro > *:last-child { margin-bottom: 0; }
.lsearch__bar { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: 1.5rem; }
.lsearch__q { width: 100%; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 1rem; }
.lsearch__q:focus, .lsearch select:focus { outline: 3px solid var(--sand); outline-offset: 1px; }
.lsearch__sort { grid-column: 1 / -1; justify-self: end; }
.lsearch select { min-height: 44px; padding: .5rem 2rem .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); font: inherit; font-size: .95rem; color: var(--ink); max-width: 100%; }
.lsearch__open { min-height: 48px; }
.lsearch__layout { display: grid; gap: 2rem; margin-top: 1.5rem; }
.lresults__top { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.lresults__count { margin: 0; font-weight: 600; }
.lchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lchips:empty { display: none; }
.lchip { min-height: 36px; border: 1px solid var(--marsh); background: var(--surface); color: var(--ink); border-radius: var(--pill); padding: .3rem .8rem .3rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; }
.lchip::after { content: "\00d7"; margin-left: .45rem; font-weight: 600; }
.lchip--clear { border-color: transparent; background: transparent; text-decoration: underline; color: var(--marsh); }
.lchip--clear::after { content: none; }
/* Card size grows with the screen: about 3 across at 1440 and 1920, 4 at 2560, 5 on ultrawide (JOB F). */
.lgrid { --lcard-min: clamp(270px, 15vw, 380px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lcard-min)), 1fr)); gap: max(1.25rem, var(--space-m, 1.25rem)); }
.lmore { text-align: center; margin-top: 2rem; }
.lempty { padding: 2rem; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.lempty__title { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin: 0 0 .5rem; }

/* Filters */
.lfilters__top { display: flex; align-items: center; justify-content: space-between; }
.lfilters__title { margin: 0; font-size: 1.5rem; }
.lfilters__close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); }
.lfilters__body { display: grid; gap: 1.1rem; }
.lf { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.lf > span, .lf legend, .lf__label { font-weight: 600; font-size: .95rem; padding: 0; }
.lf select { width: 100%; min-width: 0; }
.lf--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lf--pair .lf__label { grid-column: 1 / -1; }
.lf--chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lf--chips legend { width: 100%; margin-bottom: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .9rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); font-size: .95rem; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.chip input:focus-visible + span { outline: 3px solid var(--sand); outline-offset: 2px; }
.lf--toggle { grid-template-columns: auto 1fr; align-items: center; gap: .75rem; cursor: pointer; }
.lf--toggle input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; background: #b7c6c1; position: relative; cursor: pointer; transition: background .2s; }
.lf--toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.lf--toggle input:checked { background: var(--marsh); }
.lf--toggle input:checked::after { transform: translateX(20px); }
.lf--toggle input:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.lf--toggle span { font-weight: 500; font-size: 1rem; }
.lfilters__foot { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding-top: 1rem; }

/* Phones: bottom sheet */
@media (max-width: 899px) {
	.lsearch .lfilters { position: fixed; inset: 0; z-index: 1000; background: rgba(16, 48, 44, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
	.lsearch .lfilters__sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--mist, #eef3f1); border-radius: 16px 16px 0 0; padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .35s var(--ease); }
	.lsearch .lfilters__sheet::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: #9fb1ab; margin: 0 auto .5rem; }
	.lsearch .lfilters__body { overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0; }
	.lsearch.is-sheet-open .lfilters { opacity: 1; visibility: visible; }
	.lsearch.is-sheet-open .lfilters__sheet { transform: none; }
	
	.lsearch__bar { grid-template-columns: 1fr auto; }
	html.lsearch-lock, html.lsearch-lock body { overflow: hidden; }
}
@media (min-width: 900px) {
	.lsearch__bar { grid-template-columns: 1fr auto; }
	.lsearch__open { display: none; }
	.lsearch__sort { grid-column: auto; }
	.lsearch__layout { grid-template-columns: 270px 1fr; align-items: start; }
	.lfilters { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
	.lfilters__close, #lf-show { display: none; }
	.lresults__top { flex-direction: row; align-items: center; flex-wrap: wrap; }
}
/* Wide screens (JOB F): filters stay as a sticky side panel that grows a little, the results use the
   rest of the width, the search bar sits beside the title, and card text scales up. */
@media (min-width: 900px) {
	.lsearch__layout { grid-template-columns: clamp(260px, 16vw, 360px) minmax(0, 1fr); gap: var(--space-l, 2rem); }
	.lfilters { top: calc(var(--header-h, 96px) + 1rem); max-height: calc(100vh - var(--header-h, 96px) - 2rem); }
}
@media (min-width: 1440px) {
	.lsearch__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-l); align-items: end; }
	.lsearch__title, .lsearch__intro { grid-column: 1; }
	.lsearch__bar { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
	.lcard__title { font-size: var(--step-2, 1.45rem); }
	.lcard__price { font-size: var(--step-3, 1.6rem); }
	.lcard__body { padding: var(--space-s) calc(var(--space-s) + .2rem) calc(var(--space-s) + .15rem); }
}
@media (prefers-reduced-motion: reduce) {
	.lcard, .lcard__media img, .lfilters, .lfilters__sheet { transition: none !important; }
}

/* Phones: no zoom on tap (inputs and selects at 16px or more). */
.lsearch select, .lsearch input[type="search"] { font-size: max(16px, 1rem); }

/* Call and book in the first screen */
.lsearch__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.lsearch__cta .btn { min-height: 44px; }
@media (max-width: 899px) {
	.lsearch__cta { flex-wrap: nowrap; margin-top: .85rem; }
	.lsearch__cta .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: .5rem .6rem; font-size: .95rem; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; }
	.pgroup__acts .btn { flex: 1 1 0; min-width: 0; padding-inline: .6rem; white-space: normal; line-height: 1.15; }
	.has-lfab .cgl-consent:not(.is-top), body:has(#lf-fab) .cgl-consent:not(.is-top) { bottom: 80px; }
	body.single-property .cgl-consent:not(.is-top) { bottom: 80px; }
}
@media (min-width: 1440px) {
	.lsearch__cta { grid-column: 1; }
	.lsearch__bar { grid-row: 1 / span 3; }
}

/* By park: jump chips */
.pchips { display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 0 1.25rem; padding-bottom: .25rem; }
.pchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.pchip:hover, .pchip:focus-visible { border-color: var(--ink); }
.pchip:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.pchip[hidden] { display: none; }
.pchip__n { min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--mist-2, #e1eae6); font-weight: 600; font-size: .85rem; text-align: center; }
.pchip.is-none { color: var(--muted); }

/* By park: one section per park */
.pgroups { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.pgroup { min-width: 0; scroll-margin-top: calc(var(--header-h, 96px) + 1rem); }
.pgroup[hidden] { display: none; }
.pgroup__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: .75rem; margin-bottom: 1rem; border-radius: var(--radius); background: var(--mist, #eef3f1); }
.pgroup__photo { display: block; width: 88px; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--radius, 6px) - 2px); background: var(--mist-2, #e1eae6); }
.pgroup__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pgroup__info { min-width: 0; }
.pgroup__title { margin: 0; font-size: clamp(1.3rem, 1rem + 1.2vw, var(--step-2, 1.6rem)); line-height: 1.15; }
.pgroup__area { margin: .15rem 0 0; color: var(--muted); font-size: .95rem; }
.pgroup__icons { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; padding: 0; list-style: none; color: var(--marsh); }
.pgroup__icons .cgl-icon { display: block; width: 22px; height: 22px; }
.pgroup__stock { grid-column: 1 / -1; margin: 0; font-weight: 700; }
.pgroup__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.pgroup__acts .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; text-align: center; }
.pgroup.is-empty .pgroup__head { margin-bottom: .5rem; }
.pgroup__row { --lcard-min: clamp(270px, 15vw, 380px); display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.pgroup__row > .lcard { scroll-snap-align: start; }
.pgroup__row[hidden], .pgroup__more[hidden], .pgroup__none[hidden] { display: none; }
.pgroup__more { margin: 1rem 0 0; }
.pgroup__more .btn { min-height: 44px; }
.pgroup__none { margin: 0; padding: .4rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.pgroup__alert { min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: var(--marsh); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pgroup__alert:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
@media (min-width: 700px) {
	.pgroup__head { grid-template-columns: 140px minmax(0, 1fr) auto; padding: 1rem; }
	.pgroup__photo { width: 140px; aspect-ratio: 4 / 3; grid-row: 1 / span 2; }
	.pgroup__stock { grid-column: 2; }
	.pgroup__acts { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; }
	.pgroup__row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lcard-min)), 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
}
/* Narrow filter panel: keep "No min" / "No max" readable at 16px */
.lf--pair select { padding-left: .55rem; padding-right: 1.6rem; }
/* Park filtered: name and "Book a viewing at <park>" in the results header */
.lresults__park { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.lresults__park[hidden] { display: none; }
.lresults__pname { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.lresults__park .btn { min-height: 44px; }
/* No sideways scroll at 360px (QA 24 Oct): grid and fieldset children may shrink. */
.lresults, .lfilters, .lsearch__head > * { min-width: 0; }
.lsearch__bar { grid-template-columns: minmax(0, 1fr) auto; }
.lsearch__bar > * { min-width: 0; }
.lview { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 400px) {
	.lview__opt span { padding: 0 .45rem; font-size: .9rem; white-space: nowrap; }
	.lsearch__open { padding-inline: .9rem; }
}
/* The shared bar is fixed at the bottom on desktop too: keep the last footer line clear of it. */
/* (JOB H) The footer no longer keeps room under itself: the action bar slides away when the footer comes into view. */

/* Search bar (JOB H, owner request 24 Oct 2026): the search box and the sort list are exactly the same height,
   border and corner, and sit on the same line, at every width. 48px tall, 16px text (no zoom on iPhone). */
.lsearch__bar { align-items: center; }
.lsearch__bar .lsearch__sort { display: flex; align-items: center; align-self: center; margin: 0; }
.lsearch__bar .lsearch__q,
.lsearch__bar .lsearch__sort select {
	box-sizing: border-box; height: 48px; min-height: 48px; margin: 0;
	border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface);
	font: inherit; font-size: max(16px, 1rem); line-height: 1.25; color: var(--ink);
	padding-block: 0;
}
.lsearch__bar .lsearch__q { padding-inline: 1rem; }
.lsearch__bar .lsearch__sort select { padding-inline: .9rem 2.2rem; }
.lsearch__bar .lsearch__open { box-sizing: border-box; height: 48px; min-height: 48px; }