/* ============================================================
   Страница «Портфолио» — все работы каталога.
   Сетка .work__grid и карточка .work — общие, лежат в styles.css.
   Чипы фильтра и пагинация повторяют блог: те же классы и правила,
   но продублированы здесь, чтобы страница не тянула blog.css.
   ============================================================ */

/* .section даёт margin-top:100px — для первого блока страницы это много */
.portfolio--list{margin-top:30px;}
.portfolio--list .work__grid{row-gap:45px;}

/* ---------- Фильтр по разделам ---------- */
.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.blog-filter__i{display:inline-flex;align-items:center;height:40px;padding:0 20px;
  border:1px solid rgba(15,22,40,.2);border-radius:20px;
  font-size:15px;line-height:1;color:var(--navy);white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s;}
.blog-filter__i:hover{border-color:var(--navy);}
.blog-filter__i.is-active{background:var(--grad);border-color:transparent;color:#fff;}
.blog-filter__n{margin-left:8px;font-size:13px;color:rgba(15,22,40,.45);}
.blog-filter__i.is-active .blog-filter__n{color:rgba(255,255,255,.75);}

/* ---------- Пагинация ---------- */
.pagi{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:60px;}
.pagi__i{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid rgba(15,22,40,.2);border-radius:12px;
  font-size:16px;line-height:1;color:var(--navy);
  transition:border-color .2s,background .2s,color .2s;}
.pagi__i:hover{border-color:var(--navy);}
.pagi__i.is-active{background:var(--grad);border-color:transparent;color:#fff;}
.pagi__i--nav{font-size:22px;padding:0;}
.pagi__i.is-off{color:rgba(15,22,40,.25);border-color:rgba(15,22,40,.1);pointer-events:none;}
.pagi__dots{display:inline-flex;align-items:flex-end;height:44px;padding:0 4px;color:rgba(15,22,40,.4);}

/* ---------- Адаптив ---------- */
@media (max-width:768px){
  .portfolio--list{margin-top:20px;}
  .portfolio--list .work__grid{row-gap:30px;}
  .blog-filter{gap:8px;margin-bottom:30px;}
  .blog-filter__i{height:36px;padding:0 16px;font-size:14px;}
  .pagi{margin-top:40px;gap:8px;}
  .pagi__i{min-width:40px;height:40px;font-size:15px;}
}