/* 1RR — Property detail page (v2)
 * Phase 1: design system + cinematic hero + title row + description + sticky header.
 * Scoped under .rrp so site-wide styles aren't affected.
 */

/* === Design tokens === */
.rrp {
  /* Colors */
  --rrp-bg: #ffffff;
  --rrp-ink: #1a1a1a;
  --rrp-ink-quiet: #5b6f84;
  --rrp-ink-soft: #6b7280;
  --rrp-navy: #004274;
  --rrp-navy-deep: #002d52;
  --rrp-red: #f54343;
  --rrp-red-deep: #c32626;
  --rrp-border: #e5e7eb;
  --rrp-bg-soft: #f7f8fa;
  --rrp-bg-tint: #f1f5f9;

  /* Type */
  --rrp-serif: "Cormorant Garamond", "Newsreader", Georgia, "Times New Roman", serif;
  --rrp-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --rrp-gap-1: 4px;
  --rrp-gap-2: 8px;
  --rrp-gap-3: 12px;
  --rrp-gap-4: 16px;
  --rrp-gap-5: 24px;
  --rrp-gap-6: 32px;
  --rrp-gap-7: 48px;
  --rrp-gap-8: 64px;

  /* Layout */
  --rrp-content-max: 1200px;
  --rrp-rail-w: 340px;

  font-family: var(--rrp-sans);
  color: var(--rrp-ink);
  line-height: 1.55;
}

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

/* The default site has its container; we want the page to break out for the hero. */
.rrp { max-width: none; padding: 0; margin: 0; background: var(--rrp-bg); }
.rrp-shell { max-width: var(--rrp-content-max); margin: 0 auto; padding: 0 var(--rrp-gap-5); }

/* === Phase-0 preview banner === */
.rrp-preview-banner {
  background: #fef3c7; border: 1px solid #d97706; color: #78350f;
  padding: 8px 14px; margin: 0; font: 13px/1.4 var(--rrp-sans); text-align: center;
}
.rrp-preview-banner a { color: #78350f; text-decoration: underline; }

/* === Sticky condensed header === */
/* Hidden until scrolled past hero; toggled via JS .rrp-stuck. */
.rrp-stickyhdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rrp-border);
  transform: translateY(-100%);
  transition: transform .25s ease;
  /* When offscreen, must NOT intercept touch events — iOS Safari has
   * historically eaten scroll on fixed-position elements with backdrop-filter
   * even when transformed offscreen. */
  pointer-events: none;
}
.rrp-stickyhdr.rrp-stuck { transform: translateY(0); pointer-events: auto; }
.rrp-stickyhdr-row {
  display: flex; align-items: center; gap: var(--rrp-gap-4);
  max-width: var(--rrp-content-max); margin: 0 auto;
  padding: 10px var(--rrp-gap-5);
}
.rrp-stickyhdr-addr { font: 600 15px/1.2 var(--rrp-sans); color: var(--rrp-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrp-stickyhdr-price { font: 700 16px/1.2 var(--rrp-sans); color: var(--rrp-navy); }
.rrp-stickyhdr-cta { padding: 8px 16px; background: var(--rrp-red); color: #fff; border: 0; border-radius: 4px; font: 600 13px/1 var(--rrp-sans); cursor: pointer; text-decoration: none; }
.rrp-stickyhdr-cta:hover { background: var(--rrp-red-deep); color: #fff; }

/* === Cinematic hero — horizontal swipe/scroll gallery === */
.rrp-hero {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 480px;
  max-height: 720px;
  background: var(--rrp-navy-deep);
  overflow: hidden;
}
.rrp-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Tell the browser: we handle horizontal pan on this element only.
   * Vertical pan must bubble to the page so vertical scroll keeps working. */
  touch-action: pan-x;
  scrollbar-width: none;            /* Firefox */
}
.rrp-hero-track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* Slot = per-image flex item that owns the scroll-snap and the per-slot
 * overlays (status pill, save/share, counter). Each slot's --vpad / --hpad
 * vars are the letterbox offsets (in %) of the contained image relative to
 * the slot box, so overlays anchor to the visible image edges, not the
 * slot/hero edges. */
.rrp-hero-slot {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.rrp-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--rrp-navy-deep);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.rrp-hero-counter {
  position: absolute;
  left:   calc(var(--hpad, 0%) + var(--rrp-gap-4));
  bottom: calc(var(--vpad, 0%) + var(--rrp-gap-4));
  background: rgba(0,0,0,0.55);
  color: #fff;
  font: 600 13px/1 var(--rrp-sans);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}

/* Desktop-only: peek pattern + chevron nav buttons.
 *   - Each image is 85% of the hero width with neighbors peeking on each side.
 *   - Track padding offsets snap so an image's "start" lands at 7.5% from the
 *     hero's left edge (rather than the viewport edge), keeping the active
 *     image visually centered with peeks left/right.
 *   - Chevron buttons fade in on hero hover for click navigation. */
.rrp-hero-nav {
  display: none;
}
@media (min-width: 901px) {
  /* Desktop hero matches dominant 4:3 MLS landscape aspect; with object-fit:
   * contain on the image, 4:3 photos fit nearly edge-to-edge, other aspects
   * letterbox against the navy background without cropping. */
  .rrp-hero {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    max-height: 80vh;
  }
  .rrp-hero-track {
    padding-inline: 4%;
    scroll-padding-inline: 4%;
    column-gap: var(--rrp-gap-3);
  }
  .rrp-hero-slot {
    flex-basis: 92%;
    border-radius: 4px;
    overflow: hidden;
  }
  .rrp-hero-img {
    border-radius: 4px;
  }
  /* Overlays use the same per-slot --vpad/--hpad pattern as mobile — no
   * special peek-pattern offset needed here, the slot IS the 92% column. */
  .rrp-hero-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    z-index: 3;
    opacity: 0;
    transition: opacity .2s ease, background-color .15s ease, transform .15s ease;
  }
  .rrp-hero-nav-prev { left: var(--rrp-gap-4); }
  .rrp-hero-nav-next { right: var(--rrp-gap-4); }
  .rrp-hero:hover .rrp-hero-nav,
  .rrp-hero-nav:focus-visible { opacity: 1; }
  .rrp-hero-nav:hover { background: rgba(0,0,0,0.78); }
  .rrp-hero-nav:active { transform: translateY(-50%) scale(0.94); }
  .rrp-hero-nav svg { width: 22px; height: 22px; display: block; }
}
.rrp-hero-tools {
  position: absolute;
  top:   calc(var(--vpad, 0%) + var(--rrp-gap-4));
  right: calc(var(--hpad, 0%) + var(--rrp-gap-4));
  display: flex; gap: var(--rrp-gap-2);
  z-index: 2;
}
/* Icon-only circular buttons over the hero — Zillow/Redfin pattern. The
 * label is on aria-label / title so a screen reader / hover-tooltip still
 * has the affordance, but the visible chrome is just the icon. */
.rrp-hero-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .15s ease, transform .15s ease;
}
.rrp-hero-tool:hover { background: rgba(0,0,0,0.7); color: #fff; }
.rrp-hero-tool:active { transform: scale(0.94); }
.rrp-hero-tool svg { width: 20px; height: 20px; display: block; }
/* Saved/favorited state — Houzez applies `.text-danger` to .add-favorite-js
 * elements when the listing is in favorites. Translate that into our visual:
 * red background, white-filled heart. */
.rrp-hero-tool[data-rrp-save].text-danger,
.rrp-hero-tool[data-rrp-save].is-saved {
  background: rgba(245, 67, 67, 0.92);
  color: #fff;
}
.rrp-hero-tool[data-rrp-save].text-danger svg path,
.rrp-hero-tool[data-rrp-save].is-saved svg path { fill: #fff; stroke: #fff; }
.rrp-hero-status {
  position: absolute;
  top:  calc(var(--vpad, 0%) + var(--rrp-gap-5));
  left: calc(var(--hpad, 0%) + var(--rrp-gap-5));
  padding: 6px 12px;
  background: rgba(255,255,255,0.95);
  color: var(--rrp-navy);
  border-radius: 4px;
  font: 700 11px/1 var(--rrp-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}
.rrp-hero-status.is-coming  { background: #0284c7; color: #fff; }
.rrp-hero-status.is-pending { background: #e0801a; color: #fff; }
.rrp-hero-status.is-water   { background: #0056a3; color: #fff; }

/* === Open house line (Sotheby's-style typographic) === */
.rrp-oh {
  background: var(--rrp-bg);
  border-bottom: 1px solid var(--rrp-border);
  padding: var(--rrp-gap-4) var(--rrp-gap-5);
  text-align: center;
  font-family: var(--rrp-serif);
  font-style: italic;
  color: var(--rrp-red-deep);
  font-size: 17px;
}
.rrp-oh-icon { display: inline-block; margin-right: 6px; }
.rrp-oh-sep  { display: inline-block; margin: 0 8px; opacity: 0.55; }
.rrp-oh-multi { font-style: italic; color: var(--rrp-ink-quiet); font-size: 14px; margin-top: 4px; }
.rrp-oh-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color .15s ease;
}
.rrp-oh-link:hover { color: var(--rrp-red-deep); border-bottom-color: currentColor; }
.rrp-oh-label { font-style: normal; font-weight: 600; letter-spacing: 0.02em; }

/* === Title row ===
 * Lives in column 1 of the .rrp-body grid (alongside the right-rail tour
 * card on desktop). H1 wraps the street address (line 1) + city/state/zip
 * (line 2) — single heading for SEO, line-break is presentational.
 *
 * Stack order inside this section: price → address H1 → stats → listed.
 * Price is the visual anchor; address is the SEO/scannable identity;
 * stats are typographic, not boxed.
 */
.rrp-title-row {
  /* Padding/border live on the section so the rail (taller column) doesn't
   * inherit the underline. No max-width — grid cell handles width. */
  padding: 0 0 var(--rrp-gap-5);
}
.rrp-title-h {
  font-family: var(--rrp-serif);
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--rrp-ink) !important;   /* override Houzez `h1 { color: var(--brand) }` */
  line-height: 1.05;
}
.rrp-title-h-1 {
  display: block;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.01em;
}
.rrp-title-h-2 {
  display: block;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--rrp-ink-quiet);
  margin-top: 2px;
}
.rrp-title-stats {
  font: 500 15px/1.6 var(--rrp-sans);
  color: var(--rrp-ink);
  margin: 8px 0 0;
  /* Allow the whole row to wrap freely; an individual stat ("2-car garage")
   * stays atomic via white-space: nowrap on the .item child. */
  overflow-wrap: anywhere;
}
.rrp-title-stats-item {
  /* Keep each stat part as a single unit — never break inside "Built 1900",
   * "2-car garage", "5.8 acres". The separator is the only break point. */
  white-space: nowrap;
}
.rrp-title-stats-sep { color: var(--rrp-border); margin: 0 8px; }
.rrp-title-listed {
  font: 500 13px/1.4 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: 4px 0 0;
}
/* Always-visible status chip — small eyebrow pill above the price/address
 * block. Buyers expect to see "FOR SALE" / "PENDING" without inferring it
 * from absence of other badges. */
.rrp-status-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font: 700 11px/1 var(--rrp-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 var(--rrp-gap-3);
}
.rrp-status-chip.is-active  { background: #137333; color: #fff; }
.rrp-status-chip.is-coming  { background: #0284c7; color: #fff; }
.rrp-status-chip.is-pending { background: #e0801a; color: #fff; }
.rrp-status-chip.is-sold    { background: #4b5563; color: #fff; }

.rrp-title-price {
  /* Price is the visual anchor of the title row. Mobile/default: stacked at
   * the top of the column, left-aligned. Desktop: moves into the .rrp-title-headrow
   * grid as the right-column item, vertically centered against the address. */
  font-family: var(--rrp-serif);
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 60px);
  color: var(--rrp-navy);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--rrp-gap-3);
}

/* Desktop side-by-side: address left (street + city stacked),
 * price right column spanning both rows, vertically centered against the block. */
@media (min-width: 901px) {
  .rrp-title-headrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "street price"
      "city   price";
    column-gap: var(--rrp-gap-5);
  }
  .rrp-title-headrow > .rrp-title-h     { display: contents; }
  .rrp-title-headrow .rrp-title-h-1     { grid-area: street; }
  .rrp-title-headrow .rrp-title-h-2     { grid-area: city; }
  .rrp-title-headrow > .rrp-title-price {
    grid-area: price;
    align-self: start;       /* top of price aligns with top of street address */
    text-align: right;
    margin: 0;
  }
}

/* === Body grid (title + main + rail) ===
 * grid-template-areas keeps the rail in its own column spanning two rows so
 * the tour card lands next to the title row — eye-level with the price/address,
 * not buried below the description and stubs.
 *
 *   desktop (>900px):       mobile (<=900px):
 *     "title rail"             "title"
 *     "main  rail"             "rail"      ← visible right after title
 *                              "main"
 */
.rrp-body {
  max-width: var(--rrp-content-max); margin: 0 auto;
  padding: var(--rrp-gap-6) var(--rrp-gap-5);
  display: grid;
  grid-template-columns: 1fr var(--rrp-rail-w);
  grid-template-areas:
    "title rail"
    "main  rail";
  column-gap: var(--rrp-gap-7);
  row-gap: var(--rrp-gap-5);
}
.rrp-title-row { grid-area: title; min-width: 0; }
.rrp-main      { grid-area: main;  min-width: 0; }
.rrp-rail      { grid-area: rail;  min-width: 0; }
.rrp-rail-sticky { position: sticky; top: 80px; }

/* === Tour card (right rail, Phase-1 placeholder; Phase 3 swaps the inner
       content for the Easy!Appointments widget — outer card stays). === */
.rrp-tour-card {
  background: #fff;
  border: 1px solid var(--rrp-border);
  border-radius: 6px;
  padding: var(--rrp-gap-5);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
}
.rrp-tour-card-eyebrow {
  font: 700 11px/1 var(--rrp-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rrp-red);
  margin: 0 0 var(--rrp-gap-3);
}
.rrp-tour-card-headline {
  font-family: var(--rrp-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--rrp-ink);
  margin: 0 0 var(--rrp-gap-2);
}
.rrp-tour-card-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--rrp-ink-quiet);
  margin: 0 0 var(--rrp-gap-4);
}
.rrp-tour-card-cta {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: var(--rrp-red);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font: 700 15px/1 var(--rrp-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease;
}
.rrp-tour-card-cta:hover { background: var(--rrp-red-deep); color: #fff; text-decoration: none; }
.rrp-tour-card-foot {
  font-size: 13px;
  line-height: 1.4;
  color: var(--rrp-ink-soft);
  text-align: center;
  margin: var(--rrp-gap-3) 0 0;
}
.rrp-tour-card-foot a {
  color: var(--rrp-navy);
  font-weight: 600;
  text-decoration: none;
}
.rrp-tour-card-foot a:hover { text-decoration: underline; }

/* === Open-house full-width band (between hero and body grid). === */
.rrp-oh-stub {
  background: var(--rrp-bg-soft);
  border-bottom: 1px solid var(--rrp-border);
  padding: var(--rrp-gap-3) var(--rrp-gap-5);
  text-align: center;
  font-family: var(--rrp-serif);
  font-style: italic;
  color: var(--rrp-ink-soft);
  font-size: 14px;
}

/* === Section primitives === */
.rrp-section {
  margin: 0 0 var(--rrp-gap-7);
}
.rrp-section h2 {
  font-family: var(--rrp-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0 0 var(--rrp-gap-4);
  color: var(--rrp-ink);
}

/* === Description === */
.rrp-desc {
  font: 400 17px/1.7 var(--rrp-sans);
  color: var(--rrp-ink);
}
.rrp-desc p { margin: 0 0 var(--rrp-gap-4); }
.rrp-desc p:last-child { margin-bottom: 0; }
.rrp-desc--clamped {
  max-height: 9em; overflow: hidden;
  position: relative;
}
.rrp-desc--clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--rrp-bg) 100%);
  pointer-events: none;
}
.rrp-desc-toggle {
  display: inline-block;
  margin-top: var(--rrp-gap-3);
  background: none; border: 0;
  font: 600 14px/1 var(--rrp-sans);
  color: var(--rrp-navy);
  cursor: pointer; padding: 0;
}
.rrp-desc-toggle:hover { text-decoration: underline; }

/* === Property details (additional_features) — semantic dl, 2-column rows. */
.rrp-features {
  margin: 0;
  display: block;
  border-top: 1px solid var(--rrp-border);
}
.rrp-features-row {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: var(--rrp-gap-4);
  padding: var(--rrp-gap-3) 0;
  border-bottom: 1px solid var(--rrp-border);
}
.rrp-features-row dt {
  font: 500 14px/1.4 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
  margin: 0;
}
.rrp-features-row dd {
  font: 400 15px/1.5 var(--rrp-sans);
  color: var(--rrp-ink);
  margin: 0;
}

/* === Schools (district name + assigned schools, no ratings). === */
.rrp-schools-district {
  font: 500 17px/1.4 var(--rrp-sans);
  color: var(--rrp-ink);
  margin: 0 0 var(--rrp-gap-3);
}
.rrp-schools-list {
  margin: 0 0 var(--rrp-gap-3);
  border-top: 1px solid var(--rrp-border);
}
.rrp-schools-row {
  display: grid;
  grid-template-columns: minmax(100px, 22%) 1fr;
  gap: var(--rrp-gap-4);
  padding: var(--rrp-gap-3) 0;
  border-bottom: 1px solid var(--rrp-border);
}
.rrp-schools-row dt {
  font: 500 14px/1.4 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
  margin: 0;
}
.rrp-schools-row dd {
  font: 400 15px/1.5 var(--rrp-sans);
  color: var(--rrp-ink);
  margin: 0;
}
.rrp-schools-row dd a { color: var(--rrp-navy); text-decoration: none; }
.rrp-schools-row dd a:hover { text-decoration: underline; }
.rrp-schools-disclaimer {
  font: italic 12px/1.5 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: var(--rrp-gap-3) 0 0;
}

/* === Nearby places (parks / boat landings / bike trails / partners) === */
.rrp-near-group { margin: 0 0 var(--rrp-gap-5); }
.rrp-near-group:last-child { margin-bottom: 0; }
/* Higher specificity (.rrp prefix) to override Houzez's default h3 sizing,
 * which otherwise renders this at 24–32px and breaks scan rhythm. */
.rrp .rrp-near-h {
  font: 600 13px/1.2 var(--rrp-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rrp-ink-quiet);
  margin: 0 0 var(--rrp-gap-2);
}
.rrp-near-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rrp-border);
}
.rrp-near-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rrp-gap-4);
  padding: var(--rrp-gap-3) 0;
  border-bottom: 1px solid var(--rrp-border);
}
.rrp-near-item-text { min-width: 0; flex: 1; }
.rrp-near-item-name { font: 500 15px/1.4 var(--rrp-sans); color: var(--rrp-ink); }
.rrp-near-item-name a { color: var(--rrp-ink); text-decoration: none; }
.rrp-near-item-name a:hover { color: var(--rrp-navy); text-decoration: underline; }
.rrp-near-item-desc { font: 400 13px/1.5 var(--rrp-sans); color: var(--rrp-ink-soft); margin-top: 2px; }
.rrp-near-item-dist { font: 600 13px/1 var(--rrp-sans); color: var(--rrp-ink); white-space: nowrap; }

/* === Property taxes — flat 2-col dl, same row rhythm as features. */
.rrp-tax {
  margin: 0 0 var(--rrp-gap-3);
  border-top: 1px solid var(--rrp-border);
}
.rrp-tax-row {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: var(--rrp-gap-4);
  padding: var(--rrp-gap-3) 0;
  border-bottom: 1px solid var(--rrp-border);
}
.rrp-tax-row dt {
  font: 500 14px/1.4 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
  margin: 0;
}
.rrp-tax-row dd {
  font: 400 15px/1.5 var(--rrp-sans);
  color: var(--rrp-ink);
  margin: 0;
}
.rrp-tax-row dd strong { font-weight: 600; }
.rrp-tax-year { color: var(--rrp-ink-soft); font-weight: 400; margin-left: 6px; }
/* `code.rrp-tax-parcel` — bumped specificity (.rrp prefix) to beat Houzez/
 * Bootstrap's default red `code` styling. Plain inline mono — no pill. */
.rrp code.rrp-tax-parcel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--rrp-ink);
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  user-select: all;
}
.rrp-tax-portal {
  font: 400 13px/1.5 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: var(--rrp-gap-3) 0 0;
}
.rrp-tax-portal a { color: var(--rrp-navy); text-decoration: none; }
.rrp-tax-portal a:hover { text-decoration: underline; }
.rrp-tax-legal {
  font: italic 12px/1.5 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: var(--rrp-gap-3) 0 0;
}

/* === Mortgage calculator — vanilla form, no chart. === */
.rrp-mort { display: block; }
.rrp-mort-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rrp-gap-4);
}
.rrp-mort-field { display: flex; flex-direction: column; gap: 4px; }
.rrp-mort-label {
  font: 500 13px/1.4 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
}
.rrp-mort-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rrp-border);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.rrp-mort-input-wrap input,
.rrp-mort .rrp-mort-input-wrap input {
  flex: 1;
  border: 0;
  padding: 10px 12px;
  font: 500 16px/1 var(--rrp-sans);
  color: var(--rrp-ink);
  background: #fff;
  width: 100%;
  -moz-appearance: textfield;
}
.rrp-mort-input-wrap input::-webkit-outer-spin-button,
.rrp-mort-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.rrp-mort-prefix, .rrp-mort-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font: 500 16px/1 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
  background: var(--rrp-bg-soft);
}
.rrp-mort-prefix { border-right: 1px solid var(--rrp-border); }
.rrp-mort-suffix { border-left: 1px solid var(--rrp-border); }
.rrp-mort .rrp-mort-field select {
  padding: 10px 12px;
  font: 500 16px/1 var(--rrp-sans);
  color: var(--rrp-ink);
  background: #fff;
  border: 1px solid var(--rrp-border);
  border-radius: 4px;
}
.rrp-mort-aux {
  font: 400 12px/1.4 var(--rrp-sans);
  color: var(--rrp-ink-soft);
}
.rrp-mort-result {
  margin-top: var(--rrp-gap-5);
  padding: var(--rrp-gap-5);
  background: var(--rrp-bg-soft);
  border-radius: 6px;
  border: 1px solid var(--rrp-border);
}
.rrp-mort-payment {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rrp-gap-4);
  padding-bottom: var(--rrp-gap-4);
  border-bottom: 1px solid var(--rrp-border);
}
.rrp-mort-payment-label {
  font: 500 14px/1 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
}
.rrp-mort-payment-amt {
  font-family: var(--rrp-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--rrp-navy);
  letter-spacing: -0.01em;
}
.rrp-mort-breakdown {
  margin: var(--rrp-gap-3) 0 0;
}
.rrp-mort-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font: 400 14px/1.4 var(--rrp-sans);
}
.rrp-mort-row dt { color: var(--rrp-ink-quiet); margin: 0; }
.rrp-mort-row dd { color: var(--rrp-ink); font-weight: 500; margin: 0; }
.rrp-mort-note {
  font: italic 12px/1.5 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: var(--rrp-gap-3) 0 0;
}
@media (max-width: 600px) {
  .rrp-mort-grid { grid-template-columns: 1fr; }
}

/* === Compliance footer — broker reciprocity + NWWMLS IDX disclaimer. */
.rrp-foot {
  max-width: var(--rrp-content-max);
  margin: 0 auto;
  padding: var(--rrp-gap-5) var(--rrp-gap-5) var(--rrp-gap-7);
  border-top: 1px solid var(--rrp-border);
}
.rrp-foot-broker {
  font: 400 14px/1.5 var(--rrp-sans);
  color: var(--rrp-ink-quiet);
  margin: 0 0 var(--rrp-gap-3);
}
.rrp-foot-broker strong { color: var(--rrp-ink); font-weight: 600; }
.rrp-foot-idx {
  font: 400 11px/1.55 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .rrp-foot { padding: var(--rrp-gap-4) var(--rrp-gap-4) var(--rrp-gap-5); }
}

/* === Map section (Phase 4) — embedded MapLibre with property pin + district outline. */
.rrp-map-section {}
.rrp-map-wrap {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--rrp-border);
}
.rrp-map-canvas {
  width: 100%;
  height: 420px;
  background: var(--rrp-bg-soft);
}
@media (max-width: 900px) { .rrp-map-canvas { height: 320px; } }

.rrp-map-caption {
  font: italic 13px/1.5 var(--rrp-sans);
  color: var(--rrp-ink-soft);
  margin: var(--rrp-gap-2) 0 0;
}
.rrp-map-legend {
  list-style: none; margin: var(--rrp-gap-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--rrp-gap-4);
}
.rrp-map-legend li {
  display: inline-flex; align-items: center;
  font: 500 13px/1 var(--rrp-sans); color: var(--rrp-ink-quiet);
}
.rrp-map-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 6px;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--rrp-border);
}
.rrp-gmap-info a { color: var(--rrp-navy); text-decoration: none; }
.rrp-gmap-info a:hover { text-decoration: underline; }

/* Google Maps InfoWindow content. The class lives inside Google's own DOM
 * (rendered after Maps JS runs), so we scope to .rrp-gmap-info directly. */
.rrp-gmap-info { font: 500 13px/1.4 var(--rrp-sans); color: var(--rrp-ink); min-width: 160px; }
.rrp-gmap-info strong { display: block; color: var(--rrp-navy); margin-bottom: 4px; font-weight: 600; }

/* === Stub sections (still being built) === */
.rrp-stub {
  background: var(--rrp-bg-soft);
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  padding: var(--rrp-gap-4);
}
.rrp-stub-label { color: var(--rrp-ink-soft); font: italic 13px/1.4 var(--rrp-sans); margin: 0; }

/* === Mobile === */
@media (max-width: 900px) {
  .rrp-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "rail"
      "main";
    gap: var(--rrp-gap-5);
    padding: var(--rrp-gap-5) var(--rrp-gap-4);
  }
  .rrp-rail-sticky { position: static; }
  /* Mobile hero: aspect-ratio = W/H of the FIRST gallery image (passed as
   * `--rrp-hero-wh` inline var on .rrp-hero). The hero box height is locked
   * for the whole gallery — no layout bounce on swipe.
   * Each image renders with object-fit: contain inside the box; for the
   * common case where every photo in the listing shares an aspect, every
   * photo fits edge-to-edge with zero navy. Outlier-aspect photos (e.g., a
   * single portrait shot) show with navy bands sized to the outlier image's
   * actual mismatch — never the whole hero. */
  .rrp-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--rrp-hero-wh, 1.3333);
  }
  .rrp-hero-track {
    align-items: stretch;
    padding: 0;
    column-gap: 0;
  }
  .rrp-hero-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--rrp-navy-deep);
    border-radius: 0;
  }
  .rrp-title-row { padding: 0; }
  .rrp-title-price { margin: 0 0 var(--rrp-gap-2); }
  .rrp-tour-card { padding: var(--rrp-gap-4); }
  .rrp-tour-card-headline { font-size: 20px; }
  .rrp-stickyhdr-row { padding: 8px var(--rrp-gap-4); }
  .rrp-stickyhdr-price { display: none; }
}