/* Start:/local/templates/main/components/bitrix/catalog/services/bitrix/catalog.section/.default/style.css?17879917326154*/
/* Блок «Если у вас похожая ситуация» на страницах услуг.
   Оформление скопировано 29.08.2026 из шаблона статей
   (news/articles/.../news.detail/.default/style.css) - там оно и живёт;
   у страниц услуг своего файла стилей не было, и без этой копии блок
   вышел бы неоформленным. */

.article-banner{
  max-width: 64.063rem;
  width: 100%;
  border-radius: 1rem;
  padding: 2.25rem;
  display: flex;
  /* По верху, а не по центру: заголовок висел посередине пустой половины,
     а весь текст был свален во вторую — блок читался как перекошенный. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  /* Фон взят у подвала (#203F51), а не у шапки: на странице статьи шапки не
     видно, зато подвал прямо под блоком — два тёмных пятна разного оттенка
     цеплялись друг за друга. Решение Андрея 27.08.2026. */
  background-color: #203F51;
  /* Отступ сверху был .5rem — блок прилипал к последнему абзацу статьи и
     читался как её продолжение. 3rem — тот же шаг, которым в этом шаблоне
     отделяются заголовки h2 внутри текста, так что ритм страницы не ломается. */
  margin: 3rem 0 .5rem 0;
}

/* Левая колонка. Раньше в ней был только заголовок, и половина блока пустовала. */
.article-banner__lead{
  flex: 1 1 42%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.article-banner__title{
  color: white;
  font-size: 1.5rem;
  font-weight: 500;
  width: 100%;
}

.article-banner__lead-text{
  color: #DCE7EF;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 155%;
}

.article-banner__info-block{
  flex: 1 1 52%;
  max-width: 30rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* 🔴 Было .875rem — это 12,25 точки при базовом шрифте сайта 14. Абзац статьи
   рядом набран 19,6 точками, то есть человек шёл по крупному тексту и упирался
   в самое важное, набранное вдвое мельче. Замерено на живой странице 27.08.2026.
   Аудитория часто немолода и читает с телефона: мелкий шрифт здесь работает
   против всего смысла блока. */
.article-banner__info-block__text{
    font-size: 1.25rem;
    font-weight: 400;
    color: white;
    line-height: 150%;
    letter-spacing: 0%;
}

.article-banner__info-block a{
  font-size: 1.5rem;
  font-weight: 700;
  color: #50DDFE;
}

/* Главное действие в блоке — написать в МАКС. Оно кнопкой, потому что
   ссылка того же цвета, что и телефон, читалась бы как второй телефон.
   Высота 44px: базовый шрифт сайта 14px, и рассчитанные в rem цели касания
   выходят меньше пальца — это уже ловили на форме пациента 10.08.2026. */
.article-banner__action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem 1.5rem;
  border-radius: .5rem;
  background-color: #50DDFE;
  color: #00101F !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  text-decoration: none;
  text-align: center;
}

.article-banner__action:hover{
  background-color: #7BE7FE;
}

/* Ссылки на переписку идут внутри строки, поэтому им нельзя наследовать размер
   от .article-banner__info-block a — там 1.5rem под бывший телефон. */
.article-banner__inline{
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #50DDFE !important;
  text-decoration: underline;
}

/* Про неотложную помощь — тихо и мелко: это предупреждение, а не призыв. */
.article-banner__note{
  font-size: 1.125rem;
  font-weight: 400;
  color: #B7C4CF;
  line-height: 150%;
}

.article-banner__info-block a:hover{
  color: #4CBDE9;
}

/* Список «что можно сделать сейчас».
   Свои размер и цвет здесь обязательны: правило
   «.article-detail .page-list__content li» задаёт тексту статьи 1.4rem
   тёмным цветом, а баннер стоит внутри того же блока и фон у него тёмный —
   без этих строк пункты были бы тёмным по тёмному, то есть невидимыми. */
.article-detail .page-list__content .article-banner__list{
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
}

.article-detail .page-list__content .article-banner__list li{
  margin: 0 0 .375rem 0;
  color: #E6EEF5;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 150%;
  list-style: disc;
}

.article-detail .page-list__content .article-banner__list li:last-child{
  margin-bottom: 0;
}

  .article-banner{
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
    gap: .5rem;
  }

  .article-banner__lead,
  .article-banner__info-block{
    max-width: 100%;
    flex: 1 1 auto;
  }

@media (max-width:768px) {

  .article-banner{
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
    gap: .5rem;
  }

  .article-banner__lead,
  .article-banner__info-block{
    max-width: 100%;
    flex: 1 1 auto;
  }
}

/* End */
/* /local/templates/main/components/bitrix/catalog/services/bitrix/catalog.section/.default/style.css?17879917326154 */