/* ========================================================================
   PORTFOLIO GRID (homepage)
   ---------------------------------------------------------------------
   Projects ka masonry grid aur upar ke filter buttons
   (All / Residential / Commercial / Public).
   
     .plate  = ek project card
     .filt   = filter button
   ===================================================================== */


/* ── SECTION HEADING + project count ───────────────────────── */
.pf-top{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:34px;}
.pf-note{font-size:13.5px;line-height:1.75;color:var(--text2);max-width:46ch;margin-top:12px;}

/* ── FILTER BUTTONS — All / Residential / Commercial / Public ──── */
.filt{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.4px;font-weight:400;
  padding:8px 15px;background:none;border:1px solid var(--border);margin-left:-1px;
  color:var(--text2);cursor:pointer;transition:color .25s,border-color .25s,background .25s;
  display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;}
.filt:first-child{margin-left:0;}
.filt:hover{color:var(--text);border-color:var(--border2);}
.filt.on{color:var(--gold);border-color:var(--gold);background:var(--gold-bg);position:relative;z-index:1;}
.filt-n{font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums;}
.filt.on .filt-n{color:var(--gold);}
.filt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ── MASONRY GRID — kitne columns ──────────────────────────── */
.plates{columns:3;column-gap:26px;}

/* ── PROJECT CARD — image, naam, type ──────────────────────── */
.plate{display:block;width:100%;break-inside:avoid;margin:0 0 34px;padding:0;
  background:none;border:none;text-align:left;cursor:pointer;font:inherit;color:inherit;}
.plate-img{display:block;position:relative;overflow:hidden;background:var(--surface);
  aspect-ratio:var(--ar,1.33);}
.plate-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);}
.plate:hover .plate-img img,.plate:focus-visible .plate-img img{transform:scale(1.035);}
.plate-cap{display:block;padding-top:13px;border-top:1px solid var(--border);margin-top:13px;
  position:relative;}
.plate-cap::before{content:'';position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--gold);transition:width .45s cubic-bezier(.22,.61,.36,1);}
.plate:hover .plate-cap::before,.plate:focus-visible .plate-cap::before{width:100%;}
.plate-name{display:block;font-family:'Italiana',serif;font-size:23px;line-height:1.2;color:var(--text);}
.plate-sub{display:block;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.3px;
  color:var(--text3);margin-top:3px;}
.plate-type{display:block;font-size:11.5px;color:var(--text2);margin-top:7px;}
.plate-film{display:inline-flex;align-items:center;gap:5px;margin-left:10px;font-size:10.5px;color:var(--text3);}
.plate-film::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);}
.plate:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.plate.hide{display:none;}

/* ── EMPTY MESSAGE — category khaali ho to ─────────────────── */
.pf-empty.show{display:block;}
.pf-top{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:34px;}
.pf-note{font-size:13.5px;line-height:1.75;color:var(--text2);max-width:46ch;margin-top:12px;}
.pf-filters{display:flex;gap:2px;align-self:end;}
.filt{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.4px;font-weight:400;
  padding:8px 15px;background:none;border:1px solid var(--border);margin-left:-1px;
  color:var(--text2);cursor:pointer;transition:color .25s,border-color .25s,background .25s;
  display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;}
.filt:first-child{margin-left:0;}
.filt:hover{color:var(--text);border-color:var(--border2);}
.filt.on{color:var(--gold);border-color:var(--gold);background:var(--gold-bg);position:relative;z-index:1;}
.filt-n{font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums;}
.filt.on .filt-n{color:var(--gold);}
.filt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.plates{columns:3;column-gap:26px;}
.plate{display:block;width:100%;break-inside:avoid;margin:0 0 34px;padding:0;
  background:none;border:none;text-align:left;cursor:pointer;font:inherit;color:inherit;}
.plate-img{display:block;position:relative;overflow:hidden;background:var(--surface);
  aspect-ratio:var(--ar,1.33);}
.plate-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);}
.plate:hover .plate-img img,.plate:focus-visible .plate-img img{transform:scale(1.035);}
.plate-cap{display:block;padding-top:13px;border-top:1px solid var(--border);margin-top:13px;
  position:relative;}
.plate-cap::before{content:'';position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--gold);transition:width .45s cubic-bezier(.22,.61,.36,1);}
.plate:hover .plate-cap::before,.plate:focus-visible .plate-cap::before{width:100%;}
.plate-name{display:block;font-family:'Italiana',serif;font-size:23px;line-height:1.2;color:var(--text);}
.plate-sub{display:block;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.3px;
  color:var(--text3);margin-top:3px;}
.plate-type{display:block;font-size:11.5px;color:var(--text2);margin-top:7px;}
.plate-film{display:inline-flex;align-items:center;gap:5px;margin-left:10px;font-size:10.5px;color:var(--text3);}
.plate-film::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);}
.plate:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.plate.hide{display:none;}
.pf-empty{display:none;padding:70px 0;text-align:center;font-size:14px;color:var(--text3);}
.pf-empty.show{display:block;}
.pf-intro{min-width:0;}