/* =============================================================
   LISTING — project listing page
   Filter rail, results toolbar, and one card that renders in
   either grid or list view. Only loaded by projects.html.
   ============================================================= */

/* ============ PAGE HEAD ============ */
.lhead{background:var(--bg-2);border-bottom:1px solid var(--line);padding:26px 0}
.lhead h1{font-size:29px;font-weight:700;letter-spacing:-.02em;margin:0}
.lhead h1 em{font-style:normal;color:var(--teal)}
.lhead p{font-size:12.5px;color:var(--muted);margin:5px 0 0}

/* ============ PAGE GRID ============ */
.lgrid{display:grid;grid-template-columns:252px 1fr;gap:24px;align-items:start;padding:22px 0 64px}

/* ============ FILTER RAIL ============ */
.frail{position:sticky;top:76px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.frail__top{display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.frail__top b{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.frail__clear{font-size:11px;font-weight:600;color:var(--teal)}
.frail__clear:hover{color:var(--accent)}

.fgroup{border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0}
.fgroup__h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 16px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:left}
.fgroup__h:hover{color:var(--teal)}
.fgroup__h .chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  flex:none;transition:transform .2s}
.fgroup[data-open="false"] .chev{transform:rotate(-90deg)}
.fgroup[data-open="false"] .fgroup__b{display:none}
.fgroup__b{padding:0 16px 14px}

.fopt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;
  color:var(--ink-2);cursor:pointer}
.fopt:hover{color:var(--teal)}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fopt .box{width:15px;height:15px;border:1.5px solid var(--line);border-radius:4px;
  flex:none;display:grid;place-items:center;transition:.15s}
.fopt input[type=radio] + .box{border-radius:50%}
.fopt .box::after{content:"";width:7px;height:7px;border-radius:2px;background:var(--white);
  transform:scale(0);transition:transform .15s}
.fopt input[type=radio] + .box::after{border-radius:50%}
.fopt input:checked + .box{background:var(--teal);border-color:var(--teal)}
.fopt input:checked + .box::after{transform:scale(1)}
.fopt input:focus-visible + .box{outline:2px solid var(--navy);outline-offset:2px}
.fopt span{flex:1}
.fopt em{font-style:normal;font-size:10.5px;color:var(--muted)}

.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{font-size:11px;font-weight:600;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--white);transition:.15s}
.fchip:hover{border-color:var(--teal);color:var(--teal)}
.fchip.is-on{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}

.frange{padding-top:4px}
.frange input[type=range]{width:100%;accent-color:var(--teal)}
.frange__val{display:flex;justify-content:space-between;font-size:11.5px;
  font-weight:600;color:var(--ink-2);margin-top:8px}

/* ============ RESULTS TOOLBAR ============ */
.ltool{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lsearch{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);padding:9px 13px}
.lsearch svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.lsearch input{flex:1;border:0;background:none;font-family:inherit;font-size:12.5px;
  color:var(--ink);min-width:0}
.lsearch input:focus{outline:none}
.lsort{border:1px solid var(--line);background:var(--white);border-radius:var(--r-md);
  padding:9px 12px;font-family:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.lsort:focus{outline:none;border-color:var(--teal)}
.lview{display:flex;gap:4px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:3px}
.lview button{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;
  color:var(--muted);transition:.15s}
.lview button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.lview button.is-on{background:var(--teal-soft);color:var(--teal)}

.lcount{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.lcount b{font-size:13px;font-weight:700}
.lactive{display:flex;gap:6px;flex-wrap:wrap}
.lactive button{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  padding:5px 10px;border-radius:999px;background:var(--teal-soft);color:var(--teal)}
.lactive button::after{content:"×";font-size:13px;line-height:1}

/* ============ RESULT CARD ============ */
.results{display:grid;gap:14px}
.lcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:.25s ease}
.lcard:hover{box-shadow:var(--shadow-lg);border-color:transparent}
.lcard__media{position:relative;display:block;overflow:hidden}
.lcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lcard:hover .lcard__media img{transform:scale(1.05)}
.lcard__media .badge{position:absolute;top:12px;left:12px}
.lcard__body{padding:15px 17px;display:flex;flex-direction:column;gap:9px}
.lcard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.lcard__name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0}
.lcard__by{font-size:11px;color:var(--muted);margin:3px 0 0}
.lcard__price{text-align:right;flex:none}
.lcard__price b{display:block;font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap}
.lcard__price small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lcard__loc{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin:0}
.lcard__loc svg{width:12px;height:12px;stroke:var(--teal);fill:none;stroke-width:2;flex:none}
.lcard__meta{display:flex;gap:7px;flex-wrap:wrap}
.lcard__meta span{font-size:10px;font-weight:600;padding:4px 9px;border-radius:5px;
  background:var(--bg-2);color:var(--ink-2)}
.rera--approved{background:var(--teal-soft)!important;color:var(--teal)!important}
.rera--applied{background:var(--bg-2)!important;color:var(--ink-2)!important}  /* registration pending */
.lcard__stats{display:flex;gap:16px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line)}
.lcard__stats span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.lcard__stats svg{width:12px;height:12px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:none}
.lcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.lcard__foot .btn{padding:8px 15px;font-size:11.5px}

/* ---- LIST VIEW ---- */
.results--list .lcard{display:grid;grid-template-columns:258px 1fr}
.results--list .lcard__media{height:100%;min-height:186px}

/* ---- GRID VIEW ---- */
.results--grid{grid-template-columns:repeat(3,1fr)}
.results--grid .lcard__media{height:168px}
.results--grid .lcard__by,
.results--grid .lcard__stats{display:none}
.results--grid .lcard__head{flex-direction:column;gap:7px}
.results--grid .lcard__price{text-align:left}

/* ============ EMPTY STATE ============ */
.lempty{display:none;text-align:center;padding:56px 20px;background:var(--white);
  border:1px dashed var(--line);border-radius:var(--r-lg)}
.lempty b{display:block;font-size:15px;margin-bottom:5px}
.lempty p{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.results:empty + .lempty,
.lgrid[data-empty="true"] .lempty{display:block}

/* ============ MOBILE FILTER BUTTON ============ */
.fopen{display:none;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px;border:1px solid var(--line);background:var(--white);
  border-radius:var(--r-md);font-size:12.5px;font-weight:600;margin-bottom:14px}
.fopen svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .lgrid{grid-template-columns:1fr}
  .frail{position:static}
  .fopen{display:flex}
  .frail[data-collapsed="true"]{display:none}
  .results--grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lhead h1{font-size:23px}
  .results--grid{grid-template-columns:1fr}
  .results--list .lcard{grid-template-columns:1fr}
  .results--list .lcard__media{height:172px;min-height:0}
  .lcard__head{flex-direction:column;gap:7px}
  .lcard__price{text-align:left}
  .ltool{gap:8px}
  .lsearch{min-width:100%;order:-1}
}