/* =====================================================================
   PORTFOLIO / OUR WORK PAGE STYLES (/portfolio/)
   Page-specific styles, built on the shared flasher-v2.css design system
   and tokens. Load AFTER flasher-v2.css.
   ===================================================================== */

/* ---- intro band ---- */
.pf-intro{background:var(--black);padding:80px 0 30px;}
.pf-intro__copy{
  font-family:'IBM Plex Mono','Courier New',monospace;font-weight:400;color:#fff;
  font-size:clamp(18px,2vw,28px);line-height:1.45;margin:0;max-width:900px;
}

/* ---- category teasers ---- */
.pf-cats{background:var(--black);padding:40px 0 110px;}
.pf-cat{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;
  padding:64px 0;border-top:1px solid var(--line);
}
.pf-cat:first-child{border-top:0;}
/* alternate sides each row */
.pf-cat:nth-child(even) .pf-cat__media{order:2;}

/* media: big feature photo + 3-thumb slider underneath */
.pf-cat__media{position:relative;display:flex;flex-direction:column;gap:14px;perspective:1200px;}
.pf-cat__feature{
  position:relative;width:100%;aspect-ratio:16 / 10;overflow:hidden;
  border:1px solid var(--line);background:#111;
}
.pf-cat__feature img{width:100%;height:100%;object-fit:cover;display:block;}
/* category label chip over the feature image */
.pf-cat__chip{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--yellow);color:#000;font-family:'IBM Plex Mono','Courier New',monospace;
  font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:7px 14px;
}

/* mini slider */
.pf-slider{position:relative;overflow:hidden;border:1px solid var(--line);background:#111;}
.pf-slider__track{display:flex;transition:transform .5s cubic-bezier(.22,1,.36,1);}
.pf-slide{flex:0 0 100%;aspect-ratio:16 / 7;}
.pf-slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* dots */
.pf-slider__dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2;}
.pf-slider__dot{
  width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.45);transition:background .2s,transform .2s;
}
.pf-slider__dot.is-active{background:var(--yellow);transform:scale(1.2);}

/* text side */
.pf-cat__body{max-width:520px;}
.pf-cat__num{
  font-family:'IBM Plex Mono','Courier New',monospace;color:var(--yellow);
  font-size:15px;letter-spacing:2px;text-transform:uppercase;margin:0 0 14px;
}
.pf-cat__title{
  font-family:'Inter',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-1px;margin:0 0 20px;
}
.pf-cat__desc{
  font-family:'IBM Plex Mono','Courier New',monospace;font-weight:400;color:var(--gray);
  font-size:clamp(16px,1.4vw,19px);line-height:1.45;margin:0 0 30px;
}
.pf-cat__link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fdisp);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  font-size:14px;padding:14px 28px;border:1px solid #fff;color:#fff;transition:.2s;
}
.pf-cat__link:hover{background:var(--red);border-color:var(--red);}
.pf-cat__link .arr{transition:transform .25s;}
.pf-cat__link:hover .arr{transform:translate(3px,-3px);}

@media (max-width:900px){
  .pf-cat{grid-template-columns:1fr;gap:28px;padding:48px 0;}
  .pf-cat:nth-child(even) .pf-cat__media{order:0;}
  .pf-cat__body{max-width:none;}
}