/* ==========================================================================
   Главная — «Работаем с ведущими производителями»

   Макет: `Main Container` 1:751, 1840×694. Панель радиусом 32 с
   горизонтальным градиентом, поверх него две «шторки» 1:788 и 1:789,
   которые гасят края. Внутри: заголовок 1:796, две строки логотипов
   1:752 и плашка точек 1:790.

   Вертикальный ритм панели (все числа — координаты нод внутри 1:751):
     77  отступ сверху → 1:796
     116 заголовок с подзаголовком (58 + 24 + 34)
     59  зазор            (252 − 193)
     274 логотипы 1:752   (127 + 20 + 127)
     40  зазор            (566 − 526)
     43  точки 1:790
     85  отступ снизу     (694 − 609)
   Сумма ровно 694 — высота панели.
   ========================================================================== */

/* Три значения с прозрачностью, которых нет в variables.css: там все цвета
   непрозрачные, а вывести альфу из hex-переменной без color-mix нельзя. */
.brands {
  --brands-veil-out: rgba(14, 21, 52, 0);      /* ноды 1:788/1:789 — --color-navy с нулевой альфой */
  --brands-dots-bg:  rgba(204, 201, 202, .44); /* нода 1:791 — см. пояснение у .brands__dots */
  --brands-dot-off:  rgba(10, 10, 10, .3);     /* ноды 1:793…1:795 — --color-text под 30 % */
}

.brands__panel {
  position: relative;
  min-height: 694px;                 /* нода 1:751 */
  padding-block: 77px 85px;          /* ноды 1:796 и 1:790 */
  border-radius: var(--radius-xl);
  /* Заливка 1:751: 0E1534 → 4867BF по центру → 0E1534. Токен уже есть. */
  background: var(--grad-blue-band);
  color: var(--color-text-invert);
  overflow: hidden;
}

/* «Шторки» 1:788 и 1:789 — два зеркальных градиента, гасящие края панели.
   В макете это отдельные прямоугольники поверх логотипов, но под заголовком
   и точками, поэтому здесь псевдоэлемент с z-index между ними.

   Стопы переведены в координаты панели (0…1840):
     1:788  left −40, w 960, непрозрачный до 4.886 % → x = 6.9  → 0.375 %
     обе шторки сходятся в ноль на x = 920           → 50 %
     1:789  left 920, w 967, зеркальный, непрозрачный от 5.334 % → x = 1835.4 → 99.75 % */
.brands__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--color-navy) 0.375%,
    var(--brands-veil-out) 50%,
    var(--color-navy) 99.75%
  );
}

/* --- Заголовок (нода 1:796, 1111×116, по центру) -------------------------- */

.brands__head {
  position: relative;
  z-index: 2;                        /* заголовок в макете поверх шторок */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);              /* нода 1:796 */
  min-height: 116px;
  max-width: 1111px;
  margin-inline: auto;
  text-align: center;
}

.brands__title { color: var(--color-text-invert); }

/* --- Лента логотипов (нода 1:752) ---------------------------------------- */

/* Листание — scroll-snap, без JS-библиотеки: в макете у карусели нет
   ни анимации, ни стрелок, только точки. Обработчик точек — initBrands
   в main.js, ему нужны data-brands-viewport и data-brands-dot. */
.brands__slider { margin-top: 59px; }

.brands__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.brands__viewport::-webkit-scrollbar { display: none; }

/* Страница — ровно экран макета: 6 плашек × 2 ряда, зазор 20 (нода 1:753).
   6 × 290 + 5 × 20 = 1840, поэтому у панели нет боковых полей. */
.brands__page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 127px;             /* нода 1:754 */
  gap: 20px;
}

/* Плашка 1:754: 290×127, радиус 24, поля 24. Поля заданы только по
   горизонтали — в макете картинка шире вертикальных полей (у wilo 1:761
   высота 105 при 79 свободных) и выходит за них, обрезаясь по плашке. */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
}

.brand-logo a {
  display: block;
  width: 100%;
}

/* Картинка 1:755 и соседние: ширина ровно 242 (290 − 24 × 2),
   высота — по пропорции логотипа, по центру плашки. */
.brand-logo img {
  width: 100%;
  height: auto;
}

/* --- Точки (нода 1:790) --------------------------------------------------- */

.brands__dots {
  position: relative;
  z-index: 2;                        /* точки в макете поверх шторок */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14.33px;                      /* нода 1:790 */
  width: max-content;
  margin: 40px auto 0;
  padding: 14.33px 21.5px;
  border-radius: var(--radius-pill);
  /* Плашка 1:791 собрана из двух слоёв: заливка rgba(191,191,191,.44)
     и поверх неё #0D0D0D в режиме color-dodge (даёт +5.4 % яркости).
     В браузере так не повторить: backdrop-filter изолирует элемент, и
     mix-blend-mode внутри смешивается с чёрным, а не с панелью — плашка
     выходит серой. Поэтому оба слоя сведены в одну заливку: над центром
     панели (#4867BF) она даёт тот же #8292C4, что и макет. */
  background: var(--brands-dots-bg);
  backdrop-filter: blur(17.9px);     /* 35.833 по шкале Figma = вдвое меньше в CSS */
}

.brands__dot {
  width: 14.33px;
  height: 14.33px;
  border-radius: var(--radius-pill);
  background: var(--brands-dot-off); /* ноды 1:793…1:795 */
  transition: background var(--dur-fast) var(--ease-out);
}

.brands__dot.is-active { background: var(--color-bg); }  /* нода 1:792 */

/* --- Адаптив --------------------------------------------------------------
   Макет нарисован только под 1920. Ниже — принято вёрсткой: плашки
   и зазоры остаются макетными, меняется только число колонок. */

@media (max-width: 1500px) {
  .brands__panel {
    min-height: 0;
    padding-block: var(--space-48);
  }

  .brands__head {
    min-height: 0;
    gap: var(--space-16);
  }

  .brands__slider { margin-top: var(--space-48); }
  .brands__page { grid-template-columns: repeat(4, 1fr); }
  .brands__dots { margin-top: var(--space-32); }
}

@media (max-width: 900px) {
  /* «производителями» в 48 px не влезает в узкую панель и обрезается
     переполнением — уменьшаем заголовок, как в других секциях. */
  .brands__title { font-size: var(--fs-40); }

  .brands__page {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 96px;
    gap: var(--space-16);
  }

  .brand-logo { padding-inline: var(--space-16); }
}

@media (max-width: 600px) {
  .brands__title { font-size: var(--fs-32); }

  .brands__page {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 80px;
  }
}

/* --- Телефон: панель логотипов компактнее ----------------------------------
   Две колонки по 80 растягивали страницу из 12 логотипов на 560 px — панель
   выходила выше экрана. Три колонки по 64 дают те же 12 логотипов в четыре
   ряда: панель вдвое короче, плашки перестают выглядеть раздутыми. */
@media (max-width: 600px) {
  .brands__panel { padding-block: var(--space-32); }
  .brands__head { gap: var(--space-8); }
  .brands__slider { margin-top: var(--space-24); }

  .brands__page {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 64px;
    gap: var(--space-8);
  }

  .brand-logo {
    padding-inline: var(--space-12);
    border-radius: var(--radius-md);
  }

  .brands__dots {
    margin-top: var(--space-24);
    gap: 10px;
    padding: 10px 16px;
  }

  .brands__dot { width: 10px; height: 10px; }
}

/* --- Телефон: панель во весь экран (см. пояснение в front-hero.css) -------- */
@media (max-width: 700px) {
  .brands__panel {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
    padding-inline: var(--side-padding);
  }
}