/* ====================================================================
 * KENDA. Блок «Технологии» на главной: карусель из двух карточек и окна
 * плюсов на картинке покрышки. Разметку печатает
 * mu-plugins/kenda-glavnaya-tehnologii.php.
 *
 * Веня 02.09.2026: «текст ниже разделить на 2 блока и сделать каруселью»,
 * «окно с надписью и крестик… сделать красиво». Речь о телефоне, поэтому
 * карусель и окно живут ниже 691, а шире карточки стоят обычным столбцом,
 * как стояли абзацы, и окна плюсов остаются подсказками темы.
 * ==================================================================== */

/* ------------------------------------------------ карточки: общий вид */

.k-teh__karta {
	color: #1d1d1d;
}

/* ⛔ Тема красит абзацы в #777676: на белом это 4,5:1 только на крупном
   кегле. В карточке цвет свой, потемнее. */
.k-teh__karta p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #4b5563;
}

.k-teh__karta p + p {
	margin-top: 12px;
}

.k-teh__zag {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	color: #1d1d1d;
}

/* красная чёрточка над названием: та же, что у метки текущего раздела в меню */
.k-teh__zag::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin: 0 0 12px;
	border-radius: 2px;
	background: #d81f2a;
}

/* ------------------------------------------------ шире 690: столбец */

@media (min-width: 691px) {
	.k-teh__karta + .k-teh__karta {
		margin-top: 22px;
	}
	/* на широком экране заголовки карточек и точки не нужны: блок читается
	   как прежние два абзаца, только чуть темнее */
	.k-teh__zag,
	.k-teh__tochki,
	.k-plus__opisanie {
		display: none;
	}
}

/* ------------------------------------------------ телефон: карусель */

@media (max-width: 690px) {
	/* лента выходит на поля текстового блока (12 с каждой стороны), чтобы
	   край следующей карточки был виден и приглашал листнуть */
	.k-teh__lenta {
		display: flex;
		gap: 12px;
		margin: 0 -12px;
		padding: 4px 12px 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.k-teh__lenta::-webkit-scrollbar {
		display: none;
	}

	/* карточка уже ленты на 44: справа проглядывает следующая */
	.k-teh__karta {
		flex: 0 0 calc(100% - 44px);
		scroll-snap-align: start;
		padding: 20px 18px 22px;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		background: #f7f8fa;
	}

	.k-teh__tochki {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin: 14px 0 0;
	}

	.k-teh__tochki span {
		width: 22px;
		height: 3px;
		border-radius: 2px;
		background: #d9dbe0;
		transition: background-color 160ms ease-out, width 160ms ease-out;
	}

	.k-teh__tochki span.akt {
		width: 34px;
		background: #d81f2a;
	}

	@media (prefers-reduced-motion: reduce) {
		.k-teh__tochki span {
			transition: none;
		}
	}
}

/* ------------------------------------------------ телефон: окно плюса */

/* ⛔ Тема ниже 691 делает подсказку белым экраном во всё окно с надписью
   посередине и крестиком в кружке над ней (кадр 02.09.2026). Механику
   оставляем её: клик по плюсу ставит `.open` и дописывает `a.tipclose`.
   Меняем только вид: затемнение поверх страницы и тёмная карточка снизу.
   ⚠️ `#ajax-content-wrap` в селекторах обязателен: правила темы стоят с
   `!important`, и без идентификатора наши проигрывают (мерило 582). */
@media (max-width: 690px) {
	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip {
		padding: 0 !important;
		background: rgba(16, 18, 22, .58) !important;
		border-radius: 0 !important;
		text-align: left !important;
	}

	/* ⛔ У темы окно лежит на слое 999, а шапка выше: на первом кадре плашка с
	   бургером светилась поверх затемнения, будто окно не модальное. Открытое
	   окно поднимаем над шапкой. */
	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip.open {
		z-index: 100001 !important;
	}

	/* ⛔ Слоя оказалось мало: окно сидит в контексте наложения содержимого, а
	   шапка это сосед выше, и её не перекрыть ничем изнутри (кадр после первой
	   правки: плашка светилась). Поэтому на время открытого окна гасим саму
	   шапку до той же темноты, что и затемнение, и снимаем с неё нажатия. */
	body.home:has(.nttip.open) #header-outer {
		filter: brightness(.42);
		pointer-events: none;
	}

	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .inner {
		top: auto !important;
		left: 0 !important;
		bottom: 0;
		width: 100% !important;
		padding: 26px 20px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
		border-radius: 18px 18px 0 0;
		background: #101216;
		color: #fff;
		text-align: left !important;
		box-shadow: 0 -20px 44px -28px rgba(0, 0, 0, .9);
		transform: translateY(24px) !important;
		opacity: 0;
	}

	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip.open .inner {
		transform: translateY(0) !important;
		opacity: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .inner {
			transition: none !important;
		}
	}

	.k-plus__zag {
		display: block;
		padding-right: 52px;
		font-size: 20px;
		line-height: 1.25;
		font-weight: 700;
		color: #fff;
	}

	.k-plus__zag::before {
		content: "";
		display: block;
		width: 28px;
		height: 3px;
		margin: 0 0 12px;
		border-radius: 2px;
		background: #d81f2a;
	}

	.k-plus__opisanie {
		display: block;
		margin: 10px 0 0;
		font-size: 15px;
		line-height: 1.5;
		color: rgba(255, 255, 255, .78);
	}

	/* крестик: квадрат 40 в правом верхнем углу карточки, как кнопки шапки */
	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose {
		position: absolute !important;
		top: 18px !important;
		right: 16px !important;
		left: auto !important;
		margin: 0 !important;
		width: 40px !important;
		height: 40px !important;
		line-height: 40px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: rgba(255, 255, 255, .08);
	}

	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 18px;
		height: 18px;
		margin: -9px 0 0 -9px;
		transform: rotate(45deg);
	}

	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span::before {
		left: 1px !important;
		top: 8px !important;
		width: 16px !important;
		height: 2px !important;
		background: #fff !important;
		border-radius: 1px;
	}

	body.home #ajax-content-wrap .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span::after {
		left: 8px !important;
		top: 1px !important;
		width: 2px !important;
		height: 16px !important;
		background: #fff !important;
		border-radius: 1px;
	}
}