/**
 * Блок переваг «міні-орбіти» (2026-10-29). Разметка: template-parts/blocks/benefits.php, данные: inc/wa-benefits.php.
 * Макет: reports/benefits items/benefits-task.zip (BenOrbit.dc.html). Подключается глобально (functions.php).
 * Ширина — сетка сайта: 1400px, на ≤1400 — 90%, на ≤767 — поля 16px.
 */

/* визуально скрытый текст (стандарт WP) — скрытый H2 блока и др. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.wa-ben {
	padding: 64px 0;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
}

/* под херо главной (у него снизу 56px) — зазор ~64px, без пустоты */
.wa-hero + .wa-ben { padding-top: 8px; }

.wa-ben__wrap {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
}

.wa-ben__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-ben__list--n1 { grid-template-columns: minmax(0, 1fr); }
.wa-ben__list--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-ben__list--n3,
.wa-ben__list--n5,
.wa-ben__list--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- карточка ---------- */
.wa-ben__item {
	position: relative;
	margin: 0;
	padding: 28px 28px 30px;
	border: 1px solid #e3e9ef;
	border-radius: 20px;
	background: linear-gradient(180deg, #f4f9fc 0%, #ffffff 70%);
	text-align: left;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s;
}

/* ---------- мини-орбита ---------- */
.wa-ben__mark {
	position: relative;
	width: 88px;
	height: 64px;
	isolation: isolate;
}

.wa-ben__orbit {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
}

.wa-ben__orbit ellipse {
	fill: none;
	stroke: #1a72a8;
	stroke-width: 1.3;
	opacity: .35;
	transition: opacity .3s, stroke .3s;
}

.wa-ben__icon {
	position: absolute;
	left: 20px;
	top: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid #dbe6ef;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 16px rgba(26, 114, 168, .12);
	color: #1a72a8;
	transition: background .3s, color .3s, border-color .3s;
}

.wa-ben__icon .wa-icon { display: block; }

.wa-ben__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7dc91b;
	box-shadow: 0 0 0 3px rgba(125, 201, 27, .18), 0 0 10px rgba(125, 201, 27, .6);
	offset-path: path('M 7.86 43.74 A 38 14 -18 1 1 80.14 20.26 A 38 14 -18 1 1 7.86 43.74');
	offset-rotate: 0deg;
	animation: waBenOrbit 7s linear infinite;
}

/* дальняя половина — за иконкой и меньше, ближняя — перед ней */
@keyframes waBenOrbit {
	0% { offset-distance: 0%; z-index: 1; scale: .8; }
	49.9% { z-index: 1; }
	50% { z-index: 3; scale: .9; }
	75% { scale: 1.15; }
	100% { offset-distance: 100%; z-index: 3; scale: .8; }
}

/* электроны соседних карточек не синхронны */
.wa-ben__item:nth-child(6n+1) .wa-ben__dot { animation-delay: -1s; }
.wa-ben__item:nth-child(6n+2) .wa-ben__dot { animation-delay: -3.2s; }
.wa-ben__item:nth-child(6n+3) .wa-ben__dot { animation-delay: -5.1s; }
.wa-ben__item:nth-child(6n+4) .wa-ben__dot { animation-delay: -2.4s; }
.wa-ben__item:nth-child(6n+5) .wa-ben__dot { animation-delay: -4.4s; }
.wa-ben__item:nth-child(6n+6) .wa-ben__dot { animation-delay: -6.2s; }

/* ---------- текст ---------- */
.wa-ben .wa-ben__title {
	margin: 22px 0 10px;
	padding: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: #14233a;
}

.wa-ben .wa-ben__text {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
	color: #4b5563;
}

/* ---------- hover только для мыши (на таче не залипает) ---------- */
@media (hover: hover) {
	.wa-ben__item:hover {
		transform: translateY(-4px);
		border-color: #cfe1ee;
		box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
	}
	.wa-ben__item:hover .wa-ben__orbit ellipse { opacity: .9; stroke: #5fae0e; }
	.wa-ben__item:hover .wa-ben__icon { border-color: #1a72a8; background: #1a72a8; color: #fff; }
}

/* ---------- ширина как у остального контента ---------- */
/* ширина контента 1400; ниже 1440 — поля 20px, ниже 1024 — 16px (края всех блоков совпадают, 2026-10-29) */
@media (max-width: 1439px) {
	.wa-ben__wrap { width: calc(100% - 40px); }
}
@media (max-width: 1023px) {
	.wa-ben__wrap { width: calc(100% - 32px); }
}

/* ---------- планшет 768–1199: 2 колонки (3 пункта — 3 колонки, если влезает ≥220px) ---------- */
@media (max-width: 1199px) {
	.wa-ben__list,
	.wa-ben__list--n5,
	.wa-ben__list--n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wa-ben__list--n3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	.wa-ben__list--n1 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- мобилка ≤767: карточки как на десктопе, листаются вбок (scroll-snap, без JS) ----------
   Справа выглядывает край следующей карточки. Прежний вариант «в стопку»: reports/backups/benefits-20261029/wa-benefits.before-carousel.css */
@media (max-width: 767px) {
	.wa-ben { padding: 40px 0; }
	.wa-hero + .wa-ben { padding-top: 0; }
	.wa-ben__wrap { width: auto; }

	.wa-ben__list,
	.wa-ben__list--n1,
	.wa-ben__list--n2,
	.wa-ben__list--n3,
	.wa-ben__list--n5,
	.wa-ben__list--n6 {
		display: flex;
		gap: 12px;
		padding: 4px 16px 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.wa-ben__list::-webkit-scrollbar { display: none; }

	.wa-ben__item {
		flex: 0 0 min(82%, 360px);
		padding: 24px 22px 26px;
		scroll-snap-align: start;
	}
	.wa-ben__list--n1 .wa-ben__item { flex-basis: 100%; }
}

/* ---------- без анимации: электрон стоит ---------- */
@media (prefers-reduced-motion: reduce) {
	.wa-ben__dot { animation: none; offset-distance: 70%; z-index: 3; }
	.wa-ben__item { transition: none; }
}

/* ---------- браузер без offset-path: электрон скрыт ---------- */
@supports not (offset-path: path('M 0 0')) {
	.wa-ben__dot { display: none; }
}