/* «Рифмы и Музыка» — единственный партнёр без логотипа: на фестивальном
   сайте это надпись в Unbounded 600 с letter-spacing .04em в одну строку.
   Воспроизводим её как есть — это чужой знак, а не наш UI-текст, поэтому
   набирать его нашей гарнитурой было неправильно.
   Файл подрезан до букв надписи: 403 КБ TTF -> 2.7 КБ woff2, тащить полную
   гарнитуру ради одной строки незачем. */
@font-face{
  font-family:'Unbounded';
  src:url('../fonts/unbounded-600-subset.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   БЛОК «МЫ УСПЕШНО СОТРУДНИЧАЛИ С» — логотипы партнёров.

   ── ОТКУДА ЛОГОТИПЫ ──
   Собраны с двух наших фестивальных сайтов: divo-fest.earlybird.su
   (секция «Партнёры в 2026») и earlybird.su/dream-fest-2026 (секция
   «Партнёры» / «Информационные партнёры»). Сам early bird из списка убран —
   это мы, а не партнёр. «Рифмы и Музыка» на фестивальном сайте тоже стоит
   текстом, без логотипа, поэтому и здесь текстовая плашка.

   ── ПОЧЕМУ БЕЛЫЕ ПЛАШКИ, А НЕ МОНОХРОМ ──
   Обычный приём для тёмного сайта — выбелить логотипы через
   filter:brightness(0) invert(1). Здесь он не годится: фильтр красит в белый
   всю непрозрачную площадь, то есть превращает логотип в силуэт по альфе.
   У «Детского радио», Fresh Bar и ДV Продакшен знак свёрстан как светлая
   надпись внутри цветной подложки — от силуэта осталась бы белая клякса без
   надписи. Плашка гарантирует читаемость всех двенадцати независимо от того,
   как устроен каждый знак.

   Приём не выдуман: на divo-fest.earlybird.su партнёры выложены точно так же
   (белая плашка, радиус, подъём на hover), так что блок остаётся в языке
   наших же проектов.

   ── РАЗМЕРЫ ЗНАКОВ ──
   Аспекты у логотипов разлетаются от 0.76 (Fresh Bar, вертикальный) до 9.1
   (Яндекс Музыка, узкая полоса). При общем ограничении по высоте вертикальные
   и квадратные знаки визуально проваливаются рядом с широкими, поэтому им
   отдаём больше высоты — классы --square и --tall.

   Отступы кратны 4.
   ============================================================ */

/* ── ДЕСКТОП ─────────────────────────────────────────────── */
/*
   ── ПОЧЕМУ ВСЁ В vw, А НЕ В ПИКСЕЛЯХ ──
   Остальные блоки страницы — тильдовские артборды: внутри они свёрстаны в
   сетке 1200, а наружу растягиваются на всю ширину окна через zoom = ширина
   окна / 1200. При окне 1440 это 1.1875, и заголовок, у которого в сетке
   36px, на экране становится 43px.

   Первый вариант блока был в фиксированных пикселях и в контейнере 1200 по
   центру. Из-за этого он оказался и мельче, и уже всей остальной страницы —
   ровно то ощущение чужого блока. Здесь все размеры заданы в ЕДИНИЦАХ
   активной сетки через --u (см. блок ниже), поэтому на любом окне и на любом
   брейкпоинте блок идёт ровно в том же масштабе, что соседние артборды.

   ── ТИПОГРАФИКА ──
   Снята с заголовка соседнего блока «Для каких артистов мы работаем»:
   TexGyreHeros, вес 500, 36px в сетке, интерлиньяж 1.5. Вес 500 в этом
   семействе подменён на ONDER — на сайте это штатный способ получить
   дисплейное начертание, поэтому пишем как все, а не через 'Onder'.
   Заглавные даёт сам шрифт, text-transform не нужен.

   Градиент тоже родной, из того же заголовка: белый -> персиковый ->
   оранжевый -> почти чёрный к концу строки. Сначала я поставил синий из
   мобильных заголовков — рядом с оранжевыми соседями он выбивался.
*/

/* ── ЕДИНИЦА СЕТКИ ──
   Тильда не сжимает десктоп на планшетах, а ПЕРЕКЛЮЧАЕТ сетку: >1199 она
   1200, 960-1199 — 960, 640-959 — 640, и каждую растягивает на всю ширину
   окна через zoom. Замер: при окне 768 zoom 1.177 от сетки 640, заголовки
   там 42px — то есть не мельче десктопных.

   Мой блок был жёстко привязан к 1200 и потому на планшете выходил вдвое
   мельче соседей (23px против 42px при 768). Лечится одной переменной:
   --u — это одна единица активной сетки в пикселях. Все размеры ниже
   выражены в единицах, поэтому блок автоматически идёт в масштабе того
   брейкпоинта, который включила тильда.

   Ниже 640 тильдовский десктоп скрывается целиком (#allrecords{display:none}),
   там работает отдельная секция для мобилки. */
/* ── ОДНА НЕПРЕРЫВНАЯ ЕДИНИЦА ──
   Переключение сеток 1200/960/640 было нужно, пока ниже 1200 работала тильда
   со своими брейкпоинтами. Теперь там рукописная вёрстка, и переключение
   стало рудиментом: на границах брейкпоинтов блок скакал в масштабе.

   Осталась одна формула. Выше 1200 единица растёт как у тильды (окно/1200),
   поэтому блок по-прежнему идёт в масштабе соседних артбордов: при 1440 это
   1.2px и заголовок 43px. Ниже единица уменьшается вместе с окном, но не
   ниже 0.62px — иначе на телефоне заголовок ушёл бы в 12px, а плашки в 78px.

   Порог 0.62 подобран так, чтобы совпасть с остальной рукописной вёрсткой:
   даёт заголовок 22px, ровно как у мобильных заголовков секций (21px), и
   птичку 55x66 — почти в точности тот размер, что был подобран вручную
   (56x67). На 768 единица 0.64 даёт заголовок 23px — столько же, сколько
   `clamp(21px,3vw,36px)` у заголовков остальных секций. */
#ebPartners{ --u:max(0.62px, 100vw / 1200); }

#ebPartners{
  background:#000;
  padding:calc(96*var(--u)) 0 calc(100*var(--u));
}
#ebPartners .ebp-wrap{
  padding:0 calc(40*var(--u));   /* 40 в сетке 1200 */
}
/* ── ЗАГОЛОВОК + ПТИЧКА ──
   Как в блоке «для каких артистов мы работаем»: знак стоит справа от текста.
   Рецептура знака взята оттуда же дословно — фон mark-glass.svg,
   background-size:62% auto и позиция 50% 30% в боксе 88x106 сетки. Числа
   выглядят произвольными, но они не мои: в старом растре вокруг знака были
   поля под запечённое свечение, и 62% воспроизводят тот же видимый размер.
   Так знак выходит ровно таким же, как у соседа, а не «примерно похожим».
   Кольцо рисовать не нужно — оно часть самого знака.

   Свечение тоже одно и то же (4/11/24px), задано в пикселях: в единицах
   картинки оно масштабировалось бы вместе со знаком и на мелком размере
   уходило бы в доли пикселя. */
#ebPartners .ebp-head{
  display:flex;
  align-items:center;
  gap:calc(32*var(--u));
  margin:0 0 calc(44*var(--u));
}
#ebPartners .ebp-owl{
  flex:0 0 auto;
  width:calc(88*var(--u));
  height:calc(106*var(--u));
  background-image:url('../img/brand/mark-glass.svg');
  background-size:62% auto;
  background-position:50% 30%;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 4px  rgba(255,255,255,.55))
         drop-shadow(0 0 11px rgba(255,255,255,.4))
         drop-shadow(0 0 24px rgba(255,255,255,.22));
}
/* width:fit-content, чтобы бокс заголовка сжался по тексту и птичка встала
   рядом со строкой, а не улетела к правому краю. Работает это только с
   принудительным <br> в разметке: при автопереносе fit-content схлопнулся бы
   в max-content, то есть в одну очень длинную строку. */
#ebPartners .ebp-title{
  margin:0;
  width:fit-content;
  font-family:'TexGyreHeros',Arial,sans-serif;
  font-weight:500;
  /* Размер ограничен не только сеткой, но и ШИРИНОЙ. Замер: строка
     «сотрудничали с:» в этом начертании требует 2535px на каждые 100px
     кегля, то есть при 22px ей нужно 558px — на телефоне доступно 340.
     Старая мобильная версия этого заголовка вылезала за экран по той же
     причине, я просто не мерил её раньше.
     3.4vw подобрано по факту: при 390 это 13.3px и строка занимает 337 из
     360 доступных; выше ограничение перестаёт работать и размер задаёт
     сетка (при 768 это 23px, при 1440 — 43px). */
  font-size:min(calc(36*var(--u)), 3.4vw);
  line-height:1.5;
  letter-spacing:normal;
  background:linear-gradient(91.8deg,#ffffff 0%,#FECFAD 29%,#FD9B60 50%,
             #FD7932 65%,#DC3821 76%,#03070B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Сетка ровно 4 колонки: плашки одной ширины выстраиваются в аккуратный
   блок, а не в «пирамидку» из flex-wrap с разной шириной.
   17.09.2026: знаков стало 10 (ушли Sensia и ДV Продакшен), ряд 4x3
   больше не закрывается. У grid хвост из двух плашек прижимался влево
   и читался дырой справа, поэтому здесь flex с ЖЁСТКОЙ базой: ширина
   ячейки та же, что была у колонок (пирамидка была от автоширины, а не
   от flex), а неполный ряд встаёт по центру. */
#ebPartners .ebp-grid{
  --gap:calc(16*var(--u));
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
}
#ebPartners .ebp-grid > .ebp-item{ flex:0 0 calc((100% - 3*var(--gap))/4); }

#ebPartners .ebp-item{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:calc(96*var(--u));
  padding:0 calc(16*var(--u));
  text-decoration:none;
  transition:transform .2s ease, opacity .2s ease;
}
#ebPartners .ebp-item:hover,
#ebPartners a.ebp-item:focus-visible{
  transform:translateY(-3px);
  opacity:.75;
}
#ebPartners a.ebp-item:focus-visible{
  outline:2px solid #FD7932;
  outline-offset:3px;
}
/* ── ВЫБЕЛИВАНИЕ ──
   brightness(0) красит всё непрозрачное в чёрный, invert(1) — в белый, то
   есть на выходе силуэт по альфе. Проверил все на чёрном:
   читаются, включая «Жару» (в цвете на белом от неё оставалось одно «FM»)
   и «Афишу» (её многоцветная стрелка становится одной белой фигурой, но
   форма узнаётся).

   Исключение — знаки со своей подложкой: у них непрозрачен весь кадр
   (замер: заполнение 100%), и силуэт превратил бы их в белый прямоугольник.
   «Детское радио» нарисовано на белом, «Петербург2» на красном — они
   несут фон в себе и остаются в цвете. (До 17.09.2026 третьим был
   «ДV Продакшен» на фиолетовом — убран из списка вместе с Sensia.) */
#ebPartners .ebp-item img{
  filter:brightness(0) invert(1);
  display:block;
  /* Высота ЗАДАНА, а не ограничена. max-height только уменьшает: у
     press-afisha-kp.svg в файле прописаны 154x35, и знак оставался
     крошечным, пока остальные упирались в ограничение. С фиксированной
     высотой стена выравнивается оптически по высоте знака.

     А вот height вместе с max-width давали БРАК: max-width обрезал ширину,
     не пересчитывая высоту, и широкие словомарки сплющивались по горизонтали.
     Яндекс Музыка при родном соотношении 9.1:1 рендерилась как 5.3:1 —
     звёздочка в знаке превращалась в кружок. Правильный инструмент —
     object-fit:contain: знак впиcывается в бокс с сохранением пропорций и
     при необходимости увеличивается, чего max-height не умеет вовсе. */
  width:100%;
  /* Высота задаётся по месту через --h: выравнивание по одной высоте делает
     вытянутые словомарки визуально втрое тяжелее компактных знаков.
     Значения посчитаны как K/аспект^0.35 по чернилам знака — подробности в
     scratchpad/rebuild_partners.py. */
  height:calc(var(--h,38)*var(--u));
  object-fit:contain;
  object-position:center;
}
/* Квадратным и вертикальным знакам отдаём больше высоты: при общем
   ограничении они визуально проваливаются рядом с широкими словомарками. */
/* --own — знак со своей подложкой, остаётся в цвете.
   --ready — ассет уже подготовлен белым, фильтр ему не нужен: у Яндекс Музыки
   в исходнике под звёздочкой лежит ЧЁРНЫЙ КРУГ, и силуэт по альфе слепил круг
   со звездой в белую точку. Белая версия собрана отдельно
   (img/partners/yandex-music-white.png): в полосе звезды альфа пересчитана по
   «жёлтости» пикселя, поэтому круг ушёл, а звезда осталась с плавным краем. */
#ebPartners .ebp-item--own img,
#ebPartners .ebp-item--ready img{ filter:none; }

/* ── БЕЛАЯ ПЛАШКА ──
   «Детское радио» нарисовано на белом фоне: без плашки оно повисло бы в
   стене белым прямоугольником с обрубленными краями. Плашка обнимает знак с
   запасом и скруглена тем же радиусом, что карточки на сайте. width по
   контенту, поэтому она не растягивается на всю ячейку. */
#ebPartners .ebp-item--plate{
  /* 17.09.2026: ряд стал flex-ом, а у flex-элемента жёсткий flex-basis бьёт
     width:fit-content — плашка растягивалась на всю ячейку белой полосой.
     Поэтому белый фон, поля и скругление теперь на самой картинке, а ячейка
     остаётся обычной колонкой и центрует её своим justify-content. */
  /* height:auto вместо унаследованных 96 единиц: плашка должна обнимать знак,
     а не занимать всю высоту ряда. С полной высотой вокруг логотипа
     оставалось по 27px белого сверху и снизу, и плашка читалась как большой
     белый прямоугольник. Ряд по-прежнему задают остальные ячейки, а плашка
     центруется в нём через align-self. */
  height:auto;
  align-self:center;
}
/* Поля маленькие намеренно: сам знак «Детского радио» уже нарисован на
   белом, поэтому плашке нужно лишь скруглить углы и добавить немного
   воздуха, а не подкладывать вторую подложку. */
#ebPartners .ebp-item--plate img{
  width:auto;
  box-sizing:content-box;
  padding:calc(6*var(--u)) calc(10*var(--u));
  background:#fff;
  border-radius:calc(12*var(--u));
}

/* Текстовая плашка — «Рифмы и Музыка», у неё и на фестивальном сайте
   логотипа нет. Набрана тем же дисплейным начертанием, что заголовки. */
#ebPartners .ebp-text{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:600;
  font-size:calc(16.2*var(--u));   /* на фестивальном сайте clamp(12,1.6vw,19) */
  line-height:1.2;
  letter-spacing:.04em;
  white-space:nowrap;
  color:#ffffff;
}

@media (prefers-reduced-motion: reduce){
  #ebPartners .ebp-item{ transition:none; }
  #ebPartners .ebp-item:hover{ transform:none; }
}

/* Колонок меньше по мере сужения. Масштаб при этом трогать не надо — его
   держит --u; меняется только количество ячеек в ряду, потому что четыре
   плашки на 768 дают ячейку 153px, куда широкая словомарка не влезает
   по-человечески. Правила стоят после базовых, иначе проиграют по порядку. */
@media (max-width:959px){
  #ebPartners .ebp-grid > .ebp-item{ flex-basis:calc((100% - 2*var(--gap))/3); }
}
@media (max-width:760px){
  #ebPartners .ebp-grid > .ebp-item{ flex-basis:calc((100% - var(--gap))/2); }
  /* поля уже: на узком экране каждый пиксель ширины нужен заголовку */
  #ebPartners .ebp-wrap{ padding:0 calc(24*var(--u)); }
  /* fit-content больше не нужен — птичка уходит под заголовок, а строка
     должна иметь право перенестись, если не влезла */
  #ebPartners .ebp-title{ width:auto; }
  /* птичка под заголовком: рядом с ним на узком экране места уже нет */
  #ebPartners .ebp-head{ flex-direction:column; align-items:flex-start;
                         gap:calc(20*var(--u)); }
}

/* ── МОБИЛКА ─────────────────────────────────────────────── */
/* Мобильная вёрстка на сайте своя, рукописная (#ebMobile, классы .ebm-*),
   поэтому блок дублируется отдельной секцией в её языке. */

#ebMobile .ebm-partners{
  padding:56px 20px 52px;
  text-align:center;
}
/* 21px — размер заголовка мобильной «Афиши», то есть штатный размер
   заголовка секции в этой вёрстке. Градиент тот же оранжевый, что на
   десктопе, чтобы блок читался одним и тем же на обеих версиях. */
/* На мобилке заголовок центрован в две строки, поэтому знак ставим НАД ним,
   а не сбоку — иначе центровка рассыпается. Размер 56px: столько же, сколько
   видимая часть знака занимает в оверлее «Ближайшее». */
#ebMobile .ebm-partners-owl{
  display:block;
  width:56px;
  height:67px;
  margin:0 auto 14px;
  background-image:url('../img/brand/mark-glass.svg');
  background-size:62% auto;
  background-position:50% 30%;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 3px  rgba(255,255,255,.5))
         drop-shadow(0 0 8px  rgba(255,255,255,.35))
         drop-shadow(0 0 16px rgba(255,255,255,.2));
}
#ebMobile .ebm-partners-title{
  font-size:21px;
  line-height:1.35;
  margin:0 0 26px;
  background:linear-gradient(91.8deg,#ffffff 0%,#FECFAD 29%,#FD9B60 50%,
             #FD7932 65%,#DC3821 76%,#03070B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
#ebMobile .ebm-partners-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
#ebMobile .ebm-partners-grid > *{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:76px;
  padding:0 10px;
  text-decoration:none;
}
#ebMobile .ebm-partners-grid img{
  filter:brightness(0) invert(1);
  display:block;
  width:100%;
  height:var(--hm,30px);
  object-fit:contain;
  object-position:center;
}
/* Словомарки с аспектом 8-9 в колонке 161px давали высоту 15-16px и
   пропадали. На мобилке отдаём им обе колонки: ширина ~307 вместо 133,
   значит и высота втрое больше. На десктопе им ничего не нужно — там
   плашка и так растёт под знак. */
#ebMobile .ebm-partners-grid .ebp-item--wide{ grid-column:span 2; }
#ebMobile .ebm-partners-grid .ebp-item--own img,
#ebMobile .ebm-partners-grid .ebp-item--ready img{ filter:none; }
#ebMobile .ebm-partners-grid .ebp-item--plate{
  padding:8px 14px;
  background:#fff;
  border-radius:12px;
}
#ebMobile .ebm-partners-grid .ebp-item--plate img{ width:auto; }
#ebMobile .ebm-partners-grid .ebp-text{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:600;
  color:#ffffff;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.04em;
  white-space:nowrap;
}