/* ================================================================
   css/pages/portfolio.css — стили страницы портфолио
   ================================================================ */


/* ── Заголовочная секция ── */

.portfolio-hero {
  background: var(--c-bg-dark);
  color: var(--c-text-inv);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.portfolio-hero .breadcrumb {
  color: var(--c-text-inv-muted);
  padding-block: var(--sp-1);
  margin-bottom: var(--sp-2);
  font-size: 0.875rem;
}

.portfolio-hero .breadcrumb__link {
  color: var(--c-text-inv-muted);
}

.portfolio-hero .breadcrumb__link:hover {
  color: var(--c-text-inv);
}

.portfolio-hero .breadcrumb__item + .breadcrumb__item::before {
  color: var(--c-text-inv-muted);
  opacity: 0.4;
}

.portfolio-hero .breadcrumb__current {
  color: var(--c-text-inv);
}

.portfolio-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-1);
}

.portfolio-hero__sub {
  font-size: var(--text-sm);
  color: var(--c-text-inv-muted);
  line-height: var(--lh-relaxed);
}


/* ── Секция с галереей ── */

.portfolio-section {
  padding-block: var(--sp-6) var(--sp-10);
}

@media (min-width: 1024px) {
  .portfolio-section {
    padding-block: var(--sp-8) var(--sp-12);
  }
}


/* ── Фильтры ── */

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-4);
}

.filter-btn {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  font-family: var(--font-body);
  line-height: 1.5;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--c-text);
  color: var(--c-text);
}

.filter-btn.is-active {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}


/* ── Пустое состояние (нет работ в стиле) ── */

.gallery-empty {
  column-span: all;
  text-align: center;
  padding: var(--sp-8) var(--sp-2);
  color: var(--c-text-muted);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}


/* ── Noscript-подсказка ── */

.gallery-noscript {
  text-align: center;
  padding: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
}


/* ── CTA под галереей ── */

.portfolio-cta {
  margin-top: var(--sp-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.portfolio-cta__label {
  font-size: var(--text-base);
  color: var(--c-text-muted);
}