/* sections/portfolio.css — стили секции "portfolio". Наполняет таск 06. */

/* --- Шапка секции --- */
.portfolio__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.portfolio__title { max-width: 20ch; }

/* --- Табы-фильтры категорий --- */
.portfolio__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block: var(--rhythm-lead-tight) var(--rhythm-lead);
}
.portfolio-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-target-min);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--motion-duration) var(--motion-ease),
              transform var(--motion-duration) var(--motion-ease);
}
.portfolio-tab:hover { color: var(--color-text-primary); transform: translateY(-2px); }
.portfolio-tab.is-active {
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}
/* Счётчик тише соседнего названия за счёт цвета, а не веса:
   вес у всего уровня Caption/UI один. */
.portfolio-tab__count { color: var(--color-text-secondary); font-weight: var(--weight-caption); }

/* --- Masonry-сетка через CSS-колонки --- */
.portfolio__grid {
  columns: 2;
  column-gap: var(--space-2);
}
@media (min-width: 768px) {
  .portfolio__grid { columns: 3; column-gap: var(--gutter); }
}
@media (min-width: 1200px) {
  .portfolio__grid { columns: 4; }
}

.portfolio-item {
  position: relative;
  margin: 0 0 var(--space-2);
  break-inside: avoid;
  background: var(--color-surface-card);
}
@media (min-width: 768px) {
  .portfolio-item { margin-bottom: var(--gutter); }
}
/* Появление при входе в вьюпорт: класс will-reveal ставит JS (без JS всё видно) */
.portfolio-item.will-reveal { opacity: 0; transform: translateY(40px); }
.portfolio-item.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}

.portfolio-item__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.portfolio-item__img { width: 100%; }
.portfolio-item__open:hover .portfolio-item__img { opacity: 0.88; }
.portfolio-item__img { transition: opacity var(--motion-duration) var(--motion-ease); }

.portfolio-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
  background: rgba(18, 18, 18, 0.55);
  pointer-events: none;
}

.portfolio-item__ig {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-1);
  background: rgba(18, 18, 18, 0.72);
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
a.portfolio-item__ig:hover { opacity: 0.85; }

.portfolio-item__caption {
  padding: var(--space-1) var(--space-2) var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
}

/* --- Лайтбокс --- */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio-lightbox[hidden] { display: none; }

.portfolio-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  cursor: zoom-out;
}
.portfolio-lightbox__stage {
  position: relative;
  margin: 0;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portfolio-lightbox__media img,
.portfolio-lightbox__media video {
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: var(--color-surface-card);
}
.portfolio-lightbox__caption {
  padding-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-align: center;
  max-width: 60ch;
}

.portfolio-lightbox__btn {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border: 1px solid var(--color-accent-primary);
  border-radius: 0;
  background: rgba(18, 18, 18, 0.65);
  color: var(--color-accent-primary);
  cursor: pointer;
  transition: transform var(--motion-duration) var(--motion-ease),
              opacity var(--motion-duration) var(--motion-ease);
}
.portfolio-lightbox__btn:hover { transform: translateY(-2px); }
.portfolio-lightbox__btn--prev { left: var(--space-2); top: 50%; margin-top: -22px; }
.portfolio-lightbox__btn--next { right: var(--space-2); top: 50%; margin-top: -22px; }
.portfolio-lightbox__btn--close { top: var(--space-2); right: var(--space-2); }

@media (max-width: 767px) {
  .portfolio-lightbox__btn--prev { left: var(--space-1); }
  .portfolio-lightbox__btn--next { right: var(--space-1); }
}

/* Меньше движения: элементы видимы сразу (глобальный сброс гасит transition) */
@media (prefers-reduced-motion: reduce) {
  .portfolio-item.will-reveal { opacity: 1; transform: none; }
}