/* ==========================================================================
   Заглушка «Раздел в разработке» — макет 1:1937 (1920×3526).

   Файл грузится на шаблоне «Раздел в разработке», на 404 и на поиске
   (см. ag_page_styles). Тот же блок .stub стоит ещё в пустой категории
   каталога и в пустой корзине, но там этот CSS не подключён: в каталоге
   свою копию держит page-katalog.css, у корзины копии нет вовсе —
   вынесено в отчёт.

   Замеры из Figma (координаты внутри фрейма экрана):
     1:1952 Under Construction Block   40 / 273 / 1840×574, gap 32
     1:1953 иллюстрация                          160×160
     1:1954 Text Stack                           gap 16
     1:1957 кнопка «В каталог»                   376×80
     1:1958 / 1:1959 повёрнутые копии иллюстрации, обрезаются блоком
     1:1960 «Другие доступные разделы» 40 / 975 / 1840×497
     1:1963 карточка раздела                     272×292, плитка 252, gap 16
     1:1970 точки                     848 / 1429 / 143,33×43
     1:1976 / 1:1977 стрелки          56×56, 172 px от краёв колонки
   ========================================================================== */

/* --- Шапка страницы без заголовка -------------------------------------------
   На этом экране над блоком только крошки (1:2009, y=222): H1 живёт внутри
   самого блока. Нижний отступ .page-head обнуляем — зазор 32 до блока даёт
   собственный margin крошек. */

.page-head--bare { padding-bottom: 0; }

/* --- Блок «Раздел в разработке» (1:1952) ------------------------------------
   Высота 574 при контенте 406 — в Figma блок фиксированной высоты с
   центрированием, поэтому сверху и снизу выходит по 84. Здесь это
   min-height плюс justify-content: длинный текст (поиск, 404) блок
   растянет, а не обрежет. */

.stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  min-height: 574px;
  padding: var(--space-64) var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  overflow: hidden;
  text-align: center;
}

.stub__illustration,
.stub__text,
.stub .cta-btn {
  position: relative;
  z-index: 1;
}

.stub__illustration { display: block; width: 160px; height: 160px; }
.stub__illustration img { display: block; width: 100%; height: 100%; object-fit: contain; }

.stub__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  /* В макете стек шириной 692 — по самой длинной строке описания.
     Ограничение нужно другим экранам (поиск, пустая корзина), где текст
     длиннее и без него растянулся бы на всю колонку. */
  max-width: 760px;
}

/* Пустой каталог, поиск и пустая корзина держат кнопку внутри .stub__text —
   там зазор до неё должен остаться прежним, 32. */
.stub__text > .cta-btn { margin-top: var(--space-16); }

.stub__title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

.stub__lead {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* Кнопка в макете фиксированной ширины 376 при подписи «В каталог» —
   текст слева, круг стрелки прижат к правому краю. */
.stub__cta { min-width: 376px; }

/* --- Декор: повёрнутые копии иллюстрации ------------------------------------
   1:1959 — слева сверху, поворот 45°; 1:1958 — справа снизу, поворот −85,23°.
   Координаты правого считаем от правого края: 1840 − 1538,49 − 447,02. */

.stub__deco {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.stub__deco img { display: block; }

.stub__deco--tl { left: -248px; top: -184px; width: 607.28px; height: 607.28px; }
.stub__deco--tl img { width: 429.41px; height: 429.41px; transform: rotate(45deg); }

.stub__deco--br { right: -145.51px; top: 316px; width: 447.02px; height: 447.02px; }
.stub__deco--br img { width: 414px; height: 414px; transform: rotate(-85.23deg); }

/* --- «Другие доступные разделы» (1:1960) ------------------------------------
   Сверху 128 (--section-gap-sm) от блока заглушки, снизу — половина
   --section-gap: вторую половину добавляет своим отступом CTA-блок. */

.stub-other {
  padding-block: var(--section-gap-sm) calc(var(--section-gap) / 2);
}

.stub-other__title {
  margin-bottom: 40px;
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

.stub-slider { position: relative; }

/* Ряд шире колонки (7×272 + 6×20 = 2024 против 1840) и в макете обрезан —
   значит листается. Листание нативным скроллом со scroll-snap, как в
   карусели логотипов на главной: библиотеки в теме нет и не нужна. */
.stub-slider__viewport {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.stub-slider__viewport::-webkit-scrollbar { display: none; }

.stub-cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 0 0 272px;
  scroll-snap-align: start;
}

.stub-cat__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 252px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
  transition: background var(--dur-card) var(--ease-out);
}

.stub-cat__media img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Карточка в макете фиксированной высоты 292 = 252 + 16 + одна строка 24.
   В макете подписи короткие, в базе есть «Теплообменное оборудование» —
   такая в 272 не помещается и ломала бы высоту всего ряда, а за ним
   положение точек и следующей секции. Поэтому одна строка с многоточием. */
.stub-cat__title {
  display: block;
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-brand);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stub-cat:hover .stub-cat__media { background: var(--color-blue-50); }

/* Стрелки 1:1976 / 1:1977. По вертикали не по центру плитки, а на y=191
   внутри секции, то есть 93 от верха ряда — так в макете. */
.stub-slider__nav {
  position: absolute;
  top: 93px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  transition: background var(--dur-fast) var(--ease-out);
}

.stub-slider__nav:hover { background: var(--color-brand-hover); }
.stub-slider__nav svg { width: 34px; height: 34px; }

.stub-slider__nav--prev { left: 172px; transform: scaleX(-1); }
.stub-slider__nav--next { right: 172px; }

/* Точки 1:1970: плашка 143,33×43, четыре кружка 14,33 с шагом 14,33,
   в 64 под рядом карточек. */
.stub-slider__dots {
  /* [RAW] заливка и размытие плашки (нода 1:1971): в Figma это «стекло» из
     заливки, размытия подложки и слоя color-dodge сверху. Переменных в
     макете нет, локальные — чтобы не плодить хардкод по правилам ниже. */
  --stub-dots-platter: rgba(191, 191, 191, .44);
  --stub-dots-blur: blur(36px);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14.33px;
  width: max-content;
  margin: 64px auto 0;
  padding: 14.33px 21.5px;
  border-radius: var(--radius-pill);
  background: var(--stub-dots-platter);
  backdrop-filter: var(--stub-dots-blur);
  -webkit-backdrop-filter: var(--stub-dots-blur);
}

.stub-slider__dot {
  display: block;
  width: 14.33px;
  height: 14.33px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  opacity: .3;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.stub-slider__dot.is-active,
.stub-slider__dot:hover { background: var(--color-brand); opacity: 1; }

/* --- Ниже 1920 px ----------------------------------------------------------
   Мобильных и планшетных кадров в макете нет — раскладка ниже принята
   вёрсткой, см. «Дыры макета» в _figma/00-INDEX.md. */

@media (max-width: 1500px) {
  /* Стрелки уводим к краям колонки: 172 px внутрь имеют смысл только
     при ширине ряда 1840. */
  .stub-slider__nav--prev { left: 0; }
  .stub-slider__nav--next { right: 0; }
}

@media (max-width: 1024px) {
  /* Декор рассчитан на блок 1840: на узком экране повёрнутые копии
     наезжают на саму иллюстрацию, и её непрозрачный фон читается
     белым квадратом. Проще убрать — в макете этой ширины нет. */
  .stub__deco { display: none; }
}

@media (max-width: 900px) {
  .stub { min-height: 0; padding: var(--space-48) var(--space-24); }
  .stub__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .stub-other__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); margin-bottom: var(--space-24); }
}

@media (max-width: 600px) {
  .stub__cta { min-width: 0; width: 100%; }
  .stub-cat { flex-basis: 220px; }
  .stub-cat__media { height: 204px; }
  .stub-slider__nav { display: none; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 700px) {
  .stub__illustration { width: 96px; height: 96px; }
  .stub-slider__dots { margin-top: var(--space-32); }
}