/*
 * Проектные правки стилей поверх эталонной вёрстки.
 *
 * ПРАВИЛО: `css/main.css` — точная копия файла из репозитория вёрстки
 * (git@gitlab.seocomplex.ru:layout/molodeu.ru, `css/main.css`), его не правим вообще:
 * файл периодически обновляют оттуда целиком, и любая наша строка внутри превращается
 * в конфликт или молча теряется при следующем обновлении. Всё, чего нет в вёрстке или
 * что нужно переопределить, живёт здесь.
 *
 * Подключается ПОСЛЕ main.css (см. header.php), поэтому переопределения работают без
 * повышения специфичности и без !important.
 *
 * Рядом лежат ещё два файла с той же логикой, но каждый под свою узкую тему:
 * `legacy-banner.css` — баннер партнёрской рекламы внутри текста статьи,
 * `slider-fallback.css` — страховка вёрстки, если скрипт слайдера не поднялся.
 * Сюда кладём остальное: новые блоки, которых в вёрстке нет, и точечные переопределения.
 */

/* ------------------------------------------------------------------------------------
 * Заголовок страницы
 * ---------------------------------------------------------------------------------- */

/* Подпись под заголовком шапка шаблона выводит всегда — проверить свойство в PHP нельзя,
   оно ставится уже после вывода шапки. На странице без подписи (404, карта сайта) пустой
   div всё равно приносил свой mt-3, и при align-content: center заголовок уезжал вверх
   относительно вёрстки. display: none убирает и отступ тоже. */
.page-description:empty {
	display: none;
}

/* ------------------------------------------------------------------------------------
 * 5 Клиники-партнёры
 * ---------------------------------------------------------------------------------- */

/* Лента предложений: в вёрстке подпись прижата к заголовку вплотную, на реальных
   (более длинных) названиях строки слипались */
.offers-strip .article-desc {
	margin-top: 2px;
}

/* ------------------------------------------------------------------------------------
 * Слайдер акций — общий для «Акций», Направления, Статьи (класс .akcia-slider)
 * ---------------------------------------------------------------------------------- */

@media (min-width: 992px) {
	/* Carousel разбивает слайды по одному на страницу только пока суммарная ширина
	   слайдов больше ширины дорожки (см. vendor/js/carousel.umd.js: ветка
	   Number.isInteger(slidesPerPage) && contentWidth > viewportWidth). У Трихологии
	   ровно две акции — 2×1000px, и на мониторе шире ~2000px библиотека складывала оба
	   слайда в одну страницу: оба получали is-selected, а маскировка соседних слайдов в
	   main.css завязана на :not(.is-selected) — оба баннера показывались разом
	   (баг-репорт 15.09.2026). Ограничиваем дорожку: два слайда в неё не влезают ни при
	   каком экране. Визуально незаметно — фон секции и цвет боковых плашек один и тот же
	   (#f0e6dc). */
	.akcia-slider {
		max-width: 1800px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------------------------------
 * 3 Журнал / 3.1 Тег — акции направления лентой в узкой правой колонке (DMTSITES-1967)
 * ---------------------------------------------------------------------------------- */

/* Разметка и листание те же, что у слайдера «Акций» (класс akcia-slider, общий
   initCenterSlider из footer.php), но ширина слайда своя: у полноширинного слайдера
   на десктопе слайд 1000px, в колонке тега он не помещается. Заодно снимаем «боковые
   плашки» — соседние слайды тут за краем колонки, прятать их содержимое не нужно.
   Блока в эталонной вёрстке нет вовсе, он придуман в рамках задачи. */
.blog-akcia-slider-unit {
	position: relative;
	overflow: hidden;
	/* Полоса справа под стрелку листания: на «Акциях» слайдер во всю ширину экрана и
	   стрелке хватает поля за карточкой, а здесь блок стоит в колонке ленты — своего
	   поля у него нет, и стрелку приходится отрезать от самой колонки (DMTSITES-1974,
	   запрос редактора 16.09.2026: стрелка не должна лежать на картинке баннера).
	   Слайд занимает 100% дорожки, поэтому на эти же 52px сужается карточка вместе с
	   фотографией (.blog-akcia .image прибита к правому краю карточки).
	   Фон полосы — тот же кремовый, что у карточки: без него на ≥992px между карточкой
	   и заливкой .blog-akcia-col:after, уходящей за край экрана, появилась бы белая
	   щель. Скруглений у карточки нет, поэтому шов не виден: визуально это одна плашка,
	   у которой стрелка вынесена на поле рядом с фото. */
	padding-right: 52px;
	background-color: #f7efe6;
}

.blog-akcia-slider-unit .carousel__slide {
	--carousel-slide-width: 100%;
}

/* Стрелка листания — в полосе справа от карточки, а не полосой прокрутки под ней
   (запрос редактора 15.09.2026) и не поверх картинки баннера (он же, 16.09.2026).
   Стрелка видна на всех разрешениях: базовое правило .btn-akcia-slider { display: none }
   рассчитано на полноширинный слайдер «Акций», где на мобилке листают свайпом и полосой,
   а здесь полосы больше нет.
   Размер меньше «большой» стрелки (64px) — карточка в узкой колонке */
.blog-akcia-slider-unit .btn-akcia-slider {
	display: block;
	position: absolute;
	top: 50%;
	/* left: auto обязателен — на ≥992px общее правило .btn-akcia-next задаёт left для
	   полноширинного слайдера, а при заданных одновременно left и width правый край
	   в LTR игнорируется, и стрелка уехала бы к середине экрана.
	   right: 0 — у padding-box секции, то есть у внешнего края отведённой полосы:
	   стрелка 40px в полосе 52px даёт 12px просвета между ней и карточкой. */
	left: auto;
	right: 0;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.blog-akcia-slider-unit .btn-akcia-slider img {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 992px) {
	/* фон карточки — как у обычной .blog-akcia: приём с кремовой плашкой поверх соседних
	   слайдов тут не нужен, зато при перетаскивании соседняя карточка на миг видна */
	.blog-akcia-slider-unit .carousel__slide:not(.is-selected) .blog-akcia {
		background-color: #f7efe6;
	}

	.blog-akcia-slider-unit .carousel__slide:not(.is-selected) .content,
	.blog-akcia-slider-unit .carousel__slide:not(.is-selected) .cta,
	.blog-akcia-slider-unit .carousel__slide:not(.is-selected) .image {
		visibility: visible;
	}
}

/* ------------------------------------------------------------------------------------
 * 3 Журнал — «Показать ещё» под подгруженными анонсами
 * ---------------------------------------------------------------------------------- */

/* Ссылка на время запроса гасится, чтобы нетерпеливый клик не отправил вторую порцию
   поверх первой (сам двойной запрос уже отсекается флагом в скрипте — это про обратную
   связь пользователю). В вёрстке ссылка есть, состояния загрузки у неё нет */
.blog-more-next.is-loading {
	opacity: .5;
	pointer-events: none;
}

/* ------------------------------------------------------------------------------------
 * 1 Главная — «Показать ещё» под сеткой анонсов
 * ---------------------------------------------------------------------------------- */

/* В вёрстке это <button> (inline-block по умолчанию), на сайте — ссылка <a> на /mag/.
   Отступ сверху .home-anons-more задан в main.css через margin-top, а у inline-элемента
   вертикальные margin браузер игнорирует — кнопка прилипала к анонсам (замечание Тани
   30.09.2026, DMTSITES-1991). Именно inline-block, не block: иначе кликабельная область
   растянется на всю колонку */
.home-anons-more {
	display: inline-block;
}

/* DMTSITES-2002: на мобильном цена не должна переноситься, а название услуги
   должно сжиматься в оставшуюся ширину строки и не обрезаться слева. */
.service-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.service-price {
	width: auto;
	white-space: nowrap;
}

/* Слайд карусели начинается у края viewport и на мобильном обрезает отрицательный
   отступ контейнера. Возвращаем внутренний отступ контейнера, чтобы названия услуг
   не уходили за левую границу карточки. */
.prices-slider .carousel__slide {
	padding-left: 12px;
}

/* Врезки в левом столбце центрируются на всех типах страниц по макету. */
.svc-quote {
	text-align: center;
}

/* Якорные ссылки на карточках услуг: пунктирное подчёркивание без смены
   стандартного зелёного цвета ссылок (макет страницы направления). */
.service-group-card .links .p-link.c-green {
	color: #196466;
}

.validation-attempted .form-control:invalid {
	border-color: #ff3f28;
}

@media (min-width: 768px) {
	/* Колонки в карточке клиники не должны соприкасаться или выходить за контейнер. */
	.clinics-brief .clinic-row {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
		column-gap: 24px;
	}

	/* Линии заголовков в обоих столбцах тега обрезаются у общей правой границы. */
	.napravlenie-unit .page-text h2:has(span)::after {
		right: -100vw;
	}

}

/* Врезки-списки внутри текста статьи: Bootstrap-колонка выходит правым gutter
   за контейнер, поэтому ограничиваем только верхнюю и нижнюю линии блока. */
.content-section .content-unit.unit-right.border-y {
	position: relative;
	border-top-color: transparent;
	border-bottom-color: transparent;
}

.content-section .content-unit.unit-right.border-y::before,
.content-section .content-unit.unit-right.border-y::after {
	content: "";
	position: absolute;
	left: 0;
	right: calc(var(--bs-gutter-x) * .5);
	height: 1px;
	background-color: var(--border-color);
}

.content-section .content-unit.unit-right.border-y::before {
	top: 0;
}

.content-section .content-unit.unit-right.border-y::after {
	bottom: 0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	/* На промежуточной ширине контейнер Bootstrap уже 960px, а меню с gap-40
	   вместе с логотипом и контактами переполняло строку и обрезало её края. */
	.header .header-menu {
		gap: 16px;
	}

	.header .header-bottom {
		min-width: 0;
		flex: 1 1 auto;
	}

	.header .header-inner > .d-flex {
		min-width: 0;
		gap: 12px;
	}
}


.prices-slider .services-list,
.prices-slider .service-row {
	min-width: 0;
}

/* На страницах процедуры с наклейкой акции фиксируем верх картинки относительно
   текстовой колонки: её высота меняется из-за дополнительного блока акции. */
@media (min-width: 992px) {
	.price-cta--with-action .photo-col {
		align-self: flex-start;
		padding-top: 85px;
	}
}

/* На странице услуги блок «Реабилитация» выравнивается по началу текста слева. */
.svc-detail .info-box {
	margin-top: 0;
}

/* DMTSITES-2017: врезки из редакторского HTML используют прежний mb-3. */
@media (max-width: 991px) {
	.content-unit.unit-image .mx-n20.mb-3 {
		margin-bottom: 10px !important;
	}
}

/* DMTSITES-2017: редакторская врезка на странице акций не обёрнута в row.
   Возвращаем интервал между текстом и врезкой из .content-section .row. */
.akcii-note-unit ~ .aside-unit .unit-center {
	margin-top: 30px;
}

@media (min-width: 992px) {
	.akcii-note-unit ~ .aside-unit .unit-center {
		margin-top: 40px;
	}
}