/*  Хаб-страница «Хранение» — views/layouts/hranenie_hub.php.

    Здесь три независимые части:
      .hh-*   hero-баннер (blocks/_hranenie_hero.php), сделан по образцу
              страницы «Буряков Экспресс», как просили в ТЗ;
      .hi-*   новый блок по макету Figma 17kUJfl4QCrs2TqfqUViRb, узел 1:14
              (blocks/_hranenie_intro.php);
      прочее  типографика текста из админки и точки слайдеров, которые на
              этом сайте живут не в site.css, а в инлайне офисного переезда.

    Все классы с приставками .hh- и .hi-, чтобы стили страницы не
    пересекались с общими именами сайта (.text-block, .content и т. п.).

    Сборка:  node_modules/.bin/lessc public_html/css/hranenie-hub.less \
                                     public_html/css/hranenie-hub.css
*/
/* ─── Цвета макета ──────────────────────────────────────────── */
/*  Hero сделан теми же красками, что баннер Экспресса
    (public_html/css/express_v2.css:22-33). */
/* ─── Шрифты ────────────────────────────────────────────────── */
/*  Страница подключает pereezd_hub.css, где Roboto используется, но нигде
    не объявлен, а из Google приходит только Montserrat. Без блока ниже
    весь текст молча рисовался бы Arial'ом. Файлы уже лежат в проекте. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ════════════════════════════════════════════════════════════
   HERO-БАННЕР (по образцу страницы «Буряков Экспресс»)
   ════════════════════════════════════════════════════════════ */
/*  Размеры и приёмы взяты из public_html/css/express_v2.css:19-137 —
    в ТЗ прямо сказано делать «по примеру Экспресса».
    padding-top: 240 = 204 прилипшая шапка + 36 воздуха. */
.hh-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 620px;
  padding-top: 240px;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(251.24deg, #2F9D36 8.886%, #145D3A 95.245%);
}
/*  Фото стеллажа прижато к низу правой половины. Высота 415 px, а не
    полные 525: верх снимка иначе уезжал бы под прилипшую шапку и стеллаж
    выглядел бы обрезанным посередине коробки. object-fit: cover с якорем
    по низу подрезает именно верх — нижние паллеты остаются целыми.
    Увеличивать снимок не даём: он вырезан ровно под этот размер. */
.hh-hero__photo {
  position: absolute;
  right: calc(50% - 540px);
  bottom: 0;
  z-index: 1;
  width: 350px;
  height: 415px;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}
/*  В диапазоне 992-1199 прилипшая шапка на 30 px выше: верхняя полоса не
    помещается в одну строку. Отступ 240 px рассчитан на шапку 204,93 —
    при шапке 234,93 до плашки-надзаголовка оставалось бы 5 px вместо 35,
    и заголовок почти упирался бы в меню. Тот же перепад высоты шапки, что
    и в задаче про меню на ноутбуках. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hh-hero {
    padding-top: 270px;
  }
}
.hh-hero__glow {
  position: absolute;
  right: -60px;
  top: 40px;
  z-index: 0;
  width: 560px;
  height: 460px;
  opacity: 0.18;
  mix-blend-mode: color-dodge;
  pointer-events: none;
}
.hh-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 45px;
}
.hh-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  padding: 8px 10px;
  border: 1px solid #94c121;
  border-radius: 4px;
  background: rgba(148, 193, 33, 0.5);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.hh-hero__title {
  margin: 0 0 15px;
  padding: 0;
}
/*  site.css красит .wrap h1 в зелёный по центру капсом и вешает под ним
    декоративную черту — перебиваем, иначе заголовок баннера уедет.
    Тот же приём, что в express_v2.css:75-91. */
.hh-hero__title-line1,
.hranenie-hub-page .wrap h1.hh-hero__title-line1 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  text-transform: none !important;
  color: #fff !important;
}
.hranenie-hub-page .wrap h1.hh-hero__title-line1::after {
  display: none !important;
}
.hh-hero__title-line2 {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.hh-hero__list {
  margin: 0 0 19px;
  padding-left: 21px;
  list-style: disc;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.hh-hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 27px;
}
/* ════════════════════════════════════════════════════════════
   БЛОК «Возьмём на хранение» (Figma 1:14)
   ════════════════════════════════════════════════════════════ */
/*  Макет: колонка с шагом 24 px, поля 24 px по вертикали и 10 px
    по горизонтали. Кадр 1136, содержимое 1116. */
.hi-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 24px 10px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #333333;
  background: #fff;
}
/*  Страховка на случай, если блок когда-нибудь поставят внутрь .content:
    site.css держит там правило «.wrap .content p { height: 100% }», которое
    перебивает высоту у любого абзаца. Сейчас на этой странице обёртки
    .content нет, но блок задуман переносимым. */
.wrap .content .hi-block p {
  height: auto;
}
/* ─── Надзаголовок в рамке (1:15) ───────────────────────────── */
/*  Рамка в макете рисуется внутрь, поэтому высота плашки ровно 30 px
    вместе с обводкой — отсюда box-sizing и height.
    Плашка сделана не абзацем, а div'ом намеренно: высота задана макетом. */
.hi-badge {
  align-self: flex-start;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin: 0;
  padding: 0 28px;
  border: 1px solid rgba(135, 195, 0, 0.5);
  border-radius: 28px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
  color: #87C300;
  white-space: nowrap;
}
/* ─── Заголовок в две строки (1:17) ─────────────────────────── */
/*  В макете это один текстовый слой с двумя кеглями, поэтому и в разметке
    один <h2>: лишний уровень заголовков в структуре страницы не нужен.
    Высота слоя в макете 88 px — она и раскладывается на 36 + 52. */
.hi-title {
  margin: 0;
  padding: 0;
  font-weight: 400;
  text-transform: none;
}
.hi-title::after {
  content: none;
}
.hi-title__lead {
  display: block;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}
.hi-title__main {
  display: block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  color: #2E5B35;
}
/* ─── Лид (1:18) ────────────────────────────────────────────── */
.hi-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(29, 29, 29, 0.6);
}
/* ─── Четыре карточки-ситуации (1:19) ───────────────────────── */
/*  Две колонки по 546 px с зазором 24: 546 + 24 + 546 = 1116. */
.hi-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}
.hi-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(50% - 12px);
  padding: 16px;
  border-radius: 8px;
}
/*  У четвёртой карточки (1:37) иконка и заголовок в макете стоят ближе —
    отбивка 10 px вместо 20. Отдельного класса ей не даём: карточки
    приходят одним циклом, а порядок задан макетом. */
.hi-card:nth-child(4) .hi-card__icon {
  margin-bottom: -10px;
}
.hi-card__icon {
  display: block;
  flex: none;
}
/*  В макете у заголовков карточек включён text-box-trim: рамка текста
    обрезана по высоте прописных, «воздух» строки в высоту не входит.
    Браузеры так не умеют — компенсируем полями в долях кегля:
    (междустрочный 1.3 − высота прописной 0.711) / 2 = 0.295em.
    Без этого каждая карточка была бы на 12 px выше макетной. */
.hi-card__title {
  margin: -0.295em 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #333333;
}
.hi-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
}
/* ─── «Как это работает» (1:43) ─────────────────────────────── */
.hi-how {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #333333;
}
/* ─── Четыре шага (1:44) ────────────────────────────────────── */
/*  В макете строка высотой 202 px, содержимое каждого шага прижато к низу,
    а номер — к верху. Поэтому высота задана шагу, а не текстам: если
    заголовок переносится на две строки, он растёт вверх, а низ остаётся
    на одной линии у всех четырёх. */
.hi-steps {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}
.hi-step {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 202px;
  padding-left: 8px;
}
/*  Номер шага тоже обрезан по прописным: в макете его рамка 28 px при
    кегле 40. (1.5 − 0.7) / 2 = 0.4em. */
.hi-step__num {
  flex: none;
  align-self: flex-start;
  margin: -0.4em 0;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}
.hi-step__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  padding: 0 8px 0 16px;
  border-left: 1px solid #D7D7D7;
}
.hi-step__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #0F502C;
}
.hi-step__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
}
/* ─── Зелёная плашка с ценой (1:65) ─────────────────────────── */
.hi-cta {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  min-height: 245px;
  padding: 28px 36px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #94C121 0%, #0F502C 100%);
}
.hi-cta__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.hi-cta__title {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.hi-cta__subtitle {
  margin: -0.295em 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}
/*  Плашка с перечнем документов (1:69). Отступы иконки посчитаны из макета:
    поле плашки 8, иконка стоит на 4 px правее края, текст начинается
    на 38-й точке — отсюда 4 слева и 9 справа. */
.hi-cta__note {
  box-sizing: border-box;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0.8;
  font-size: 14px;
  line-height: 1.5;
  color: #F5F7F8;
}
.hi-cta__note img {
  flex: none;
  margin: 0 9px 0 4px;
}
.hi-cta__note span {
  display: block;
}
.hi-btn {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 48px;
  background: #FFDD2D;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #333333;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.hi-btn:hover,
.hi-btn:focus {
  filter: brightness(0.95);
}
/*  Две одинаковые фотографии встык у правого края (1:81 и 1:82).
    В макете правая доходит до 1110 при ширине плашки 1116 — отсюда 6 px
    от края; левая ровно на её ширину левее. По высоте фото выше плашки
    и подрезаются её overflow — так в макете. */
.hi-cta__photo {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 175px;
  height: 262px;
  object-fit: cover;
  pointer-events: none;
}
.hi-cta__photo--near {
  right: 6px;
}
.hi-cta__photo--far {
  right: 181px;
}
/*  Световые пятна (1:75 и 1:78). Верхнее в макете повёрнуто на -90°
    и наложено в режиме color-dodge, нижнее — просто на 10 % прозрачности.
    Позиции пересчитаны в проценты от ширины плашки (1116 px). */
.hi-cta__decor {
  position: absolute;
  z-index: 0;
  width: 376.1px;
  height: 308.6px;
  pointer-events: none;
}
.hi-cta__decor--dodge {
  left: 74.01%;
  top: -39px;
  transform: rotate(-90deg);
  mix-blend-mode: color-dodge;
}
.hi-cta__decor--soft {
  left: 77.95%;
  top: 52px;
  opacity: 0.1;
}
/* ─── Строка про юрлиц (1:83) ───────────────────────────────── */
.hi-legal {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
}
.hi-legal img {
  flex: none;
}
/* ════════════════════════════════════════════════════════════
   Текст из админки («Содержание» и «SEO текст 1»)
   ════════════════════════════════════════════════════════════ */
/*  site.css задаёт .content_newstyle межстрочный 15 px при кегле 18 —
    в обычных абзацах строки слипаются. Поэтому текст из админки
    выводится не в этом классе, а в своём.

    Селектор нарочно длинный: у второго блока («SEO текст 1») к нашему
    классу добавлен общесайтовый .seo-text, а его правило в site.css
    весомее одиночного класса. Без утяжеления два одинаковых по смыслу
    блока набирались бы с разным межстрочным — 25,6 и 24. */
.hranenie-hub-page .wrap .hh-text {
  margin: 24px 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}
.hranenie-hub-page .wrap .hh-text p {
  margin: 0 0 12px;
}
.hranenie-hub-page .wrap .hh-text ul,
.hranenie-hub-page .wrap .hh-text ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.hranenie-hub-page .wrap .hh-text li {
  margin-bottom: 6px;
}
.hranenie-hub-page .wrap .hh-text h2,
.hranenie-hub-page .wrap .hh-text h3,
.hranenie-hub-page .wrap .hh-text h4 {
  margin: 24px 0 12px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: #333333;
  text-align: left;
  text-transform: none;
}
.hranenie-hub-page .wrap .hh-text h2::after,
.hranenie-hub-page .wrap .hh-text h3::after,
.hranenie-hub-page .wrap .hh-text h4::after {
  content: none;
}
.hranenie-hub-page .wrap .hh-text h2 {
  font-size: 28px;
}
.hranenie-hub-page .wrap .hh-text h3 {
  font-size: 22px;
}
.hranenie-hub-page .wrap .hh-text h4 {
  font-size: 18px;
}
.hranenie-hub-page .wrap .hh-text img {
  max-width: 100%;
  height: auto;
}
/* ════════════════════════════════════════════════════════════
   Точки слайдеров
   ════════════════════════════════════════════════════════════ */
/*  Общего правила .slick-dots в site.css нет: сайтовый вид точек живёт
    в инлайновых стилях страницы офисного переезда. Здесь они нужны сразу
    трём каруселям — кейсам, клиентам и отзывам, — иначе подтянулась бы
    вендорная тема Slick с чужими кружками. */
.hranenie-hub-page .slick-dots {
  bottom: -30px;
}
.hranenie-hub-page .slick-dots li {
  margin: 0 5px;
}
.hranenie-hub-page .slick-dots li button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid #235C33;
  border-radius: 50%;
  background-color: transparent;
}
.hranenie-hub-page .slick-dots li button:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%;
  opacity: 1;
}
.hranenie-hub-page .slick-dots li.slick-active button {
  background-color: #235C33;
  border: 1px solid #235C33;
}
/* ════════════════════════════════════════════════════════════
   Общие блоки сайта, которым на этой странице нужна правка
   ════════════════════════════════════════════════════════════ */
/*  Стрелка карусели «Наши клиенты» вынесена на 20 px правее своего блока
    (#clients-slider .slick-arrow.arr-right { right: -20px } —
    modules/clients/assets/css/clients.css:28). Пока экран шире 768 px,
    контейнер Bootstrap стоит с полями и стрелка в них помещается. Ниже
    768 контейнер занимает всю ширину минус 15 px поля — и стрелка
    вылезала за край экрана на 5 px, давая всей странице горизонтальную
    прокрутку (замер: scrollWidth 772 при ширине 767).

    На /pereezdy/ofisnyy-pereezd этого не видно только потому, что там всё
    лежит внутри .content с overflow: hidden. Этой обёрткой мы намеренно
    не пользуемся — site.css ломает в ней абзацы правилом
    «.wrap .content p { height: 100% }», — поэтому подрезаем сами.

    clip вместо hidden: он не делает из блока контейнер прокрутки и не
    превращает overflow-y в auto. Первая строка — запасной вариант для
    Safari младше 16, который clip ещё не понимает. */
.hranenie-hub-page .hh-main {
  overflow-x: hidden;
  overflow-x: clip;
}
/* ─── «Наши кейсы»: лента как на /pereezdy/kvartirnyy-pereezd ─── */
/*  Ниже 600 px Slick разбирает себя сам (responsive → unslick), и от
    карусели остаётся обычный ряд карточек. Ряд должен стать лентой с
    горизонтальной прокруткой — ровно так, как на странице-образце
    из ТЗ.

    Правила один в один из modules/cases/widgets/views/slidercases.php.
    Там они записаны через автогенерируемые id (#w10, #w11, #w2, #w4):
    на образце контейнер виджета случайно получил #w4 и в список попал,
    у нас он получает #w8 и не попал бы. Поэтому повторяем правила у
    себя и вешаем на свой класс — id при любой правке страницы поедут,
    класс останется.

    599.98, а не 600: Slick разбирает себя при ширине окна СТРОГО меньше
    600 (slick.js, checkResponsive: windowWidth < breakpoint). Поставь
    здесь ровно 600 — и на этой единственной ширине флексовые правила
    легли бы на живую карусель: точки-переключатели встали бы не под
    лентой, а сбоку от неё. В самом виджете граница написана как 600 и
    этим как раз грешит; у себя ставим правильную. */
@media (max-width: 599.98px) {
  .hranenie-hub-page .hh-cases > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: #235C33 #e6e6e6;
  }
  /*  Стрелки Slick после разбора остаются в разметке — на образце их
        прячет такое же правило (slidercases.php:90-94). */
  .hranenie-hub-page .hh-cases .slick-arrow {
    display: none;
  }
}
/*  Стрелки карусели кейсов. Их видно только когда кейсов в админке
    выбрано больше трёх: Slick рисует стрелки, лишь если слайдов больше,
    чем он показывает (slidesToShow: 3). Сейчас кейсов три — стрелок нет,
    но как только заказчик добавит четвёртый, они появятся.

    На странице-образце стрелки расставляет по местам чужой инлайн-стиль:
    modules/video/widgets/views/videomag.php печатает правила для
    .slick-arrow без всякой области действия, а блок «Видео» на той
    странице есть — вот стрелки кейсов заодно и встают куда надо. У нас
    видео нет, стиль не приезжает, и стрелки вставали бы прямо в поток:
    одна над лентой, другая под ней (проверено — добавлял пятый кейс).
    Поэтому те же правила повторены здесь, но только для своего блока.

    Контейнер позиционирован самим Slick (.slick-slider { position:
    relative }), отдельный position: relative не нужен. */
.hranenie-hub-page .hh-cases .slick-arrow {
  position: absolute;
  top: 50%;
  width: 70px;
  height: auto !important;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.hranenie-hub-page .hh-cases .slick-arrow.arr-left {
  right: 95%;
  transform: translate(-50%, -50%);
}
.hranenie-hub-page .hh-cases .slick-arrow.arr-right {
  left: 95%;
  transform: translate(50%, -50%);
}
.hranenie-hub-page .hh-cases .slick-arrow.arr-left:hover {
  transform: translate(-50%, -50%) scale(1.2);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
.hranenie-hub-page .hh-cases .slick-arrow.arr-right:hover {
  transform: translate(50%, -50%) scale(1.2);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
/* ─── «Популярные услуги»: лента на телефоне ──────────────────── */
/*  Блок рисует общий виджет LinkBlockWidget (sysname ur_lica_2), он же
    стоит на /dlya-yur-lic. Поэтому всё ниже держится на обёртке
    .hh-services — на других страницах блок остаётся прежним.

    Что было не так в исходном виде (виджет, @media max-width: 480):
      • карточка занимала 45 % ширины, и на экране помещались ровно две.
        Ряд выглядел законченным, и что услуг шесть, узнавал только тот,
        кто наугад потянул ленту вбок;
      • у ленты стоял overflow-y: hidden без вертикальных полей, и мягкая
        тень карточек срезалась по верхнему и нижнему краю;
      • родная полоса прокрутки на телефоне показывается только в момент
        движения, а на iOS не рисуется вовсе.

    Стало: ровно полтора элемента при любой ширине, поля под тень, своя
    всегда видимая полоса и автолистание раз в несколько секунд —
    полосу и листание делает public_html/js/hranenie-hub.js. */
/*  Обёртку и полосу создаёт скрипт; на десктопе полоса не нужна. */
.hh-services .hh-strip {
  width: 100%;
}
.hh-services .hh-sbar {
  display: none;
}
@media (max-width: 767px) {
  .hh-services .lb-scope {
    margin: 40px auto;
    padding: 20px 0;
    gap: 20px;
  }
  /*  Заголовок блока виджет набирает 30-м кеглем. На телефоне надпись
        «ПОПУЛЯРНЫЕ УСЛУГИ» разрасталась на 372 px при экране 375 — упиралась
        в оба края, а на 360 и уже ломалась на две строки. Соседние
        заголовки страницы («Наши кейсы», «Наши клиенты», «Независимые
        отзывы») набраны 20-м в колонке 345 px. Приводим к ним: тот же
        кегль и те же поля по 15 px, что у .container. */
  .hh-services .lb-scope .lb-title {
    padding: 0 15px;
    font-size: 20px;
    line-height: 1.4;
  }
  /*  Полтора элемента — правило заказчика, но на широком телефоне
        (600-767 px) полторы карточки во всю ширину означали бы карточку
        под 490 px: белая плашка с иконкой 48 px посередине выглядит
        пустой. Поэтому ленту не даём раздуваться шире 520 px и держим
        по центру: карточка остаётся в разумных 325 px, полтора элемента
        на месте, а поля по бокам читаются как обычные поля страницы. */
  .hh-services .hh-strip {
    max-width: 520px;
    margin: 0 auto;
  }
  .hh-services .lb-scope .lb-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    /*  Поля: по бокам — воздух и место под тень крайних карточек,
            сверху и снизу — тоже под тень. Именно её и срезало: тень
            уходит на 8 px вверх и на 16 px вниз от карточки, а лента
            обрезает всё, что вышло за её край. */
    padding: 14px 16px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  /*  Родную полосу прячем — вместо неё .hh-sbar ниже: она видна всегда
        и выглядит одинаково во всех браузерах.

        Правило нарочно привязано к .hh-strip — обёртке, которую создаёт
        скрипт. Если скрипт почему-то не отработает (не загрузился, снят
        блокировщиком), обёртки не будет, своей полосы тоже — и родная
        останется на месте. Прячь мы её просто у .lb-list, лента в этом
        случае осталась бы вообще без признака прокрутки. */
  .hh-services .hh-strip .lb-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hh-services .hh-strip .lb-list::-webkit-scrollbar {
    display: none;
  }
  /*  Ровно полтора элемента в видимой части при любой ширине экрана.
        Считается так: видно карточку, промежуток и половину следующей,
        то есть 1,5 карточки + 1 промежуток = ширина ленты. Промежуток
        входит в боковые поля (16 + 16 = 32 = 2 x 16), поэтому в формуле
        остаётся только деление на 1,5: 100 % здесь — ширина ленты уже
        без полей. */
  .hh-services .lb-scope .lb-item {
    flex: 0 0 calc(100% / 1.5);
    width: auto;
    max-width: none;
    height: 180px;
    scroll-snap-align: start;
  }
  /*  Крайним карточкам виджет добавляет поля по 16 px
        (.lb-scope .lb-item:first-child { margin-left: 16px }). Вес того
        правила — три «класса»: два класса и псевдокласс :first-child
        считаются в одну колонку. У нашего правила выше вес такой же, и
        при равенстве побеждает то, что идёт позже, — а стиль виджета
        печатается прямо в разметке, ниже нашего файла. Поэтому крайние
        карточки перебиваем отдельно, с псевдоклассом: воздух по краям
        даёт поле самой ленты, второго слоя отступов не нужно. */
  .hh-services .lb-scope .lb-item,
  .hh-services .lb-scope .lb-item:first-child,
  .hh-services .lb-scope .lb-item:last-child {
    margin: 0;
  }
  /*  Своя полоса прокрутки. Ширина ползунка — доля видимой части
        ленты, положение — доля прокрутки; считает скрипт. */
  .hh-services .hh-sbar {
    position: relative;
    display: block;
    height: 6px;
    margin: 0 16px;
    border-radius: 3px;
    background: #E6E6E6;
  }
  /*  Если лента помещается целиком (например, услуг осталось две) —
        полосу прячем, чтобы не обещать прокрутку, которой нет. */
  .hh-services .hh-strip--static .hh-sbar {
    display: none;
  }
  .hh-services .hh-sbar__thumb {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    min-width: 28px;
    border-radius: 3px;
    background: #235C33;
    transition: left 0.25s ease, width 0.25s ease;
  }
}
/*  У заказчика в Windows выключена анимация, и браузеры сообщают
    prefers-reduced-motion: reduce. Само перелистывание он просил явно,
    поэтому оно остаётся — но едет мгновенно, без плавного проезда и без
    переезда ползунка. */
@media (prefers-reduced-motion: reduce) {
  .hh-services .lb-scope .lb-list {
    scroll-behavior: auto;
  }
  .hh-services .hh-sbar__thumb {
    transition: none;
  }
}
/* ════════════════════════════════════════════════════════════
   Адаптив
   ════════════════════════════════════════════════════════════ */
/*  Мобильного кадра в макете нет — раскладку ниже 992 px собирали сами
    по тем же правилам, что десктопную: сначала карточки и шаги встают
    в одну колонку, потом уменьшаются кегли. */
/* ── Планшет: карточки и шаги по два в ряд ──────────────────── */
@media (max-width: 991px) {
  /*  Ниже 992 десктопная шапка скрыта Bootstrap-ом (hidden-xs hidden-sm),
        а вместо неё сервер отдаёт мобильную .mobile-menu-new: position:
        fixed, высота 71 px. Отдаётся она по User-Agent, а не по ширине,
        поэтому на планшете шапка есть и отступ под неё нужен во всём
        диапазоне, а не только на телефонах. Без него плашка-надзаголовок
        пряталась под меню (замер: badge на y=40 при шапке 0-71).

        min-height убран намеренно. Он держал баннер высотой 520 px, а
        контента там на ~355 — под кнопками зияло 210 px пустого зелёного
        поля. На Экспрессе этой дыры не видно только потому, что его
        грузовик 1047x753 закрывает низ баннера целиком; наше фото
        стеллажа втрое меньше и так не умеет. Поэтому высоту баннера
        задаёт текст, а фото подгоняется под неё (ниже). */
  .hh-hero {
    min-height: 0;
    padding-top: 71px;
  }
  /*  Фото — колонка во всю высоту баннера у правого края. height: 100 %
        считается от высоты .hh-hero: она уже определена текстом (фото
        позиционировано абсолютно и в расчёт высоты не входит), поэтому
        процент разрешается корректно. object-fit: cover подрезает снимок
        по этой высоте — пустого места не остаётся ни справа, ни снизу. */
  .hh-hero__photo {
    top: 0;
    bottom: auto;
    right: 0;
    width: 34%;
    height: 100%;
    object-position: center;
  }
  /*  Верхнее поле — воздух под шапкой, правое — место под фото:
        34 % занимает снимок, ещё 4 % оставляем воздухом. */
  .hh-hero__inner {
    padding: 24px 38% 32px 20px;
  }
  .hh-hero__title-line1,
  .hranenie-hub-page .wrap h1.hh-hero__title-line1 {
    font-size: 32px !important;
  }
  .hh-hero__title-line2 {
    font-size: 20px;
  }
  .hi-title__main {
    font-size: 34px;
  }
  .hi-title__lead {
    font-size: 20px;
  }
  .hi-steps {
    flex-wrap: wrap;
  }
  .hi-step {
    flex: 1 1 calc(50% - 12px);
    min-width: calc(50% - 12px);
    min-height: 0;
  }
  .hi-step__body {
    justify-content: flex-start;
  }
  /*  Фотографии в плашке заняли бы место текста — прячем, градиент
        и световые пятна остаются. */
  .hi-cta__photo {
    display: none;
  }
  .hi-cta__title {
    font-size: 30px;
  }
  /*  Строка «договор · акт приёма-передачи · закрывающие документы».

        В макете она белая на 80 % прозрачности и стоит у самого низа
        плашки — там градиент уже тёмно-зелёный (#0F502C), и читается всё
        нормально. Но плашка ниже 992 px становится короче, строка
        поднимается на светлую часть градиента (#94C121), и белый текст на
        нём почти пропадает — заказчик это и увидел.

        Лечим не цветом текста, а собственной подложкой: тёмная заливка
        под плашкой держит контраст 6,5:1 независимо от того, на какую
        часть градиента она попала. Прозрачность со всего элемента
        снимаем — она гасила и текст, и рамку, и иконку.

        Десктоп не трогаем: там макет, и там строка стоит там, где
        задумано. */
  .hi-cta__note {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(15, 80, 44, 0.72);
    color: #fff;
  }
}
/* ── Телефон: всё в одну колонку ────────────────────────────── */
@media (max-width: 767px) {
  /*  71 px — высота мобильной шапки, как на Экспрессе. */
  .hh-hero {
    min-height: 0;
    padding-top: 71px;
    border-radius: 0 0 16px 16px;
  }
  /*  Нижнее поле = высота фото-полосы (150) + воздух (24). */
  .hh-hero__inner {
    padding: 24px 20px 174px;
  }
  /*  На телефоне фото становится широкой полосой по низу баннера —
        тем же приёмом, что грузовик на Экспрессе закрывает низ своего.

        Было иначе: снимок стоял вертикально справа, шириной 42 %, а под
        кнопками оставалось 200 px поля. Слева от него получался пустой
        зелёный прямоугольник во всю высоту этого поля, а сам снимок при
        этом наезжал на кнопку «Получить расчёт» (высота 236 px против
        200 px поля). Теперь полоса ровно 150 px, лежит под кнопками и
        занимает всю ширину — пустого места не остаётся, наезда нет.

        object-position по вертикали 58 % — при таком кадрировании в полосу
        попадает целая паллета с биркой «ЗОНА №3 / ЗАКАЗ №0254», а не
        пустые балки стеллажа. Проверено сравнением пяти вариантов кадра. */
  .hh-hero__photo {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 150px;
    aspect-ratio: auto;
    object-position: center 58%;
  }
  .hh-hero__glow {
    right: -120px;
    width: 380px;
    height: 310px;
  }
  .hh-hero__badge {
    max-width: 100%;
    padding: 6px 8px;
    font-size: clamp(9px, 2.9vw, 14px);
  }
  .hh-hero__title-line1,
  .hranenie-hub-page .wrap h1.hh-hero__title-line1 {
    font-size: 30px !important;
  }
  .hh-hero__title-line2 {
    font-size: 18px;
  }
  .hh-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hi-block {
    gap: 20px;
    padding: 20px 0;
  }
  .hi-title__lead {
    font-size: 18px;
  }
  .hi-title__main {
    font-size: 26px;
  }
  .hi-cards {
    gap: 16px;
  }
  .hi-card {
    width: 100%;
    padding: 12px;
  }
  .hi-how {
    font-size: 20px;
  }
  .hi-steps {
    gap: 16px;
  }
  .hi-step {
    flex: 1 1 100%;
    min-width: 100%;
    padding-left: 0;
  }
  .hi-step__num {
    font-size: 32px;
  }
  .hi-step__title {
    font-size: 20px;
  }
  .hi-cta {
    gap: 14px;
    min-height: 0;
    padding: 20px;
  }
  .hi-cta__title {
    font-size: 24px;
  }
  .hi-cta__subtitle {
    font-size: 16px;
  }
  /*  Перечень документов в одну строку не влезает — снимаем фиксированную
        высоту, разрешаем перенос и растягиваем плашку на всю ширину:
        так строки ложатся ровным блоком, а не лесенкой по центру.
        Тёмная подложка и полная непрозрачность — в блоке (max-width: 991px)
        выше. */
  .hi-cta__note {
    display: flex;
    align-self: stretch;
    height: auto;
    align-items: flex-start;
    padding: 10px 12px;
    line-height: 1.45;
  }
  .hi-cta__note img {
    margin: 2px 9px 0 0;
  }
  .hi-btn {
    width: 100%;
  }
  .hi-legal {
    align-items: flex-start;
  }
  .hh-text {
    font-size: 15px;
  }
}
/* ── Кнопка «Оставить отзыв» на телефоне ────────────────────── */
/*  site.css на ширине до 600 px прячет десктопную кнопку через
    visibility: hidden — то есть она невидима, но место в строке
    занимает. Строка .element_fortop_mob выложена флексом, и эти 203 px
    растягивали её шире экрана: страница получала горизонтальную
    прокрутку на 48 px. Убираем кнопку из потока.

    Правило намеренно ограничено нашей страницей: то же самое лечение
    в site.css задело бы все страницы с отзывами, а это отдельная
    задача с отдельной проверкой. */
@media (max-width: 600px) {
  .hranenie-hub-page .coment_button_add {
    display: none;
  }
}
/* ── Узкие телефоны ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .hi-badge {
    height: auto;
    padding: 6px 14px;
    line-height: 1.3;
    white-space: normal;
  }
  .hi-title__main {
    font-size: 22px;
  }
  .hi-cta__title {
    font-size: 21px;
  }
}