

/* Start:/local/templates/main/components/bitrix/news/articles/bitrix/news.detail/.default/style.css?178889277220076*/
div.news-detail {
  word-wrap: break-word;
}
div.news-detail img.detail_picture {
  float: left;
  margin: 0 8px 6px 1px;
}
.news-date-time {
  color: #486daa;
}
.prev_next_div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 100px;
}
.prev_next_div > div {
  flex: 1 1 30%;
  display: flex;
  justify-content: center;
}
.prev_next_div a {
  text-decoration: unset;
  color: #203f51;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}
.prev_next_div a:hover {
  color: #001220;
}
.prev_arrow,
.next_arrow {
  font-size: 20px;
  transform: scaleY(2);
  padding: 0px 15px;
}
.main-content {
  background: #fff !important;
}

/* Общий стиль обрезает всё лишнее правилом main { overflow: hidden }, но у статьи
   слева «липкое» оглавление (.article-detail__nav-sticky), а position: sticky не
   работает внутри родителя с overflow: hidden. Поэтому обрезку тут отключают.

   08.09.2026: из-за этого страница уезжала вбок. Карусель врачей внизу статьи —
   17 карточек по 333 px в ряд — не обрезал никто, и документ становился 5 682 px
   шириной на экране 375 px (19 655 px на экране 1440). Справа от текста было
   5 307 px пустоты, читатель на телефоне уезжал в чистую белизну.

   Лечится не возвратом hidden (он снова сломает оглавление), а overflow-x: clip:
   он обрезает вбок, но не создаёт прокручиваемую область и прилипание не трогает.
   Проверено замером на живой странице: hidden — ширина 1 425, оглавление сломано;
   clip — ширина 1 425, оглавление работает.
   Где clip не поддержан (Safari до 16-й), правило игнорируется — как было. */
main {
  overflow: visible !important;
  overflow-x: clip !important;
}

.article-detail a {
  text-decoration: none;
}
.article-detail .article.--detail {
  margin-top: 2.5rem;
  height: 33rem;
  border-radius: 1.5rem;
  border: 2px solid var(--white, #effafc);
}

.article-detail__content {
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.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;
}

@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;
  }
}
.article-detail__nav {
  /* max-width: 25%; */
  max-width: 28%;
  /* max-width: 25.1875rem; */
}

.article-detail__nav-title {
  margin-bottom: 1rem;
  color: #000;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 150%;
}

.article-detail__nav-sticky {
  position: sticky;
  top: 6rem;
}

.article-detail__nav-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 16, 31, 0.15);
}

.article-detail__nav-link {
  display: block;
  padding: 1rem 0;
  color: #3c7b8f;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 150%;
}

.article-detail__nav-link.-active {
  /* было 0.5 — 3.62:1 при норме 4.5, замерено 18.08.2026 */
  color: rgba(0, 16, 31, 0.7);
}

.article-detail .page-list__content.pdg.--min {
  padding: 0;
  max-width: 70%;
}

.article-detail .page-list__content ul {
  margin: 0.5rem 0;
}

.article-detail .page-list__content p,
.article-detail .page-list__content li {
  color: #00101f;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 150%;
}

.article-detail .page-list__content h3,
.article-detail .page-list__content h2 {
  margin-bottom: 0.5rem;
  color: rgba(0, 16, 31, 0.7);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 150%;
}

.article-detail .page-list__content h3:not(:first-child),
.article-detail .page-list__content h2:not(:first-child) {
  margin-top: 3rem;
}

.article-detail .page-list__content img {
  display: block;
  margin: 2rem auto;
  max-height: 30rem;
  max-width: 100%;
  /* 🔴 20.08.2026. Ограничения по высоте и ширине без сброса собственных
     размеров картинки НЕ сохраняют пропорции. Если у <img> в контенте
     прописаны width/height (а редактор их проставляет), браузер берёт ширину
     из атрибута, высоту из max-height - и снимок растягивает поперёк. На
     историях пациентов так «расплылся» снимок 864x1152: показывался 804x420,
     искажение +155%. Эти две строки заставляют браузер считать вторую
     сторону самому. */
  width: auto;
  height: auto;
}

@media screen and (max-width: 640px) {
  .article-detail h1 {
    text-align: center;
  }

  .article-detail .article.--detail {
    height: 13.125rem;
    border: none;
  }

  .article-detail__content {
    flex-direction: column;
    gap: 2rem;
  }

  .article-detail__nav,
  .article-detail .page-list__content.pdg.--min {
    max-width: 100%;
  }

  .article-detail__nav {
    text-align: center;
  }

  .article-detail__nav-title {
    color: #00101fb2;
  }

  .article-detail .page-list__content img {
    width: 100%;
    max-height: unset;
    border-radius: 1.5rem;
    border: 2px solid #effafc;
    object-fit: cover;
  }
}

.article-detail .page-list__header {
  position: relative;
}

.article-detail__info {
  border-radius: 1rem;
  background: #FFF;
  padding: 1.5rem 1.75rem;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  bottom: 3.25rem;
  right: 3.125rem;
}
.article-detail__item_rating {
  padding-right: 1.25rem;
  position: relative;
}
.article-detail__item_rating::after {
  content: "";
  width: 0.06338rem;
  height: 100%;
  border-radius: 0.06338rem;
  opacity: 0.3;
  background: #3C7B8F;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.article-detail__item_time {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  position: relative;
}
.article-detail__item_time::after {
  content: "";
  width: 0.06338rem;
  height: 100%;
  border-radius: 0.06338rem;
  opacity: 0.3;
  background: #3C7B8F;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.article-detail__item_views {
  padding-left: 1.25rem;
}
.article-detail__title {
  color: #00101F;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 0.25rem;
}
.article-detail__details {
  color: #3C7B8F;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 140%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.article-detail__details::before {
  content: "";
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  display: inline-block;
  width: 1rem;
  height: 1rem;
}
.article-detail__details_rating::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><path d="M7.68323 1.58502C7.71245 1.526 7.75758 1.47631 7.81353 1.44157C7.86949 1.40684 7.93404 1.38843 7.9999 1.38843C8.06576 1.38843 8.13031 1.40684 8.18626 1.44157C8.24222 1.47631 8.28735 1.526 8.31657 1.58502L9.85657 4.70436C9.95802 4.90967 10.1078 5.0873 10.293 5.22199C10.4782 5.35669 10.6933 5.44443 10.9199 5.47769L14.3639 5.98169C14.4292 5.99115 14.4905 6.01867 14.5409 6.06116C14.5913 6.10364 14.6289 6.15939 14.6492 6.22209C14.6696 6.2848 14.6721 6.35196 14.6563 6.41598C14.6405 6.48 14.6071 6.53832 14.5599 6.58436L12.0692 9.00969C11.905 9.16976 11.7821 9.36735 11.7111 9.58544C11.6402 9.80354 11.6233 10.0356 11.6619 10.2617L12.2499 13.6884C12.2614 13.7536 12.2544 13.8207 12.2296 13.8821C12.2048 13.9436 12.1632 13.9968 12.1096 14.0357C12.056 14.0746 11.9926 14.0977 11.9265 14.1023C11.8604 14.1069 11.7944 14.0928 11.7359 14.0617L8.65723 12.443C8.45438 12.3365 8.22869 12.2809 7.99957 12.2809C7.77045 12.2809 7.54475 12.3365 7.3419 12.443L4.2639 14.0617C4.20545 14.0926 4.1395 14.1065 4.07353 14.1019C4.00757 14.0972 3.94424 14.0741 3.89076 14.0352C3.83728 13.9963 3.79579 13.9431 3.771 13.8818C3.74622 13.8205 3.73914 13.7535 3.75056 13.6884L4.3379 10.2624C4.3767 10.0362 4.35989 9.80396 4.28892 9.58572C4.21796 9.36749 4.09497 9.16979 3.93056 9.00969L1.4399 6.58502C1.39229 6.53905 1.35856 6.48062 1.34254 6.41641C1.32652 6.35219 1.32886 6.28477 1.34928 6.22182C1.36971 6.15887 1.40741 6.10292 1.45808 6.06035C1.50876 6.01777 1.57037 5.99029 1.6359 5.98102L5.07923 5.47769C5.30607 5.44469 5.52149 5.35706 5.70695 5.22235C5.89242 5.08763 6.04237 4.90987 6.1439 4.70436L7.68323 1.58502Z" stroke="%233C7B8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.article-detail__details_time::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8.01359 4.05485V8.05485H11.0136M14.6803 8.05485C14.6803 11.7367 11.6955 14.7215 8.01359 14.7215C4.33169 14.7215 1.34692 11.7367 1.34692 8.05485C1.34692 4.37295 4.33169 1.38818 8.01359 1.38818C11.6955 1.38818 14.6803 4.37295 14.6803 8.05485Z" stroke="%233C7B8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.article-detail__details_views::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1.40178 6.28717C1.34622 6.13749 1.34622 5.97285 1.40178 5.82317C1.94291 4.51107 2.86145 3.3892 4.04096 2.59977C5.22046 1.81034 6.60781 1.38892 8.02711 1.38892C9.44642 1.38892 10.8338 1.81034 12.0133 2.59977C13.1928 3.3892 14.1113 4.51107 14.6524 5.82317C14.708 5.97285 14.708 6.13749 14.6524 6.28717C14.1113 7.59927 13.1928 8.72115 12.0133 9.51057C10.8338 10.3 9.44642 10.7214 8.02711 10.7214C6.60781 10.7214 5.22046 10.3 4.04096 9.51057C2.86145 8.72115 1.94291 7.59927 1.40178 6.28717Z" stroke="%233C7B8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.02711 8.05517C9.13168 8.05517 10.0271 7.15974 10.0271 6.05517C10.0271 4.9506 9.13168 4.05517 8.02711 4.05517C6.92254 4.05517 6.02711 4.9506 6.02711 6.05517C6.02711 7.15974 6.92254 8.05517 8.02711 8.05517Z" stroke="%233C7B8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.related-articles {
  max-width: 25.1875rem;
  /* overflow: hidden; */
  margin-top: 2rem;
}
.related-articles .swiper-button-disabled {
  opacity: 0.5 !important;
}
.related-articles__slide {
  opacity: 0 !important;
  transition: all ease .24s;
  pointer-events: none;
  /* display: none !important; */
}
.article-detail .related-articles .swiper-slide-active {
  opacity: 1 !important;
  transition: all ease .24s;
  pointer-events: auto;
  /* display: block !important; */
}
.related-articles__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.06rem;
  flex-wrap: wrap;
}
.related-articles__title {
  color: #00101F;
  font-size: 2rem;
  font-weight: 400;
  line-height: 150%;
}
.related-articles__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.related-articles__nav-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 1.5rem;
  padding: 0.375rem 0.5625rem;
  background-color: #fff;
  cursor: pointer;
}
.related-articles__nav-btn::after {
  content: "";
  height: 0.75rem;
  flex: 1 0 0;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  stroke-width: 2px;
  stroke: #9FECFF;
}
.related-articles__nav-btn_left::after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M7 13L1 7L7 1" stroke="url(%23paint0_linear_32_4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_32_4" x1="1" y1="7" x2="7" y2="7" gradientUnits="userSpaceOnUse"><stop stop-color="%239FECFF"/><stop offset="1" stop-color="%235DC3EB"/></linearGradient></defs></svg>');
}
.related-articles__nav-btn_right::after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 13L7 7L1 1" stroke="url(%23paint0_linear_32_2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_32_2" x1="7" y1="7" x2="1" y2="7" gradientUnits="userSpaceOnUse"><stop stop-color="%239FECFF"/><stop offset="1" stop-color="%235DC3EB"/></linearGradient></defs></svg>');
}
.related-articles__article {
  border-radius: 1rem;
  background: #FFF;
  box-shadow: 0px 4px 35px 0px rgba(32, 63, 81, 0.1);
  padding: 1rem 1rem 1.5rem 1rem;
}
.related-articles__article-img {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  height: 9.6875rem;
  border: 2px solid #EFFAFC;
  margin-bottom: 1rem;
}
.related-articles__article-img img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.related-articles__article-category {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 6.25rem;
  background: #FFF;
  color: rgba(0, 16, 31, 0.7);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 150%;
}
.related-articles__article-title {
  margin-bottom: 0.75rem;
}
.related-articles__article-title a {
  color: #3C7B8F;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 150%;
}
.related-articles__article-text {
  color: #00101F;
  font-size: 1rem;
  font-weight: 300;
  line-height: 150%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

@media (max-width: 640px){
  .article-detail__info {
    position: static;
    padding: 0;
    margin: 0 0 2rem 0;
  }
  .article-detail__item_rating {
    padding-right: 0.8rem;
  }
  .article-detail__item_time {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }
  .article-detail__item_views {
    padding-left: 0.8rem;
  }
  .related-articles {
    max-width: 100%;
    overflow: hidden;
  }
  /* .related-articles__slide {
    display: none !important;
  }
  .article-detail .related-articles .swiper-slide-active {
    display: block !important;
  } */
}
/* End */
/* /local/templates/main/components/bitrix/news/articles/bitrix/news.detail/.default/style.css?178889277220076 */
