/**
 * ODCRE Properties
 *
 * Styling follows the Buildout detail page the client already knows: green section headings,
 * a grey-underlined tab bar, a two column overview with a sidebar, and a bordered details
 * table. Colours, fonts and sizes are measured from the original rather than approximated.
 *
 * Breakpoints — three bands, matching the original, which is built on Bootstrap:
 *
 *   phone    max-width: 767.98px
 *   tablet   max-width: 991.98px
 *   desktop  992px and up, the unprefixed rules below
 *
 * Use only these two widths. The .98 is Bootstrap's convention, and stops a max-width and a
 * min-width query both matching on fractional or zoomed viewports.
 *
 * The tablet width has to stay above 907px, which is where the longest listing's hero would
 * otherwise flex-wrap on its own ("Medical and Legal Arts Building" at 489px beside a 286px
 * price). Below that the wrap fires before the query does and the price strands right.
 */

/* Self hosted Montserrat, the font the original uses. Bundled in the plugin so there is no
   external request. Scoped to .odcre-single below, so the site's own chrome is unaffected. */
@font-face {
	font-family: "ODCRE Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
	font-family: "ODCRE Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
	font-family: "ODCRE Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
	font-family: "ODCRE Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-700.woff2") format("woff2");
}

/* Three dark greys, which looks like drift but is not. --odcre-ink is our own chrome. The other
   two are measured off the original and kept apart so a later tidy up does not quietly restyle
   the content: the original is Bootstrap, so its body text is Bootstrap's default #212529, and
   its headings are a slightly lighter #333. Match the original when adding content styles, and
   use --odcre-ink for anything we invent. */
.odcre-single,
.odcre-grid {
	font-family: "ODCRE Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--odcre-green: #628d22;
	--odcre-green-dark: #507019;
	--odcre-ink: #202020;
	--odcre-ink-heading: #333;
	--odcre-ink-body: #212529;
	--odcre-muted: #6c757d;
	--odcre-line: #e5e5e5;
	--odcre-wash: #f7f8fa;

	color: var(--odcre-ink);
}

/* Icon sizes/weights match the original (Montserrat) rather than the theme defaults, so the
   proportions line up. Font family stays the site's own, so the pages read as part of ODCRE. */
.odcre-icon {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* ----------------------------------------------------------- back link */

/* Matches the original's "back to search" at the top, but as a real link to the list page. */
.odcre-back {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-bottom: 1.25rem;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

/* The theme colours links inside content, washing this one to a muted olive. Its selector is
   .content-area a:not(.si-btn):not(.wp-block-button__link), which outranks any sane class based
   selector we could write, so override rather than escalate. Same fix as .odcre-btn below. */
.odcre-single .odcre-back {
	color: var(--odcre-ink) !important;
}

.odcre-single .odcre-back:hover {
	color: var(--odcre-green) !important;
}

.odcre-back .odcre-icon {
	width: 16px;
	height: 16px;
}

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

.odcre-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 1.25rem;
}

/* Matched to the original: 28px / 600. */
.odcre-hero__title {
	margin: 0 0 .35rem;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--odcre-ink-heading);
}

/* Matched to the original: 22px / 500, dark rather than muted grey. */
.odcre-hero__address {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--odcre-ink-heading);
}

.odcre-hero__headline {
	text-align: right;
	margin-left: auto;
}

/* Matched to the original: 28px / 600. */
.odcre-hero__price {
	display: block;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--odcre-ink-heading);
	white-space: nowrap;
}

/* Matched to the original: 22px / 500, dark. */
.odcre-hero__price-label {
	display: block;
	font-size: 22px;
	font-weight: 500;
	color: var(--odcre-ink-heading);
}

/* Once the price drops below the title it should read as the next line, not float against the
   right edge. Stacking here rather than relying on flex-wrap keeps it consistent whatever the
   title length. The original left aligns the price the same way below its own breakpoint. */
@media (max-width: 991.98px) {
	.odcre-hero {
		display: block;
	}

	.odcre-hero__headline {
		margin-top: 1rem;
		margin-left: 0;
		text-align: left;
	}
}

/* ---------------------------------------------------------------- tabs */

.odcre-tabs {
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	/* Without this, setting only overflow-x makes the browser promote overflow-y to auto,
	   which shows a stray vertical scrollbar over the 1px the active border overhangs. */
	overflow-y: hidden;
	border-bottom: 1px solid var(--odcre-line);
	margin-bottom: 2rem;
	-webkit-overflow-scrolling: touch;
}

.odcre-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	/* Equal width tabs that fill the bar, like the original. */
	flex: 1 1 0;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: .85rem 1rem;
	font-size: 16px;
	font-weight: 600;
	color: var(--odcre-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.odcre-tabs__tab .odcre-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.odcre-tabs__tab:hover {
	color: var(--odcre-ink);
}

.odcre-tabs__tab.is-active {
	color: var(--odcre-ink);
	border-bottom-color: var(--odcre-ink);
}

.odcre-panel[hidden] {
	display: none;
}

/* ------------------------------------------------- tabs: phone dropdown */

/* Phone only. Desktop and tablet are the base rules above: the strip fits at 768px with room
   spare, so it stays. On a phone the strip is 622px inside a 315px box, which hides three of
   the five tabs behind a sideways scroll that phones draw no scrollbar for, so nothing tells
   you they exist. The original solves this the same way, though it switches at its own wider
   breakpoint. Collapsed markup is server rendered, so the control is there before JS runs.

   Kept after every base tab rule on purpose. These override .odcre-tabs__tab.is-active, which
   matches at the same specificity, so source order is the only thing deciding the winner. */
.odcre-tabs__toggle {
	display: none;
}

@media (max-width: 767.98px) {
	.odcre-tabs__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .5rem;
		width: 100%;
		appearance: none;
		border: 0;
		padding: .85rem 1rem;
		background: var(--odcre-ink);
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		/* The list below carries the margin that separates the tabs from what follows, but it
		   is display:none while collapsed, so its margin goes with it. Without this the bar
		   butts straight up against the brochure button. */
		margin-bottom: 2rem;
	}

	/* Open, the list itself provides that spacing, so drop it here to avoid doubling up. */
	.odcre-tabs__toggle[aria-expanded="true"] {
		margin-bottom: 0;
	}

	.odcre-tabs__toggle-label {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
	}

	.odcre-tabs__toggle .odcre-icon {
		width: 16px;
		height: 16px;
	}

	.odcre-tabs__toggle-chevron {
		transition: transform .15s;
	}

	.odcre-tabs__toggle[aria-expanded="true"] .odcre-tabs__toggle-chevron {
		transform: rotate(180deg);
	}

	/* A column list rather than a scroller, so every tab is reachable without the swipe. */
	.odcre-tabs {
		display: none;
		flex-direction: column;
		gap: 0;
		overflow-x: visible;
		border-bottom: 0;
	}

	.odcre-tabs.is-open {
		display: flex;
	}

	.odcre-tabs__tab {
		flex: 0 0 auto;
		justify-content: flex-start;
		border-bottom: 1px solid var(--odcre-line);
		border-left: 3px solid transparent;
		margin-bottom: 0;
	}

	/* The active row is marked by the left bar and the wash, so the dark bottom rail from the
	   base rule is a desktop idea that reads as a stray line here. It keeps the same light
	   separator as every other row rather than losing one, which would show as a gap in the
	   list. Restated rather than left to .odcre-tabs__tab, because the base .is-active rule
	   above would otherwise re-darken it. */
	.odcre-tabs__tab.is-active {
		border-bottom-color: var(--odcre-line);
		border-left-color: var(--odcre-ink);
		background: var(--odcre-wash);
	}
}

/* -------------------------------------------------------------- layout */

.odcre-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2.5rem;
	align-items: start;
}

/* The sidebar drops below the main column from tablet down, as it does on the original. */
@media (max-width: 991.98px) {
	.odcre-layout {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------- gallery */

.odcre-gallery__stage {
	position: relative;
	background: var(--odcre-wash);
	border-radius: 4px;
	overflow: hidden;
}

.odcre-gallery__slide {
	display: none;
}

.odcre-gallery__slide.is-active {
	display: block;
}

.odcre-gallery__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: zoom-in;
}

.odcre-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	appearance: none;
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--odcre-ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s;
}

.odcre-gallery__stage:hover .odcre-gallery__nav,
.odcre-gallery__nav:focus-visible {
	opacity: 1;
}

.odcre-gallery__nav--prev { left: .75rem; }
.odcre-gallery__nav--next { right: .75rem; }

.odcre-gallery__thumbs {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding: .6rem 0 .2rem;
}

.odcre-gallery__thumb {
	flex: 0 0 auto;
	appearance: none;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	border-radius: 3px;
	cursor: pointer;
	opacity: .6;
	transition: opacity .15s, border-color .15s;
}

.odcre-gallery__thumb.is-active,
.odcre-gallery__thumb:hover {
	opacity: 1;
	border-color: var(--odcre-green);
}

.odcre-gallery__thumb img {
	display: block;
	width: 88px;
	height: 62px;
	object-fit: cover;
}

.odcre-video {
	margin-top: 1.5rem;
}

.odcre-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ------------------------------------------------------------- content */

/* Matched to the original: 22px / 500, green. */
.odcre-subhead {
	margin: 2.25rem 0 .9rem;
	font-size: 22px;
	font-weight: 500;
	color: var(--odcre-green);
}

.odcre-panel > .odcre-subhead:first-child {
	margin-top: 0;
}

.odcre-details {
	width: 100%;
	border-collapse: collapse;
}

/* The original rows are transparent with a divider line. The theme applies zebra striping and
   a 500 th weight through minified rules that outrank a normal selector, so these two visual
   overrides use !important. Scoped tightly to our details table, so nothing else is affected. */
.odcre-single .odcre-details tr,
.odcre-single .odcre-details th,
.odcre-single .odcre-details td {
	background: transparent !important;
}

.odcre-single .odcre-details th,
.odcre-single .odcre-details td {
	padding: .6rem .5rem;
	border-bottom: 1px solid var(--odcre-line);
	text-align: left;
	vertical-align: top;
	/* Matched to the original: 16px / 400. */
	font-size: 16px;
	font-weight: 400;
	color: var(--odcre-ink-body);
}

.odcre-single .odcre-details th {
	width: 40%;
	/* The original wraps labels in <strong>, so they read bold. */
	font-weight: 700 !important;
}

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

.odcre-highlights {
	margin: 0;
	padding-left: 1.2rem;
}

.odcre-highlights li {
	margin-bottom: .45rem;
}

/* -------------------------------------------------------------- spaces */

.odcre-spaces {
	width: 100%;
	border-collapse: collapse;
	/* Fixed layout is essential here: with auto layout, showing a detail row (a colspan cell
	   holding the description) makes the browser recompute column widths from that content,
	   which shifts the summary rows sideways when a second panel is opened. Fixed widths stop
	   the body content from ever reflowing the columns. */
	table-layout: fixed;
}

.odcre-spaces thead th:nth-child(1) { width: 14%; }
.odcre-spaces thead th:nth-child(2) { width: 18%; }
.odcre-spaces thead th:nth-child(3) { width: 16%; }
.odcre-spaces thead th:nth-child(4) { width: 21%; }
.odcre-spaces thead th:nth-child(5) { width: 21%; }
.odcre-spaces thead th:nth-child(6) { width: 10%; }

.odcre-spaces th,
.odcre-spaces td {
	overflow-wrap: anywhere;
}

.odcre-spaces thead th {
	padding: .75rem .6rem;
	border-bottom: 2px solid var(--odcre-ink);
	font-size: .95rem;
	font-weight: 700;
	text-align: left;
}

.odcre-spaces__row > * {
	padding: 1rem .6rem;
	border-bottom: 1px solid var(--odcre-line);
	text-align: left;
	vertical-align: middle;
}

.odcre-spaces__row th {
	font-weight: 700;
}

.odcre-spaces__row.is-expandable {
	cursor: pointer;
}

.odcre-spaces__row.is-expandable:hover > * {
	background: var(--odcre-wash);
}

.odcre-spaces__chevron {
	text-align: right !important;
	color: var(--odcre-muted);
}

/* Rotate an inner span, not the cell. Applying transform/display to the <td> itself pulls it
   out of the table layout, so the cell collapses and the row shifts. */
.odcre-spaces__chevron-icon {
	display: inline-block;
	transition: transform .15s;
}

.odcre-spaces__row[aria-expanded="true"] .odcre-spaces__chevron-icon {
	transform: rotate(180deg);
}

.odcre-spaces__detail td {
	padding: 1.25rem 1rem 1.75rem;
	background: var(--odcre-wash);
	border-bottom: 1px solid var(--odcre-line);
}

.odcre-spaces__detail h3 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.odcre-spaces__detail img {
	max-width: min(100%, 520px);
	height: auto;
	margin-top: 1rem;
	cursor: zoom-in;
}

.odcre-space-floorplan {
	margin-top: 1.25rem;
}

.odcre-space-floorplan__label {
	margin: 0 0 .5rem;
	font-size: 16px;
	font-weight: 700;
	color: var(--odcre-ink);
}

/* Full width floor plan, overriding the 520px cap on detail images. */
.odcre-space-floorplan img {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin-top: 0;
}

.odcre-space-detail__rule {
	margin: 1rem 0;
	border: 0;
	border-top: 1px solid var(--odcre-line);
}

/* The repeated field table inside the accordion, like the original. The theme centres tables
   with margin auto, so pin it left. Full width to use the whole accordion space. */
.odcre-space-detail {
	width: 100%;
	margin: 0 !important;
	border-collapse: collapse;
}

.odcre-space-detail th,
.odcre-space-detail td {
	padding: .5rem .25rem;
	border-bottom: 1px solid var(--odcre-line);
	text-align: left;
	vertical-align: top;
	font-size: 16px;
	font-weight: 400;
	background: transparent !important;
}

.odcre-space-detail th {
	width: 45%;
	font-weight: 700 !important;
}

/* Six columns will not read on a phone. Rate and Term drop out; both are still there when the
   row is expanded, so no data is lost. */
@media (max-width: 767.98px) {
	.odcre-spaces thead th:nth-child(4),
	.odcre-spaces thead th:nth-child(5),
	.odcre-spaces__row td:nth-child(4),
	.odcre-spaces__row td:nth-child(5) {
		display: none;
	}

	/* Re-spread the remaining four columns so the fixed layout still fills the table. */
	.odcre-spaces thead th:nth-child(1) { width: 24%; }
	.odcre-spaces thead th:nth-child(2) { width: 30%; }
	.odcre-spaces thead th:nth-child(3) { width: 30%; }
	.odcre-spaces thead th:nth-child(6) { width: 16%; }
}

/* ----------------------------------------------------------- documents */

.odcre-docs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.odcre-docs a {
	display: inline-block;
	padding: .9rem 1.4rem;
	background: var(--odcre-wash);
	border: 1px solid var(--odcre-line);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.odcre-docs a:hover {
	border-color: var(--odcre-green);
}

/* Washed olive by the theme's content link rule, same as .odcre-back. See the note there. */
.odcre-single .odcre-docs a {
	color: var(--odcre-ink) !important;
}

.odcre-single .odcre-docs a:hover {
	color: var(--odcre-green) !important;
}

/* -------------------------------------------------------------- photos */

.odcre-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .75rem;
}

.odcre-photos__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
	cursor: zoom-in;
}

/* ----------------------------------------------------------------- map */

.odcre-map {
	height: 380px;
	border-radius: 4px;
	background: var(--odcre-wash);
	z-index: 0;
}

.odcre-map--large {
	height: 520px;
}

/* The theme's content link rule reaches inside Leaflet too, washing the zoom +/- and the
   attribution olive. The zoom control restores Leaflet's own black. Leaflet sets no colour on
   the attribution link at all, so inherit the #333 it gives the surrounding credit rather than
   let it fall back to browser blue. */
.odcre-single .leaflet-bar a {
	color: black !important;
}

.odcre-single .leaflet-control-attribution a {
	color: inherit !important;
}

/* ------------------------------------------------------------- sidebar */

/* Matched to the original: square, left aligned, regular weight, icon on the left. */
.odcre-btn {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	margin-bottom: .6rem;
	padding: .7rem 1rem;
	background: var(--odcre-green);
	border-radius: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 600;	
	text-align: left;
	text-decoration: none;
	transition: background .15s;
}

/* The buttons render twice, once in the sidebar and once above the panels for mobile. Only one
   copy shows at a time. Desktop is the base here, so the mobile copy never renders there and
   the sidebar keeps the layout it already had. The wrapper is deliberately styleless otherwise:
   .odcre-btn is width:100% with its own margin, so a plain block changes nothing. */
.odcre-actions--mobile {
	display: none;
}

@media (max-width: 991.98px) {
	.odcre-actions--mobile {
		display: block;
		margin-bottom: 2rem;
	}

	.odcre-layout__side .odcre-actions {
		display: none;
	}
}

/* The theme colours links inside content, which washes the button text to a muted olive.
   Force white on the button and its label, scoped so nothing else is touched. */
.odcre-single .odcre-btn,
.odcre-single .odcre-btn:hover,
.odcre-single .odcre-btn:focus,
.odcre-single .odcre-btn span {
	color: #fff !important;
}

.odcre-btn:hover,
.odcre-btn:focus {
	background: var(--odcre-green-dark);
}

.odcre-btn .odcre-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.odcre-broker {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	margin-top: 1.5rem;
}

.odcre-broker__photo img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.odcre-broker__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Matched to the original: ~13.6px name and role. */
.odcre-broker__name {
	font-size: 13.6px;
	font-weight: 700;
	color: var(--odcre-ink-body);
}

/* Role, phone and email a touch heavier (500) than the original's 400, per preference. */
.odcre-broker__role {
	margin-bottom: .3rem;
	font-size: 13.6px;
	font-weight: 500;
	color: var(--odcre-muted);
}

.odcre-broker__link {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* The theme washes link colour to a muted olive; force solid green, scoped. */
.odcre-single .odcre-broker__link,
.odcre-single .odcre-broker__link span {
	color: var(--odcre-green) !important;
}

.odcre-broker__link .odcre-icon {
	width: 14px;
	height: 14px;
	color: var(--odcre-green);
}

.odcre-broker__link span {
	min-width: 0;
}

.odcre-broker__link:hover span {
	text-decoration: underline;
}

/* Keep the two big headings from overflowing on phones. */
@media (max-width: 767.98px) {
	.odcre-hero__title,
	.odcre-hero__price {
		font-size: 23px;
	}

	.odcre-hero__address {
		font-size: 18px;
	}
}

.odcre-inquiry:not(:empty) {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--odcre-line);
}

/* ----------------------------------------------------- properties grid */

/* The [odcre_properties] grid. Shares the palette and font via the .odcre-grid scope at the
   top of the file. Base rules are desktop (three columns); tablet drops to two and phone to
   one — the original crams two tiny cards per row on phones, one is simply more readable. */

/* The filter panel, measured off the original: a full width shaded box (#fbfbfb, 10% black
   border), small uppercase letter spaced labels, square white selects, and a green Reset
   Filters button on the right. The result count and the sort control sit below the panel,
   left and right, as they do there. */
.odcre-grid__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.5rem;
	padding: 20px;
	background: #fbfbfb;
	border: 1px solid rgba(0, 0, 0, .1);
	margin-bottom: 1.25rem;
}

.odcre-grid__filter {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.odcre-grid__filter-label {
	font-size: 10.4px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--odcre-muted);
}

.odcre-grid__filters select {
	appearance: auto;
	min-width: 170px;
	padding: 6px 12px;
	border: 1px solid #ced4da;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #495057;
	cursor: pointer;
}

.odcre-grid__reset-btn {
	appearance: none;
	margin-left: auto;
	padding: 9px 18px;
	background: var(--odcre-green);
	border: 0;
	border-radius: 0;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}

.odcre-grid__reset-btn:hover {
	background: var(--odcre-green-dark);
}

/* The line under the panel: "1 - 9 results out of 9 listings" left, "Sort:" right. */
.odcre-grid__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem 1.5rem;
	margin-bottom: 2rem;
}

.odcre-grid__count {
	font-size: 15px;
	color: var(--odcre-ink-heading);
}

.odcre-grid__sort {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: 15px;
	color: var(--odcre-ink-heading);
}

.odcre-grid__sort select {
	appearance: auto;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--odcre-ink-heading);
	cursor: pointer;
}

.odcre-grid__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The theme indents every list inside a page's content (.si-entry ul { margin-left: 2.5em }),
   which shoved the cards 37px right of the filter panel. That rule is 0,1,1 and the one above
   only 0,1,0, so this restates the margin at 0,2,0 rather than gambling on source order. The
   detail pages are unaffected: their markup is ours and sits outside .si-entry. */
.odcre-grid .odcre-grid__cards {
	margin-left: 0;
}

@media (max-width: 991.98px) {
	.odcre-grid__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.odcre-grid__cards {
		grid-template-columns: 1fr;
	}

	/* Full width on purpose, one filter per row. 45% would fit two up, but stacked reads
	   better in the narrow panel and matches how the original collapses. */
	.odcre-grid__filter {
		flex: 1 1 100%;
	}

	.odcre-grid__filters select {
		width: 100%;
		min-width: 0;
	}

	.odcre-grid__reset-btn {
		flex: 1 1 100%;
		margin-left: 0;
	}
}

/* The card is the image, as on the original: a fixed 180px tile, the whole thing one link,
   the text laid over a bottom gradient. Every value here is measured off the live original
   (tile height, gradient, badge, 12px paddings, font sizes). */
.odcre-card {
	position: relative;
	height: 180px;
	overflow: hidden;
	background: var(--odcre-wash);
}

.odcre-card[hidden] {
	display: none;
}

.odcre-card__link {
	display: block;
	height: 100%;
	text-decoration: none;
}

.odcre-card__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .3s;
}

/* The always-on legibility gradient under the text; on hover it also darkens the whole
   photo, exactly as the original's gradient-cover does. */
.odcre-card__shade {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	background-color: rgba(0, 0, 0, 0);
	transition: background-color .3s;
}

/* Translucent banner bleeding off the tile's left edge, right corners rounded. */
.odcre-card__badge {
	position: absolute;
	top: 6px;
	left: 0;
	z-index: 1;
	padding: 4px 6px;
	background: rgba(0, 0, 0, .3);
	border-radius: 0 3px 3px 0;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	transition: opacity .3s;
}

/* Title, address and strip over the photo's bottom edge. Every line truncates with an
   ellipsis like the original. The theme's content link rule (see the .odcre-back note)
   would wash all of this olive - it sits inside the tile link - hence the !important. */
.odcre-card__info {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	padding: 12px;
	transition: opacity .3s;
}

.odcre-card__info > span {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff !important;
}

.odcre-card__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.odcre-card__address,
.odcre-card__meta {
	font-size: 12px;
	line-height: 1.5;
}

.odcre-grid__empty {
	margin: 3rem 0;
	font-size: 16px;
	text-align: center;
	color: var(--odcre-ink-body);
}

.odcre-grid__reset {
	appearance: none;
	border: 0;
	margin-left: .5rem;
	padding: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--odcre-green);
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------ card hover reveal */

/* Measured off the original: hovering a tile blurs the photo 3px, darkens the shade to 60%
   black in .3s, fades the badge and the bottom text out, and fades in the reveal: title,
   address, and a white 12px labelled table. Guarded by hover:hover so touch screens never
   get a stuck overlay: there, a tap goes straight through to the detail page. */

.odcre-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 12px;
	color: #fff;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}

/* Title and address sit above the table, single line with an ellipsis like the original. */
.odcre-card__overlay-title,
.odcre-card__overlay-address {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.odcre-card__overlay-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.odcre-card__overlay-address {
	font-size: 12px;
}

.odcre-card__overlay-table {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem 1.5rem;
	margin-top: .6rem;
	font-size: 12px;
	line-height: 1.4;
}

.odcre-card__overlay-label {
	text-transform: uppercase;
	letter-spacing: .03em;
}

.odcre-card__overlay-value {
	font-weight: 600;
}

@media (hover: hover) {
	.odcre-card:hover .odcre-card__link img {
		filter: blur(3px);
	}

	.odcre-card:hover .odcre-card__shade {
		background-color: rgba(0, 0, 0, .6);
	}

	.odcre-card:hover .odcre-card__badge,
	.odcre-card:hover .odcre-card__info {
		opacity: 0;
	}

	.odcre-card:hover .odcre-card__overlay {
		opacity: 1;
	}
}

/* -------------------------------------------------------- phone gutters */

/* The theme's .si-container reserves 30px a side on phones, and on the grid page Elementor's
   column adds 10px more, so a 375px screen kept only 280px for the cards. 20px a side instead.
   Scoped with :has to the two page types this plugin renders - .si-container is the theme's,
   and a bare override would move every page on the site. Browsers without :has (pre 2023)
   simply keep the theme's 30px. Desktop and tablet untouched. */
@media (max-width: 767.98px) {
	.si-container:has(.odcre-single),
	.si-container:has(.odcre-grid) {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Elementor's default column padding on the grid page, folded into the 20px above. */
	.si-container:has(.odcre-grid) .elementor-element-populated {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --------------------------------------------------- featured card widget */

/* The landing pages' rotating promo card, replacing Buildout's "featured" embed. Measured
   off the live original: 500x300, one slide visible, 4s rotation (timed in the JS), a dark
   "» View Listing" box top right and a dark two line bar across the bottom. The original
   wears Buildout's navy; ours wears the site's ink. Colours are forced with !important
   because every line sits inside the slide link, which the theme's content link rule
   would otherwise wash olive (see the .odcre-back note). */
.odcre-featured {
	position: relative;
	max-width: 500px;
	height: 300px;
	overflow: hidden;
	background: var(--odcre-wash);
	font-family: "ODCRE Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--odcre-green: #628d22;
	--odcre-green-dark: #507019;
	--odcre-ink: #202020;
	--odcre-muted: #6c757d;
	--odcre-wash: #f7f8fa;
}

.odcre-featured__slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
	text-decoration: none;
}

.odcre-featured__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.odcre-featured__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.odcre-featured__view {
	position: absolute;
	top: 30px;
	right: 0;
	padding: 4px 8px;
	background: var(--odcre-ink);
	color: #f0f0f0 !important;
	font-size: 12px;
}

.odcre-featured__bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 8px 12px;
	background: var(--odcre-ink);
}

.odcre-featured__type {
	display: block;
	color: #fff !important;
	font-size: 16px;
	line-height: 1.4;
}

.odcre-featured__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.odcre-featured__city,
.odcre-featured__size {
	color: #fff !important;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
}

/* ------------------------------------------------------------ share row */

/* The original's Share row, restored to its sidebar position: green rounded squares with
   white glyphs, 12px apart, under the same green section heading the rest of the sidebar
   uses. The copy button swaps to a check for a moment once the link is on the clipboard. */
.odcre-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.odcre-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: 6px;
	background: var(--odcre-green);
	/* Inside content, so the theme's link rule would wash the glyph olive otherwise. */
	color: #fff !important;
	cursor: pointer;
	transition: background .15s;
}

.odcre-share__btn:hover {
	background: var(--odcre-green-dark);
	color: #fff !important;
}

.odcre-share__btn .odcre-icon {
	width: 18px;
	height: 18px;
}

.odcre-share__icon--check,
.odcre-share__btn.is-copied .odcre-share__icon--copy {
	display: none;
}

.odcre-share__btn.is-copied .odcre-share__icon--check {
	display: inline-block;
}

/* ---------------------------------------------------------- inquiry form */

/* The Request More Info form (a Gravity Form) at the bottom of the sidebar, where the
   original kept it. Gravity Forms brings its own layout CSS; these rules only align its
   pieces with the sidebar: square white inputs like the grid's filters, and the same green
   block button as Lease Brochure above it. */
.odcre-inquiry input[type="text"],
.odcre-inquiry input[type="email"],
.odcre-inquiry input[type="tel"],
.odcre-inquiry textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ced4da;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #495057;
}

.odcre-inquiry textarea {
	min-height: 110px;
}

.odcre-inquiry .gfield_label {
	font-size: 14px;
	font-weight: 600;
	color: var(--odcre-ink);
}

.odcre-inquiry input[type="submit"],
.odcre-inquiry .gform_button {
	display: block;
	width: 100%;
	padding: .7rem 1rem;
	background: var(--odcre-green);
	border: 0;
	border-radius: 0;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}

.odcre-inquiry input[type="submit"]:hover,
.odcre-inquiry .gform_button:hover {
	background: var(--odcre-green-dark);
}