/*!
 * First-party listing page (MLS platform, Plan D).
 *
 * EVERY VALUE HERE WAS MEASURED OFF THE LIVE SHOWCASEIDX-SERVED LISTING PAGE
 * (LG26086482, 2026-09-06, at 1280 and 390 wide), not designed. This page
 * replaces that one at the same URL on a corpus of 9,660 already-indexed
 * listings, so a visitor arriving from a search result should not be able to
 * tell that anything changed. Where a number below looks arbitrary it is
 * because it is a measurement; re-measure before changing one.
 *
 * WHAT IS NOT HERE, DELIBERATELY. The closed-sale band, the Property Details
 * prose, the payment card, the breadcrumbs, the "Explore {City}" links, the
 * "no account needed" line, the similar-homes cards and the mobile tour bar are
 * all EXISTING components rendered with their existing class names, so they are
 * styled by realhomes_child_listing_polish_css() and realhomes_child_ww_css()
 * exactly as they are today. Restyling them here would fork the site's design
 * system down a per-page branch; the template reuses the components instead.
 *
 * SIZES COUPLING: the hero's `sizes` attribute is RT_MLS_GALLERY_SIZES in
 * inc/mls/lib-render.php, and it describes the stage geometry below (full
 * column width up to 1247px, then a 1200px cap). Change one and the other has
 * to move, or every browser picks the wrong candidate at every width;
 * assets/js/rt-mls-listing.test.js asserts the breakpoints still line up.
 */

/* ---- shell ------------------------------------------------------------- */
/* The hero is display:none'd sitewide on body.rt-listing-detail, and this
   template renders none, so the body's top padding is the only gap wanted
   above the banner: the banner IS the top of the page. */
.rt-mls-body { padding-top: 0; }
.rt-mls-wrap { max-width: 1200px; margin: 0 auto; padding-top: 32px; }

/* Full-bleed address banner. Same colour, type and metrics as the one the
   ShowcaseIDX path prepends (measured: #0e2c4a, Hanken 400, 8px 20px, centred,
   clamped 15-24px, never wrapping). */
.rt-mls-banner {
	background: #0e2c4a; color: #fff; box-sizing: border-box;
	font-family: var(--rt-f-sans), system-ui, sans-serif; font-weight: 400;
	font-size: clamp(15px, 4.6vw, 24px); line-height: 1.2; letter-spacing: .01em;
	padding: 8px 20px; text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	width: 100vw; max-width: 100vw; margin: 0 0 0 calc(50% - 50vw); position: relative; z-index: 900;
}

/* The reused components (.rt-listing-prose, -gallery, -area, -crumbs and the
   sold band) each carry their own `max-width:1200px;margin:0 auto;padding:.. 24px`
   for a page where they are top-level siblings. Nested inside .rt-mls-wrap they
   would sit 24px inside everything authored here, so their gutters are removed
   and the column edge is the wrap's. body.rt-listing-detail scopes those rules
   at (0,2,1), which is why these carry the body class too rather than losing
   silently. */
body.rt-listing-detail .rt-mls .rt-listing-prose,
body.rt-listing-detail .rt-mls .rt-listing-gallery,
body.rt-listing-detail .rt-mls .rt-listing-area,
body.rt-listing-detail .rt-mls .rt-listing-crumbs,
body.rt-listing-detail .rt-mls .rt-listing-closednote {
	max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;
}
body.rt-listing-detail .rt-mls .rt-listing-closednote { margin-top: 18px; }

/* Section headings for the parts of the page this template owns. 24px Marcellus
   on ink is what .rt-listing-gallery__title and .rt-listing-area__title already
   render, so the page has one section-heading treatment rather than two. */
.rt-mls .rt-mls-h2 { font: 400 24px/1.3 var(--rt-f-serif), Georgia, serif; color: #1A1A1A;
	margin: 30px 0 10px; }

/* ---- header ------------------------------------------------------------ */
.rt-mls-priceline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rt-mls-price { font: 400 23px/1.1 var(--rt-f-serif), Georgia, serif; color: #1A1A1A; letter-spacing: .2px; }
.rt-mls-price__per { font-size: 15px; color: #5a626e; margin-left: 4px; }
.rt-mls-days { flex: 0 0 auto; background: #0e2c4a; color: #fff; border-radius: 3px; padding: 4px 12px;
	font: 400 15.4px/1.2 var(--rt-f-sans), system-ui, sans-serif; }
.rt-mls .rt-mls-h1 { font: 400 19.6px/1.35 var(--rt-f-sans), system-ui, sans-serif; color: #0e2c4a; margin: 6px 0 0; }
.rt-mls-h1 span { display: block; }
.rt-mls-meta { font: 400 10.78px/1.5 var(--rt-f-sans), system-ui, sans-serif; color: #99a9af;
	text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 0 !important; }
.rt-mls-meta i { font-style: normal; padding: 0 5px; }
.rt-mls-sub { font-size: 14px; color: #202122; margin: 5px 0 0 !important; }
.rt-mls-sub b { color: #8a939c; font: 600 12px/1.4 var(--rt-f-sans), system-ui, sans-serif;
	letter-spacing: .06em; text-transform: uppercase; display: block; }
/* The community-page link (inc/mls/lib-links.php). At rest it is the plain text
   it replaced: the ShowcaseIDX-served page makes this same anchor in the browser
   with inline `color: inherit; text-decoration: none`, and a visitor arriving
   from a search result should not be able to tell the pages apart. The hover and
   focus underline is the one deliberate difference -- a link nobody can see is a
   link nobody clicks -- and it changes nothing until the pointer is on it. */
.rt-mls-sub a { color: inherit; text-decoration: none; }
.rt-mls-sub a:hover,
.rt-mls-sub a:focus-visible { text-decoration: underline; }

/* ---- gallery ----------------------------------------------------------- */
.rt-mls-gallery { margin: 16px 0 0; }
.rt-mls-gallery__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #0e2c4a; }
.rt-mls-gallery__item { position: absolute; inset: 0; margin: 0; }
/* Only the current frame is painted. visibility (not display) so the browser
   keeps the layout box and the lazy-loaded neighbours can still decode. */
.rt-mls-gallery.is-wired .rt-mls-gallery__item { visibility: hidden; }
.rt-mls-gallery.is-wired .rt-mls-gallery__item.is-cur { visibility: visible; }
.rt-mls-gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.rt-mls-gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px;
	background: linear-gradient(180deg, rgba(14,44,74,0), rgba(14,44,74,.72)); color: #fff;
	font: 400 13px/1.4 var(--rt-f-sans), system-ui, sans-serif; }
/* Arrows sit ON the photo edges, matching the carousel they replace. */
.rt-mls-gallery__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9);
	color: #0e2c4a; font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
.rt-mls-gallery__btn:hover { background: #fff; }
.rt-mls-gallery__btn--prev { left: 14px; }
.rt-mls-gallery__btn--next { right: 14px; }
.rt-mls-gallery__count { position: absolute; right: 14px; bottom: 14px; z-index: 5; color: #fff;
	font: 400 13px/1.2 var(--rt-f-sans), system-ui, sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Thumbnail rail: SIDX's photo-array metrics (4 up, 8px gap, 150px tall, 3px radius). */
.rt-mls-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 0; }
.rt-mls .rt-mls-thumb { display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.rt-mls-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; border-radius: 3px; }
.rt-mls-thumb.is-cur img { outline: 2px solid #2F5D62; outline-offset: -2px; }

/* .rt-citypage__prose a (0,1,1) sets the teal underline on every link in the
   column, which on a pill reads as a mistake. Same cure .rt-nbhd-grid and
   .rt-ww__link use. */
.rt-mls-gallery #rt-viewall { text-decoration: none !important; }

/* ---- CTAs -------------------------------------------------------------- */
.rt-mls-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.rt-mls .rt-mls-cta { flex: 1 1 240px; font: 600 18px/1.2 var(--rt-f-serif), Georgia, serif; letter-spacing: .02em;
	border-radius: 6px; padding: 13px 15px; cursor: pointer; text-align: center; text-decoration: none !important; }
.rt-mls .rt-mls-cta--solid { background: #0e2c4a; color: #fff; border: 1px solid #0e2c4a; }
.rt-mls .rt-mls-cta--solid:hover { background: #2F5D62; border-color: #2F5D62; color: #fff; }
.rt-mls .rt-mls-cta--ghost { background: #fff; color: #0e2c4a; border: 1px solid #0e2c4a; }
.rt-mls .rt-mls-cta--ghost:hover { background: #0e2c4a; color: #fff; }
.rt-mls-tourlink { font-size: 15px; margin: 10px 0 0 !important; }

/* ---- key stats card ---------------------------------------------------- */
/* Two bands, counts then measurements, exactly as the card it replaces. The
   split is what makes the border-left dividers safe: each band is its own flex
   container, so :first-child resets correctly and a wrapped row can never
   strand a rule against the card's inner edge. */
.rt-mls-stats { width: fit-content; max-width: 100%; margin: 24px auto 0; background: #fff;
	border: 1px solid #e2dccd; border-radius: 14px; box-shadow: 0 12px 30px rgba(8,24,40,.08);
	padding: 18px 16px; }
.rt-mls-stats__row { display: flex; flex-wrap: wrap; justify-content: center; }
.rt-mls-stats__row + .rt-mls-stats__row { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2dccd; }
.rt-mls-stat { display: flex; flex-direction: column; align-items: center; padding: 0 18px; }
.rt-mls-stat + .rt-mls-stat { border-left: 1px solid #e2dccd; }
.rt-mls-stat__v { font: 400 27px/1.2 var(--rt-f-sans), system-ui, sans-serif; color: #0e2c4a; }
.rt-mls-stat__l { font: 600 11px/1.3 var(--rt-f-sans), system-ui, sans-serif; color: #5a626e;
	text-transform: uppercase; letter-spacing: .66px; margin-top: 4px; white-space: nowrap; }

/* ---- description ------------------------------------------------------- */
.rt-mls-desc { margin: 28px 0 0; }
.rt-mls-desc__body { font-size: 20px; line-height: 1.6; color: #202122; }
.rt-mls-desc__body p { margin: 0 0 16px; }
.rt-mls-desc__body.is-clamped { max-height: 200px; overflow: hidden; }
.rt-mls .rt-mls-desc__toggle { display: inline-block; background: none; border: 0; padding: 6px 0;
	margin: 4px 0 0; font: 600 16px/1.4 var(--rt-f-sans), system-ui, sans-serif; letter-spacing: .01em;
	color: #2F5D62; cursor: pointer; }
.rt-mls .rt-mls-desc__toggle:hover { color: #3D7A80; text-decoration: underline; }

/* ---- section headings + details tables --------------------------------- */
/* 20px/700/#000 with a capitalize transform is what SIDX renders for
   "General Features"; the four collapsible sections use the site's own
   accordion header instead (17px navy with a hairline rule), which is the
   split the live page already has. */
.rt-mls .rt-mls-h { font: 700 20px/1.3 var(--rt-f-sans), system-ui, sans-serif; color: #000;
	text-transform: capitalize; margin: 26px 0 4px; letter-spacing: .2px; }
.rt-mls-dl { margin: 0; padding: 0; }
.rt-mls-dl > div { display: grid; grid-template-columns: 25% 1fr; gap: 10px; padding: 2px 5px;
	font-size: 15px; line-height: 1.45; }
.rt-mls-dl > div:nth-child(even) { background: #f9fafb; }
.rt-mls-dl dt { margin: 0; font-weight: 700; color: #202122; }
.rt-mls-dl dd { margin: 0; color: #202122; }

/* Accordion. Closed is the resting state ONLY once the JS has run: the body
   carries no `hidden` attribute from the server, so a visitor with JS blocked
   reads every section. Header metrics measured off .rt-acc-hd on the live page
   (17px, #0e2c4a, 17px/2px padding, #e4ded2 hairlines). */
.rt-mls-acc { margin: 0; }
.rt-mls-acc:first-of-type { margin-top: 22px; border-top: 1px solid #e4ded2; }
.rt-mls .rt-acc-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 17px 2px; margin: 0; border-bottom: 1px solid #e4ded2;
	font: 400 17px/1.3 var(--rt-f-sans), system-ui, sans-serif; color: #0e2c4a; cursor: pointer;
	-webkit-user-select: none; user-select: none; }
.rt-mls .rt-acc-hd:hover { color: #143F77; }
.rt-mls .rt-acc-hd:focus-visible { outline: 2px solid #2F5D62; outline-offset: -2px; }
/* A plus that becomes a minus, drawn entirely in CSS. The .rt-acc-ic span must
   stay EMPTY: its text content would be read out by a screen reader and would
   land in the accordion header's accessible name. */
.rt-mls .rt-acc-ic { flex: 0 0 auto; position: relative; width: 16px; height: 16px; }
.rt-mls .rt-acc-ic::before, .rt-mls .rt-acc-ic::after { content: ""; position: absolute; background: #2F5D62; }
.rt-mls .rt-acc-ic::before { left: 0; top: 7px; width: 16px; height: 1.5px; }
.rt-mls .rt-acc-ic::after { left: 7px; top: 0; width: 1.5px; height: 16px; transition: transform .22s; }
.rt-mls .rt-acc-open .rt-acc-ic::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .rt-mls .rt-acc-ic::after { transition: none; } }
.rt-mls .rt-acc-bd { padding: 12px 2px 18px; border-bottom: 1px solid #e4ded2; }

/* ---- changes, open houses, map, dual ----------------------------------- */
.rt-mls-oh, .rt-mls-changes, .rt-mls-map, .rt-mls-similar { margin: 30px 0 0; }
.rt-mls-details { margin: 0; }
.rt-mls-list { list-style: none; margin: 0; padding: 0; }
.rt-mls-list li { padding: 9px 0; border-top: 1px solid #e4ded2; font-size: 15px; line-height: 1.5;
	display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rt-mls-list time { color: #5a626e; flex: 0 0 auto; min-width: 130px; }
.rt-mls-since { font-size: 13px; color: #5a626e; margin: 8px 0 0 !important; }
#rt-mls-map { height: 380px; border-radius: 6px; background: #eef1f3; }
.rt-mls-dual { font-size: 15px; margin: 14px 0 0 !important; padding: 12px 16px;
	background: #f7f3ea; border-left: 3px solid #2F5D62; }

/* ---- attribution + disclaimer ------------------------------------------ */
.rt-mls-attrib-wrap { margin: 30px 0 0; }
/* Both are MLS-mandated. .rt-mls-attrib mirrors .rt-agent-moved (centred,
   1200 column) and .rt-mls-legal mirrors .rt-mls-moved, which is where the
   ShowcaseIDX page puts the same two blocks. */
.rt-mls-attrib { text-align: center; font-size: 14px; color: #5a626e; margin: 24px 0 0 !important; }
/* 14px on #99a9af is what the ShowcaseIDX-served page renders for this same
   MLS-mandated paragraph. The contrast is poor (about 2.2:1 on the ivory band)
   and that is inherited, not introduced here: changing it on this page alone
   would leave the legal text looking different on the 9,660 URLs that are still
   served the other way. Worth raising as a sitewide a11y fix, not a per-page one. */
.rt-mls-legal { font-size: 14px; line-height: 1.55; color: #99a9af; margin: 10px 0 0 !important; }
.rt-mls-legal img { display: block; margin: 0 0 8px; height: 25px; width: auto; }

/* ---- responsive -------------------------------------------------------- */
/* 1247px is the width at which the 1200px column stops being the constraint
   (1200 + the 24px body gutters); the sizes attribute names the same number. */
@media (max-width: 1247px) {
	.rt-mls-wrap { max-width: none; }
}
@media (max-width: 760px) {
	.rt-mls-wrap { padding-top: 18px; }
	.rt-mls-priceline { flex-wrap: wrap; gap: 8px; }
	.rt-mls-thumbs { grid-template-columns: repeat(3, 1fr); }
	.rt-mls-thumb img { height: 92px; }
	.rt-mls-desc__body { font-size: 18.2px; }
	.rt-mls-dl > div { grid-template-columns: 42% 1fr; gap: 8px; }
	.rt-mls-list li { flex-direction: column; gap: 2px; }
	.rt-mls .rt-mls-cta { flex: 1 1 100%; }
	#rt-mls-map { height: 300px; }
	.rt-mls-stat { padding: 8px 14px; }
	.rt-mls-stat + .rt-mls-stat { border-left: 0; }
	.rt-mls-stats__row + .rt-mls-stats__row { margin-top: 8px; padding-top: 8px; }
}
@media (min-width: 768px) {
	.rt-mls-stats { padding: 26px 34px; }
	.rt-mls-stat { padding: 0 22px; }
	.rt-mls-stat__v { font-size: 38px; }
	.rt-mls-stat__l { font-size: 12.5px; letter-spacing: 1px; }
}