/* ===== Projects page — специфика поверх variant-a.css ===== */

/* --- Активный пункт навигации (как в audit.css) --- */
.nav-link.is-active{color:var(--black)}
.nav-link.is-active::after{right:0}

/* --- Ghost button (на тёмном hero) --- */
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--black);transform:translateY(-2px);border-color:#fff}

/* --- Хлебные крошки (в hero, поверх оверлея) --- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#D7D7DE;margin-bottom:6px}
.crumbs a{color:#D7D7DE;transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs-sep{color:rgba(255,255,255,.5)}
.crumbs-current{color:#fff}

/* --- Hero проектов: фон 4.png (яркий коллаж) + тёмный оверлей слева для читаемости, справа коллаж просвечивает --- */
.proj-hero .hero-overlay{background:linear-gradient(100deg,rgba(9,10,13,.95) 0%,rgba(9,10,13,.86) 44%,rgba(9,10,13,.42) 100%),linear-gradient(0deg,rgba(9,10,13,.88) 0%,rgba(9,10,13,.4) 46%,transparent 82%)}
.proj-hero .hero-top{max-width:1100px}
.proj-hero .hero-top h1{font-size:clamp(38px,5.2vw,80px);letter-spacing:-.03em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* --- Статистика: длинные значения («с 2009») — в одну строку --- */
.stats .stat b{white-space:nowrap}

/* --- Блок проектов: фильтры-чипы --- */
.proj-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.proj-chip{display:inline-flex;align-items:center;font-family:inherit;font-weight:600;font-size:14.5px;line-height:1;color:var(--g700);background:#fff;border:1.5px solid var(--g300);border-radius:var(--pill);padding:11px 18px;cursor:pointer;transition:color .2s,background-color .2s,border-color .2s,transform .2s}
.proj-chip:hover{border-color:var(--g500);color:var(--black)}
.proj-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-color:var(--red)}
.proj-chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.proj-chip[aria-pressed="true"]:hover{background:var(--red-h);border-color:var(--red-h);color:#fff}

/* --- Контраст hover у .btn-outline (красный текст читаемее на светлом фоне) --- */
.btn-outline:hover{color:var(--red-ink)}

/* --- Разведение шагов типографики: заголовок карточки чуть крупнее тела --- */
.proj-body h3{font-size:17px}

/* --- Карточка-ссылка «показать ещё» + счётчик --- */
.proj-more{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:40px}
.proj-count{font-size:14px;font-weight:600;color:var(--g500);letter-spacing:.01em}
.proj-more .btn{min-width:220px;justify-content:center}
.proj-more[hidden]{display:none}

/* --- Адаптив фильтров: на узких экранах ряд прокручивается --- */
@media(max-width:620px){
  .proj-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
  .proj-filters::-webkit-scrollbar{display:none}
  .proj-chip{flex:none;scroll-snap-align:start}
  .proj-more .btn{width:100%;min-width:0}
}