/* ==========================================================================
   Портфолио (07.10.2026): карточки работ в листинге, галерея на странице работы,
   просмотр крупно. Подключается на страницах дизайна, работ, клиентов и /portfolio/.
   Лист и типографика — из sx-sol.css.
   ========================================================================== */

/* ---- листинг работ ---- */
.pf-grid{display:grid;gap:clamp(14px,1.6vw,28px);grid-template-columns:minmax(0,1fr)}
@container (min-width:520px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:820px){.pf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pf-card{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.pf-card:hover{text-decoration:none}
.pf-card__pic{position:relative;aspect-ratio:4/3;border-radius:var(--radius);background:#eceff3;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.4vw,22px)}
.pf-card__pic img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 14px 30px -14px rgba(17,19,24,.35);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-card__pic img{transform:translateY(-4px) scale(1.02)}
.pf-card__n{position:absolute;right:10px;bottom:10px;font-size:12px;line-height:1;padding:6px 8px;border-radius:4px;
  background:rgba(17,19,24,.72);color:#fff}
.pf-card__type{margin:14px 0 0;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#8b93a8)}
.pf-card__title{margin:6px 0 0;font-size:clamp(16px,1.05vw,19px);line-height:1.3;font-weight:400;letter-spacing:-.01em}
.pf-card:hover .pf-card__title{color:var(--accent)}
.pf-more{margin-top:clamp(18px,1.6vw,26px)}

/* ---- галерея работы ---- */
.pf-gal{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:minmax(0,1fr)}
@container (min-width:560px){.pf-gal--tall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:820px){.pf-gal--tall.pf-gal--n3,.pf-gal--tall.pf-gal--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pf-gal--tall.pf-gal--n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pf-gal a{display:block;border-radius:var(--radius);background:#eceff3;padding:clamp(10px,1.4vw,24px);cursor:zoom-in}
.pf-gal img{display:block;width:100%;height:auto;box-shadow:0 18px 40px -18px rgba(17,19,24,.4)}

/* ---- просмотр крупно ---- */
.pf-box{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(11,13,18,.94);padding:clamp(64px,4vw,72px) clamp(12px,6vw,88px)}
.pf-box.is-open{display:flex}
.pf-box img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.pf-box button{position:absolute;z-index:2;width:48px;height:48px;border:0;border-radius:50%;background:rgba(32,34,45,.9);color:#fff;
  font:inherit;font-size:22px;line-height:48px;cursor:pointer}
.pf-box button:hover{background:#3a3e4f}
.pf-box__x{top:16px;right:16px}
.pf-box__prev{left:16px;top:50%;margin-top:-24px}
.pf-box__next{right:16px;top:50%;margin-top:-24px}
@media(max-width:700px){.pf-box__prev,.pf-box__next{top:auto;bottom:8px;margin:0}}