/**
 * assets/css/portfolio.css
 * Страница "Портфолио" — та же сетка карточек, что и на главной, + фильтр по категории.
 */
.pf-hero{ padding:64px 0 40px; }
.pf-hero h1{ font-size:clamp(32px,4vw,48px); margin:16px 0 14px; }
.pf-hero p{ color:var(--text-dim); max-width:52ch; font-size:16px; }

.pf-filters{ display:flex; gap:10px; margin:36px 0 4px; flex-wrap:wrap; }
.pf-filters button{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:9px 16px; border-radius:2px; border:1px solid var(--line-bright); background:transparent; color:var(--text-dim); cursor:pointer;
}
.pf-filters button.is-active, .pf-filters button:hover{ border-color:var(--accent); color:var(--text); }

.grid-portfolio-full{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:32px; }
.grid-portfolio-full .pf-card{ background:var(--bg); }
.grid-portfolio-full .pf-card[hidden]{ display:none; }
.grid-portfolio-full .pf-photo{ height:200px; position:relative; }
.grid-portfolio-full .pf-photo::after{ content:attr(data-tag); position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; background:rgba(0,0,0,0.5); color:var(--text); padding:5px 9px; text-transform:uppercase; }
.grid-portfolio-full .pf-photo::before{ content:attr(data-code); position:absolute; bottom:12px; right:12px; font-family:var(--font-mono); font-size:10.5px; color:rgba(233,236,241,0.5); }
.grid-portfolio-full .pf-body{ padding:18px 20px 24px; }
.grid-portfolio-full .pf-body h3{ font-size:19px; font-family:var(--font-display); }
.grid-portfolio-full .pf-body p{ margin:8px 0 0; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }

@media (max-width:860px){ .grid-portfolio-full{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-portfolio-full{ grid-template-columns:1fr; } }