/* Читаемость статей блога.

   Что было не так: строка во всю ширину контейнера (около 180 знаков вместо 65–75),
   выключка по ширине — в русском тексте она даёт «реки» из пробелов, кегль 16/24
   и заголовки, почти не отличимые от текста. Читать такое тяжело.

   Здесь только оформление статьи, разметку в базе не трогаем. */

.mp-articles .blog_det,
.mp-articles article.blog_det {
  max-width: 880px;
  margin: 0 auto;
  text-align: left !important;      /* было justify */
  font-family: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.72;
  color: #24242c;
  hyphens: none;
}

/* заголовок статьи и дата — в ту же колонку, что и текст */
.mp-articles .mp-seo_title { max-width: 980px; margin: 0 auto 6px; text-align: left !important;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
.mp-articles .container > .row > .col-12 > span[style*="float:right"] {
  float: none !important; display: block; max-width: 980px; margin: 0 auto 10px;
  padding-bottom: 0 !important; font-style: normal !important; color: #7a7a86; font-size: 14px; }

.blog_det p { margin: 0 0 20px; }

/* абзац-лид: первый абзац крупнее — им статья «зацепляет» */
.blog_det > p:first-of-type { font-size: 20px; line-height: 1.6; color: #121212; }

.blog_det h2 {
  margin: 40px 0 14px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
  line-height: 1.25; letter-spacing: -.015em; color: #121212;
}
.blog_det h3 { margin: 30px 0 10px; font-size: clamp(19px, 2.1vw, 23px); font-weight: 600; line-height: 1.3; color: #121212; }

/* заголовок отделяем тонкой линией — глазу проще цепляться за структуру */
.blog_det h2::after {
  content: ''; display: block; width: 46px; height: 3px; margin-top: 12px;
  background: #8f42ec; border-radius: 2px;
}

/* Маркеры списков — родные браузерные (list-style), а не нарисованные ::before.
   Своя точка на absolute требовала ручной подгонки вертикали под кегль и шрифт
   и всё равно выглядела приподнятой; браузер выравнивает marker по первой строке сам.
   Цвет задан через ::marker ниже. Правило .mp-articles ul li::before из
   blog_det.min.css печатало вторую точку — гасим его content: none. */
.blog_det ul, .blog_det ol { margin: 0 0 22px; padding-left: 24px; }
.blog_det ul { list-style: disc; }
.blog_det ul li, .blog_det ol li { padding-left: 4px; margin-bottom: 10px; }
.blog_det ul li::before { content: none; }
.blog_det ol { padding-left: 24px; }
.blog_det ol li { margin-bottom: 10px; padding-left: 4px; }
.blog_det li::marker { color: #8f42ec; font-weight: 600; }

.blog_det blockquote {
  margin: 26px 0; padding: 18px 22px; border-left: 3px solid #8f42ec;
  background: #faf7ff; border-radius: 0 12px 12px 0; font-size: 17px; color: #3a3a44;
}

.blog_det a { color: #8f42ec; text-decoration: none; border-bottom: 1px solid rgba(143, 66, 236, .3); }
.blog_det a:hover { border-bottom-color: #8f42ec; }

.blog_det strong, .blog_det b { font-weight: 600; color: #121212; }

/* иллюстрация: во всю колонку, без обтекания — текст рядом с картинкой сжимался в лапшу */
.mp-articles .blog_det_img {
  float: none !important; display: block; width: 100%;
  max-width: 880px; max-height: 360px; height: 340px; object-fit: cover; object-position: center;
  margin: 8px auto 30px !important; padding: 0 !important; border-radius: 16px;
}
@media (max-width: 767px) { .mp-articles .blog_det_img { height: 200px; } }

.blog_det table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 16px; }
.blog_det th, .blog_det td { padding: 12px 14px; border-bottom: 1px solid #e6e6ef; text-align: left; }
.blog_det th { background: #f6f6fb; font-weight: 600; }

@media (max-width: 767px) {
  .mp-articles .blog_det, .mp-articles article.blog_det { font-size: 17px; line-height: 1.68; }
  .blog_det > p:first-of-type { font-size: 18px; }
  /* ⚠️ Таблица в статье шире экрана телефона (её колонки не ужимаются ниже
     ~415 px) и распирала всю страницу — появлялась горизонтальная прокрутка
     документа. display:block делает таблицу собственным контейнером прокрутки:
     содержимое остаётся таблицей, за край уезжает только она сама. */
  .blog_det table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .blog_det table th, .blog_det table td { white-space: normal; }
}

/* --- перебиваем легаси-правила blog_det.min.css (там кегль 18px у заголовков
       и начертание 200 у абзацев) --- */
.mp-articles article.blog_det p,
.mp-articles article.blog_det li {
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  color: #24242c !important;
  font-family: 'Gilroy', 'Segoe UI', system-ui, sans-serif !important;
}
.mp-articles article.blog_det > p:first-of-type {
  font-size: 20px !important; line-height: 1.6 !important; color: #121212 !important;
}
/* Кегль, вес и вертикальный ритм заголовков задаёт site2023/css/type.css —
   единая шкала на весь сайт. Здесь остаётся только цвет: раньше эти правила
   перебивали общую шкалу, и в статье H2 был 31 px против 30 у остальных. */
.mp-articles article.blog_det h2,
.mp-articles article.blog_det h3 { color: #121212 !important; }
.mp-articles article.blog_det strong,
.mp-articles article.blog_det b { font-weight: 600 !important; color: #121212 !important; }

@media (max-width: 767px) {
  .mp-articles article.blog_det p,
  .mp-articles article.blog_det li { font-size: 17px !important; }
  .mp-articles article.blog_det > p:first-of-type { font-size: 18px !important; }
}

/* Переход из статьи на страницу услуги.
   Коммерческие запросы («интеграция CRM с сайтом» и подобные) приводят людей
   в блог, а не на услугу: без заметного блока человек дочитывает статью и уходит. */
.blog_det .w2-svc-cta{
    margin: 28px 0;
    padding: 22px 24px;
    border: 1px solid #d1d1e0;
    border-left: 4px solid #8f42ec;
    border-radius: 12px;
    background: #f7f7fb;
}
.blog_det .w2-svc-cta__title{
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #131727;
}
.blog_det .w2-svc-cta__text{
    margin: 0 0 14px;
    line-height: 1.5;
}
.blog_det .w2-svc-cta__btn{
    display: inline-block;
    padding: 11px 20px;
    border-radius: 8px;
    background: #8f42ec;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.blog_det .w2-svc-cta__btn:hover{ background: #7a34d0; color: #fff !important; }
@media (max-width: 575px){
    .blog_det .w2-svc-cta{ padding: 18px; }
    .blog_det .w2-svc-cta__btn{ display: block; text-align: center; }
}

/* Дата и время чтения над заголовком статьи. Раньше дата стояла курсивом
   в правом углу с отступом 50 px и выглядела случайной подписью. */
.blog_det_meta, .mp-articles .w2-meta{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 0 14px; font-size:15px; color:rgba(19,23,39,.55);
}
.mp-articles .w2-meta__dot{
  width:4px; height:4px; border-radius:50%; background:rgba(19,23,39,.28);
}
.mp-articles .w2-meta__read{ color:rgba(19,23,39,.55); }
@media (max-width: 767px){ .mp-articles .w2-meta{ font-size:14px; gap:10px; } }

/* Блоки под текстом статьи: услуги по теме, кейсы и похожие статьи.
   Раньше это были серые плашки со списком ссылок — вид из старой версии сайта.
   Теперь язык карточек, общий с блоками «Кейсы по услуге» и «Полезное по теме». */
.w2-after{ max-width:980px; margin:34px auto 0; }
.w2-after__title{
  margin:0 0 18px !important; padding:0 !important; border:0 !important;
  font-size:22px !important; font-weight:600 !important; line-height:1.3 !important;
  color:#131727 !important; text-align:left !important;
}
.w2-after__grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.w2-after__card{
  display:flex; flex-direction:column; gap:8px; padding:20px 22px;
  background:#fff; border:1px solid #e6e6ef; border-radius:20px;
  text-decoration:none !important; color:inherit;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.w2-after__card:hover{
  box-shadow:0 16px 34px rgba(19,23,39,.10); transform:translateY(-3px); border-color:#d9c8f7;
}
.w2-after__card--shot{ padding:0; overflow:hidden; }
.w2-after__shot{
  display:block; aspect-ratio:12/7; background:#eef0f6 no-repeat center / cover;
}
.w2-after__body{ display:flex; flex-direction:column; gap:8px; padding:18px 22px 20px; }
.w2-after__name{
  font-size:17px; font-weight:600; line-height:1.35; color:#131727;
  border:0; text-decoration:none;
}
.w2-after__line{ font-size:15px; line-height:1.5; color:rgba(19,23,39,.6); flex:1 1 auto; }
.w2-after__more{ font-size:15px; font-weight:600; color:#8f42ec; }
.w2-after__card:hover .w2-after__more{ color:#7a34d0; }
@media (max-width: 767px){
  .w2-after{ margin-top:26px; }
  .w2-after__grid{ grid-template-columns:1fr; gap:12px; }
  .w2-after__title{ font-size:20px !important; }
}

/* Дата и время чтения над заголовком статьи. Раньше дата стояла курсивом
   в правом углу с отступом 50 px и выглядела случайной подписью. */
.blog_det_meta, .mp-articles .w2-meta{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 0 14px; font-size:15px; color:rgba(19,23,39,.55);
}
.mp-articles .w2-meta__dot{
  width:4px; height:4px; border-radius:50%; background:rgba(19,23,39,.28);
}
.mp-articles .w2-meta__read{ color:rgba(19,23,39,.55); }
@media (max-width: 767px){ .mp-articles .w2-meta{ font-size:14px; gap:10px; } }

/* Рекламная врезка Директа под статьёй. Реклама не крутится, блок приходит пустым,
   а собственные отступы секции оставляли на странице 200 px пустоты между текстом
   и формой заявки. Отступы снимаем: появится объявление — оно задаст высоту само. */
.mp-articles + .mp-seo{ padding:0 !important; margin:0 !important; }
.mp-articles + .mp-seo .container{ padding-top:0; padding-bottom:0; }