/* /listings/ — mirrors the Compass team page layout
   (https://www.compass.com/agents/spring-boutique/): a banded "Listings" title
   with Sales / Rentals tabs over large photo cards, then "Transactions" with
   Past Sales and Past Rentals as compact cards, 18 to a page. Markup is
   generated by tools/sync_compass.py. */
.cx-page{padding:0 clamp(20px,5vw,72px);background:transparent;position:relative;z-index:2}
.cx-page#listings{padding-top:calc(var(--header-h,250px) + clamp(24px,4vh,56px))}
.cx-page--deals{padding-top:clamp(64px,9vh,104px);padding-bottom:clamp(64px,9vh,104px)}
.cx-wrap{max-width:1170px;margin:0 auto}
.cx-page,.cx-page p,.cx-page button{font-family:Inter,system-ui,sans-serif}
.cx-page p{margin:0;max-width:none}

.cx-band{background:rgba(27,27,31,.075);padding:clamp(40px,5.2vw,62px) 24px;text-align:center}
.cx-h{margin:0;font-family:Inter,system-ui,sans-serif!important;font-weight:600;font-size:clamp(1.7rem,2.6vw,2.4rem);
  line-height:1.2;letter-spacing:-.005em;color:var(--pg-ink,#1B1B1F);text-transform:none}
.cx-h--deals{text-align:center;margin-bottom:clamp(40px,5vh,64px)}

.cx-tabs{display:flex;gap:30px;padding:22px 24px 0}
.cx-tab{background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--serif,'Cormorant Garamond',Georgia,serif)!important;
  font-size:1.6rem;line-height:1.2;color:rgba(27,27,31,.5);text-decoration:none}
.cx-tab[aria-selected="true"]{color:var(--pg-ink,#1B1B1F);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.cx-tab:hover{color:var(--pg-ink,#1B1B1F)}
.cx-tab:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.cx-panel{padding:clamp(40px,5vh,60px) 16px 0}
.cx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cx-empty{color:rgba(27,27,31,.6);font-size:.95rem}

.cx-card,.cx-deal{display:block;text-decoration:none;color:var(--pg-ink,#1B1B1F);background:#fff;border-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.08);overflow:hidden;transition:box-shadow .2s ease}
.cx-card:hover,.cx-deal:hover{box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 20px rgba(0,0,0,.12)}
.cx-card__img{position:relative;aspect-ratio:3/2;background:rgba(27,27,31,.06)}
.cx-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cx-badge{position:absolute;top:8px;left:8px;background:#000;color:#fff;border-radius:999px;padding:3px 8px;
  font-size:.72rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;line-height:1.3}
.cx-card__body{padding:10px 8px 10px}

.cx-price{font-size:1.2rem!important;font-weight:500;line-height:1.35!important;color:var(--pg-ink,#1B1B1F)}
.cx-specs{display:flex;flex-wrap:wrap;align-items:center;margin-top:5px!important;font-size:.8rem!important;line-height:1.4!important;color:#1B1B1F}
.cx-specs span+span{border-left:1px solid rgba(27,27,31,.3);margin-left:8px;padding-left:8px}
.cx-baths{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cx-addr{margin-top:6px!important;font-size:.76rem!important;line-height:1.4!important;color:rgba(27,27,31,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cx-deals{padding-inline:16px}
.cx-deals+.cx-deals{margin-top:clamp(56px,7vh,84px)}
.cx-sub{margin:0 0 clamp(28px,4vh,44px);font-family:Inter,system-ui,sans-serif!important;font-weight:600;font-size:1.28rem;
  line-height:1.3;letter-spacing:0;color:var(--pg-ink,#1B1B1F);text-transform:none}
.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cx-deal{display:flex;align-items:center;gap:16px;padding:16px}
.cx-deal__img{flex:0 0 80px;width:80px;height:80px;border-radius:4px;overflow:hidden;background:rgba(27,27,31,.06)}
.cx-deal__img img{width:100%;height:100%;object-fit:cover;display:block}
.cx-deal__body{min-width:0;flex:1}
.cx-deal .cx-price{font-size:1.06rem!important}
.cx-grid [data-cx-hidden]{display:none}

.cx-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px}
.cx-pager[hidden]{display:none}
.cx-pager button{min-width:24px;height:24px;padding:0 6px;border:1px solid rgba(27,27,31,.35);border-radius:4px;background:#fff;
  font:500 .8rem/1 Inter,system-ui,sans-serif;color:#1B1B1F;cursor:pointer}
.cx-pager button[aria-current="page"]{background:rgba(27,27,31,.1);border-color:#1B1B1F}
.cx-pager .cx-arrow{border:0;background:none;font-size:1.05rem;padding:0 6px}
.cx-pager .cx-arrow:disabled{color:rgba(27,27,31,.3);cursor:default}

@media(max-width:1020px){
  .cx-cards,.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cx-deals{padding-inline:0}
  .cx-cards,.cx-grid{grid-template-columns:1fr}
  .cx-tabs{padding-inline:4px}
  .cx-panel{padding-inline:0}
}

/* Owner, 2026-09-22: title reads "Current Listings", no grey band, set in the
   site's own display serif, left on the same edge as the tabs and cards, and
   the air above and between title / tabs / cards tightened. */
.cx-page#listings{padding-top:calc(var(--header-h,138px) + clamp(18px,3vh,36px))}
.cx-band{display:none}
.cx-h{font-family:var(--serif,'Cormorant',Georgia,serif)!important;font-weight:400;font-size:clamp(2.3rem,3.6vw,3.4rem);
  line-height:1.05;letter-spacing:-.01em;text-align:left;padding:0 16px;margin:0}
.cx-h--deals{text-align:left;margin-bottom:clamp(18px,2.4vh,28px)}
.cx-tabs{padding:clamp(12px,1.8vh,18px) 16px 0;gap:26px}
.cx-tab{font-size:1.45rem}
.cx-panel{padding-top:clamp(20px,2.8vh,30px)}
.cx-page--deals{padding-top:clamp(56px,7vh,84px)}
.cx-sub{font-family:var(--serif,'Cormorant',Georgia,serif)!important;font-weight:500;font-size:1.6rem;letter-spacing:0;margin-bottom:clamp(16px,2.2vh,24px)}
@media(max-width:640px){.cx-h,.cx-tabs{padding-inline:0}}
/* Tabs in the site's own label type (the nav: Inter, uppercase, tracked),
   one step larger than the nav so they read as the page's own control. */
.cx-tabs{gap:30px;padding-top:clamp(14px,2vh,20px)}
.cx-tab{font-family:Inter,system-ui,sans-serif!important;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;padding:0 0 8px;color:rgba(27,27,31,.45);text-decoration:none!important;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.cx-tab[aria-selected="true"]{color:var(--pg-ink,#1B1B1F);border-bottom-color:var(--pg-ink,#1B1B1F)}
/* Owner: title → tabs and tabs → cards get the same visible air as the
   Transactions heading → "Past Sales" further down (~40px text-to-text). */
.cx-tabs{padding-top:clamp(28px,3.4vh,36px)}
.cx-panel{padding-top:clamp(30px,3.8vh,40px)}