/* Каталог на главной. Figma: Screen 2/pc 611:3866 (1920×1898, top 748), Screen 2/mb 611:4520 (390×2207, top 782).
   Табы: 611:3869 (pc), tags button 611:1831 (mb). Стили карточки — в css/card.css. */

.catalog {
  padding-top: 72px;             /* заголовок top 72 внутри секции */
  padding-bottom: 57px;          /* 1898 − (1364 + 477) */
  overflow: hidden;
}

/* Блоб Ellipse 14 (611:3867): 1880×1472, центр секции, смещение по Y +15.
   SVG 2680×2272 (поле под blur 200), центр эллипса (1340, 1136). */
.catalog__blob {
  left: 50%;
  top: 213px;                    /* (1898/2 + 15) − 1136 */
  width: 2680px;
  height: 2272px;
  margin-left: -1340px;
}

.catalog__title {
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  text-align: center;
  color: var(--black);
}

/* Табы: блок 529px, top 143, gap 18 */
.catalog__tabs {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;              /* 143 − (72 + 43 высота строки заголовка) */
}

/* Таб: h 51, padding 16px 20px, radius 14, бордер rgba(48,86,132,0.16), Rubik Bold 16px */
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  padding: 16px 20px;
  border: 1px solid var(--brand-16);
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 16px;
  color: var(--brand);
  white-space: nowrap;
}

/* Ширины из Figma: Капсулы 113 (hug), Спреи 92, Ампулы 106, Вся продукция 164.
   Это минимум, а не жёсткий размер: подписи табов — поля блока (`tab_capsules` и далее),
   а `.tab` запрещает перенос, поэтому подпись длиннее макетной вылезала бы за обводку.
   Замеренные ширины подписей по умолчанию: 114.3 / 93.1 / 107.2 / 165.8. */
.tab--capsules { min-width: 113px; }
.tab--sprays { min-width: 92px; }
.tab--ampoules { min-width: 106px; }
.tab--all { min-width: 164px; }

.tab--active {
  background: var(--brand);
  color: var(--white);
}

/* Сетка: колонки на странице 270/624/978/1332 → сдвиг 9 от контейнера 261.
   Шаг X 354 → gap 20; шаг Y 549 → gap 72.
   Колонок восемь по 157 вместо четырёх по 334: 8·157 + 7·20 = 1396 — та же ширина ряда,
   что и 4·334 + 3·20. Карточка занимает две колонки, поэтому неполный ряд можно сдвинуть
   на половину шага и выровнять по центру. */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(8, 157px);
  gap: 72px 20px;
  margin-top: 72px;              /* 266 − (143 + 51) */
  padding-left: 9px;
}

.catalog__grid > .card {
  grid-column: span 2;
}

/* Хвост из двух карточек встаёт по центру: девятая начинает третью колонку.
   Считаем только видимые карточки: фильтр табов ставит скрытым атрибут hidden, и без
   `of` в подсчёт попадали бы скрытые — при выборе «Капсулы» три карточки ложились 2 + 1.
   Правило работает от конца, поэтому не зависит от числа товаров в сетке. */
.catalog__grid > .card:nth-last-child(2 of .card:not([hidden])):nth-child(4n + 1 of .card:not([hidden])) {
  grid-column: 3 / span 2;
}

/* Кнопка в каталог (заказчик 2026-09-16). Геометрия из кита — как у кнопки калькулятора
   после блока технологии. */
.catalog__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.catalog__cta-btn {
  padding: 16px 24px;
  background: var(--brand);
  font-size: 16px;
  color: var(--white);
}

.catalog__cta-btn:hover,
.catalog__cta-btn:focus-visible {
  background: var(--brand);
  color: var(--white);
  opacity: 0.85;
}

/* Стрелка уже белая — инверсия кита её бы съела */
.catalog__cta-btn:hover img,
.catalog__cta-btn:focus-visible img {
  filter: none;
}

@media (max-width: 1199px) {
  /* Screen 2/mb: заголовок top 50, табы top 119, первая карточка top 206, шаг 513 */
  /* Фрейм 611:4520 объявлен высотой 2207, но последняя карточка кончается на 2222,
     а Screen 3/mb начинается ровно на 3004 = 782 + 2222 → под последней карточкой отступа нет. */
  .catalog {
    padding-top: 50px;
    padding-bottom: 0;
  }

  /* Блоб Ellipse 14 mb (611:4521): 390×1671, top 153 внутри секции.
     SVG 1190×2471 (inset −23.94% / −102.56%), центр (595, 1235.5). */
  .catalog__blob {
    top: -247px;                 /* (153 + 1671/2) − 1235.5 */
    width: 1190px;
    height: 2471px;
    margin-left: -595px;
  }

  /* Заголовок и табы в mb стоят на 28 от края экрана → +14 внутри контейнера 362 */
  .catalog__title {
    margin-left: 14px;
    font-size: 28px;
    text-align: left;
  }

  /* Табы mb: четыре подписи просят 534px при контейнере 362, в строку они не влезают
     ни при какой ширине экрана, поэтому полоса переносится. Отступ справа равен левому —
     табы стоят в тех же 14px, что заголовок и сетка карточек. */
  .catalog__tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;                   /* макетные 18 в две строки дают слишком рыхлый блок */
    margin-top: 36px;            /* 119 − (50 + 33 строка заголовка) */
    margin-left: 14px;
    margin-right: 14px;
  }

  /* Сетка mb: одна карточка в ряд, шаг 513 → gap 36. Карточка занимает две колонки,
     поэтому колонок две по 157: 2·157 + 20 = 334 — ширина карточки из макета. */
  .catalog__grid {
    grid-template-columns: repeat(2, 157px);
    gap: 36px 20px;
    margin-top: 36px;            /* 206 − (119 + 51) */
    padding-left: 14px;          /* карточка left 28 при контейнере 14 */
  }

  /* Центровка хвоста снимается: в один столбец сдвигать нечего. Селектор повторяет
     pc-правило, иначе не перекроет его по специфичности. */
  .catalog__grid > .card:nth-last-child(2 of .card:not([hidden])):nth-child(4n + 1 of .card:not([hidden])) {
    grid-column: span 2;
  }

  .catalog__cta {
    margin-top: 36px;
  }
}