/* WHY: компактная мобильная шапка и нижняя плашка записи нового шаблона — ассет шаблона вне сборки
 * Astro (dist): правка не требует пересборки medcenter. Правила включаются модификатором
 * .header--mobile-cta и наличием .mobile-cta-bar — оба выводит PHP только при mcsMobileCtaEnabled(),
 * без них файл инертен. Брейкпоинт 1023px — как у BuildHeader (hoisted.js), который на этой ширине
 * выносит логотип и кнопки в фиксированную .header__top (70px).
 * TODO(frontend, при следующей пересборке dist): перенести в SCSS medcenter (Header.scss, компонент плашки).
 */
:root {
	--mobile-cta-bar-height: 72px;
}

.header__phone-btn,
.mobile-cta-bar {
	display: none;
}

@media screen and (max-width: 1023px) {
	/* WHY: прячем только строку под шапкой (прямые потомки обёртки) — копии акции и телефона, которые
	 * BuildHeader кладёт в .header__menu-top бургера, остаются. Сам телефон .cm_teltmp_link остаётся
	 * в DOM: его читают channel_phone формы записи, uis_log.php и getSitePhone().
	 */
	.header--mobile-cta .header__wrapper > .tag--sale,
	.header--mobile-cta .header__wrapper > .header__contact {
		display: none;
	}

	/* WHY 58px: под фиксированной .header__top (12 + 46 + 12 = 70px) padding-top обёртки — единственная
	 * распорка; в сборке 60px в расчёте на видимую строку акции и телефона. 58 + нижние 16px = 74px —
	 * ровно строка логотипа до запуска BuildHeader (12 + 46 + 16): контент начинается на 74px, на 4px ниже
	 * панели, и не прыгает при переносе логотипа в панель. Меньше нельзя: на страницах без хлебных крошек
	 * сверху (услуги) первым идёт заголовок — при 40px (решение 2026-09-11 для врачей и клиник) он уходил
	 * под панель на 16px, крошки остальных страниц — на 13px (2026-10-02).
	 */
	.header--mobile-cta .header__wrapper--mobile {
		padding-top: 58px;
	}

	.header--mobile-cta .header__phone-btn {
		display: flex;
	}

	.mobile-cta-bar {
		display: flex;
		align-items: stretch;
		gap: 10px;
		position: fixed;
		/* WHY 101: выше активной вкладки [data-tabs] и кнопки «Разделы» бокового меню (обе 100) */
		z-index: 101;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		min-height: var(--mobile-cta-bar-height);
		padding: 10px 12px;
		background: #fff;
		box-shadow: 0 -4px 24px rgba(55, 38, 72, 0.12);
	}

	.mobile-cta-bar__call {
		flex: 0 0 52px;
		width: 52px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		background: #1fa3a0;
		color: #fff;
		text-decoration: none;
		transition: opacity 0.2s, transform 0.15s;
	}

	.mobile-cta-bar__call:active {
		opacity: 0.92;
		transform: scale(0.98);
	}

	.mobile-cta-bar__booking {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
	}

	.mobile-cta-bar__booking > .btn {
		flex: 1 1 auto;
		min-width: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		padding: 14px 16px;
	}

	body:has(.mobile-cta-bar) {
		padding-bottom: var(--mobile-cta-bar-height);
	}

	/* WHY: кнопка «Разделы» бокового меню («О нас», правовые страницы, вакансии, анализы) тоже фиксирована
	 * внизу — ставим её над плашкой; в состоянии .is-hidden она уезжает вниз под плашку.
	 */
	body:has(.mobile-cta-bar) .stream-wrapper__sidebar-toggle {
		bottom: var(--mobile-cta-bar-height);
	}
}