/*
 * Template 2 content modules: Home Search, Home Filter, Photo Roll, Listing Photos, shared lightbox.
 * Colors and sizes come from the site's "HP …" Divi globals, printed as --hp-* by
 * hpmc_print_template_tokens(); the fallbacks are the prototype's navy/gold values.
 * Breakpoints follow the Divi set: 1080 / 900 / 767 / 560.
 */

/* ---------- Home Search ---------- */
.hpmc-search {
	display: flex; align-items: center; gap: 6px; max-width: 900px;
	padding: 8px 8px 8px 10px; border-radius: 999px;
	background: var(--hp-surface, #fff);
	box-shadow: 0 6px 16px rgb(19 32 46 / .10), 0 22px 48px rgb(19 32 46 / .14);
	color: var(--hp-ink, #13202e); font-family: Inter, system-ui, sans-serif;
}
.hpmc-seg { display: inline-flex; flex: none; gap: 2px; padding: 4px; border-radius: 99px; background: var(--hp-accent-soft, #e6eaee); }
.hpmc-seg label { position: relative; margin: 0; }
.hpmc-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hpmc-seg span { display: block; padding: 9px 16px; border-radius: 99px; font-weight: 600; font-size: .9rem; line-height: 1.2; color: var(--hp-accent-text, #1e3a5f); cursor: pointer; transition: background 160ms; }
.hpmc-seg input:checked + span { background: var(--hp-accent, #1e3a5f); color: var(--hp-on-accent, #fff); }
.hpmc-seg input:focus-visible + span { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 2px; }
.hpmc-search__f { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; padding: 0 14px; border-left: 1px solid var(--hp-line, #dde3ea); }
.hpmc-search__f span { padding-left: 2px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-muted, #4f5d6c); }
.hpmc-search__f select {
	width: 100%; min-height: 30px; padding: 0 28px 0 2px; border: 0; border-radius: 8px; appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5d6c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 18px;
	color: inherit; font: 600 1rem Inter, system-ui, sans-serif; cursor: pointer;
}
.hpmc-search__f select:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 2px; }
.hpmc-search__go {
	display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .5em;
	min-height: 52px; padding: 0 1.5em; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--hp-accent, #1e3a5f); color: var(--hp-on-accent, #fff);
	font: 600 .975rem/1 Inter, system-ui, sans-serif; white-space: nowrap;
	transition: background 160ms, transform 160ms cubic-bezier(.22, .61, .36, 1);
}
.hpmc-search__go:hover { background: var(--hp-accent-deep, #0f223a); transform: translateY(-1px); }
.hpmc-search__go:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 3px; }
.hpmc-search__go svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
	.hpmc-search { flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: var(--hp-radius-large, 28px); }
	.hpmc-seg { width: 100%; justify-content: space-between; }
	.hpmc-seg label { flex: 1; text-align: center; }
	.hpmc-search__f { flex: 1 1 40%; padding: 6px 12px; border: 1px solid var(--hp-line, #dde3ea); border-radius: 12px; }
	.hpmc-search__go { width: 100%; }
}

/* ---------- Home Filter (Available Homes) ---------- */
/* Prototype .m-filters: one row of Buy/Rent/Both, five labelled selects, the count and Clear filters, 16px apart. */
.hpmc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hp-space-4, 16px); color: var(--hp-ink, #13202e); font-family: Inter, system-ui, sans-serif; }
.hpmc-filter__fields { display: flex; flex: 1; gap: 10px; min-width: 0; }
.hpmc-filter__f { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 110px; margin: 0; }
.hpmc-filter__f span { font-size: .68rem; font-weight: 700; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-muted, #4f5d6c); }
.hpmc-filter__f select {
	width: 100%; min-height: 42px; margin: 0; padding: 0 38px 0 14px; border: 1px solid var(--hp-line, #dde3ea); border-radius: 12px; appearance: none;
	background: var(--hp-surface, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5d6c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
	color: var(--hp-ink, #13202e); font: 500 1rem Inter, system-ui, sans-serif; cursor: pointer;
}
.hpmc-filter__f select:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 2px; }
.hpmc-filter__count { display: flex; align-items: center; gap: 16px; font-size: 1rem; white-space: nowrap; color: var(--hp-muted, #4f5d6c); }
.hpmc-filter__count p { display: flex; gap: 6px; margin: 0; padding: 0; }
.hpmc-filter__count strong { color: var(--hp-ink, #13202e); }
/* .hp-btn--soft.hp-btn--sm (Clear filters) and .hp-btn--primary (phone Filters button) */
.hpmc-filter__clear, .hpmc-filter__sheet {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; border: 0; border-radius: 999px;
	font: 600 .9rem/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
	transition: background 160ms, transform 160ms cubic-bezier(.2, .7, .2, 1), box-shadow 160ms;
}
.hpmc-filter__clear { min-height: 40px; padding: 0 1.1em; background: var(--hp-accent-soft, #e6eaee); color: var(--hp-accent, #1e3a5f); }
.hpmc-filter__clear:hover { background: color-mix(in oklab, var(--hp-accent, #1e3a5f) 16%, #fff); transform: translateY(-1px); }
.hpmc-filter__clear:disabled, .hpmc-filter__clear:disabled:hover { opacity: .45; cursor: default; background: var(--hp-accent-soft, #e6eaee); transform: none; }
.hpmc-filter__clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hpmc-filter__sheet { display: none; min-height: 48px; padding: 0 1.5em; gap: .5em; font-size: .975rem; background: var(--hp-accent, #1e3a5f); color: var(--hp-on-accent, #fff); }
.hpmc-filter__sheet:hover { background: var(--hp-accent-deep, #0f223a); transform: translateY(-1px); }
.hpmc-filter__sheet svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hpmc-filter__clear:focus-visible, .hpmc-filter__sheet:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 3px; }
/* Filters button + sheet from the header collapse down: five 110px fields don't fit beside the count below 1080. */
@media (max-width: 1080px) {
	.hpmc-filter { justify-content: space-between; }
	.hpmc-filter .hpmc-seg { width: auto; }
	.hpmc-filter__fields { display: none; }
	.hpmc-filter__sheet { display: inline-flex; }
	.hpmc-filter__count { order: 3; width: 100%; }
	.hpmc-filter.is-open .hpmc-filter__fields { display: grid; grid-template-columns: 1fr 1fr; order: 4; flex: 1 0 100%; }
}
/* Cards the filter leaves out, the grid when nothing matches, and the no-match message until it's needed.
   Both selector forms: Divi repeats its column styles behind the #et-boc ID prefix. */
.hpmc-is-out, .et-db #et-boc .et-l .hpmc-is-out,
.hp-homes-empty:not(.hpmc-is-shown), .et-db #et-boc .et-l .hp-homes-empty:not(.hpmc-is-shown) { display: none !important; }

/* ---------- Photo Roll ---------- */
.hpmc-roll {
	overflow-x: auto; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y;
	overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none;
}
.hpmc-roll::-webkit-scrollbar { display: none; }
.hpmc-roll.is-dragging { cursor: grabbing; }
.hpmc-roll:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: -3px; }
.hpmc-roll__track { display: flex; gap: var(--hp-space-5, 24px); width: max-content; }
.hpmc-roll__dup { display: contents; }
.hpmc-roll__i {
	position: relative; flex: none; margin: 0; overflow: hidden;
	width: var(--hpmc-roll-w, clamp(240px, 24vw, 340px)); height: var(--hpmc-roll-h, clamp(300px, 30vw, 420px));
	border-radius: var(--hp-radius-large, 28px); background: var(--hp-accent-soft, #e6eaee);
}
.hpmc-roll__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: inherit; }
.hpmc-roll__zoom:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: -3px; }
.hpmc-roll__zoom img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms cubic-bezier(.22, .61, .36, 1); }
.hpmc-roll__i:hover img { transform: scale(1.03); }

/* ---------- Listing Photos (Home Detail) ---------- */
/* Prototype .m-photos.m-photos--bleed: edge to edge, 6px gaps, one large photo beside up to four smaller ones. */
.hpmc-photos-wrap { position: relative; }
.hpmc-photos {
	position: relative; display: grid; gap: 6px; height: clamp(320px, 46vw, 620px); overflow: hidden;
	grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.hpmc-photos--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hpmc-photos--2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.hpmc-photos--3 { grid-template-columns: 2fr 1fr; }
.hpmc-photos__i { display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; cursor: zoom-in; background: var(--hp-accent-soft, #e6eaee); }
.hpmc-photos__i img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.22, .61, .36, 1); }
.hpmc-photos__i:hover img { transform: scale(1.03); }
.hpmc-photos__i:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: -3px; }
.hpmc-photos__i--main { grid-row: 1 / -1; }
/* .hp-btn.hp-btn--light.hp-btn--sm.m-photos__all */
.hpmc-photos__all {
	position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; margin: 0; padding: 0 1.1em; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
	background: var(--hp-surface, #fff); color: var(--hp-accent, #1e3a5f); font: 600 .9rem/1 Inter, system-ui, sans-serif;
	box-shadow: 0 6px 16px rgb(19 32 46 / .10), 0 22px 48px rgb(19 32 46 / .14);
	transition: background 160ms, transform 160ms cubic-bezier(.22, .61, .36, 1);
}
.hpmc-photos__all:hover { background: var(--hp-accent-soft, #e6eaee); transform: translateY(-1px); }
.hpmc-photos__all:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 3px; }
.hpmc-photos--none { display: grid; place-items: center; }
.hpmc-photos--none img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.hpmc-photos--none p { position: relative; margin: 0; padding: 0; font: 600 1.3rem "Archivo", system-ui, sans-serif; font-stretch: 112%; text-transform: uppercase; color: var(--hp-ink, #13202e); }
/* Phones: one photo at a time, swiped sideways (prototype max-width 700px). */
@media (max-width: 767px) {
	.hpmc-photos { display: flex; gap: 0; height: 300px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.hpmc-photos::-webkit-scrollbar { display: none; }
	.hpmc-photos__i { flex: 0 0 100%; scroll-snap-align: start; }
	.hpmc-photos--none { display: grid; }
}

/* ---------- Lightbox ---------- */
html.hpmc-lb-open { overflow: hidden; }
.hpmc-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 18 30 / .94); color: #fff; }
.hpmc-lb::backdrop { background: rgb(10 18 30 / .6); }
.hpmc-lb[open] { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; }
.hpmc-lb__fig { grid-column: 2; display: grid; place-items: center; height: 100dvh; margin: 0; padding: 64px 0; box-sizing: border-box; }
.hpmc-lb__img { max-width: 100%; max-height: calc(100dvh - 128px); object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .45); touch-action: pan-y; user-select: none; }
.hpmc-lb__nav, .hpmc-lb__close { display: grid; place-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; transition: background 160ms; }
.hpmc-lb__nav:hover, .hpmc-lb__close:hover { background: rgb(255 255 255 / .26); }
.hpmc-lb__nav:focus-visible, .hpmc-lb__close:focus-visible { outline: 3px solid var(--hp-highlight, #f2b544); outline-offset: 2px; }
.hpmc-lb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hpmc-lb__nav--prev { grid-column: 1; justify-self: center; }
.hpmc-lb__nav--next { grid-column: 3; justify-self: center; }
.hpmc-lb__close { position: fixed; top: 16px; right: 16px; z-index: 1; }
.hpmc-lb__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
	.hpmc-lb[open] { grid-template-columns: 0 1fr 0; }
	.hpmc-lb__fig { padding: 72px 8px; }
	.hpmc-lb__img { max-height: calc(100dvh - 144px); }
	.hpmc-lb__nav { position: fixed; bottom: 20px; }
	.hpmc-lb__nav--prev { left: calc(50% - 60px); }
	.hpmc-lb__nav--next { right: calc(50% - 60px); }
}

@media (prefers-reduced-motion: reduce) {
	.hpmc-search__go, .hpmc-roll__zoom img, .hpmc-photos__i img, .hpmc-photos__all, .hpmc-seg span, .hpmc-filter__clear, .hpmc-filter__sheet { transition: none; }
	.hpmc-search__go:hover, .hpmc-roll__i:hover img, .hpmc-photos__i:hover img, .hpmc-photos__all:hover, .hpmc-filter__clear:hover, .hpmc-filter__sheet:hover { transform: none; }
}

/* WordPress admin bar height as a variable, so sticky Template 2 panels (home detail price panel, Apply side cards)
   clear it when someone is logged in: top = header + admin bar + gap. 46px is WordPress's admin bar below 783px. */
body.admin-bar { --hp-admin-bar: 32px; }
@media (max-width: 782px) { body.admin-bar { --hp-admin-bar: 46px; } }

/* "On this page" contents list (legal pages; hp-toc.js marks the current link). Sticks below the header like the
   other Template 2 panels; stacks above the text, unstuck, on narrow screens. Links: muted, current one accent with a
   2px accent bar. Both selector forms, as Divi also prints its module styles behind #et-boc. */
.hp-toc, .et-db #et-boc .et-l .hp-toc { position: sticky !important; top: calc(var(--hp-header-height, 104px) + var(--hp-admin-bar, 0px) + var(--hp-space-5, 24px)); }
.hp-toc .et_pb_text_inner a, .et-db #et-boc .et-l .hp-toc .et_pb_text_inner a {
	display: block; padding: 4px 0 4px 14px; border-left: 2px solid var(--hp-line, #dfe4ea);
	color: var(--hp-muted, #5b6775) !important; text-decoration: none; font-weight: 500; line-height: 1.4;
	transition: color 160ms ease, border-color 160ms ease;
}
.hp-toc .et_pb_text_inner a:hover, .et-db #et-boc .et-l .hp-toc .et_pb_text_inner a:hover { color: var(--hp-ink, #13202e) !important; }
.hp-toc .et_pb_text_inner a.is-current, .et-db #et-boc .et-l .hp-toc .et_pb_text_inner a.is-current {
	color: var(--hp-accent, #1e3a5f) !important; font-weight: 600; border-left-color: var(--hp-accent, #1e3a5f);
}
@media (max-width: 900px) { .hp-toc, .et-db #et-boc .et-l .hp-toc { position: static !important; } }
/* In-page anchors on Template 2 pages stop below the sticky header instead of under it. */
.et_pb_text_inner :is(h2, h3)[id] { scroll-margin-top: calc(var(--hp-header-height, 104px) + var(--hp-admin-bar, 0px) + var(--hp-space-5, 24px)); }