/* commercial.css — StanzaX commercial portal.
   Loaded AFTER /listings.css, which already provides the shell: .plate .foot .wrap
   .crumb .grid .card .gallery .cols .main .rail .lead .specrow .dl .block .msnap
   .hub-intro .hubfaq .sbar .ssplit .browse. This file adds ONLY what commercial
   needs on top — no residential selectors are redefined, so nothing here can
   regress the ~3,200 existing listing pages. */

/* ---- no-photo state ---------------------------------------------------- */
/* A meaningful share of CI inventory ships without photos. A blank grey box reads
   as broken, so the empty state is deliberate: brand gradient + the use label. */
.nophoto{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  min-height:180px;padding:20px;text-align:center;
  background:linear-gradient(135deg,#0a2562 0%,#123a8f 55%,#f5a200 340%);
  color:#fff;font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.card.ci .ph .nophoto{min-height:0;position:absolute;inset:0}
.gallery .hero .nophoto{min-height:320px}

/* ---- cards ------------------------------------------------------------- */
.card.ci .ph{position:relative}
.card.ci .m{font-variant-numeric:tabular-nums}

/* ---- price bar sub-line ------------------------------------------------ */
.price .pb-sub{
  display:block;margin-top:4px;font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-faint,#7b8598);font-weight:400;
}

/* ---- spec groups ------------------------------------------------------- */
.specwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 34px}
.specgrp h3{
  margin:18px 0 2px;font-family:var(--mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-faint,#7b8598);font-weight:500;
}
.specgrp .dl .row{grid-template-columns:1.1fr .9fr}

/* ---- derived-figure disclosure ---------------------------------------- */
/* CLAUDE.md §10: no invented listing facts. $/SF is computed by us, not reported
   by the MLS, and the page has to say so wherever it appears. */
.derived-note{
  margin:10px 0 0;padding:11px 14px;border-left:2px solid var(--gold,#f5a200);
  background:rgba(245,162,0,.06);font-size:13px;line-height:1.55;
  color:var(--t-mid,#4a5568);
}

/* ---- zoning disclosure ------------------------------------------------- */
.block.zoning p{font-size:14.5px;line-height:1.65;color:var(--t-mid,#4a5568)}

/* ---- off-market CTA band ---------------------------------------------- */
.cta-band{margin:44px 0 8px;padding:26px 28px;border-radius:3px;background:var(--navy,#0a2562)}
.cta-band .cb-in{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.cta-band .cb-h{
  font-family:var(--serif,Georgia,serif);font-size:1.35rem;color:#fff;margin-bottom:5px;
}
.cta-band .cb-p{color:rgba(255,255,255,.76);font-size:14px;line-height:1.6;max-width:56ch}
.cta-band .btn{flex:0 0 auto}

/* ---- search: use-type + feature chips --------------------------------- */
/* .amenseg comes from listings.css; commercial just needs more room because the
   use vocabulary is longer than the residential amenity list. */
.sbar .amenfield{min-width:260px}
#f-use button,#f-feat button{white-space:nowrap}

/* ---- accessibility ----------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media(max-width:620px){
  .specwrap{grid-template-columns:1fr}
  .cta-band{padding:20px}
  .cta-band .cb-in{flex-direction:column;align-items:flex-start}
}