/* ==========================================================================
   listings.css — IDX pages: screener (/properties), listing detail, collections, calculator extras.
   Page layout only; every component is styled in site.css (DESIGN.md §3.4–3.6). Semantic tokens only.
   Page scopes come from bodyClass: .page-search, .page-listing, .page-collection(s).
   New element classes (to mirror in DESIGN.md): .filter-sheet__options, .filter-sheet__row, .price-block__note,
   .price-block__rate(-how), .listing, .listing__gallery, .listing__section, .listing__note, .listing__place,
   .listing__map, .listing__legal, .listing__related, .listing__ask, .listing__print-head, .listing__print-contact,
   .listing-tools(__media), .results__refine; attribute hooks [data-bp="1200"] (pill shown from 1200px),
   .calc[data-view] and .calc__how[data-complete].
   ========================================================================== */

/* ---- Calculator: "Basic" hides advanced inputs before calculator.js runs (html.js is set in <head>) ---- */
.js .calc[data-view="basic"] [data-advanced]{ display:none; }
.calc__foreign{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; justify-items:start; }
.calc__foreign > p{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.calc__results .term{ color:inherit; }
.calc__legend b{ font-weight:600; color:var(--text); }

/* ==========================================================================
   Filter bar + sheet (search)
   ========================================================================== */
.filter-bar{ padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2)); }
/* The sticky bar is a stacking context (z-index 20): lift it above the header while the sheet is open,
   otherwise the fixed sheet (and its header with the close button) renders under .site-header. */
.filter-bar:has(.filter-sheet[open]){ z-index:calc(var(--z-header) + 5); }
.filter-bar__pill{ flex:0 1 auto; min-width:0; }
.filter-bar__pill:not(:has(> .filter-bar__summary.is-active)){ flex-shrink:0; }   /* only long active values truncate */
.filter-bar__summary{ max-width:100%; }
.filter-bar__summary > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.filter-bar__panel .field__label{ margin-top:2px; }
.filter-bar__pill[data-bp] .filter-bar__panel{ left:auto; right:0; }
@media (min-width:980px){
  .filter-bar__search{ min-width:160px; }
  .filter-bar__pill[data-bp="1200"]{ display:none; }
  .filter-bar .filter-bar__alerts-label{ display:none; }
}
@media (min-width:1200px){
  .filter-bar__pill[data-bp="1200"]{ display:block; }
  .filter-bar .filter-bar__alerts-label{ display:inline; }
}
.filter-sheet__options{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.filter-sheet__options .field--check{ align-items:center; min-height:var(--tap); }
.filter-sheet__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.filter-sheet__section > .btn--link{ justify-self:start; }
.filter-sheet__section > .field__hint{ margin-top:-4px; }
@media (min-width:640px){
  .filter-sheet__body .filter-sheet__options{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
}

/* ==========================================================================
   Results (search + collections)
   ========================================================================== */
.page-search .results{ padding-block:var(--space-4) var(--section-y-tight); }
.page-search .results-head{ padding-block:var(--space-2) 0; }
.page-search .results-head .eyebrow{ margin-bottom:-4px; }
.results .empty-state{ max-width:560px; }
.results .empty-state > .chip-row__label{ margin-bottom:-8px; }
.results__refine{ display:flex; justify-content:center; }
.feed-card--advisor > img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.page-collection .results > .section-head{ margin-bottom:0; }
.page-collection .hero--page .chip-row{ margin-inline:-4px; }

/* ==========================================================================
   Listing detail
   ========================================================================== */
.listing{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6);
  padding-block:var(--space-4) var(--section-y-tight);
}
.listing__gallery{ position:relative; min-width:0; }
.listing__gallery .gallery > img{ flex-basis:calc(100% - 40px); }
.listing__gallery .gallery > img:only-of-type{ flex-basis:100%; }
.js .gallery[data-zoom] > img{ cursor:zoom-in; }
@media (min-width:980px){
  .listing__gallery .gallery > img:nth-of-type(n+6){ display:none; }
  /* Fewer than 5 photos: one 16/9 image (site.css). Keep it at most 520px tall by narrowing the whole frame
     (photo + status badge + "see all" button), never by cropping it further: a height cap on the full-width
     image cut 3:2 photos to about 2.3:1 and clipped the placeholder's caption. */
  .listing__gallery:not(:has(> .gallery > img:nth-of-type(5))){ width:100%; max-width:calc(520px * 16 / 9); margin-inline:auto; }
}

.price-block__note{ flex-basis:100%; font-size:var(--fs-sm); color:var(--muted); }
.price-block__main > .listing-card__mxn{ flex-basis:100%; margin-top:-8px; }
/* Commercial lease: the calculated rent per ft² a year under the monthly rent. */
.price-block__rate{
  flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:-6px;
  font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-2);
}
.price-block__rate-how{ font-size:var(--fs-xs); font-weight:400; color:var(--muted); }
.listing__ask{ font-weight:400; color:var(--muted); }

/* Under the price block: virtual tour + video walkthrough, then share and print (partials/share.php). */
.price-block > .listing-tools{ grid-column:1 / -1; }
.listing-tools{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding-top:16px; border-top:1px solid var(--line); min-width:0; }
.listing-tools__media{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }

/* Printed investor sheet only (see @media print below). */
.listing__print-head,.listing__print-contact{ display:none; }

.listing__section{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); min-width:0; align-content:start; }
.listing__section > h2,.detail .calc__head > h2{ font-size:var(--fs-h3); line-height:var(--lh-heading); letter-spacing:var(--tracking-tight); }
.listing__section > .prose{ max-width:none; }
.listing__note{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--muted); }
.listing__note .icon{ width:var(--icon-sm); height:var(--icon-sm); }
.listing__place{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:15px; color:var(--text-2); }
.listing__place .icon{ color:var(--icon-accent); }
.listing__map{ overflow:hidden; border-radius:var(--radius-md); background:var(--surface-2); }
.listing__legal{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
.listing__section .stat-grid--tiles .stat__value{ font-size:var(--fs-stat-md); }
.listing__section .contact-card{ max-width:520px; }

/* Calculator inside the narrow detail column: one column until 1200px, then inputs + sticky results. */
.detail .calc:not(.calc--teaser){ grid-template-columns:minmax(0,1fr); }
.detail .calc:not(.calc--teaser) > .calc__results{ position:static; }
@media (min-width:1200px){
  .detail .calc:not(.calc--teaser){ grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr); }
  .detail .calc:not(.calc--teaser) > .calc__results{ position:sticky; top:calc(var(--header-h) + var(--tabs-h) + 16px); }
}

/* The sticky tabs sit flush with the column; keep a little air above the first section. */
.detail .section-tabs{ margin-inline:calc(-1 * var(--space-2)); padding-inline:var(--space-2); }
@media (min-width:980px){ .detail .section-tabs{ margin-inline:0; padding-inline:0; } }

/* ==========================================================================
   Listing detail, printed: a one-to-two-page investor sheet in the page's language ("Print / save as PDF" in
   partials/share.php, or the browser's own print). On paper: who prepared it, the main photo, price and key facts,
   the description, the investor numbers with the assumptions and cap-rate steps (when there is a cap rate), drive
   times, the agent's contact lines, the IDX attribution and the MLS notice. Not on paper: navigation, buttons, forms,
   thumbnails, the map, other listings, the sticky bars.
   ========================================================================== */
@media print{
  @page{ margin:10mm 11mm 12mm; }
  body.page-listing,body.page-listing:has(.mobile-cta){ padding-bottom:0; background:var(--white); font-size:9.5pt; }
  .page-listing [data-reveal]{ opacity:1 !important; transform:none !important; }
  .page-listing :is(.breadcrumb,.site-footer,.detail__rail,.listing-tools,.invest-chip,.gallery__count,.lightbox,.btn,
    .fact-tiles,.cta-band,.lead-form,.contact-card,.listing__related,.listing__map,.calc__inputs,.calc__head .segmented,
    .calc__head > .eyebrow,.calc__hint[data-out="hint"],.calc__results > .calc__label:not([id]),.calc__stack,.calc__legend,
    .calc__kpi-link,.calc__note,.calc__status,.calc__how-list,.calc__how-h ~ .calc__how-h,.calc__how-notes > p,.faq__chev,
    .travel-times__row:nth-child(n+4),.listing__place > a,.notice__text a,.listing__note:has(> a[href^="#"]),
    .travel-times + .calc__hint,.agent-card__langs,.calc__how-formula,.calc__how-src){ display:none !important; }
  /* The calculator prints the same cost, cash and cap-rate figures with its assumptions: the short list is not repeated. */
  .page-listing #inversion:has(~ #calculadora) > .facts{ display:none !important; }

  /* Who prepared the sheet, and where the listing lives online. */
  .page-listing .listing__print-head{
    display:grid; gap:2px; padding-bottom:6px; border-bottom:1.5px solid var(--ink-900);
    font-size:9pt; line-height:1.4; color:var(--ink-900);
  }
  .page-listing .listing__print-head p:last-child{ color:var(--stone-500); overflow-wrap:anywhere; }
  .page-listing .listing{ gap:10px; padding-block:0 6px; }

  /* The main photo only (the key facts are in the details list, so the fact tiles are not printed). */
  .page-listing .listing__gallery{ width:100%; max-width:none; break-inside:avoid; }
  .page-listing .gallery{ display:block !important; height:auto !important; overflow:visible; border-radius:var(--radius-sm); background:none; }
  .page-listing .gallery > img{ display:none !important; }
  .page-listing .gallery > img:first-of-type{ display:block !important; width:100%; height:40mm; aspect-ratio:auto; object-fit:cover; border-radius:var(--radius-sm); }

  /* One column, tight rhythm, small type (9pt = the site's 12px floor). */
  .page-listing .detail,.page-listing .detail__main{ display:block; }
  .page-listing .detail__main > * + *{ margin-top:10px; }
  /* Block flow, not grid, so a heading never stays alone at the foot of a page (break-after:avoid). */
  .page-listing .listing__section{ display:block; }
  .page-listing .listing__section > * + *{ margin-top:6px; }
  .page-listing .listing__section > h2,.page-listing .detail .calc__head > h2{ font-size:13pt; break-after:avoid; }
  .page-listing .price-block{ grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; }
  .page-listing .price-block__price{ font-size:20pt; }
  .page-listing .price-block__stats{ grid-column:2; grid-row:1; padding-top:2px; gap:8px 20px; }
  .page-listing .price-block__stats dd{ font-size:14pt; }
  .page-listing .idx-attribution{ font-size:9pt; }
  .page-listing #detalles .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
  .page-listing .facts__row{ padding-block:2px; gap:8px; }
  .page-listing .facts__row > dt,.page-listing .facts__row > dd{ font-size:9pt; }
  .page-listing .stat-grid--tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .page-listing .stat-grid--tiles > .stat{ gap:2px; padding:6px 8px; border:1px solid var(--line); background:none; }
  .page-listing .listing__section .stat-grid--tiles .stat__value{ font-size:13pt; }
  .page-listing :is(.stat__label,.stat__caption,.stat__source){ font-size:9pt; }
  .page-listing .notice{ padding:6px 10px; font-size:9pt; }
  .page-listing .notice--disclaimer{ padding-top:6px; font-size:9pt; }
  .page-listing .prose{ font-size:9pt; line-height:1.45; }
  .page-listing .listing__note{ font-size:9pt; }
  .page-listing .travel-times__row{ grid-template-columns:18px minmax(0,1fr) auto; gap:8px; padding-block:2px; font-size:9pt; }
  .page-listing .travel-times__key{ width:18px; height:18px; }
  .page-listing :is(.facts__row,.stat,.calc__how-row,.calc__line,.calc__kpis,.notice,.agent-card,.travel-times__row,.idx-attribution){ break-inside:avoid; }

  /* Investor numbers: results (the dark panel's tokens back to ink on paper) beside the cap-rate steps. On paper the
     steps drop their per-row source tags: "Is it accurate?" below them lists the same sources by group. The block is
     kept on one page (about half a sheet): a grid ignores break-after:avoid, so its heading could be left alone. */
  .page-listing .detail .calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:6px 24px; align-items:start; padding:0; border:0; background:none; break-inside:avoid; }
  .page-listing .detail .calc > .calc__head{ grid-column:1 / -1; }
  .page-listing .detail .calc > .calc__results{ grid-column:1; grid-row:2; }
  .page-listing .detail .calc > .calc__how{ grid-column:2; grid-row:2; }
  .page-listing .detail .calc:has(> .calc__how[data-complete="0"]) > .calc__results{ grid-column:1 / -1; }
  /* No rent, no cap rate: paper shows the costs and cash to close, not a row of dashes for cash flow and returns. */
  .page-listing .detail .calc:has(> .calc__how[data-complete="0"]) :is(.calc__results > .calc__label[id],.calc__hero-metric,.calc__kpis){ display:none !important; }
  .page-listing .calc__results{
    color-scheme:light; --bg:var(--white); --surface:var(--white); --surface-2:transparent;
    --text:var(--ink-900); --text-2:var(--ink-700); --muted:var(--stone-500);
    --line:rgba(13,27,46,.16); --line-strong:rgba(13,27,46,.32); --accent:var(--brass-600);
    --positive:var(--green-600); --negative:var(--brick-600); --link:var(--ink-900);
    position:static; gap:4px; padding:0; border:0; border-radius:0; background:none !important; color:var(--text) !important; box-shadow:none;
  }
  .page-listing .calc__results .calc__label{ font-size:9pt; }
  .page-listing .calc__hero-metric{ font-size:16pt; }
  .page-listing .calc__kpi{ padding:4px 8px; border:1px solid var(--line); }
  .page-listing .calc__kpi > b{ font-size:12pt; }
  .page-listing .calc__line{ padding-block:3px; font-size:9pt; }
  .page-listing .calc__assumptions[hidden]{ display:block !important; font-size:9pt; line-height:1.4; color:var(--stone-500); }
  .page-listing .calc__how{ border:0; border-radius:0; background:none; container-type:normal; }
  .page-listing .calc__how[data-complete="0"]{ display:none !important; }
  .page-listing .calc__how-summary{ padding:0 0 4px; font-size:10pt; }
  .page-listing .calc__how-body{ grid-template-columns:minmax(0,1fr); padding:0; gap:6px; }
  .page-listing .calc__how-notes{ font-size:9pt; line-height:1.4; gap:2px; }
  .page-listing .calc__how-h{ font-size:9pt; }
  .page-listing .calc__how-row{ padding-block:2px; font-size:9pt; }
  .page-listing .calc__how-calc > .calc__hint{ font-size:9pt; }

  /* Agent contact on paper: the card and the contact lines side by side, kept together with their heading. */
  .page-listing #agente{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 24px; align-items:center; break-inside:avoid; }
  .page-listing #agente > *{ margin-top:0; }
  .page-listing #agente > h2{ grid-column:1 / -1; }
  .page-listing .agent-card--compact{ grid-template-columns:15mm minmax(0,1fr); column-gap:12px; row-gap:2px; }
  .page-listing .agent-card--compact > .agent-card__photo{ width:15mm; }
  .page-listing .listing__print-contact{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; font-size:9pt; }
  .page-listing .listing__print-contact > div{ display:flex; flex-wrap:wrap; gap:0 8px; }
  .page-listing .listing__print-contact dt{ font-weight:600; }
  .page-listing .listing__print-contact dd{ margin:0; overflow-wrap:anywhere; }

  /* IDX attribution and the MLS notice stay, compact. */
  .page-listing .section--tight{ padding-block:8px 0; }
  .page-listing .listing__legal{ gap:6px; }
  .page-listing .idx-attribution--block{ gap:0; padding-top:6px; font-size:9pt; }
  .page-listing .notice--mls{ padding-top:6px; font-size:9pt; }
}
/* Chrome / Safari: print a closed breakdown's content even without the beforeprint hook (its own rule: an unknown
   pseudo-element drops the whole rule). */
@media print{
  .page-listing .calc__how[data-complete="1"]::details-content{ content-visibility:visible; }
}