/* /portfolio — переключатель размера плиток «Крупные / Средние / Мелкие».
   Управляет CSS-переменной --portfolio-masonry-cols через data-атрибут
   на .portfolio-masonry. Пресеты переопределяют базовые медиазапросы
   portfolio-page.css за счёт селектора с атрибутом (0,2,0 > 0,1,0). */

/* ---------- Сетка: пресеты размера (только ≥881px, ниже — штатные 2/1 колонки) ---------- */

@media (min-width: 1101px) {
  .portfolio-masonry[data-tile-size="large"]  { --portfolio-masonry-cols: 3; }
  .portfolio-masonry[data-tile-size="medium"] { --portfolio-masonry-cols: 4; }
  .portfolio-masonry[data-tile-size="small"]  { --portfolio-masonry-cols: 6; --portfolio-masonry-gap: 14px; }
}

@media (min-width: 881px) and (max-width: 1100px) {
  .portfolio-masonry[data-tile-size="large"]  { --portfolio-masonry-cols: 2; }
  .portfolio-masonry[data-tile-size="medium"] { --portfolio-masonry-cols: 3; }
  .portfolio-masonry[data-tile-size="small"]  { --portfolio-masonry-cols: 4; --portfolio-masonry-gap: 14px; }
}

/* ---------- Контрол ---------- */

.portfolio-size-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  max-width: 100%;
}

.portfolio-size-switcher__label {
  font-family: var(--ff-tech);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-tech);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 55%, transparent);
  white-space: nowrap;
}

.portfolio-size-switcher__segments {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.portfolio-size-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-family: var(--ff-tech);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-tech);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 70%, transparent);
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}

.portfolio-size-switcher__btn svg {
  flex: none;
  opacity: 0.85;
}

.portfolio-size-switcher__btn:hover {
  color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.portfolio-size-switcher__btn:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 2px;
}

/* Активный сегмент — латунный акцент */
.portfolio-size-switcher__btn[aria-pressed="true"],
.portfolio-size-switcher__btn[aria-pressed="true"]:hover {
  background: var(--brass-600);
  color: var(--ink-1000);
}

@media (max-width: 880px) {
  /* На узких экранах сетка и так 2/1 колонка — переключатель скрываем */
  .portfolio-size-switcher {
    display: none;
  }
}