/* ==========================================================================
   5 блок — «Единственный спешелти вендинг в РФ» — node 743:2903, y 10979–12687
   Блок-коллаж: куски текста и два кадра стоят по макету свободно и по вертикали
   перекрывают друг друга (абзац справа приходится на середину заголовка).
   Поэтому горизонталь по-прежнему набирается колонками .row g-0, а вертикаль
   задаётся явно: каждый «слой» — .specialty__at с --t (отступ от верха секции
   по макету). Высота секции фиксированная, как в макете.
   ========================================================================== */

.specialty {
  position: relative;
  height: 106.75rem;      /* 1708px — от первой строки заголовка до линий 6 блока */
  margin-top: 19.375rem;  /* 310px от низа линий 4 блока */
  padding-block: 0;
}

/* слой, поставленный по вертикали из макета */
.specialty__at {
  position: absolute;
  inset-inline: 0;
  top: var(--t);
}

/* кадр, поставленный и по горизонтали (проценты от 12 колонок) */
.specialty__float {
  position: absolute;
  top: var(--t);
  left: var(--x);
  width: var(--w);
  margin: 0;
  z-index: 1;
}

/* Заголовок кладём под кадры ЯВНО, а не полагаясь на порядок раскраски.
   Сам по себе он в потоке и потому ниже абсолютных .specialty__float, но во
   время проявления main.js вешает на него filter: blur(), а элемент с фильтром
   красится как позиционированный с z-index: 0 — и, будучи ниже кадров по DOM,
   на время скролла перекрывал ягоды. Своя пара z-index'ов держит порядок и с
   фильтром, и без него. */
.specialty__title {
  position: relative;
  z-index: 0;
}

.specialty__float img,
.specialty__float video {
  width: 100%;
  object-fit: cover;
}

.specialty__berries img { aspect-ratio: 219 / 231; }

.specialty__video img,
.specialty__video video { aspect-ratio: 281 / 468; }

.specialty__video figcaption {
  margin-top: 1.625rem; /* 26px под кадром */
  padding-left: var(--in-text);
}

/* --- Список «почему именно этот уровень» ---------------------------------- */
.specialty__list li + li { margin-top: 1.25rem; } /* шаг строк 40px */

.specialty__num { padding-right: var(--in-title); } /* цифра прижата к линии k=3 */

/* Подчёркивание и мишень наведения — на самом тексте, а не на колонке:
   .specialty__item это col-9, он шире надписи, и подсказка вылезала бы при
   наведении на пустое место справа от неё. */
.specialty__list a,
.specialty__link {
  text-decoration: underline;
  text-underline-offset: 0.375rem;
  text-decoration-thickness: 1px;
}

/* --- Подсказка у пункта списка --------------------------------------------
   Плашка нарисована стилями, а не картинкой. В assets/svg/tooltip-bg.svg та же
   форма собрана из ШЕСТИ перекрывающихся путей (крест + четыре угловых клина),
   и на стыках антиалиасинг оставляет светлые швы — те самые «прямоугольники»
   по углам. Здесь это один блок с эллиптическим скруглением: 28.24 по
   горизонтали и 18.84 по вертикали — ровно те радиусы, что заложены в кривых
   исходного svg, так что форма совпадает, а швам взяться неоткуда.

   Строка списка — .row, её ширина равна той же координатной сетке, что и у
   колонок, поэтому left: 50% попадает точно на середину сетки; +15px — общий
   для макета вынос текста от линии (--in-text).
   top: 0 равняет верх плашки по верху строки наведённого пункта. */
.specialty__list li { position: relative; }

.specialty__tip {
  position: absolute;
  top: 0;
  left: calc(50% + var(--in-text));
  z-index: 2;
  width: 27.375rem;      /* 438px */
  min-height: 9.5625rem; /* 153px из макета — это низ, а не потолок:
                            тексты у пунктов разной длины, и жёсткая высота
                            обрезала бы длинные. Плашка растёт вниз. */
  padding: 1.3125rem 1.125rem; /* 21px / 18px */
  border-radius: 1.765rem / 1.1775rem; /* 28.24 / 18.84 */
  background: var(--c-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* плашка висит над соседними пунктами и не должна их перехватывать */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.specialty__link:hover ~ .specialty__tip {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

/* --- Мобильный макет (952:664…952:680, y 7767…9199) -----------------------
   Блок остаётся коллажем, как на десктопе: слои стоят абсолютно, только
   координаты свои — --tm/--xm/--wm рядом с десктопными --t/--x/--w в разметке
   (inline-стиль медиазапросом не перебить, поэтому вторая тройка, а не
   переопределение первой).

   ВАЖНО про отсчёт: .specialty__at и .specialty__float абсолютные, то есть
   считаются от ПОЛЯ секции, а не от контента. Поэтому здесь --mx — абсолютная
   координата макета БЕЗ вычитания --container-pad (в 3 и 4 блоках наоборот).
   Ради этого же заголовок на мобилке тоже становится слоем.

   Вертикаль по макету (от первой строки заголовка 7767):
       0…216      заголовок, 3 строки 100/72
       247…478    ягоды 218×231
       506…566    «спешелти кофе означает…»
       581…656    «в таком продукте…»
       694…802    «5-7 %» кеглем 150
       831…891    «это высший грейд…»
       938…1169   видео 219×231, подпись слева от него
       1217…1247  «почему для вашей компании…»
       1277…1412  нумерованный список
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Наведения на тач-экране нет, поэтому подсказка раскрывается по нажатию —
     как ответ в аккордеоне 10 блока, но без «плюса»: в макете его нет.
     Плашки тоже нет: на 438px она бы заняла весь экран, поэтому текст просто
     выезжает под строкой обычным моно. Высоту анимируем от 0 до замеренной
     (её ставит js/main.js) — так переход честный при любой длине текста. */
  .specialty__tip {
    display: block;
    position: static;
    width: auto;
    min-height: 0;
    height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    font-size: var(--fs-caption);
    transition: height 0.35s ease;
  }

  /* Отступ от строки пункта — внутри раскрывающейся коробки, иначе он
     остался бы висеть и в закрытом состоянии. */
  .specialty__tip::before { content: ''; display: block; height: 0.9375rem; }

  .specialty__link { cursor: pointer; }

  /* Раскрытый пункт делает секцию выше на свою высоту: коллаж стоит на
     фиксированной высоте, и без этого текст залез бы на 6 блок.

     Тем же переходом, что и сам текст: иначе 6 блок прыгал бы вниз мгновенно,
     пока текст ещё только выезжает. */
  .specialty {
    height: calc(89.5rem + var(--open, 0px));  /* 1432px: 7767…9199 */
    margin-top: 16.5rem;    /* 264px от низа линий 4 блока (7503) */
    transition: height 0.35s ease;
  }

  .specialty__at,
  .specialty__title {
    position: absolute;
    inset-inline: 0;
    top: var(--tm, var(--t, 0));
    margin-top: 0;
  }

  .specialty__title { top: 0; }

  /* Кадр видео на мобилке почти квадратный (219×231), на десктопе вытянутый
     (281×468) — пропорцию задаём заново, иначе фигура вырастает в полтора раза
     и утаскивает за собой подпись. */
  .specialty__video img,
  .specialty__video video { aspect-ratio: 219 / 231; }

  .specialty__float {
    top: var(--tm, var(--t));
    left: var(--xm, var(--x));
    width: var(--wm, var(--w));
    margin-top: 0;
  }

  /* --- Заголовок: три строки 100/72 на свободных координатах --- */
  .specialty__title > span {
    display: block;
    position: relative;
    height: 4.5rem;         /* 72px */
    margin-inline: 0;
  }

  /* У третьей строки в макете трекинг −0.03em против −0.02em у первых двух:
     дрейф ровно по пикселю на литеру, а ширина ноды (368) сходится только
     с этим значением. Похоже на ручную доводку дизайнером. */
  .specialty__title > span:nth-child(3) > span { letter-spacing: -0.03em; }

  .specialty__title > span > span {
    position: absolute;
    top: 0;
    left: var(--mx, 0);
    width: auto;
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
  }

  /* --- Абзацы слоёв --- */
  .specialty__at > p {
    position: absolute;
    top: 0;
    left: var(--mx, 0);
    /* без --mw коробка сжимается по тексту: у «5-7 %» ширина не задана, и
       100% растягивало бы её на весь слой, раздувая scrollWidth страницы */
    width: var(--mw, auto);
    white-space: nowrap;
    max-width: none;
    margin-left: 0;
    padding-left: 0 !important;   /* у «почему…» отступ стоит inline */
  }

  /* абзацы с заданной шириной переносятся как обычно */
  .specialty__at > p[style*="--mw"] { white-space: normal; }

  /* Переносы в макете почти везде получаются шириной абзаца; .br-m —
     те немногие, что расставлены руками. */
  .specialty__at > p br:not(.br-m),
  .specialty__video figcaption br { display: none; }

  /* «5-7 %» — единственный на мобилке кегль 150 в этом блоке */
  .t-display-2xl-m { font-size: var(--fs-display-2xl); }

  /* --- Подпись к видео ---
     В макете она НЕ под кадром, а слева от него, на уровне нижней трети. */
  .specialty__video figcaption {
    position: absolute;
    top: 11.8125rem;      /* 189px от верха кадра */
    left: -9.8125rem;     /* 157px левее кадра: x=29 против x=186 */
    width: 9.75rem;       /* 156px */
    margin-top: 0;
    padding-left: 0;
  }

  /* --- Список «почему именно этот уровень» --- */
  .specialty__list li + li { margin-top: 0.9375rem; }  /* 15px */

  /* В макете подчёркивание прижато к тексту: линия на 2px ниже базовой при
     толщине 1. Десктопные 6px тут налезали бы на следующую строку — шаг
     строк всего 15. */
  .specialty__list a,
  .specialty__link { text-underline-offset: 0.125rem; }

  .specialty__list li > .specialty__num {
    position: absolute;
    top: 0;
    left: 9.25rem;        /* 148px */
    width: auto;
    padding: 0;
  }

  .specialty__list li > .specialty__item {
    display: block;
    width: 16.5rem;       /* 264px */
    margin-left: 11.5625rem;  /* 185px */
    padding-left: 0;
  }
}