/* ============================================================
   iFLOW — страница «Услуги» (v2, 2026-08-12)

   Первая версия переводила список в сетку из двух колонок и сломала страницу:
   колонки схлопнулись, заголовок переносился по слогам, слева зияла пустота.
   Причина — раскладка Aspro на этой странице держится на своих col-* и
   вмешиваться в неё нельзя.

   Поэтому здесь НЕ трогаем сетку. Оставляем ряд на всю ширину, как в шаблоне,
   и оформляем саму карточку: обложка слева фиксированного размера, текст справа,
   спокойная рамка, подъём при наведении. Содержимое услуг не меняется.

   Откат: снять подключение iflow_services.css в iflow_seo.php.
   ============================================================ */

.content-sections1 {
  --isv-navy: #0f2340;
  --isv-blue: #1457c8;
  --isv-blue-2: #365edc;
  --isv-line: #e3ecf8;
  --isv-muted: #66788f;
  --isv-ease: cubic-bezier(.22, .61, .36, 1);
}

/* вступление над списком */
.text_before_items {
  max-width: 820px;
  margin: 0 0 22px;
  color: var(--isv-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

/* расстояние между услугами */
.content-sections1 .items.list_block > [class*="col-"] { margin-bottom: 18px; }

/* ---------- карточка услуги ---------- */
.content-sections1 .item_wrap {
  border: 1px solid var(--isv-line) !important;
  border-radius: 16px !important;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px -6px rgba(15, 35, 64, .22) !important;
  transition: transform .2s var(--isv-ease), box-shadow .2s var(--isv-ease),
              border-color .2s var(--isv-ease);
}
.content-sections1 .item_wrap:hover {
  transform: translateY(-2px);
  border-color: #bcd3f4 !important;
  box-shadow: 0 16px 30px -20px rgba(15, 35, 64, .5) !important;
}

/* обложка слева, текст справа — строкой */
.content-sections1 .item_wrap .item {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 0;
  border: 0;
}
.content-sections1 .item_wrap .image {
  flex: 0 0 300px;
  width: 300px;
  height: 210px;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf1fb, #dbe7f8);
}
.content-sections1 .item_wrap .image a { display: block; width: 100%; height: 100%; }
.content-sections1 .item_wrap .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--isv-ease);
}
.content-sections1 .item_wrap:hover .image img { transform: scale(1.04); }

.content-sections1 .item_wrap .body-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 24px 20px 0;
}
.content-sections1 .item_wrap .title {
  margin: 0 0 10px;
  font-size: 21px !important;
  line-height: 1.28;
  font-weight: 700;
}
.content-sections1 .item_wrap .title a {
  color: var(--isv-navy) !important;
  transition: color .18s var(--isv-ease);
}
.content-sections1 .item_wrap:hover .title a { color: var(--isv-blue) !important; }

.content-sections1 .item_wrap .previewtext {
  color: var(--isv-muted) !important;
  font-size: 15px;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(4 * 1.62em);
}

/* у одной услуги описание свёрстано списком — приводим к общему виду */
.content-sections1 .item_wrap .previewtext ul,
.content-sections1 .item_wrap .previewtext ol { margin: 0; padding-left: 18px; }
.content-sections1 .item_wrap .previewtext br { display: none; }

/* «Подробнее» у нижнего края текстовой части */
.content-sections1 .item_wrap .body-info::after {
  content: "Подробнее →";
  margin-top: auto;
  padding-top: 14px;
  color: var(--isv-blue);
  font-size: 15px;
  font-weight: 600;
  transition: letter-spacing .2s var(--isv-ease), color .2s var(--isv-ease);
}
.content-sections1 .item_wrap:hover .body-info::after { letter-spacing: .3px; color: var(--isv-blue-2); }

/* ---------- узкие экраны: обложка сверху ---------- */
@media (max-width: 767px) {
  .content-sections1 .item_wrap .item { flex-direction: column; gap: 0; }
  .content-sections1 .item_wrap .image { flex: none; width: 100%; min-height: 0; height: 170px; }
  .content-sections1 .item_wrap .body-info { padding: 16px 16px 18px; }
  .content-sections1 .item_wrap .title { font-size: 18px !important; }
  .text_before_items { font-size: 15.5px; }
}


/* Aspro добавляет к карточке кнопку «РАЗВЕРНУТЬ» и стрелку в углу — на странице
   со списком услуг они ничего не дают: описание и так короткое, а переход
   делает ссылка «Подробнее». Убираем, чтобы не отвлекали. */
.content-sections1 .item_wrap .expand-block,
.content-sections1 .item_wrap .show-more,
.content-sections1 .item_wrap [class*="expand"],
.content-sections1 .item_wrap .more-btn,
.content-sections1 .item_wrap .arrow-link,
.content-sections1 .item_wrap .item-arrow,
.content-sections1 .item_wrap .link-arrow,
.content-sections1 .item_wrap .button_opener,
.content-sections1 .item_wrap .opener { display: none !important; }

/* стрелку в углу оставляем, но делаем частью карточки: круг в фирменном тоне,
   который отзывается вместе с ней */
.content-sections1 .item_wrap .arrow_link {
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border: 1px solid var(--isv-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: background .2s var(--isv-ease), border-color .2s var(--isv-ease), transform .2s var(--isv-ease);
}
.content-sections1 .item_wrap:hover .arrow_link {
  background: linear-gradient(135deg, var(--isv-blue-2), var(--isv-blue)) !important;
  border-color: transparent !important;
  transform: translateX(3px);
}
.content-sections1 .item_wrap:hover .arrow_link svg path { fill: #fff !important; }


/* ============================================================
   iFLOW — «Услуги», v3 (2026-08-12)

   Разбор карточки услуги и левого меню. Сетку страницы, как и в v2,
   не трогаем: раскладка держится на col-* Aspro, и попытка перевести
   её в колонки уже ломала эту страницу. Ни один контейнер не
   переводится в grid/flex, position нигде не переопределяется.
   ============================================================ */

/* ---------- текстовая колонка ---------- */
/* Aspro резервирует 293px слева под «плавающую» обложку старой раскладки,
   хотя обложка давно flex-элемент и резерв ни к чему. Из-за него полезная
   ширина строки была 263px из 626 доступных: заголовок рвался на три строки,
   описание шло лесенкой по 5–6 слов. На 601–767px было ещё хуже — Aspro
   снимает только правый отступ, а 293px слева оставляет.
   Правило «padding: 20px 24px 20px 0» выше по файлу после этого мертво. */
.content-sections1.item-views .items .item .image + .body-info,
.content-sections1.item-views .items .item > .body-info {
  padding: 18px 56px 18px 0;   /* 56px справа — коридор под кружок-стрелку 38px */
}
@media (max-width: 767px) {
  /* повторяем мобильные значения: базовое правило выше весит больше старого
     мобильного и без этого перебило бы его */
  .content-sections1.item-views .items .item .image + .body-info,
  .content-sections1.item-views .items .item > .body-info { padding: 16px 0 2px; }
}

/* ---------- описание ---------- */
/* Колонка расширилась вдвое — отдаём тексту пятую строку вместо четырёх,
   чтобы анонс доходил хотя бы до перечисления. Растушёвку-градиент из разбора
   не берём: она требует сменить position у .previewtext и всё равно только
   маскирует обрыв, а не убирает его. */
.content-sections1.item-views .items .item .previewtext { max-height: calc(5 * 1.62em); }

/* ---------- подуслуги ---------- */
/* 37 ссылок на конкретные работы лежат в разметке каждой карточки и не видны
   ни одной: Aspro прячет .text.childs, а кнопку «Развернуть», которой блок
   раскрывался, убрали мы сами. Получилось, что самое полезное на странице —
   то, что клиент реально ищет, — доступно только через треугольник в меню.
   Список остаётся на родной модели inline-block, во flex его не переводим:
   снимаем только ширину в половину строки и отрицательный отступ.
   Кнопка «Развернуть» остаётся скрытой — она больше не нужна.
   Побочный эффект: карточки подрастут на 1–3 ряда таблеток. */
.content-sections1.item-views .item .body-info .text.childs {
  display: block;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--isv-line);
}
.content-sections1.item-views .items .item .childs ul { margin: 0; padding: 0; }
.content-sections1.item-views .items .item .childs li {
  width: auto;        /* было 50% — полстроки под коротким названием */
  margin: 0 6px 6px 0;
  padding: 0;
  overflow: visible;  /* гасит ellipsis Aspro: при width:auto он уже не нужен */
  line-height: 1.35;
}
.content-sections1.item-views .items .item .childs li a {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--isv-line);
  border-radius: 999px;
  background: #f4f8fd;
  color: var(--isv-navy) !important;   /* !important — у ссылок класс .colored темы */
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  transition: background .18s var(--isv-ease), border-color .18s var(--isv-ease),
              color .18s var(--isv-ease);
}
.content-sections1.item-views .items .item .childs li a:hover {
  background: #e9f0fa;
  border-color: var(--isv-line);
  color: var(--isv-blue) !important;
}

/* ---------- обложка ---------- */
/* Под обложкой висел белый провал, разный в каждой карточке: жёсткие 210px
   при текстовой колонке в 244–298px давали слева пустой прямоугольник
   до 61px, и низ ряда выглядел рваным. Тянем обложку на высоту карточки —
   .item уже flex со stretch, так что обложка получает определённую высоту
   без вмешательства в раскладку. Прямые углы 90° внутри скругления 16px
   тоже убираем; наведение с scale(1.04) по-прежнему подрезается overflow. */
.content-sections1 .item_wrap .image {
  align-self: stretch;
  height: auto;
  min-height: 210px;
  border-radius: 12px;
}
@media (max-width: 767px) {
  /* повторяем мобильные значения: правило выше стоит позже старого
     медиазапроса в файле и иначе перебило бы его высоту */
  .content-sections1 .item_wrap .image { align-self: auto; height: 170px; min-height: 0; }
}

/* Переменные объявлены на .content-sections1 (список услуг). Левое меню лежит
   вне этого контейнера, поэтому повторяем набор для него — иначе var() в
   правилах меню ниже не разрешится и цвета отвалятся. */
.left_block {
  --isv-navy: #0f2340;
  --isv-blue: #1457c8;
  --isv-blue-2: #365edc;
  --isv-line: #e3ecf8;
  --isv-muted: #66788f;
  --isv-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- левое меню: верхний уровень ---------- */
/* Меню выглядело вставкой с другого сайта: дробная толщина рамки (0.8px)
   рисуется полупрозрачным серым и на соседних строках даёт разную
   насыщенность — список кажется неровным; скругление 2px на каждой строке
   оставляет насечки в стыках; 13px текста при высоте строки 53px — слишком
   много воздуха вокруг мелких букв. Ни один из прежних цветов не из
   фирменного набора. Активного пункта у списка не было вовсе.
   Скругление вешаем на сам список — у него уже стоит overflow:hidden,
   поэтому углы обрежутся и при раскрытом подсписке.
   Оговорка: файл подключается только на /services/. Если меню должно так же
   выглядеть в остальных разделах, эти два раздела переносятся в iflow_skin.css. */
.left_block .menu_top_block.menu-type1 ul.left_menu { border-radius: 12px; }

.left_block .menu_top_block.menu-type1 .left_menu > li > a.parent {
  padding: 13px 36px 13px 16px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--isv-navy);
  background: #fff;
  border-style: solid;
  border-width: 1px 1px 0;
  border-color: var(--isv-line);
  border-radius: 0;
  transition: background .18s var(--isv-ease), color .18s var(--isv-ease);
}
.left_block .menu_top_block.menu-type1 .left_menu > li:last-child > a.parent { border-bottom-width: 1px; }
.left_block .menu_top_block.menu-type1 .left_menu > li:hover > a.parent,
.left_block .menu_top_block.menu-type1 .left_menu > li.current > a.parent,
.left_block .menu_top_block.menu-type1 .left_menu > li.opened > a.parent {
  background: #f4f8fd;
  color: var(--isv-blue);
}
/* где я сейчас — раньше это было ничем не отмечено */
.left_block .menu_top_block.menu-type1 .left_menu > li.current > a.parent {
  box-shadow: inset 3px 0 0 var(--isv-blue);
}
.left_block .menu_top_block.menu-type1 li.v_bottom.current .dropdown,
.left_block .menu_top_block.menu-type1 li.v_bottom:hover .dropdown { background: #f4f8fd; }
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container {
  border-color: var(--isv-line);
  border-width: 0 1px;
}

/* ---------- левое меню: подпункты и раскрывашка ---------- */
/* В раскрытом разделе промежуток между чужими пунктами (5px) был меньше, чем
   воздух между строками одного пункта, — при названиях в 2–3 строки список
   сливался в сплошное полотно, а у «Информационной безопасности» таких
   пунктов девять подряд. Раскрывашку размером 5×3px внутри 13px текста просто
   не замечали, поэтому вложенные услуги никто не открывал.
   Цвет вынесен отдельным правилом с теми же :not(), что у Aspro: его правило
   весит 7 классов, обычным селектором его не перебить.
   Область нажатия у раскрывашки — отдельный .toggle_block, его не трогаем;
   position:absolute у значка сохраняется, поворот открытого раздела
   Aspro вешает на этот же элемент и центр вращения не смещается. */
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container { padding: 6px 0 14px; }
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container li {
  padding: 0 16px;
  margin: 0 0 10px;
  line-height: 1.4;
}
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container li:last-child { margin-bottom: 0; }
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container li a {
  font-size: 13px;
  line-height: 1.4;
  padding: 0;
  transition: color .18s var(--isv-ease);
}
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container li:not(.current) a:not(:hover) {
  color: var(--isv-muted);
}
.left_block .menu_top_block.menu-type1 .left_menu > li.v_bottom > .child_container li a:hover { color: var(--isv-blue); }

.left_block .menu_top_block.menu-type1 .left_menu > li > a.parent .svg {
  right: 14px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: transform .2s var(--isv-ease);
}
.left_block .menu_top_block.menu-type1 .left_menu > li > a.parent .svg svg { width: 9px; height: 6px; }

/* ---------- меньше движения ---------- */
/* В файле не было ни одной ветки для тех, кто отключил анимации в системе,
   а карточка при наведении подпрыгивает, обложка масштабируется и стрелка
   уезжает вбок. */
@media not all {  /* было: prefers-reduced-motion reduce — отключено, анимации включены всегда */
  .content-sections1 .item_wrap,
  .content-sections1 .item_wrap .image img,
  .content-sections1 .item_wrap .arrow_link,
  .content-sections1 .item_wrap .title a,
  .content-sections1 .item_wrap .body-info::after,
  .content-sections1 .item_wrap .childs li a,
  .left_block .menu_top_block.menu-type1 .left_menu a,
  .left_block .menu_top_block.menu-type1 .left_menu .svg { transition-duration: .01ms !important; }
  .content-sections1 .item_wrap:hover,
  .content-sections1 .item_wrap:hover .image img,
  .content-sections1 .item_wrap:hover .arrow_link { transform: none !important; }
}