/* ============================================================
   MCZ — PORTFOLIO  (portfolio.css)  ·  mobile-first
   ============================================================ */

.pf{position:relative;padding:7rem 0 5rem}

/* ---------- HERO ---------- */
.pf-hero{text-align:center;max-width:640px;margin:0 auto 3rem}
.pf-hero .eyebrow{margin-bottom:1.1rem}
.pf-hero__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:clamp(2.3rem,9vw,3.7rem);line-height:1.05}
.pf-hero__sub{color:var(--muted);font-size:1.02rem;margin-top:.9rem}

/* ---------- SIATKA ---------- */
.pf-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}

.pf-card{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-soft);border-radius:20px;background:var(--surface);
  transition:transform .35s var(--ease),border-color .35s}
.pf-card:hover{transform:translateY(-6px);border-color:var(--line)}

.pf-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,var(--bg-2),var(--ink))}
.pf-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .6s var(--ease)}
.pf-card:hover .pf-thumb img{transform:scale(1.05)}
.pf-thumb__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pf-thumb__ph svg{width:48px;height:48px;stroke:var(--orange);opacity:.4}
.pf-cat{position:absolute;left:.9rem;top:.9rem;font-family:'JetBrains Mono',monospace;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:var(--grad-warm);padding:.3rem .7rem;border-radius:100px}

.pf-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.pf-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:1.28rem;letter-spacing:-.02em;margin-bottom:.5rem}
.pf-desc{color:var(--muted);font-size:.93rem;flex:1}
.pf-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;
  font-weight:600;font-size:.9rem;color:var(--orange)}
.pf-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.pf-card:hover .pf-link svg{transform:translate(3px,-3px)}

/* ---------- CTA ---------- */
.pf-cta{margin-top:3.5rem;text-align:center;padding:3rem 1.6rem;border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(155deg,rgba(252,153,3,.1),var(--surface))}
.pf-cta h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(1.5rem,5.5vw,2.2rem);letter-spacing:-.02em}
.pf-cta p{color:var(--muted);font-size:.98rem;margin:.7rem auto 1.5rem;max-width:42ch}

/* ---------- RESPONSIVE ---------- */
@media (min-width:640px){
  .pf-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .pf{padding:9.5rem 0 6rem}
  .pf-hero{margin-bottom:4rem}
  .pf-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}