/* ══════════════════════════════════════════════════════════════════════
   WebSpace — Portfolio page (portfolio.html)
   Structure after fraxbit.com/portfolio: a plain hero (label, one very large headline, one sentence), then a white
   panel with one pill-shaped filter bar and two large project cards per row.
   The hero, nav, buttons, "Ready for launch?" ending and Earth footer are shared (style.css).
   ══════════════════════════════════════════════════════════════════════ */

/* a shorter hero than the other inner pages (about two thirds of the screen), so the white panel and the filter bar
   are already in view when the page opens: people come here to see the work */
.page-hero.ph-short{min-height:min(66vh,620px);min-height:min(66dvh,620px);padding-bottom:clamp(80px,8vw,116px)}
@media (max-width:600px){.page-hero.ph-short{min-height:0;padding-bottom:84px}}

/* the headline's project count: small, raised, beside the last word. Hidden until real projects are in
   (portfolio.js fills it only when the grid has data-count). */
.pf-total{margin-left:.35em;font:500 .2em/1 var(--font);letter-spacing:.04em;vertical-align:top;color:var(--slate);position:relative;top:.9em}

/* the filter: one pill-shaped bar holding a button per service; the chosen one is filled navy.
   On narrow screens the bar scrolls sideways. */
#projects{padding-top:clamp(40px,5vw,72px)}
.pf-bar{display:flex;gap:4px;width:max-content;max-width:100%;padding:6px;border-radius:999px;background:var(--white);
  box-shadow:0 0 0 1px var(--line-dark),0 18px 40px -22px rgba(28,28,40,.3);overflow-x:auto;scrollbar-width:none}
.pf-bar::-webkit-scrollbar{display:none}
.pf-filter{flex:none;display:flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;font:500 15px/1 var(--font);letter-spacing:-.01em;color:var(--navy);white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
.pf-filter:hover{background:rgba(28,28,40,.06)}
.pf-filter[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.pf-filter sup{font:600 11px/1 var(--font);color:var(--muted)}
.pf-filter[aria-pressed="true"] sup{color:var(--cyan)}

/* the grid: two large cards per row — a big picture, then the project's name and its service.
   To post a project: replace the card's .slot with <img src="assets/img/…" alt="…">, write its name, set data-cat to
   its service and point the link at its page. Copy a card to add one. */
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6vw,96px) clamp(18px,2.6vw,40px);margin-top:clamp(40px,6vw,96px)}
.pf{display:block}
.pf[hidden]{display:none}
.pf-img{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;transition:transform .7s var(--ease-out),box-shadow .5s var(--ease)}
img.pf-img,.pf-img img{display:block;width:100%;height:100%;object-fit:cover}
.pf:hover .pf-img{transform:translateY(-10px);box-shadow:0 50px 80px -45px rgba(28,28,40,.5)}
.pf-cap{margin-top:clamp(18px,2vw,28px)}
.pf-cap h3{font:500 clamp(24px,2.6vw,38px)/1.1 var(--font);letter-spacing:-.04em;color:var(--navy)}
.pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.pf-cat{font:600 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pf-tag{padding:8px 13px;border-radius:999px;font:500 13px/1 var(--font);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-dark-strong);transition:box-shadow .3s}
.pf:hover .pf-tag{box-shadow:inset 0 0 0 1px var(--cyan)}
.pf-empty{margin-top:clamp(40px,6vw,96px);color:var(--muted)}
@media (max-width:700px){
  .pf-grid{grid-template-columns:1fr}
  .pf-bar{border-radius:22px}
  .pf-filter{padding:12px 16px;font-size:14px}
}