/* =========================================================
   Каталог техники
   Макет: Figma → Final → «Каталог» — только фрейм 1920. Фрейм 1200 у соседних страниц — уменьшенный 1920 (× 0.625),
   поэтому размеры идут через --s (пиксель фрейма 1920, style.css).
   Карточки — общие плитки с линиями (.tile-list / .tile в style.css), планшет и телефон — по фреймам «Проекты».
   Заголовки, подписи, тексты и отступы между секциями — общие классы и токены из style.css.
   ========================================================= */

/* ---------- Заголовок: крошки и текст, как на «Услугах» и «Контактах» ---------- */

.cat-head { padding-top: var(--head-pt); }

.cat-head__intro { grid-column: 1 / span 9; }

.cat-head__title { max-width: calc(1341 * var(--s)); } /* ширина текста во фрейме — три строки */

/* ---------- Разделы каталога: вкладки с сайта на месте фильтров макета ---------- */

.cat-tabs__row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px calc(60 * var(--s));
  padding: calc(80 * var(--s)) 0 var(--gap-title); /* от заголовка до строки — как во фрейме, до линии — как заголовок → содержимое */
}

.cat-tab {
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.cat-tab:hover { color: var(--c-dark); }
.cat-tab[aria-pressed="true"] {
  color: var(--c-dark);
  text-decoration-color: var(--c-accent);
}

/* ---------- «Загрузить ещё» — по центру под списком ---------- */

.cat-more {
  display: flex;
  justify-content: center;
  padding-top: var(--gap-title);
}
.cat-more[hidden] { display: none; }

@media (max-width: 1024px) {
  .cat-head__intro { grid-column: 1 / -1; }
  .cat-tabs__row {
    gap: 10px 30px;
    padding: 30px 0 var(--gap-title);
  }
}

@media (max-width: 639px) {
  .cat-tabs__row { gap: 10px 24px; }
}