/* =========================================================================
   SPIVMIR — главная страница (front-page.php + template-parts/home/*)
   Подключается после base.css (см. inc/assets.php, порядок: … content →
   services → front → news …). Значения перенесены из old/css/style.css
   (#slides, .slidesjs-*, div.leftmenu, ul.sub, div.right, #center table.noborder)
   и сверены с эталоном analysis/baseline/home__1280.png. Строка-объявление
   .covid (.home-notice) с версии 0.3.0 не отдельный блок над слайдером,
   а подпись на первом слайде — см. .home-slider__caption.
   Брейкпоинты: 1199 / 1023 / 767.
   ========================================================================= */

/* --- 1. Контейнер главной ------------------------------------------------
   Старый сайт: .wrapper.main-container{padding:10px} внутри контейнера 960
   → рабочая ширина контента ровно 940 px (замер эталона: 170…1110).       */

.home__container {
	background: var(--c-white);   /* белая подложка контейнера, как .container{background:#fff} старого сайта */
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

/* --- 2. Слайдер ---------------------------------------------------------- */

/*
 * Отрицательные поля гасят 10 px паддинга .home__container: слайдер выходит
 * на всю ширину белой подложки, а не стоит в общей колонке текста.
 * На узких экранах паддинг контейнера 24/16 px, поэтому там слайдер
 * не упирается в край, а просто шире текста на те же 20 px.
 */
.home-slider {
	position: relative;
	margin-left: -10px;
	margin-right: -10px;
}

.home-slider__viewport {
	position: relative;
	overflow: hidden;
}

.home-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.5s ease;
	will-change: transform;
}

.home-slider__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-slider__img {
	display: block;
	width: 100%;
	height: auto;   /* пропорция берётся из width/height картинки: 940×403,
	                   как рендерил SlidesJS (width 700, height 300 — та же пропорция) */
}

/*
 * Подпись поверх слайда (объявление про медосмотры, до 0.3.0 — красная строка
 * .home-notice над слайдером).
 *
 * Подложка сплошная, а не полупрозрачная: поверх фотографии прозрачный фон
 * даёт непредсказуемый контраст — на светлой стене регистратуры белый текст
 * на rgba(0,0,0,.5) провалился бы. Сплошной --c-green-darker даёт белому
 * гарантированные 6,6:1 на любом кадре, в том числе если подпись однажды
 * повесят на другой слайд. Красный цвет старой строки не переехал: в палитре
 * темы его нет (там стоял литеральный `red`), а белый на нём давал 4:1.
 *
 * Полоса прижата к низу слайда и не пересекается со стрелками — те стоят
 * по вертикальному центру.
 */
.home-slider__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	margin: 0;
	padding: 12px 20px;
	background: var(--c-green-darker);
	color: var(--c-white);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* Стрелки: круг 26 px, обводка 2 px #568d0d, 13 px от края (замер эталона) */
.home-slider__nav {
	position: absolute;
	top: calc(50% - 13px);
	z-index: 11;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid var(--c-green);
	border-radius: 50%;
	background: none;
	color: var(--c-green);
	line-height: 1;
	transition: opacity var(--t-fast), background-color var(--t-fast);
}

.home-slider.is-ready .home-slider__nav {
	display: flex;
}

.home-slider__nav--prev {
	left: 13px;
}

.home-slider__nav--next {
	right: 13px;
}

.home-slider__nav .icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.5;
}

.home-slider__nav:hover,
.home-slider__nav:focus-visible {
	opacity: 0.9;
	background: rgba(255, 255, 255, 0.35);
}

/* --- 3. Две колонки: меню слева (220), контент справа (700) --------------- */

.home__cols {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 30px;   /* замер эталона: низ слайдера 721 → верх колонок 751 */
}

.home__aside {
	flex: 0 0 220px;
	width: 220px;
}

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

/* --- 4. Левое меню направлений («пилюли») --------------------------------- */

.home-menu__list {
	margin: 0;
	padding: 0 10px 0 0;      /* ширина пункта 210 px, как на старом сайте */
	list-style: none;
}

.home-menu__item {
	position: relative;
	margin: 0;
	list-style: none;
}

.home-menu__link {
	display: block;
	margin-bottom: 0.5rem;
	padding: 5px 20px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--c-green);
	font-weight: 700;
	line-height: 100%;
}

.home-menu__link:hover,
.home-menu__link:focus {
	background: var(--c-green);
	color: var(--c-white);
	text-decoration: none;
}

/* Оранжевый пункт («Анализы») */
.home-menu__item.is-orange > .home-menu__link {
	border: 2px solid var(--c-orange);
	color: var(--c-orange);
}

.home-menu__item.is-orange > .home-menu__link:hover,
.home-menu__item.is-orange > .home-menu__link:focus {
	background: var(--c-orange);
	color: var(--c-white);
}

/* Текущий раздел */
.home-menu__item.is-current > .home-menu__link {
	background: var(--c-green);
	color: var(--c-white);
}

/* Выпадающее подменю (flyout вправо), стиль .leftmenu ul li ul.sub */
.home-menu__sub {
	position: absolute;
	top: 0;
	left: 200px;
	z-index: 200;
	width: 200px;
	margin: 0;
	padding: 16px 16px 10px;
	list-style: none;
	text-align: left;
	background: linear-gradient(to bottom, var(--g-sub2-from), var(--g-sub2-to));
	border-radius: 0 10px 10px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--t-fast);
}

.home-menu__sub::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px;
	border-top: 10px solid var(--c-sub2-arrow);
	border-left: 10px solid transparent;
}

.home-menu__item:hover > .home-menu__sub,
.home-menu__item:focus-within > .home-menu__sub {
	opacity: 0.9;
	visibility: visible;
	pointer-events: auto;
}

.home-menu__subitem {
	margin: 0;
	list-style: none;
}

.home-menu__sublink {
	display: block;
	margin-bottom: 0.5rem;
	padding: 5px 20px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	color: var(--c-white);
	font-weight: 700;
	line-height: 100%;
}

.home-menu__sublink:hover,
.home-menu__sublink:focus {
	background: var(--c-green);
	color: var(--c-white);
	text-decoration: none;
}

/* --- 5. Виджет ВКонтакте -------------------------------------------------- */

.home-vk {
	margin-top: 20px;
}

.home-vk__widget:empty {
	min-height: 0;
}

/* --- 6. «Пациенты доверяют нам» ------------------------------------------
   Старый сайт: table.noborder шириной 90 % внутри .right (700) и td с
   padding 8px → колонка текста 614 px (сверено с baseline/shots.json).    */

.home-trust {
	width: 90%;
	margin: 15px 0;
	padding: 8px;
}

.home-trust__title {
	margin: 0 0 1.25rem;
	color: var(--c-heading-h1);
	font-size: 3.4rem;
	font-weight: 300;
	line-height: 1.2;
}

.home-trust__subtitle {
	display: block;
	margin-top: 6px;   /* вторая строка заголовка: на старом сайте это <p> внутри h1 */
}

.home-trust__heading {
	margin: 2.1rem 0 1.25rem;
	color: var(--c-heading);
	font-size: 2.8rem;
	font-weight: 300;
	line-height: 1.2;
}

.home-trust .check-list {
	margin: 3rem 0 2.5rem;   /* замеры эталона: 30px после заголовка, 25px до следующего */
}

/* --- 7. Адаптив: планшеты и уже (≤1023) -----------------------------------
   Колонки складываются: сначала текст, под ним — направления сеткой пилюль.
   Flyout подменю на сенсорных экранах не раскрыть наведением, поэтому оно
   скрыто: те же ссылки есть в главном меню и на карте сайта.               */

@media (max-width: 1023px) {

	.home__container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.home__cols {
		flex-direction: column;
		align-items: stretch;
		margin-top: 25px;
	}

	.home__aside,
	.home__main {
		flex: 1 1 auto;
		width: auto;
	}

	.home__main {
		order: 1;
	}

	.home__aside {
		order: 2;
		margin-top: 25px;
	}

	.home-menu__list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 0 12px;
		padding-right: 0;
	}

	.home-menu__sub {
		display: none;
	}

	.home-menu__link {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 9px 18px;
		line-height: 1.25;
	}

	.home-vk {
		display: flex;
		justify-content: center;
	}

	.home-trust {
		width: 100%;
		padding: 0;
	}

	.home-trust__title {
		font-size: 3rem;
	}

	.home-trust__heading {
		font-size: 2.6rem;
	}
}

/* --- 8. Адаптив: телефоны (≤767) ----------------------------------------- */

@media (max-width: 767px) {

	.home__container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* На 343 px ширины слайд всего ~147 px высотой — подпись не должна съесть
	   больше трети кадра, поэтому кегль и поля меньше. */
	.home-slider__caption {
		padding: 8px 12px;
		font-size: 1.3rem;
		line-height: 1.25;
	}

	.home-slider__nav {
		width: 44px;
		height: 44px;
		top: calc(50% - 22px);
		background: rgba(255, 255, 255, 0.7);
	}

	.home-slider__nav .icon {
		width: 18px;
		height: 18px;
	}

	.home-trust__title {
		font-size: 2.6rem;
	}

	.home-trust__heading {
		font-size: 2.2rem;
	}

	.home-vk {
		margin-top: 20px;
	}
}

/* --- 9. Уважение к prefers-reduced-motion -------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.home-slider__track {
		transition: none;
	}
}