/* BLX BUILDING DOSSIER — "Headline & Rail"
 *
 * The building-data block used to be five stacked slabs, each with its own
 * background, column width and padding, ~1,000px tall and all one flat weight,
 * so nothing stood out. This gives it a hierarchy instead:
 *
 *   a dark banner carries the two figures a buyer actually opens the page for
 *   (median closing, median rent), and everything else sits quietly beneath it
 *   in three columns.
 *
 * Nothing is hidden, so the per-building content that earns these pages their
 * indexing stays fully visible.
 *
 * Layout is set up by blx-dossier-c.js (it moves the stats block above the rest
 * and wraps the remaining sections in .blx-rail). !important is needed
 * throughout because the original markup carries inline styles.
 */

/* ============ 1 · THE BANNER ============ */
.blx-stats.blx-banner {
  background: #17242E !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.blx-stats.blx-banner .blx-stats-in {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 20px 40px 22px !important;
  box-sizing: border-box;
}
.blx-stats.blx-banner .blx-stats-h {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: #C9A96A !important;
  font-weight: 500 !important;
  margin: 0 0 14px !important;
}
/* the figures sit on one line: the two headline numbers first, then the rest */
.blx-stats.blx-banner .blx-stats-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 0 34px !important;
  border: 0 !important;
}
.blx-stats.blx-banner .blx-stat {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  order: 2;
  flex: 0 0 auto;
}
.blx-stats.blx-banner .blx-stat.hr-big { order: 1; margin-right: 8px; }
.blx-stats.blx-banner .blx-stat-l {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(243, 238, 228, .5) !important;
  font-weight: 500 !important;
  margin: 0 0 3px !important;
}
.blx-stats.blx-banner .blx-stat-v {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  color: #F3EEE4 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums;
}
.blx-stats.blx-banner .blx-stat.hr-big .blx-stat-v {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  color: #FFFFFF !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em;
}
.blx-stats.blx-banner .blx-stat-s {
  font-size: .7rem !important;
  color: rgba(243, 238, 228, .45) !important;
  margin-top: 3px !important;
}

/* ============ 2 · THE RAIL ============ */
/* Flex, not grid: a grid reserves a track for a column that renders nothing,
   which left a dead third of the page on buildings whose rental policy has too
   little data to show. Flex lets the remaining columns share the full width. */
.blx-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #E2DACB;
  border-bottom: 1px solid #E2DACB;
}
/* the rental mount is always in the DOM; it only fills in when the API returns
   something trustworthy, so drop it from the row while it is still empty */
#blx-rentpol.blx-railcol:empty { display: none !important; }
.blx-railcol {
  flex: 1 1 300px;
  min-width: 0;
  background: #F3EEE4 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}
/* every column shares one inner rhythm */
.blx-railcol .blx-spec-wrap,
.blx-railcol > div,
.blx-railcol > .rp-card {
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 20px 18px !important;
  box-sizing: border-box;
}

/* one eyebrow for every column */
.blx-railcol .blx-spec-head .k,
.blx-railcol .rp-eyebrow,
.blx-railcol .bld-facts-title {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #B0895A !important;
  font-weight: 500 !important;
  margin: 0 0 10px !important;
}
.blx-railcol .blx-spec-head {
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
}
.blx-railcol .blx-spec-head .status { display: none !important; } /* banner already says it */
.blx-railcol .blx-spec-foot { display: none !important; }

/* Building Facts opens with a centred eyebrow ("The rules & the numbers") plus a
   big heading carrying the building name. Drop the eyebrow, collapse the heading
   to its emphasised half, and the column label reads "Building facts" like the
   others. NOTE the compound selector: .bld-facts IS the rail column, so
   ".blx-railcol .bld-facts" (a descendant) never matches. */
.blx-railcol.bld-facts > div > div:first-child {
  text-align: left !important;
  margin: 0 0 10px !important;
}
.blx-railcol.bld-facts > div > div:first-child > div:first-child { display: none !important; }
.blx-railcol.bld-facts h2 { font-size: 0 !important; margin: 0 !important; text-align: left !important; }
.blx-railcol.bld-facts h2 span { font-size: 0 !important; }
.blx-railcol.bld-facts h2 em {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #B0895A !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: inline-block;
}

/* rows inside a column: label left, value right, dotted rule between */
.blx-railcol .blx-spec-grid,
.blx-railcol .bld-facts-grid,
.blx-railcol .rp-grid {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.blx-railcol .blx-spec-cell,
.blx-railcol .bld-facts-grid > div,
.blx-railcol .rp-cell {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 14px;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px dotted rgba(26, 58, 74, .18) !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}
.blx-railcol .blx-spec-cell:last-child,
.blx-railcol .bld-facts-grid > div:last-child,
.blx-railcol .rp-cell:last-child { border-bottom: 0 !important; }

.blx-railcol .blx-spec-cell .lbl,
.blx-railcol .bld-facts-grid .bfl,
.blx-railcol .rp-l {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(26, 58, 74, .6) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.blx-railcol .blx-spec-cell .val,
.blx-railcol .bld-facts-grid .bfv,
.blx-railcol .rp-v {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1A3A4A !important;
  line-height: 1.35 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* the small print under a facts card is noise in a narrow column */
.blx-railcol .bld-facts-grid .bfs { display: none !important; }
.blx-railcol.bld-facts > div > p { display: none !important; }

/* rental policy: card chrome off, verdict pill up next to the eyebrow */
.blx-railcol > .rp-card {
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: none !important;
}
.blx-railcol .rp-top {
  padding: 0 !important; margin: 0 0 10px !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 10px;
}
.blx-railcol .rp-h { display: none !important; }
.blx-railcol .rp-pill { font-size: 10.5px !important; padding: 4px 10px !important; white-space: nowrap; }

/* ============ 3 · THE LINKS LINE ============ */
.bld-links {
  background: #FAF7F2 !important;
  border: 0 !important;
  border-bottom: 1px solid #E2DACB !important;
  max-width: none !important;
  text-align: left !important;
  font-size: .86rem !important;
  color: rgba(26, 58, 74, .62) !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  padding-left: max(22px, calc((100% - 1120px) / 2 + 40px)) !important;
  padding-right: max(22px, calc((100% - 1120px) / 2 + 40px)) !important;
}

/* ============ 4 · MOBILE ============ */
@media (max-width: 900px) {
  .blx-stats.blx-banner .blx-stats-in { padding: 16px 22px 18px !important; }
  .blx-stats.blx-banner .blx-stats-grid { gap: 12px 24px !important; }
  .blx-stats.blx-banner .blx-stat.hr-big { flex: 1 0 44%; }
  .blx-railcol .blx-spec-wrap,
  .blx-railcol > div,
  .blx-railcol > .rp-card { padding: 15px 22px 16px !important; }
  .bld-links { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ============ 5 · PHONE ============
 * On a 390px screen the banner ran ~250px, and most of that was repetition:
 * six stats each carrying a sub-line ("Last 12 months", "From 30 sales
 * reporting size"). Three changes, no content removed from the page:
 *   a. sub-lines stay only under the two headline figures, where they say
 *      what the median is drawn from; the four secondary stats drop theirs.
 *   b. secondary stats go three-up instead of two-up.
 *   c. tighter padding and row height throughout.
 */
@media (max-width: 640px) {
  .blx-stats.blx-banner .blx-stats-in { padding: 14px 20px 15px !important; }
  .blx-stats.blx-banner .blx-stats-h { margin-bottom: 10px !important; font-size: 10px !important; }
  /* A TWO-COLUMN GRID, not flex. Flexed cells sized themselves to their content,
     so the wide "Price range" pushed the row out of step and left "Closed leases"
     stranded alone on a line. A grid gives every cell the same width and lines
     the rows up, which is the symmetry the page was missing on a phone. */
  .blx-stats.blx-banner .blx-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    align-items: start !important;
  }
  .blx-stats.blx-banner .blx-stat { order: 2; }

  /* a. the two headline figures lead and keep their context line */
  .blx-stats.blx-banner .blx-stat.hr-big { order: 1; margin: 0 !important; }
  .blx-stats.blx-banner .blx-stat.hr-big .blx-stat-v { font-size: 1.5rem !important; }

  /* the four secondary stats: same width, no sub-line */
  .blx-stats.blx-banner .blx-stat:not(.hr-big) .blx-stat-s { display: none !important; }
  .blx-stats.blx-banner .blx-stat:not(.hr-big) .blx-stat-v { font-size: .9rem !important; }
  .blx-stats.blx-banner .blx-stat-l { font-size: 9px !important; letter-spacing: .12em !important; }

  /* c. the rail columns: shorter rows, no wasted side padding */
  .blx-railcol .blx-spec-wrap,
  .blx-railcol > div,
  .blx-railcol > .rp-card { padding: 13px 20px 14px !important; }
  .blx-railcol .blx-spec-cell,
  .blx-railcol .bld-facts-grid > div,
  .blx-railcol .rp-cell { padding: 5px 0 !important; }
  .blx-railcol .blx-spec-cell .lbl,
  .blx-railcol .bld-facts-grid .bfl,
  .blx-railcol .rp-l { font-size: 12px !important; }
  .blx-railcol .blx-spec-cell .val,
  .blx-railcol .bld-facts-grid .bfv,
  .blx-railcol .rp-v { font-size: 12.5px !important; }
  /* The links row is written as a sentence ("<Building> is in <hood> · View
     rentals at <Building> · Walk Score"). At 390px that sentence wraps mid
     phrase and the underlines break across lines, which is what made it look
     crooked. On a phone, drop the connecting prose and the middots (every
     direct-child span) and give each link its own line. The links themselves
     are <a> children, so they are untouched, as is the desktop sentence. */
  .bld-links {
    font-size: .82rem !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    gap: 9px;
  }
  .bld-links > span { display: none !important; }
  .bld-links > a { display: block; }
}