/* Start:/local/templates/medcentrservis/css/breadcrumbs-bottom.css?17897197302009*/
/* WHY: «карточный» вид хлебных крошек внизу страницы — единый стиль для услуг и анализов.
 * Перенесено из template_detail_analyze/style.css в общий ассет шаблона, чтобы один и тот же
 * визуальный паттерн (.breadcrumbs-bottom) применялся на всех страницах нового шаблона.
 */
.breadcrumbs-bottom {
	margin-top: 32px!important;
	padding: 16px 20px;
	background: #f9f8fb;
	border-radius: 12px;
}
.breadcrumbs-bottom .breadcrumbs {
	display: block;
	padding: 0;
}
.breadcrumbs-bottom .breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	overflow-x: visible;
	white-space: normal;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 4px 6px;
}
.breadcrumbs-bottom .breadcrumbs ul li {
	flex-shrink: 1;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	font-size: 13px;
	line-height: 18px;
	color: #9a91ad;
	gap: 6px;
	display: inline-block;
}
.breadcrumbs-bottom .breadcrumbs ul li > a {
	flex-shrink: 1;
	white-space: normal;
	color: #9a91ad;
}
.breadcrumbs-bottom .breadcrumbs ul li > a:hover {
	color: #7765e3;
}
.breadcrumbs-bottom .breadcrumbs ul li > span {
	flex-shrink: 1;
	white-space: normal;
	color: #c4bfd0;
}
.breadcrumbs-bottom .breadcrumbs ul li:not(:last-child):after {
	color: #d7d3de;
}

@media (max-width: 1023px) {
	.breadcrumbs-bottom {
		margin-top: 16px!important;
	}
}
/* WHY: на страницах нового шаблона (клиники, лендинги, /contact/, /doctors/, карточка врача)
 * плашка лежит внутри .container, а следом идёт .stats с датой обновления — без отступа слипались */
/* «~», а не «+»: на карточке врача между плашкой и датой лежит скрытый спрайт .svgs */
.container:has(> .breadcrumbs-bottom) ~ .stats {
	margin-top: 24px;
}

/* End */


/* Start:/local/templates/medcentrservis/css/compact-doctors.css?17797202748024*/
/**
 * @file compact-doctors.css
 * @description Стили для облегчённого списка врачей на страницах услуг.
 *              Подключается через $APPLICATION->SetAdditionalCss() в service/index_new.php,
 *              section_new.php, view_new.php при включённом свойстве COMPACT_DOCTORS.
 *
 *              Облегчённая карточка (info + types) внутри Swiper-слайдера
 *              `.popular-doctors__slider[data-slider="leading-doctors"]`.
 *              Контейнер слайдера и swiper-slide стилизуются базовым style.css,
 *              этот файл переопределяет только мобильный layout карточки
 *              `.doctor-card--compact` независимо от viewport.
 *
 * @created 2026-05-20
 */

/* ============================================================
 * COMPACT DOCTORS SLIDER — мобильный override + CLS prevention.
 * Используется готовый Swiper-слайдер blog-cards, который на desktop (≥1024px)
 * читает `slidesPerView = t.el.dataset.columnsNum` (выставляется в PHP-шаблоне
 * как 1/2/3/4 в зависимости от количества врачей).
 *
 * Базовый CSS `.blog-card-list .swiper-slide { width: 317px; max-width: calc(100vw - 32px) }`
 * на мобильном (<1024) показывает ~1.5 карточки с peek-эффектом. Перебиваем
 * на 100% width, чтобы было ровно 1 в строку (как требует UX).
 *
 * На desktop (≥1024) Swiper выставляет inline `style="width: ..."` через slidesPerView,
 * CSS-правила для width не нужны (и были бы проигнорированы из-за inline-styles).
 * ============================================================ */

/* WHY: до Swiper-init (chunk Hs() грузится lazy) карточки рендерятся как обычные
 * block-children, full-width — потом Swiper трансформирует DOM и layout прыгает (CLS).
 * Селектор `:not(.swiper-initialized)` matches до того, как Swiper добавит свой класс.
 * Делаем horizontal-flex с тем же кол-вом колонок, как будет после init — layout
 * стабилен с первой отрисовки. */
.compact-doctors-slider:not(.swiper-initialized) {
	display: flex;
	flex-direction: row;
	gap: 16px;
	overflow: hidden;
}

.compact-doctors-slider:not(.swiper-initialized) > .doctor-card--compact {
	flex: 0 0 auto;
}

.compact-doctors-slider[data-columns-num="1"]:not(.swiper-initialized) > .doctor-card--compact {
	width: 100%;
	max-width: 360px;
}
.compact-doctors-slider[data-columns-num="2"]:not(.swiper-initialized) > .doctor-card--compact {
	width: calc((100% - 16px) / 2);
}
.compact-doctors-slider[data-columns-num="3"]:not(.swiper-initialized) > .doctor-card--compact {
	width: calc((100% - 32px) / 3);
}
.compact-doctors-slider[data-columns-num="4"]:not(.swiper-initialized) > .doctor-card--compact {
	width: calc((100% - 48px) / 4);
}

/* WHY: на мобильном (<1024) — 1 карточка в строку, но НЕ full-width.
 * Оставляем 40px справа под peek-эффект (виден край следующей карточки),
 * чтобы пользователь понимал, что слайдер можно листать. Без peek карточка
 * выглядит как единственная — UX-провал. */
@media (max-width: 1023px) {
	.compact-doctors-slider:not(.swiper-initialized) > .doctor-card--compact {
		width: calc(100% - 40px);
		max-width: calc(100% - 40px);
		flex: 0 0 calc(100% - 40px);
	}
	.compact-doctors-slider .swiper-slide {
		width: calc(100% - 40px);
		max-width: calc(100% - 40px);
	}
}

/* WHY: Swiper по умолчанию задаёт slide высоту по контенту → карточки в ряду
 * разной высоты. `align-items: stretch` на wrapper + `height: auto` + `display: flex`
 * на slide-е плюс `flex-grow: 1` на карточке заставляют все карточки в ряду
 * растянуться до высоты самой высокой. */
.compact-doctors-slider .swiper-wrapper {
	align-items: stretch;
}

.compact-doctors-slider .swiper-slide {
	height: auto;
	display: flex;
}

.compact-doctors-slider .swiper-slide > .doctor-card--compact {
	flex-grow: 1;
}

/* ============================================================
 * COMPACT CARD — форс мобильного layout на всех брейкпоинтах.
 * Дублирует правила из @media(max-width:1023px), но без media-query.
 * ============================================================ */
.doctor-card--compact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 15px 16px;
	width: 100%;
	grid-template-columns: 1fr;
}

/* WHY: десктопный .doctor-card имеет :before-разделитель в grid-cell 1/3 × 2/3 —
 * в компактном layout это разделитель не нужен. */
.doctor-card--compact:before {
	content: none;
}

/* WHY: margin-bottom:auto прижимает info к верху, а __types — ко дну.
 * Высоты swiper-slide выравнены через `.popular-doctors .swiper-slide { height: 100% }`,
 * и без этого правила info "плывёт" по центру в высоких слайдах. */
.doctor-card--compact .doctor-card__info {
	grid-template-columns: 84px 1fr;
	gap: 0 16px;
	align-items: start;
	margin-bottom: auto;
}

.doctor-card--compact .doctor-card__info picture {
	grid-column: 1/2;
	grid-row: 2/6;
	width: 84px;
	height: 84px;
}

.doctor-card--compact .doctor-card__info > .strong {
	grid-column: 1/3;
	grid-row: 1/2;
	margin-bottom: 12px;
}

.doctor-card--compact .doctor-card__info .reviews-widget-wrapper {
	grid-column: 1/3;
	grid-row: 6/7;
	margin-top: 12px;
}

.doctor-card--compact .doctor-card__specialities {
	grid-column: 2/3;
	grid-row: 2/3;
	margin-bottom: 8px;
}

.doctor-card--compact .doctor-card__stats {
	grid-column: 2/3;
	grid-row: 3/5;
	gap: 8px 6px;
}

.doctor-card--compact .doctor-card__metro {
	grid-column: 1/3;
	grid-row: 7/8;
	margin-top: 12px;
}

.doctor-card--compact .doctor-card__types {
	padding-top: 15px;
	padding-left: 0;
	border-top: 1px solid rgba(18, 6, 30, .06);
}

/* WHY: эталон с продакшна — 2 chip-а side-by-side в одну строку, по ~50% ширины
 * (СБЕР ЗДОРОВЬЕ + ПРОДОКТОРОВ). Используем `flex: 1 1 0` + `min-width: 0` на li
 * и chip — оба гарантированно делят ширину ul пополам и сжимаются ниже
 * min-content (SVG-логотип 7em). */
.doctor-card--compact .doctor-card__types ul {
	flex-wrap: nowrap;
	gap: 8px;
}

.doctor-card--compact .doctor-card__types ul li {
	flex: 1 1 0;
	min-width: 0;
	max-width: 200px;
}

.doctor-card--compact .review-tag {
	flex: 1 1 0;
	min-width: 0;
	max-width: 200px;
	gap: 12px;
	height: 40px;
	padding: 10px;
}

/* WHY: SVG-лого СБЕР/ПРОДОКТОРОВ — DIRECT child .review-tag, имеют `width: 7em`
 * (~98px). При сжатии chip-а ниже 100-110px фиксированный SVG выпрыгивает за
 * пределы родителя. `max-width: 100%` позволяет лого масштабироваться вместе с chip-ом.
 * ВАЖНО: использовать `>` (direct child) — иначе правило цепляет вложенную
 * звезду рейтинга `.strong > svg[data-icon="star-plus-half"]` и она сжимается. */
.doctor-card--compact .review-tag > svg {
	max-width: 100%;
	flex-shrink: 1;
	min-width: 0;
}


/* End */
/* /local/templates/medcentrservis/css/breadcrumbs-bottom.css?17897197302009 */
/* /local/templates/medcentrservis/css/compact-doctors.css?17797202748024 */