/* projects.css — /projects/, /projects/<slug>/, /videos/ and the "our work"
   strip (items 89, 92). Built on site.css tokens; no new colors. */

/* ---------- filters ---------- */
.pj-filter{ display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s5) }
.pj-filter .kb-filters{ margin:0 }
.pj-city{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.pj-city label{ font-family:var(--head); font-weight:700; color:var(--h,var(--accent)) }
.pj-city select{ min-height:44px; min-width:0; max-width:100%; flex:1 1 220px;
  font:inherit; color:var(--ink,#2a3442); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 12px }
.pj-city select:focus-visible{ outline:3px solid var(--primary); outline-offset:2px }
.pj-city .btn{ min-height:44px }
.pj-reset{ min-height:44px; display:inline-flex; align-items:center; color:var(--link,var(--primary)) }
.pj-n{ display:inline-block; min-width:1.8em; padding:0 .45em; margin-left:.2em; border-radius:999px;
  background:var(--chip,#eef2f8); font-size:.82em; font-weight:600; text-align:center; color:var(--sub,#5a6b80) }
.kb-chip.on .pj-n{ background:rgba(255,255,255,.22); color:inherit }
.pj-h{ margin-top:var(--s6) }

/* ---------- compact project list ---------- */
.pj-list{ list-style:none; padding:0; margin:var(--s4) 0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px }
.pj-list a{ display:grid; grid-template-columns:1fr; grid-template-areas:"t" "c";
  gap:2px 10px; align-items:center; min-height:44px; padding:10px 14px; text-decoration:none;
  background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line)); border-radius:var(--r-sm);
  transition:border-color .2s ease, transform .2s ease }
.pj-list a:hover{ border-color:var(--primary); transform:translateY(-1px) }
.pj-list a:focus-visible{ outline:3px solid var(--primary); outline-offset:2px }
.pj-t{ grid-area:t; font-family:var(--head); font-weight:700; color:var(--h,var(--accent)); font-size:15px }
.pj-c{ grid-area:c; color:var(--ink,#2a3442); font-size:14px; overflow-wrap:anywhere }
/* .pj-j (the WordPress job number) removed from cards — Tim QA JQ-VKMY4V2R */
.pj-empty{ padding:var(--s4) 0 }
.pj-more{ margin-top:var(--s4) }

/* ---------- detail ---------- */
.pj-detail{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s6); align-items:start }
.pj-main > h2:first-child{ margin-top:0 }
.pj-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s3); margin:var(--s4) 0 var(--s5) }
.pj-photos figure, .pj-rep{ margin:0 0 var(--s5) }
.pj-photos img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-sm); display:block }
.pj-rep img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r); display:block }
.pj-photos figcaption, .pj-rep figcaption{ font-size:13px; color:var(--sub,#5a6b80); margin-top:6px }
.pj-side{ position:sticky; top:calc(var(--header-h,96px) + 16px); background:var(--mist);
  border:1px solid var(--line); border-radius:var(--r); padding:var(--s4) }
.pj-facts{ width:100%; border-collapse:collapse; margin:0 0 var(--s4); font-size:15px }
.pj-facts th, .pj-facts td{ text-align:left; padding:9px 4px; border-bottom:1px solid var(--line); vertical-align:top }
.pj-facts th{ width:7.5em; font-weight:600; color:var(--sub,#5a6b80) }
.pj-side .btn{ width:100%; justify-content:center }
.pj-back{ font-size:14px; line-height:2 }
.pj-back a{ display:inline-block; min-height:24px }

/* ---------- videos ---------- */
.vg-note{ color:var(--sub,#5a6b80); font-size:14px }
.vg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); margin:var(--s5) 0 }
.vg-card{ display:flex; flex-direction:column; background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line));
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1); scroll-margin-top:calc(var(--header-h,96px) + 16px) }
.vg-card:target{ outline:3px solid var(--secondary); outline-offset:3px }
a.vg-link{ text-decoration:none; color:inherit }
.vg-play{ position:relative; display:block; aspect-ratio:16/9; background:var(--navy-ink); overflow:hidden }
.vg-play img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease }
.vg-play:hover img{ transform:scale(1.04) }
.vg-play:focus-visible{ outline:3px solid var(--secondary); outline-offset:-3px }
.vg-btn{ position:absolute; left:50%; top:50%; width:68px; height:48px; margin:-24px 0 0 -34px;
  border-radius:12px; background:rgba(13,33,55,.82); transition:background .2s ease }
.vg-btn::after{ content:""; position:absolute; left:28px; top:14px; border-style:solid;
  border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff }
.vg-play:hover .vg-btn, .vg-play:focus-visible .vg-btn{ background:var(--secondary) }
.vg-dur{ position:absolute; right:8px; bottom:8px; background:rgba(13,33,55,.85); color:#fff;
  font-size:12px; font-weight:600; padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums }
.vg-play iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.vg-body{ padding:var(--s4); display:flex; flex-direction:column; gap:6px; flex:1 }
.vg-body h3, .vg-title{ margin:0; font-family:var(--head); font-weight:700; font-size:17px; line-height:1.3; color:var(--h,var(--accent)) }
.vg-body p{ margin:0; font-size:14.5px; color:var(--sub,#5a6b80) }
.vg-meta{ margin-top:auto !important; font-size:13px !important }

@media (max-width:1020px){
  .vg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pj-detail{ grid-template-columns:minmax(0,1fr) 280px; gap:var(--s5) }
}
@media (max-width:820px){
  .pj-detail{ grid-template-columns:1fr }
  .pj-side{ position:static }
}
@media (max-width:640px){
  .vg-grid{ grid-template-columns:1fr }
  .pj-list{ grid-template-columns:1fr }
  .pj-city .btn{ flex:1 1 auto; justify-content:center }
}
@media (prefers-reduced-motion:reduce){
  .vg-play img, .pj-list a{ transition:none }
  .vg-play:hover img{ transform:none }
}