/*
 * File: listings.css
 * Path: /wp-content/themes/LezamizTheme/assets/css/listings.css
 * Version: 2025-11-03C (page vs card sections; inline-card merged; deduped)
 */

/* ============================================================
   TOKENS (global variables + aliases for inline-card compat)
   ============================================================ */
:root{
  /* font sizes */
  --fz-12:.85rem; --fz-14:1rem; --fz-16:1.125rem; --fz-18:1.25rem; --fz-24:1.5rem;

  /* aliases to support older inline card tokens */
  --lz-fz-12: var(--fz-12);
  --lz-fz-14: var(--fz-14);
  --lz-fz-16: var(--fz-16);
  --lz-fz-18: var(--fz-18);
  --lz-fz-24: var(--fz-24);

  /* palette */
  --c-text:#000000;         /* base text */
  --c-muted:#4b5563;        /* secondary */
  --c-subtle:#6b7280;       /* tertiary */
  --c-border:#cbd5e1;       /* light borders */
  --c-border-strong:#94a3b8;
  --c-surface:#fff;
  --c-surface-alt:#f8fafc;

  /* effects */
  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,.08);

  /* brand */
  --lz-red:#cd001e;

  /* layout */
  --lz-gap:16px;

  /* fixed “slots” used by cards to equalize heights */
  --slot-ptype: 30px;
  --slot-stats: 24px;
  --slot-price: 20px;
  --slot-mls:  26px;

  /* filter drawer width */
  --filterW: 100vw;
}

@media (min-width:1024px){
  :root{ --filterW: 30vw; }
}

/* base text color */
body{ color:var(--c-text); }

/* ============================================================
   PAGE SECTION — wrappers, featured, grid, filters, controls
   ============================================================ */

/* 1) Page shell (listings rebuild wrapper) */
.lz-listings-rebuild{
  --lz-gap: 1rem;
  --lz-max: 1200px;
  padding: var(--lz-gap);
  margin-inline: auto;
  max-width: var(--lz-max);
}
.page-header{ margin:0 0 .5rem 0; }
.page-content{ display:block; }

/* 2) Featured block */
.featured-wrap{
  margin: 1rem 1rem 0;
  padding: 1rem;
  border:1px solid var(--c-border-strong);
  border-radius:16px;
  background:#fff;
}
.featured-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.featured-title{
  display:flex; align-items:center; gap:.5rem;
  font-weight:900; font-size:1.25rem; letter-spacing:.01em;
}
.featured-title .dot{
  width:.75rem; height:.75rem; border-radius:999px;
  background:var(--lz-red); display:inline-block;
}
.featured-controls{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.featured-note{
  font-size:.8rem; font-weight:700; color:#111;
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  border-radius:999px; padding:.3rem .6rem;
}

/* Featured: horizontal scroller */
.featured-scroller{
  margin-top:.75rem; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.featured-row{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 300px);
  gap:1rem; padding:.25rem 0 .5rem;
}
@media (min-width:1024px){
  .featured-row{ grid-auto-columns:minmax(280px, 320px); }
}

.featured-wrap.is-collapsed .featured-scroller{ display:none; }
.featured-scroller.is-dragging{ cursor:grabbing; user-select:none; }
.featured-wrap.is-hidden-by-pref .featured-scroller{ display:none; }
.featured-wrap.is-hidden-by-pref .featured-note{
  display:inline; font-style:italic; color:var(--c-subtle);
}

/* Mobile: one-card-per-viewport swipe */
@media (max-width: 639.98px){
  .featured-wrap{ margin-inline:-16px; }
  .featured-scroller{ scroll-snap-type:x mandatory; }
  .featured-row{ display:flex; gap:0; padding:0; margin:0; }
  .featured-row .listing-card{
    margin:0 !important; flex:0 0 100vw; max-width:100vw;
    scroll-snap-align:start; scroll-snap-stop:always; box-sizing:border-box;
  }
  .featured-row .listing-card__thumb{ display:block; width:100%; height:auto; }
}
@media (min-width:640px){
  .featured-scroller{ scroll-snap-type:none; }
}

/* Featured: centered compliance row under scroller */
.listing-card__compliance--featured{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:10px 0 0; font-size:var(--fz-12); color:var(--c-subtle); flex-wrap:wrap;
}
.listing-card__compliance--featured .listing-card__compliance-text{
  width:100%; text-align:center; display:flex; justify-content:center;
}

/* 3) Grid — CSS var with breakpoint fallback */
#listingGrid{ --lz-cols-fallback: 3; }                     /* desktop default */
@media (max-width: 639.98px){ #listingGrid{ --lz-cols-fallback: 1; } }                 /* mobile */
@media (min-width: 640px) and (max-width:1023.98px){
  #listingGrid{ --lz-cols-fallback: 2; }                                                       /* tablet */
}
#listingGrid{
  display:grid;
  grid-template-columns: repeat(var(--lz-cols, var(--lz-cols-fallback)), minmax(0,1fr));
  gap: var(--lz-gap, 16px);
  padding: 1.25rem;
}
@media (max-width:640px){ #listingGrid{ padding:.75rem; } }
@media (max-width:768px){ .filter-fab{ bottom:30%; right:0; } }

/* 5) Grid controls / modes */
.grid-modes{ display:none; gap:8px; margin-right:10px; vertical-align:middle; align-items:center; }
.grid-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--c-border);
  background:#fff; cursor:pointer;
}
.grid-btn:hover{ background:#f8fafc; }
.grid-btn svg{ width:18px; height:18px; display:block; }
@media (min-width:1024px){ .grid-modes{ display:inline-flex; } }

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

/* ============================================================
   CARD SECTION — the Listing Card component (all variants)
   ============================================================ */

/* 1) Card base */
.listing-card{
  display:flex; flex-direction:column;
  background:var(--c-surface);
  border:3px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
  color:inherit; padding:0 0 6px;
  position:relative; /* anchor badges */
}
.listing-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* 2) Media (gallery) */
.listing-card__gallery{ position:relative; }
.listing-card__thumb{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border:1px solid var(--c-border);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-top-left-radius:calc(var(--radius) - 2px);
  border-top-right-radius:calc(var(--radius) - 2px);
}

/* 3) Badges */
.listing-card__badges{
  position:absolute; left:10px; top:10px;
  display:flex; gap:.5rem; flex-wrap:wrap;
  max-width: calc(100% - 20px);
  z-index:0;
}
.badge__sep{}
/* Base exclusive badge – sets up border + animation {animation: badgeExclusiveCycle 0.7s infinite steps(1, end);) */

/* =========================
   BADGES (final override)
   ========================= */

/* Base badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.18rem .55rem;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  line-height:1;
  white-space:nowrap;
  border:1px solid transparent;
  display:inline-flex; align-items:center; gap:.35em;
  padding:.28rem .6rem; border-radius:999px;
  font-size:.875rem; line-height:1.15; font-weight:700; white-space:nowrap;
  backdrop-filter:saturate(1.2) blur(2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.25);

}

/* STATUS (badge badge--status) */
.badge.badge--status{
  background:#111 !important;
  color:#fff !important;
  border:1px solid #000 !important;
}

/* NEW (badge badge--status badge--new) */
.badge.badge--status.badge--new{
  background:#000 !important;
  color:#fff !important;
  border:2px solid #cd001e !important;
}
.badge.badge--status.badge--new .badge__date{
  margin-left:.35em;
  font-weight:600;
  opacity:.95;
}

/* EXCLUSIVE (badge badge--exclusive) */
.badge.badge--exclusive{
  background:#cd001e !important;
  color:#fff !important;
  font-weight:900 !important; /* 1800 isn't valid; max is 900 */
  border:4px solid #000 !important;
}

/* SLC group (badge badge--slc ...) */
.badge.badge--slc{
  background:#fff !important;
  color:#cd001e !important;
  border:2px solid #000 !important;
}

/* Optional SLC type hooks (normalized slugs) */
.badge.badge--slc.badge--slc-foreclosure{}
.badge.badge--slc.badge--slc-owned{}
.badge.badge--slc.badge--slc-auction{}

/* 4) Price */
.listing-card__price{ margin:10px 0 6px; padding:0 15px; min-height:var(--slot-price); display:flex; align-items:flex-end; }
.listing-card__price__title{
  display:inline-block; font-size:var(--fz-24); font-weight:800; letter-spacing:.01em;
}

/* 5) Address (primary link) — tight line gap, padded left */
.listing-card__address{
  margin:0; margin-top:10px; padding:0 15px; line-height:1.05;
  font-weight:800; font-size:var(--fz-18);
}
.listing-card__address a{ color:#0000EE; text-decoration:none;}
.listing-card__address a:hover,
.listing-card__address a:focus{ text-decoration:none; }

/* optional second line */
.listing-card__addr2{
  margin:2px 0 2px; padding:0 15px; line-height:1.05;
  color:black; font-size:var(--fz-14);
}

/* 6) Type / Subtype */
.listing-card__ptype{
  padding:4px 15px 0; margin:2px 0 6px;
  font-size:var(--fz-14); min-height:var(--slot-ptype); display:block;
  color:var(--c-text);
}
.ptype-row{ display:flex; align-items:center; gap:.4ch; line-height:1.2; }
.ptype-row.type{ font-weight:700; }
.ptype-row.subtype{ margin-left:.8ch; color:var(--c-muted); }
.ptype-row.subtype .bullet{ margin-right:.4ch; opacity:.9; }

/* quick color cues by type */
.ptype-row.type.ptype-homes      { color:#cd001e; font-weight:800; }
.ptype-row.type.ptype-land       { color:#0284c7; font-weight:800; }
.ptype-row.type.ptype-farms      { color:#4d7c0f; font-weight:800; }
.ptype-row.type.ptype-income     { color:#7c3aed; font-weight:800; }
.ptype-row.type.ptype-commercial { color:#b45309; font-weight:800; }
.ptype-row.type.ptype-rentals    { color:#065f46; font-weight:800; }
.ptype-row.type.ptype-leases     { color:#1e40af; font-weight:800; }

/* 7) Stats row */
.listing-card__stats{
  min-height:var(--slot-stats);
  display:flex; align-items:center; justify-content:flex-start;
  gap:15px; margin:0; padding:0; text-align:center; flex-wrap:wrap;
}
.listing-card__stats .stat{ flex:0 0 auto; min-width:0; padding:2px 0; }
.listing-card__stats .stat__value{ display:block; font-weight:800; line-height:1.15; font-size:var(--fz-18); }
.listing-card__stats .stat__label{ display:block; margin-top:2px; font-size:var(--fz-12); color:var(--c-subtle); white-space:nowrap; }

/* 9) Optional: pills (if used) */
.card-pill{ display:inline-block; font-weight:800; font-size:1rem; border-radius:6px; padding:0 .5rem; line-height:1.2; }
.card-pill--ptype-homes{ background:#e11d48; color:#fff; }
.card-pill--ptype-land{ background:#0284c7; color:#fff; }
.card-pill--ptype-farms{ background:#4d7c0f; color:#fff; }
.card-pill--ptype-income{ background:#7c3aed; color:#fff; }
.card-pill--ptype-commercial{ background:#b45309; color:#fff; }
.card-pill--ptype-rentals{ background:#065f46; color:#fff; }
.card-pill--ptype-leases{ background:#1e40af; color:#fff; }
.card-pill--ptype-ptype{ background:#0ea5e9; color:#fff; }

/* 10) Small screens & dark mode */
@media (max-width:640px){
  :root{ --slot-ptype:72px; --slot-stats:56px; } /* allow wrapping */
  .listing-card__price{ margin:8px 0 4px; }
}

@media (prefers-color-scheme: dark){
  .listing-card{ background:#fff; border-color:#1f2937; box-shadow:none; }
  .listing-card__thumb{ border-color:#1f2937; }
}

/* 11) Misc */
.loading-spinner{ padding:1rem; text-align:center; font-size:var(--fz-16); color:var(--c-muted); }
/* Specs row (make the <ul> horizontal) */
.listing-card .listing-card__meta,
ul.listing-card__meta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:1px 10px !important;
  list-style:none !important;
  margin:0px 0 0px !important;
  padding:0 15px !important; /* line up with address/price */
}


.listing-card__meta li{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:.3ch !important;
  flex:0 0 auto !important;
  white-space:nowrap !important; /* keep "2,517 sqft" together */
}
.listing-card__meta b{ font-weight:800; }
/* ============================================================
   Card wrapper + Compliance (ABOVE the card border)
   ============================================================ */

/* Wrapper so the compliance row can sit outside the card */
.listing-card-wrap{
  display:block;
  margin:0;               /* grid/gap handles spacing */
}

/* Always render the row; keep it small and subtle */
.listing-card-wrap > .listing-card__compliance{
  min-height: var(--slot-mls, 26px);
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 4px 0;       /* space between compliance and the card */
  padding:0 0 0 15px;     /* align with address/price padding */
  font-size:9px;
  line-height:1rem;
  color:var(--c-subtle);
}

/* Explicit variant for the above/outside row */
.listing-card__compliance--above{
  position:relative;      /* normal document flow (outside the card) */
  z-index:0;
}

/* Text container in the row */
.listing-card__compliance-text{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}

/* Optional: a tiny bullet separator if you add content later */
.listing-card__compliance .sep::before{
  content:"";
  margin:0 .45ch;
  opacity:.6;
}

/* When we only show the placeholder space (no brokerage name) */
.listing-card__compliance--above.is-empty .office{
  opacity:.35;            /* faint, but reserves height */
}

/* Keep the inside-the-card variant from stealing styles */
.listing-card .listing-card__compliance{
  margin-top:10px;        /* if you ever render one inside the card */
  padding-left:15px;
}

/* Ensure badges stay anchored inside the image border */
.listing-card__gallery{ position:relative; }
.listing-card__badges{ position:absolute; left:10px; top:10px; z-index:0; }


/* ============================================================
   Listings page header (title + subtitle)
   ============================================================ */

.lz-wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.lz-listings-header {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.lz-listings-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: clamp(1.1, 1.25, 1.3);
  color: var(--c-text);
  padding-top: 0;
  padding-bottom: 0;
}

.lz-listings-title .lz-verb {
  color: var(--lz-red); /* #cd001e */
}

.lz-listings-title .lz-label {
  color: var(--c-text);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.lz-listings-subtitle {
  margin: clamp(0.25rem, 0.8vw, 0.6rem) 0 0;
  font-weight: 800;
  font-size: clamp(0.9rem, 0.3vw + 0.8rem, 1.05rem);
  line-height: clamp(1.5, 1.7, 1.85);
  color: #111827;
}