/* ============================================================
   NEIGHBORHOOD PAGES (/condos/<hood>/) and the DIRECTORY (/condos/).
   Loads after site.css, services.css (.k-* kit) and building.css (the
   shared .b-hero / .b-strip / .b-claim). Prefixed .b-* like the rest.

   .b-hood-hero     the split hero with .b-mosaic (hood photo or the hood's own building photos)
   .b-browse        one parent for the sticky .k-filters (browse kit v2) and the list-first .k-split (rows; map in Map mode)
   .b-rows / .b-row the building list rows (thumb, name, facts, live counts); .is-more hidden
   .b-small-list    the smaller (< 8 units) buildings
   .b-explore       link cards; .b-news reuses kit article cards
   .b-dir-hero      the directory's kit data hero with the finder; .b-finder-results dropdown
   .b-hoodcard      the directory's neighborhood cards (kit .k-bldg)
   ============================================================ */

/* ---------- hood hero mosaic ---------- */
.b-mosaic { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; aspect-ratio: 4 / 3; }
.b-mo { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: 14px; background: var(--term-panel); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.b-mo.big { grid-row: 1 / span 2; border-radius: 18px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.b-mo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.b-mo:hover img { transform: scale(1.04); }
.b-mo span { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 6px; background: rgba(11,13,16,.66); color: rgba(255,255,255,.88); font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.b-mo:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.b-mosaic:has(.b-mo:only-child) { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.b-mosaic:has(.b-mo:nth-child(2):last-child) { grid-template-rows: 1fr; }
.b-mosaic:has(.b-mo:nth-child(2):last-child) .b-mo.big { grid-row: auto; }

/* ---------- browse: the kit v2 bar + the list-first split (2026-10-20, like the hubs) ----------
   The v1 bar (search + Sort, the two chip rows inline, then count + Map / List) was 202px at 1440 and 251 at 768;
   now two rows (search, Show / Built menus | Quick picks, Sort, List | Map), about 115px. List mode is the rows,
   two up when the list is wide; Map mode is the kit's panel (map + a rail of rows; on phones a full-screen map
   with the rows on a sideways rail). */
.b-browse { position: relative; background: var(--paper); }
.b-browse .k-filters { top: 0; }
.b-browse-in { padding-block: 18px 56px; }
.b-hoodpage .k-chip .ct { font-size: 11.5px; }   /* the hubs' chip count size */
.b-rows { display: grid; gap: 8px; }
@container klist (min-width: 900px) { .b-browse .b-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.b-more-wrap { margin-top: 14px; }
.b-more-wrap[hidden] { display: none; }
.b-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--hairline); border-radius: 12px; background: #FBFAF7; color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.b-row:hover, .b-row.is-on { border-color: var(--ink); transform: translateY(-1px); }
.b-row.is-on { box-shadow: 0 0 0 2px rgba(242,179,54,.6); }
.b-row[hidden], .b-row.is-more { display: none; }
.b-row-img { position: relative; display: block; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--k-skel); flex: none; }
.b-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-row-img.is-sat { background: #171B21; }
.b-row-img.is-lazy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #EDEAE2, #E3DFD6); }
.b-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-row-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.b-row-addr { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-row-facts { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.b-row-live { text-align: right; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-row-live b { color: var(--ink); font-weight: 800; }
.b-row-live .is-quiet { color: var(--ink-soft); font-weight: 600; }
.b-row-live .k-status { font-size: 9.5px; }
.b-browse #h-more { width: 100%; justify-content: center; }
.b-browse .k-empty { margin-top: 8px; }
.b-browse .k-split-list > .k-note { margin-top: 18px; }
.b-pop { display: block; text-decoration: none; color: var(--ink); font-family: 'Sora', 'Sora Fallback', sans-serif; min-width: 160px; }
.b-pop b { display: block; font-size: 13.5px; }
.b-pop span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-soft); }
.b-pop em { display: block; margin-top: 6px; font-size: 12px; font-style: normal; font-weight: 700; color: #8A5B00; }
.b-browse .leaflet-popup-content-wrapper { border-radius: 10px; }
.b-browse .leaflet-popup-content { margin: 12px 14px; }
.b-browse .leaflet-container { font-family: 'Sora', 'Sora Fallback', sans-serif; }
.b-browse .leaflet-control-attribution { font-size: 9.5px; }

/* a narrow list (the Map mode rail, phones): the compact row, live counts under the facts */
@container klist (max-width: 560px) {
  .b-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px 12px; padding: 10px; }
  .b-row-img { width: 84px; height: 64px; }
  .b-row-live { grid-column: 2; text-align: left; }
  .b-row-live br { display: none; }
  .b-row-live b ~ b { margin-left: 12px; }   /* one line: "19 for sale  70 for lease" (a flex gap also split each number from its words) */
}
/* Map mode, phones: the kit's sideways rail holds the rows (its rules are written for .k-cards) */
@media (max-width: 760px) {
  .b-browse .k-split[data-k-split="2"][data-view="map"] .k-split-list > .b-rows { display: flex; gap: 10px; padding: 0; }
  .b-browse .k-split[data-k-split="2"][data-view="map"] .b-row { flex: 0 0 84%; min-width: 0; scroll-snap-align: center; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); transform: none; }
  .b-browse .k-split[data-k-split="2"][data-view="map"] .k-split-list > .k-empty:not([hidden]) { display: block; margin: 0; padding: 20px; border-radius: 12px; background: var(--paper); }
}

/* ---------- smaller buildings ---------- */
.b-small-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 24px; }
.b-small-list li { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; min-width: 0; }
.b-small-list a { font-weight: 700; color: var(--ink); text-decoration: none; }
.b-small-list a:hover { color: var(--amber-ink, #8A5B00); }
.b-small-list small { display: block; color: var(--ink-soft); margin-top: 2px; }

/* ---------- explore cards ---------- */
.b-explore .k-card-body h3 { font-size: 1.05rem; }

/* ---------- directory ---------- */
.b-dir-hero .k-hero-in { min-height: min(60vh, 560px); }
.b-finder-results { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; }
.b-finder-results[hidden] { display: none; }
.b-finder-results li { border-bottom: 1px solid var(--hairline); }
.b-finder-results li:last-child { border-bottom: 0; }
.b-finder-results a { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; text-decoration: none; color: var(--ink); }
.b-finder-results a:hover, .b-finder-results a:focus-visible { background: var(--paper-deep); outline: none; }
.b-finder-results b { font-size: 14px; }
.b-finder-results span { font-size: 12px; color: var(--ink-soft); }
.b-finder-results .is-none { padding: 12px 13px; font-size: 13px; color: var(--ink-soft); }
.b-hoodcard .k-card-img { aspect-ratio: 16 / 10; }
.b-hoodcard .k-card-body h3 { font-size: 1.12rem; }
.b-dirpage .k-table-wrap { background: var(--k-surface); }
.b-dirpage .k-table td a { color: var(--ink); }
.b-dir-more { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .b-mosaic { order: -1; aspect-ratio: 16 / 9; grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 700px) {
  /* phones: one wide photo, after the copy, not three tiles above the h1. The mosaic (355px at 390) pushed the
     h1 to 618px and the primary CTA under the fold on every hood and community page (846-1046px vs an 844px
     screen). The two smaller tiles are buildings that lead the list right below. */
  .b-mosaic { order: 0; aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 8px; }
  .b-mo.big { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .b-mo:not(.big) { display: none; }
  .b-mo span { font-size: 11px; left: 8px; right: 8px; bottom: 8px; }
  .b-browse-in { padding-block: 14px 44px; }
  .b-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px 12px; padding: 10px; }
  .b-row-img { width: 84px; height: 64px; }
  .b-row-live { grid-column: 2; text-align: left; }
  .b-row-live br { display: none; }
  .b-row-live b ~ b { margin-left: 12px; }
  .b-small-list { gap: 0; }
  /* directory: corridor cards become rows, the active table shows 10 compact cards until "Show all" */
  #hoods .k-grid { gap: 10px; }
  .b-hoodcard { flex-direction: row; }
  .b-hoodcard .k-card-img { flex: none; width: 112px; min-height: 92px; aspect-ratio: auto; }
  .b-hoodcard .k-card-img img { position: absolute; inset: 0; }
  .b-hoodcard .k-card-cap { display: none; }
  .b-hoodcard .k-card-body { padding: 12px 14px; gap: 4px; }
  .b-dirpage #active .k-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 11px 13px; margin-bottom: 8px; }
  .b-dirpage #active:not(.is-all) .k-table tbody tr:nth-child(n+11) { display: none; }
  .b-dir-more { display: inline-flex; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-mo img, .b-row { transition: none; }
  .b-mo:hover img, .b-row:hover { transform: none; }
}