/* Start:/local/templates/primedoc/components/bitrix/breadcrumb/breadcrumbs/style.css?1791976952558*/
/* Хлебные крошки
--------------------------------------------------------------------------- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 1.5rem 0 1.75rem;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.breadcrumbs__link {
    color: var(--color-muted);
    transition: color var(--transition);
}
.breadcrumbs__link:hover { color: var(--color-accent); }

.breadcrumbs__sep { color: var(--color-line); }

.breadcrumbs__item--current { color: var(--color-dark); }

/* End */


/* Start:/local/templates/primedoc/components/bitrix/news/clinics/bitrix/news.detail/.default/style.css?17919769528520*/
/* Детальная клиники. Префикс cl-, локальный токен — как на детальной врача (dr-):
   радиуса карточек в общих переменных нет; тон плашек — общий --color-tint. */

.cl {
    --cl-card: 1.25rem;
    padding-bottom: 3rem;
}

.cl-hero {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-bottom: 2.5rem;
}

.cl-hero__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--cl-card);
    overflow: hidden;
    background: var(--color-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.cl-hero__no-photo { color: #c9dbe2; }

.cl-hero__type {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .3125rem .875rem;
    border-radius: 999px;
    background: var(--color-tint);
    color: var(--color-accent-dark);
    font-size: .875rem;
}

.cl-hero__title { margin: 0 0 .75rem; color: var(--color-dark); }

.cl-hero__address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 1rem;
    color: var(--color-text);
}

.cl-hero__address svg { flex-shrink: 0; margin-top: 3px; color: var(--color-accent); }

.cl-hero__specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }

.cl-chip {
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--color-light-grey);
    color: var(--color-dark-grey);
    font-size: .875rem;
}

/* Тип и направления — ссылки на посадочные клиник своего города */
.cl-hero__type--link,
.cl-chip--link {
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.cl-hero__type--link:hover,
.cl-chip--link:hover { background: var(--color-accent); color: var(--white); }

.cl-hero__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.cl-hero__phone {
    color: var(--color-dark);
    font-size: 1.375rem;
    font-weight: 600;
    text-decoration: none;
}

.cl-hero__phone:hover { color: var(--color-accent-dark); }

.cl-hero__site { color: var(--color-accent-dark); text-decoration: none; }


.cl-block { margin-bottom: 2rem; }

.cl-block__title { margin: 0 0 1rem; color: var(--color-dark); font-size: var(--fs-card); }

.cl-block__subtitle { margin: 1.25rem 0 .5rem; color: var(--color-dark); font-size: var(--fs-base); }

.cl-text { color: var(--color-text); line-height: 1.6; }

.cl-text p { margin: 0 0 .75rem; }

.cl-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.cl-gallery__item { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }

.cl-gallery__item img { width: 100%; height: 100%; object-fit: cover; }






.cl-worktime { margin: 0; }

.cl-worktime__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: .375rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--fs-sm);
}

.cl-worktime__row:last-child { border-bottom: 0; }

.cl-worktime dt { color: var(--color-muted); }

.cl-worktime dd { margin: 0; color: var(--color-dark); }

.cl-cond { margin-bottom: .875rem; }

.cl-cond:last-child { margin-bottom: 0; }

.cl-cond__label { display: block; margin-bottom: .375rem; color: var(--color-muted); font-size: .875rem; }

.cl-cond__values { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1100px) {
    .cl-hero { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-hero__phone { font-size: 1.125rem; }
}

/* Навигация по блокам: те же якоря, что и на детальной врача, только строкой под первым экраном */
/* Раскладка карточки: слева липкое меню по блокам, справа сами блоки (как у врача) */
.cl-layout {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 2.75rem;
    align-items: start;
    margin-bottom: 3rem;
}

/* Обеим колонкам min-width: 0 — у grid-элемента он auto, и длинное название растягивало сетку */
.cl-layout__body { min-width: 0; }

.cl-side {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cl-side__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.875rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--white);
}

.cl-side__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--color-tint);
    color: var(--color-accent-dark);
}

.cl-side__photo img { width: 100%; height: 100%; object-fit: cover; }

.cl-side__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cl-side__name {
    color: var(--color-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.25;
}

.cl-side__meta { color: var(--color-muted); font-size: 0.75rem; }

.cl-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.625rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--white);
}

.cl-nav__item {
    padding: 0.6875rem 1rem;
    border-radius: 0.875rem;
    color: var(--color-text);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.cl-nav__item:hover { background: var(--color-tint); color: var(--color-accent-dark); }

.cl-nav__item.is-active {
    background: var(--color-dark);
    color: var(--white);
    font-weight: 500;
}

/* На планшете и телефоне колонка схлопывается: меню снова горизонтальная лента,
   карточка клиники не нужна — она и так в первом экране */
@media (max-width: 1100px) {
    .cl-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cl-side { position: static; margin-bottom: 1.5rem; }
    .cl-side__card { display: none; }

    .cl-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 0 0 0.75rem;
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0;
        scrollbar-width: none;
    }

    .cl-nav::-webkit-scrollbar { display: none; }

    .cl-nav__item {
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        border-radius: 999px;
        background: var(--color-light-grey);
    }
}

/* Короткие факты (режим работы, условия, лицензия) — полосой, а не боковой колонкой */
.cl-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 2.5rem;
}

/* Медиазапрос блока — сразу под его базовым правилом: стоя выше по файлу, он проигрывал
   правилу равного веса, и на планшете оставалось три колонки вместо двух. */
@media (max-width: 1100px) {
    .cl-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cl-info__card {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--cl-card);
    background: var(--white);
}

.cl-info__title { margin: 0 0 0.875rem; color: var(--color-dark); font-size: var(--fs-base); }

.cl-info__text { margin: 0 0 0.5rem; color: var(--color-text); font-size: var(--fs-sm); }

.cl-info__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0.25rem;
    color: var(--color-accent-dark);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.cl-info__link:hover { color: var(--color-accent); }

/* Текст в одну колонку легко расползается на широком экране — держим комфортную строку */
.cl-text { max-width: 70ch; }

@media (max-width: 640px) {
    .cl-info { grid-template-columns: 1fr; }
}

/* End */


/* Start:/local/templates/primedoc/components/bitrix/system.pagenavigation/.default/style.css?17919769521494*/
/* Постраничная навигация сайта: номера и стрелки — круглые кнопки, как стрелки слайдеров */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 2.5rem 0 0;
}

.pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 .75rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--white);
    color: var(--color-dark);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

a.pager__item:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--white);
}

a.pager__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.pager__item--current {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--white);
}

.pager__item--arrow { padding: 0; }

.pager__item--dots { border-color: transparent; background: none; color: var(--color-muted); }

.pager__all {
    margin-left: .5rem;
    color: var(--color-accent-dark);
    font-size: var(--fs-sm);
}

@media (max-width: 560px) {
    .pager { gap: .375rem; margin-top: 2rem; }
    .pager__item { padding: 0 .5rem; }
}

/* End */


/* Start:/local/templates/primedoc/components/bitrix/news.list/doctors_slider/style.css?17919769524423*/
/* Лента врачей: шапка блока и лента. Карточка врача (.doctor-card) общая с сеткой
   news.list/doctors — её стили в styles.css шаблона сайта. Отступы секции задаёт страница
   классом из параметра BLOCK_CLASS. */

/* Шапка: заголовок слева, стрелки ленты справа; кнопка «Все специалисты» — под лентой */
.doctors-slider__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 760px) {
    /* Стрелки уходят строкой под заголовок: в одной строке длинный заголовок сжимался */
    .doctors-slider__head { flex-wrap: wrap; }
    .doctors-slider__heading { flex: 1 1 100%; }
}

.doctors-slider__eyebrow {
    display: block;
    margin-bottom: .625rem;
    color: var(--color-accent-dark);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Размер, жирность и цвет — от общего класса .h2 (template_styles.css), здесь только отступ.
   Два класса намеренно: у .h2 свой нижний отступ, и правило равного веса проигрывало ему
   по порядку подключения файлов. */
.doctors-slider__heading .doctors-slider__title { margin: 0; }

.doctors-slider__nav {
    display: flex;
    flex-shrink: 0;
    gap: .75rem;
}

.doctors-slider__nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--white);
    color: var(--color-dark);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.doctors-slider__nav button:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--white);
}

.doctors-slider__nav button[disabled] {
    opacity: .4;
    cursor: default;
}

.doctors-slider__nav button[disabled]:hover {
    border-color: var(--color-line);
    background: var(--white);
    color: var(--color-dark);
}

/* Лента. До запуска плагина — три колонки, чтобы блок не разваливался */
.doctors-slider__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* После запуска: зазор задаёт плагин (gutter) — css-gap он в расчёт ширины не берёт,
   и слайды переставали влезать; align-items тянет слайды до одной высоты */
.doctors-slider__track.tns-slider {
    display: flex;
    align-items: stretch;
    grid-template-columns: none;
    gap: 0;
}

/* Слайд-обёртку тянет align-self, карточка заполняет её (height: 100% в её базовом правиле) */
.doctors-slider__track.tns-slider .doctors-slider__slide { align-self: stretch; }

/* Фото — пропорцией, а не высотой: правило сетки для телефона (150px под две колонки)
   в ленте с одной карточкой на экран давало узкую полосу с обрезанным лицом */
.doctors-slider .doctor-card__photo {
    height: auto;
    aspect-ratio: 11 / 10;
}

/* Растянутый лентой слайд не пересчитывает свои строки, поэтому текстовой части задаём
   минимальную высоту: два ряда имени + строка специализаций. Так строка города и отзывов
   стоит на одном уровне во всех карточках ленты. */
.doctors-slider .doctor-card__body { min-height: 4.5rem; }

/* Кнопка «Все специалисты» под лентой; на телефоне — во всю ширину */
.doctors-slider__more { margin-top: 2rem; }

@media (max-width: 560px) {
    .doctors-slider__all { width: 100%; min-height: 2.75rem; }
}

/* End */
/* /local/templates/primedoc/components/bitrix/breadcrumb/breadcrumbs/style.css?1791976952558 */
/* /local/templates/primedoc/components/bitrix/news/clinics/bitrix/news.detail/.default/style.css?17919769528520 */
/* /local/templates/primedoc/components/bitrix/system.pagenavigation/.default/style.css?17919769521494 */
/* /local/templates/primedoc/components/bitrix/news.list/doctors_slider/style.css?17919769524423 */