/* ============================================================
   HAUSTEN PROJECTS — Project Grid + Video Grid
   Colors/fonts read the Hausten Kit globals (hex fallbacks).
   Scoped under .hpf (grid) and .hpf-video.
   ============================================================ */
.hpf, .hpf-video{
  --teal: var(--e-global-color-primary, #11a6a0);
  --line: rgba(255,255,255,.14);
  --ink:  var(--e-global-color-accent, #fafafa);
  --muted:#949494;
  --panel: var(--e-global-color-haustennear, #111111);
  --disp: var(--e-global-typography-primary-font-family, 'Bebas Neue'), Impact, sans-serif;
  --body: var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-family: var(--body); color: var(--ink);
}

/* ---------- Filter bar ---------- */
.hpf-filters-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:78px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:10px;flex-wrap:wrap;}
.hpf-filters{display:flex;gap:29px;align-items:center;overflow:auto;}
.hpf-filter{position:relative;border:0;padding:20px 0;background:transparent;color:#777;cursor:pointer;
  text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:700;white-space:nowrap;font-family:var(--body);}
.hpf-filter:hover,.hpf-filter.is-active{color:var(--ink);}
.hpf-filter.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal);}
.hpf-count{font-size:10px;letter-spacing:.12em;color:#666;white-space:nowrap;}

/* ---------- Grid ---------- */
.hpf-grid{display:grid;gap:10px;grid-auto-flow:dense;}
.hpf-grid--masonry{grid-template-columns:repeat(12,1fr);}
.hpf-grid--cols{grid-template-columns:repeat(var(--n,3),1fr);}
.hpf-grid--2{--n:2;} .hpf-grid--3{--n:3;} .hpf-grid--4{--n:4;}
/* Editorial rhythm (mixed spans) — applied only when NOT filtered */
.hpf-grid--masonry:not(.is-filtered) .hpf-card{grid-column:span 4;aspect-ratio:.82/1;}
.hpf-grid--masonry:not(.is-filtered) .hpf-card:nth-of-type(6n+1){grid-column:span 8;aspect-ratio:1.48/1;}
.hpf-grid--masonry:not(.is-filtered) .hpf-card:nth-of-type(6n+4){grid-column:span 8;aspect-ratio:1.72/1;}
.hpf-grid--masonry:not(.is-filtered) .hpf-card:nth-of-type(6n+5){grid-column:span 4;aspect-ratio:.82/1;}
/* When filtered, fall back to a uniform 3-up */
.hpf-grid--masonry.is-filtered{grid-template-columns:repeat(3,1fr);}
.hpf-grid--masonry.is-filtered .hpf-card{grid-column:auto;aspect-ratio:1.1/1;}

.hpf-card{position:relative;min-height:300px;background:var(--panel);overflow:hidden;isolation:isolate;}
.hpf-card.is-hidden{display:none;}
.hpf-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s ease;}
.hpf-card:hover .hpf-art{transform:scale(1.03);filter:brightness(.6);}
.hpf-art--empty{background:linear-gradient(135deg,#1b1b1b,#050505);}
.hpf-card::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.035);pointer-events:none;z-index:2;}
.hpf-card:hover::after{border-color:rgba(17,166,160,.34);}
.hpf-overlay{position:absolute;inset:0;z-index:3;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78));
  opacity:0;transform:translateY(8px);transition:.35s ease;}
.hpf-card:hover .hpf-overlay{opacity:1;transform:none;}
.hpf-type{color:var(--teal);font-size:10px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px;}
.hpf-title{font-family:var(--disp);font-size:30px;line-height:1;letter-spacing:.02em;text-transform:uppercase;margin:0 0 13px;color:var(--ink);}
.hpf-link{font-size:11px;text-transform:uppercase;letter-spacing:.1em;}
.hpf-empty{border:1px dashed var(--line);padding:48px;text-align:center;color:var(--muted);font-family:var(--body);}

/* ---------- Video showcase ---------- */
.hpf-video-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:50px;flex-wrap:wrap;}
.hpf-eyebrow{font-size:11px;letter-spacing:.18em;color:var(--teal);text-transform:uppercase;margin-bottom:16px;}
.hpf-video-title{margin:0;font-family:var(--disp);font-size:clamp(48px,6vw,92px);line-height:.94;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);}
.hpf-view-controls{display:flex;align-items:center;gap:8px;padding-bottom:7px;}
.hpf-view-controls>span{font-size:9px;letter-spacing:.16em;color:#666;margin-right:8px;}
.hpf-cols-toggle{width:38px;height:38px;border:1px solid var(--line);background:transparent;color:#777;cursor:pointer;transition:.25s;font-family:var(--body);}
.hpf-cols-toggle:hover,.hpf-cols-toggle.is-active{color:var(--ink);border-color:var(--teal);background:rgba(17,166,160,.08);}

.hpf-video-grid{display:grid;gap:10px;transition:.3s ease;}
.hpf-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.hpf-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.hpf-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
@media(max-width:1100px){.hpf-cols-6{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:900px){.hpf-cols-3,.hpf-cols-4,.hpf-cols-6{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.hpf-cols-3,.hpf-cols-4,.hpf-cols-6{grid-template-columns:1fr;}.hpf-view-controls{display:none;}}

.hpf-vcard{appearance:none;border:0;background:transparent;color:inherit;padding:0;text-align:left;cursor:pointer;min-width:0;font-family:var(--body);}
.hpf-vthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#151515 center/cover no-repeat;border:1px solid rgba(255,255,255,.04);}
.hpf-vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.28));transition:.3s;}
.hpf-vcard:hover .hpf-vthumb::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.48));}
.hpf-vplay{position:absolute;z-index:2;left:20px;bottom:18px;width:48px;height:48px;border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:13px;transition:.3s;color:#fff;}
.hpf-vcard:hover .hpf-vplay{background:var(--teal);border-color:var(--teal);transform:translateY(-3px);}
.hpf-vindex{position:absolute;right:18px;top:15px;z-index:2;font-family:var(--disp);font-size:16px;color:rgba(255,255,255,.62);}
.hpf-grad-1{background:linear-gradient(135deg,#1e2b2d,#11a6a0 140%);}
.hpf-grad-2{background:linear-gradient(135deg,#151515,#5f554b);}
.hpf-grad-3{background:linear-gradient(135deg,#252525,#6e7170);}
.hpf-grad-4{background:linear-gradient(135deg,#172529,#35474a 60%,#11a6a0);}
.hpf-grad-5{background:linear-gradient(135deg,#332d2a,#151515);}
.hpf-vmeta{display:flex;justify-content:space-between;gap:14px;padding:15px 2px 7px;}
.hpf-vtype{display:block;color:var(--teal);font-size:9px;letter-spacing:.14em;text-transform:uppercase;}
.hpf-vname{display:block;margin-top:5px;font-family:var(--disp);font-size:18px;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);}
.hpf-varrow{color:#666;font-size:15px;padding-top:15px;transition:.25s;}
.hpf-vcard:hover .hpf-varrow{color:var(--teal);transform:translate(2px,-2px);}

/* Modal */
.hpf-vmodal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:36px;z-index:100000;}
.hpf-vmodal.is-open{display:flex;}
body.hpf-modal-open{overflow:hidden;}
.hpf-vmodal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.hpf-vmodal-dialog{position:relative;z-index:2;width:min(1450px,94vw);background:#0b0b0b;border:1px solid #2a2a2a;box-shadow:0 40px 120px rgba(0,0,0,.7);}
.hpf-vmodal-top{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid var(--line);}
.hpf-vmodal-label{display:block;color:var(--teal);font-size:8px;letter-spacing:.16em;margin-bottom:5px;text-transform:uppercase;}
.hpf-vmodal-top h3{margin:0;font-family:var(--disp);font-size:20px;letter-spacing:.01em;text-transform:uppercase;color:#fff;}
.hpf-vmodal-close{width:44px;height:44px;border:1px solid var(--line);background:transparent;color:#fff;font-size:27px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hpf-vmodal-close:hover{border-color:var(--teal);color:var(--teal);}
.hpf-vframe{position:relative;aspect-ratio:16/9;background:#000;}
.hpf-vframe iframe{position:absolute;inset:0;width:100%;height:100%;}
@media(max-width:600px){.hpf-vmodal{padding:12px;}}