/* ═══════════════════════════════════════════
   GRINELY — Work Page (grid + list views, gallery rows)
   ═══════════════════════════════════════════ */

body.page-work{background:var(--dark);color:var(--white)}
body.page-work .nav-logo{color:var(--white)}
body.page-work .nav-links a{color:var(--white);border-color:rgba(255,255,255,.1)}
body.page-work .nav-links a:hover{border-color:rgba(255,255,255,.5)}
body.page-work .nav-burger span{background:var(--white)}
body.page-work .footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.06)}
body.page-work .footer-brand{color:var(--white)}
body.page-work .footer a,body.page-work .footer span{color:rgba(255,255,255,.3)}
body.page-work .footer-bottom{border-top-color:rgba(255,255,255,.06)}

/* HERO */
.work-hero{padding:calc(var(--nav-h) + 4rem) var(--gutter) 1.5rem}
.work-title{font-weight:800;font-size:clamp(3rem,10vw,8rem);letter-spacing:-.03em;line-height:.9;margin-bottom:1.5rem}

/* ═══ FILTERS + VIEW TOGGLE ═══ */
.work-filters{
  padding:0 var(--gutter);border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--dark);position:sticky;top:var(--nav-h);z-index:50;
  display:flex;align-items:center;
}
.filters-primary{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;flex:1}
.filters-primary::-webkit-scrollbar{display:none}
.filter-btn{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:.75rem 1.2rem;white-space:nowrap;border:none;background:none;cursor:pointer;position:relative;transition:color .2s}
.filter-btn:hover{color:rgba(255,255,255,.65)}
.filter-btn.active{color:var(--white)}
.filter-btn.active::after{content:'';position:absolute;bottom:0;left:1.2rem;right:1.2rem;height:1px;background:var(--white)}
.filter-btn .count{font-size:.45rem;opacity:.4;margin-left:.25em;vertical-align:super}

/* View toggle buttons */
.view-toggle{display:flex;gap:2px;padding:.75rem 0;margin-left:auto;flex-shrink:0}
.view-btn{
  width:28px;height:28px;
  border:1px solid rgba(255,255,255,.12);background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.view-btn:first-child{border-radius:2px 0 0 2px}
.view-btn:last-child{border-radius:0 2px 2px 0}
.view-btn.active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.view-btn svg{width:14px;height:14px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:1.5}
.view-btn.active svg{stroke:var(--white)}

/* ═══ GRID VIEW ═══ */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0}
.work-grid.is-hidden{display:none}

.work-card{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;cursor:pointer}
.work-card-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .3s,filter .3s}
.work-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* If video exists: hide poster on hover. If no video: darken poster */
.work-card:hover .work-card-poster{opacity:0}
.work-card.no-preview:hover .work-card-poster{opacity:1;filter:brightness(.65)}
.work-card::before{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(0,0,0,.7)0%,transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
.work-card:hover::before{opacity:1}

.work-card-info{position:absolute;bottom:0;left:0;right:0;padding:1rem 1.2rem;z-index:4;transform:translateY(6px);opacity:0;transition:transform .3s,opacity .3s}
.work-card:hover .work-card-info{transform:translateY(0);opacity:1}
.work-card-client{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.15rem}
.work-card-title{font-weight:700;font-size:.85rem;color:#fff;line-height:1.3}
.work-card-year{font-family:var(--mono);font-size:.55rem;color:rgba(255,255,255,.4);margin-top:.2rem}

.work-card-corners{position:absolute;inset:10px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}
.work-card:hover .work-card-corners{opacity:1}
.corner{position:absolute;width:28px;height:28px}
.corner-tl{top:0;left:0;border-top:1.5px solid rgba(255,255,255,.4);border-left:1.5px solid rgba(255,255,255,.4)}
.corner-br{bottom:0;right:0;border-bottom:1.5px solid rgba(255,255,255,.4);border-right:1.5px solid rgba(255,255,255,.4)}

.work-card.filtered-out{display:none}

/* ═══ LIST VIEW ═══ */
.work-list{padding:0 var(--gutter)}
.work-list.is-hidden{display:none}

.work-row{
  display:grid;grid-template-columns:1.2fr 1fr 1fr auto;
  gap:1rem;align-items:center;
  padding:clamp(.7rem,1.2vh,1rem) 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .15s;
}
.work-row:first-child{border-top:1px solid rgba(255,255,255,.06)}
.work-row:hover{background:rgba(255,255,255,.03)}
.work-row-title{font-weight:600;font-size:clamp(.8rem,1.1vw,1rem);color:var(--white);transition:opacity .2s}
.work-row:hover .work-row-title{opacity:.8}
.work-row-client{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.work-row-role{font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.work-row-year{font-family:var(--mono);font-size:.6rem;color:rgba(255,255,255,.35);text-align:right}
.work-row.filtered-out{display:none}

/* ═══ PROJECT PAGE (inline, dark) ═══ */
.work-project{display:none;background:var(--dark);color:var(--white)}
.work-project.is-open{display:block}

.proj-header{max-width:1000px;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.proj-back{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1.5rem;transition:color .2s;cursor:pointer;border:none;background:none}
.proj-back:hover{color:var(--white)}
.proj-back svg{width:12px;height:12px}
.proj-client{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.6rem}
.proj-title{font-weight:800;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:1rem;color:var(--white)}
.proj-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,auto));gap:2rem;margin-bottom:2rem;font-size:.75rem}
.proj-meta-label{font-family:var(--mono);font-size:.45rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.3rem}
.proj-meta-value{color:var(--white);font-weight:500}
.proj-desc{font-size:clamp(.85rem,1.1vw,1rem);line-height:1.8;color:rgba(255,255,255,.45);max-width:650px;margin-bottom:clamp(2rem,5vh,4rem)}

/* Gallery rows */
.proj-gallery{display:flex;flex-direction:column;gap:clamp(.2rem,.4vw,.4rem)}
.proj-gallery-row{display:grid;gap:clamp(.2rem,.4vw,.4rem)}
.proj-gallery-row[data-cols="1"]{grid-template-columns:1fr}
.proj-gallery-row[data-cols="2"]{grid-template-columns:1fr 1fr}
.proj-gallery-row[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.proj-gallery-row[data-layout="16-9+9-16"]{grid-template-columns:75.96fr 24.04fr}
.proj-gallery-row[data-layout="9-16+16-9"]{grid-template-columns:24.04fr 75.96fr}
.proj-gallery-row[data-layout="4-3+9-16"]{grid-template-columns:70.33fr 29.67fr}
.proj-gallery-row[data-layout="9-16+4-3"]{grid-template-columns:29.67fr 70.33fr}
.proj-gallery-row[data-layout="16-9+4-3"]{grid-template-columns:57.14fr 42.86fr}
.proj-gallery-row[data-layout="4-3+16-9"]{grid-template-columns:42.86fr 57.14fr}
.proj-gallery-row[data-layout] .proj-asset{aspect-ratio:unset}
.proj-gallery-row[data-layout="16-9+9-16"] .proj-asset:first-child,.proj-gallery-row[data-layout="16-9+4-3"] .proj-asset:first-child{aspect-ratio:16/9}
.proj-gallery-row[data-layout="9-16+16-9"] .proj-asset:first-child,.proj-gallery-row[data-layout="9-16+4-3"] .proj-asset:first-child{aspect-ratio:9/16}
.proj-gallery-row[data-layout="4-3+9-16"] .proj-asset:first-child,.proj-gallery-row[data-layout="4-3+16-9"] .proj-asset:first-child{aspect-ratio:4/3}

.proj-asset{width:100%;overflow:hidden}
.proj-asset img{width:100%;height:100%;object-fit:cover;display:block}
.proj-asset iframe{width:100%;border:0;background:#000;display:block}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .proj-gallery-row[data-cols="2"]{grid-template-columns:1fr !important}
  .proj-gallery-row[data-cols="3"]{grid-template-columns:1fr !important}
  .proj-gallery-row[data-layout]{grid-template-columns:1fr !important}
  .proj-gallery-row[data-layout] .proj-asset{aspect-ratio:auto !important}
}
@media(min-width:1800px){.work-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){
  .work-grid{grid-template-columns:1fr 1fr;gap:2px}
  .work-row{grid-template-columns:1fr 1fr;gap:.5rem}
  .work-row-role,.work-row-year{display:none}
  .proj-hero{aspect-ratio:16/9}
  .proj-meta{gap:1rem}
  
  .proj-gallery-row[data-layout]{grid-template-columns:1fr !important}
  .proj-gallery-row[data-layout] .proj-asset{aspect-ratio:auto !important}
  .proj-gallery-row[data-cols="2"]{grid-template-columns:1fr !important}
  .proj-gallery-row[data-cols="3"]{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .work-grid{grid-template-columns:1fr}
  .work-row{grid-template-columns:1fr auto}
  .work-row-client{display:none}
  
}