/* =========================================================
   PDA Doors & More — Portfolio page module (.pf-*)
   Builds on styles.css design tokens (dark + gold, Playfair/Inter).
   Namespaced so it can't collide with global styles or other pages.
   ========================================================= */

/* ---- Portfolio hero: real install photo, eager ---- */
.pf-hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line-2)}
.pf-hero .pf-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
.pf-hero .pf-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:1;background:#0a0a0a}
.pf-hero .pf-hero-veil{position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(6,6,6,.92) 0%,rgba(6,6,6,.66) 40%,rgba(6,6,6,.22) 74%,rgba(6,6,6,.5) 100%),
  linear-gradient(0deg,rgba(6,6,6,.9),rgba(6,6,6,0) 52%)}
.pf-hero .wrap{position:relative;z-index:2;padding-top:104px;padding-bottom:56px;width:100%}
.pf-hero h1{max-width:16ch;margin:16px 0 20px}
.pf-hero .lead{color:#e9e2d4;max-width:60ch}
.pf-hero .actions{margin-top:30px}

/* ---- Featured Florida projects ---- */
.pf-feat{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(22px,3.4vw,46px);align-items:center;
  padding:clamp(34px,4.4vw,58px) 0;border-top:1px solid var(--line-2)}
.pf-feat:first-of-type{border-top:0;padding-top:0}
.pf-feat.rev{grid-template-columns:.68fr 1.32fr}
.pf-feat.rev .pf-feat-media{order:2}
.pf-feat-media{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.pf-fig{position:relative;overflow:hidden;border:1px solid var(--line-2);margin:0;cursor:zoom-in;background:#111}
.pf-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pf-fig:hover img{transform:scale(1.04)}
.pf-fig-big{aspect-ratio:3/3.7}
.pf-feat-side{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.pf-fig-small{aspect-ratio:1/1.02}
.pf-feat-copy .pf-tag{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:700}
.pf-feat-copy h3{margin:12px 0 12px}
.pf-feat-copy p{color:var(--muted);font-size:15.5px;margin:0 0 18px}
.pf-scope{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.pf-scope li{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#d8d1c5;
  border:1px solid var(--line-2);border-radius:999px;padding:6px 13px}
.pf-tlink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;letter-spacing:.03em;
  color:var(--gold-2);border-bottom:1px solid var(--line);padding-bottom:4px}
.pf-tlink:hover{color:#fff;border-color:var(--gold)}

/* ---- Collection: chips + count + grid ---- */
.pf-chip-row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 10px;margin-bottom:8px}
.pf-chip-row::-webkit-scrollbar{display:none}
.pf-chip{flex:0 0 auto;padding:10px 18px;border:1px solid var(--line-2);background:transparent;color:var(--muted);
  cursor:pointer;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;font-family:inherit;
  border-radius:999px;white-space:nowrap;transition:.25s var(--ease)}
.pf-chip:hover{color:#fff;border-color:var(--line)}
.pf-chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#0a0a0a;border-color:var(--gold)}
.pf-count{color:var(--muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 26px}
.pf-count b{color:var(--gold-2);font-weight:700}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pf-tile{position:relative;overflow:hidden;border:1px solid var(--line-2);background:#111;margin:0;
  aspect-ratio:4/5;cursor:zoom-in}
.pf-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),opacity .5s ease}
.pf-tile:hover img{transform:scale(1.05)}
.pf-tile figcaption{position:absolute;inset:auto 0 0 0;z-index:2;padding:30px 14px 12px;font-size:12.5px;
  letter-spacing:.02em;color:#f1ece1;background:linear-gradient(0deg,rgba(6,6,6,.88),transparent);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.pf-tile:hover figcaption,.pf-tile:focus-within figcaption{opacity:1;transform:none}
.pf-tile .pf-badge{position:absolute;top:10px;left:10px;z-index:3;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--gold-2);background:rgba(8,8,8,.72);
  border:1px solid var(--line);padding:5px 9px}
.pf-hide{display:none !important}
.pf-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0;font-size:15px}

/* ---- On the Job scroller ---- */
.pf-jobs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,286px);gap:14px;
  overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pf-job{scroll-snap-align:start;position:relative;aspect-ratio:3/3.8;overflow:hidden;border:1px solid var(--line-2);
  background:#111;margin:0;cursor:zoom-in}
.pf-job img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pf-job:hover img{transform:scale(1.05)}
.pf-job figcaption{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px 12px 11px;font-size:12px;color:#eee;
  background:linear-gradient(0deg,rgba(6,6,6,.82),transparent)}
.pf-jobnote{margin-top:22px;color:var(--muted);font-size:14px;max-width:74ch}

/* ---- Service-area credibility ---- */
.pf-areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pf-areas a{border:1px solid var(--line-2);color:#d8d1c5;padding:10px 16px;font-size:13px;letter-spacing:.04em;
  transition:.25s var(--ease)}
.pf-areas a:hover{border-color:var(--gold);color:#fff}

/* ---- Lightbox ---- */
.pf-lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(5,5,5,.95);backdrop-filter:blur(4px)}
.pf-lb.on{display:grid;grid-template-rows:1fr auto}
.pf-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:56px 68px 8px;min-height:0}
.pf-lb-img{max-width:min(1180px,94vw);max-height:78vh;width:auto;height:auto;object-fit:contain;
  border:1px solid var(--line-2);background:#0a0a0a}
.pf-lb-foot{padding:10px 20px 20px;text-align:center}
.pf-lb-cap{color:#e7e0d2;font-size:14px;letter-spacing:.02em;max-width:70ch;margin:0 auto 12px}
.pf-lb-count{color:var(--gold-2);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.pf-lb-thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:640px;margin:0 auto}
.pf-lb-thumbs button{width:52px;height:52px;padding:0;border:1px solid var(--line-2);background:#111;cursor:pointer;overflow:hidden;opacity:.55;transition:.2s}
.pf-lb-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.pf-lb-thumbs button.on,.pf-lb-thumbs button:hover{opacity:1;border-color:var(--gold)}
.pf-lb-btn{position:absolute;background:rgba(12,12,12,.72);border:1px solid var(--line-2);color:#eee;
  width:48px;height:48px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.2s;z-index:2}
.pf-lb-btn:hover{background:var(--gold);color:#0a0a0a;border-color:var(--gold)}
.pf-lb-close{top:18px;right:20px;position:fixed}
.pf-lb-prev{left:16px;top:calc(50% - 40px);transform:translateY(-50%)}
.pf-lb-next{right:16px;top:calc(50% - 40px);transform:translateY(-50%)}
.pf-lb-btn:focus-visible,.pf-chip:focus-visible,.pf-tile:focus-visible,.pf-fig:focus-visible,.pf-job:focus-visible,.pf-lb-thumbs button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pf-lb-single .pf-lb-prev,.pf-lb-single .pf-lb-next,.pf-lb-single .pf-lb-thumbs{display:none}
body.pf-lock{overflow:hidden}

/* ---- Responsive ---- */
@media (max-width:980px){
  .pf-feat,.pf-feat.rev{grid-template-columns:1fr;gap:20px}
  .pf-feat.rev .pf-feat-media{order:0}
  .pf-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pf-hero .wrap{padding-top:96px}
}
@media (max-width:560px){
  .pf-grid{grid-template-columns:1fr 1fr;gap:9px}
  .pf-tile figcaption{opacity:1;transform:none;font-size:11px;padding:22px 10px 9px}
  .pf-feat-media{grid-template-columns:1.6fr 1fr}
  .pf-hero{min-height:76vh}
  .pf-lb-stage{padding:44px 12px 6px}
  .pf-lb-prev{left:6px}.pf-lb-next{right:6px}
  .pf-lb-btn{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .pf-fig img,.pf-tile img,.pf-job img{transition:none}
  .pf-fig:hover img,.pf-tile:hover img,.pf-job:hover img{transform:none}
  .pf-tile figcaption{transition:none}
  .pf-hero .pf-hero-video{display:none}
}