/*
 * FAQ — Figma 748:46163 (макет 30.09; против 657:8219 видимых отличий нет), паттерн baserd/faq:
 * разделитель (divider.css), заголовок секции (section-heading.css)
 * и ряд 1280: поле точек 240 со звездой, список вопросов 720, поле точек 240 со звездой; по краям и между ними
 * по 20. Список — блок ядра «Аккордеон» (core/accordion): кнопка вопроса с aria-expanded, открыт один ответ.
 * Уже 1440 ряд сжимается целиком, в той же пропорции 240 : 720 : 240; планшет и телефон — кадры 846:27971 (768)
 * и 871:37709 (375), front#1046.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора, ядра и отступы потока.
 */

.baserd-faq {
	overflow-x: clip;
}

.baserd-faq.has-grid-lines {
	padding-bottom: var(--wp--preset--spacing--72);
}

/*
 * Кадр FAQ стоит на целом y 7787, а отзывы над ним (748:42251) высотой 613.89 кончаются на 7787.89: разделитель
 * заходит на их пустое нижнее поле. У нас отзывы 613.875, и с −1 FAQ встаёт в тот же пиксель, что в макете.
 */
.baserd-reviews + .baserd-faq {
	margin-top: -1px;
}

.baserd-faq .baserd-faq__body {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 0 20px;
}

/*
 * 657:8220 и 657:8571: точки 6 px с шагом 18, белый 9% (точка 30% при прозрачности слоя 30%), 14 × 25 точек,
 * поле 240×438 на 3 ниже верха списка. Сдвиг — top, а не margin: отступ первого блока в потоке редактор обнуляет
 * правилом того же веса, что здесь. Точки — ::before (::after блока в редакторе занят рамкой выделения);
 * его ширина — целое число столбцов, поэтому в сжатом поле обрезанного столбца нет (браузер без round() — Chrome
 * до 125 — берёт всю ширину поля).
 */
.baserd-faq .baserd-faq__decor {
	position: relative;
	top: 3px;
	flex: 0 1 240px;
	min-width: 0;
	height: 438px;
}

.baserd-faq__decor::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	width: calc(round(down, 100% - 6px, 18px) + 6px);
	background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent) 2.6px, transparent 3.4px);
	background-size: 18px 18px;
	pointer-events: none;
}

/*
 * 657:8956 и 657:8953: та же звезда, что в Features (star.webp, тот же рисунок и поворот). Нижняя — 193.56 от
 * −24.57, 292.81 поля слева; верхняя — 199.81 на −72.22 поля справа, правым краем в 20.1 за полем (как в макете:
 * там край звезды на краю кадра), и повёрнута ещё на 5.9° по часовой. Привязка справа держит её у края и в
 * сжатом поле, а не на линии сетки.
 * Под звездой свечение — круг secondary 20% с размытием 166 в Figma (в CSS радиус вдвое меньше, 83), 139.8 под
 * нижней (657:8955) и 97 под верхней (657:8952), по центру звезды.
 */
.baserd-faq .baserd-faq__star {
	position: absolute;
	isolation: isolate;
	margin: 0;
}

.baserd-faq .baserd-faq__decor--left .baserd-faq__star {
	--baserd-glow: 139.8px;
	top: 292.81px;
	left: -24.57px;
	width: 193.56px;
}

.baserd-faq .baserd-faq__decor--right .baserd-faq__star {
	--baserd-glow: 97px;
	top: -72.22px;
	right: -20.1px;
	width: 199.81px;
	rotate: 5.9deg;
}

.baserd-faq__star::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: var(--baserd-glow);
	height: var(--baserd-glow);
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	opacity: 0.2;
	filter: blur(83px);
	translate: -50% -50%;
	pointer-events: none;
}

.baserd-faq__star img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto 486 / 494;
}

/*
 * 657:8931: список 720 в рамке 1px белый 10% внутрь. Рамка места не занимает, как обводка в макете (тень внутрь,
 * а не border): пункты во всю ширину 720, вопрос в 24 от края списка. Между вопросами линия 1px белый 10% по
 * границе, тоже без места (у пункта макета обводка по центру края, у последнего её нет). Рамка — ::before поверх
 * пунктов: заливка наведённого вопроса (front#1048) иначе закрыла бы её по краям строки.
 */
.baserd-faq .baserd-faq__list {
	position: relative;
	flex: 0 1 720px;
	min-width: 0;
}

.baserd-faq .baserd-faq__list::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast-10);
	pointer-events: none;
}

/* В режиме высокой контрастности тени нет: рамка списка — контур того же места. */
@media (forced-colors: active) {
	.baserd-faq .baserd-faq__list {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}

.baserd-faq .wp-block-accordion-item {
	position: relative;
	margin: 0;
}

.baserd-faq .wp-block-accordion-item + .wp-block-accordion-item::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1px solid var(--wp--preset--color--contrast-10);
	pointer-events: none;
}

/*
 * 657:8932 и 657:8937: поля 16 и 24, вопрос 16/24 500 белым, справа значок 24 через 12 (Plus у закрытого, Minus
 * у открытого, Phosphor из макета), сверху. У открытого вопрос 18/24 и через 12 ответ 16/24 muted в колонке
 * вопроса: справа от ответа поле 24, значок и зазор 12, как в макете (ширина 636). Поля — у кнопки, чтобы
 * нажималась вся строка. Значок цвета primary всегда (888:7280, front#1048), подчёркивание ядра не нужно.
 */
.baserd-faq .wp-block-accordion-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-16);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--contrast);
}

.baserd-faq .wp-block-accordion-heading__toggle {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--12);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
}

.baserd-faq .wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}

/*
 * 888:7280 (front#1048): наведённый вопрос — строка с заливкой цвета выделения (surface #231735). Фокус с
 * клавиатуры показывает то же и кольцо поверх. Линия между вопросами — ::before пункта, она остаётся сверху.
 */
@media (hover: hover) {
	.baserd-faq .wp-block-accordion-heading__toggle:hover {
		background-color: var(--wp--custom--highlight);
	}
}

.baserd-faq .wp-block-accordion-heading__toggle:focus-visible {
	background-color: var(--wp--custom--highlight);
}

.baserd-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.baserd-faq .wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 24px;
	height: 24px;
	font-size: 0;
	color: var(--wp--preset--color--primary);
	background-color: currentColor;
	-webkit-mask: url("../icons/plus.svg") center / 24px 24px no-repeat;
	mask: url("../icons/plus.svg") center / 24px 24px no-repeat;
}

/*
 * Открытый вопрос: 18/24, поле под ним 12, значок Minus. Поворот «+» на 45°, который ядро даёт открытому правилом
 * весом (0,4,0), снят: здесь (0,5,0).
 */
.baserd-faq .baserd-faq__list .wp-block-accordion-item.is-open .wp-block-accordion-heading {
	font-size: var(--wp--preset--font-size--size-18);
	line-height: var(--wp--custom--line-height--size-18);
}

.baserd-faq .baserd-faq__list .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	padding-bottom: var(--wp--preset--spacing--12);
}

.baserd-faq .baserd-faq__list .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: none;
	-webkit-mask-image: url("../icons/minus.svg");
	mask-image: url("../icons/minus.svg");
}

/*
 * Ядро отдаёт с сервера все ответы раскрытыми: закрытые прячет только его скрипт (view.js), класс is-open сервер
 * ставит одному первому. Без JavaScript так и остаётся — все ответы видны, поэтому и вид у всех вопросов открытый,
 * а не Plus над видимым ответом. С JavaScript закрытые ответы спрятаны сразу, иначе после загрузки скрипта список
 * сжимается на 180 px и страница под ним прыгает. «Скрипт ещё не отработал» — ни один ответ списка не скрыт: после
 * него скрыты все, кроме открытого (в списке по одному открытому, autoclose). Скрипт так и не загрузился (сбой сети,
 * блокировщик) — через 5 с ответы показываются, как показало бы их ядро: иначе они остались бы скрыты навсегда.
 * Прячет их content-visibility, а не display: его анимация и возвращает ответ, вместе с полем под ним.
 */
@media (scripting: none) {
	.baserd-faq .baserd-faq__list .wp-block-accordion-item .wp-block-accordion-heading {
		font-size: var(--wp--preset--font-size--size-18);
		line-height: var(--wp--custom--line-height--size-18);
	}

	.baserd-faq .baserd-faq__list .wp-block-accordion-item .wp-block-accordion-heading__toggle {
		padding-bottom: var(--wp--preset--spacing--12);
	}

	.baserd-faq .baserd-faq__list .wp-block-accordion-item .wp-block-accordion-heading__toggle-icon {
		-webkit-mask-image: url("../icons/minus.svg");
		mask-image: url("../icons/minus.svg");
	}
}

@media (scripting: enabled) {
	.baserd-faq .baserd-faq__list:not(:has(.wp-block-accordion-panel[hidden])) .wp-block-accordion-item:not(.is-open) > .wp-block-accordion-panel {
		padding-bottom: 0;
		content-visibility: hidden;
		animation: baserd-faq-reveal 0s 5s both;
	}
}

@keyframes baserd-faq-reveal {
	to {
		padding-bottom: var(--wp--preset--spacing--16);
		content-visibility: visible;
	}
}

/*
 * Значок — маска на фоне: в режиме высокой контрастности браузер заменил бы фон цветом страницы, и значка не стало
 * бы. Здесь фон — системный цвет текста кнопки (currentColor не годится: наследуется цвет темы, а не системный).
 */
@media (forced-colors: active) {
	.baserd-faq .wp-block-accordion-heading__toggle-icon {
		forced-color-adjust: none;
		background-color: ButtonText;
	}
}

.baserd-faq .wp-block-accordion-panel {
	padding: 0 calc(var(--wp--preset--spacing--24) * 2 + var(--wp--preset--spacing--12)) var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--muted);
}

.baserd-faq .wp-block-accordion-panel > * {
	margin: 0;
}

.baserd-faq .wp-block-accordion-panel > * + * {
	margin-top: var(--wp--preset--spacing--16);
}

/*
 * Планшет — кадр 846:27971 (768), front#1046: под заголовком сразу список во всю колонку 720, полей точек со звёздами
 * нет, под списком поля нет — кадр кончается его низом. Список стоит ровно на линиях сетки страницы, поэтому рамки
 * по бокам у него нет (линия была бы вдвое ярче): от рамки поверх пунктов (::before списка) остаётся низ. Сверху
 * линия во всю ширину экрана, как низ шапки в кадре, — ::before первого пункта, как линии между вопросами: она шире
 * списка, а рамка списка нет, и обе остаются поверх заливки наведённого вопроса. ::after в редакторе занят рамкой
 * выделения.
 */
@media (max-width: 1023px) {
	.baserd-faq.has-grid-lines {
		padding-bottom: 0;
	}

	.baserd-reviews + .baserd-faq {
		margin-top: 0;
	}

	.baserd-faq .baserd-faq__body {
		display: block;
		padding: 0;
	}

	.baserd-faq .baserd-faq__decor {
		display: none;
	}

	.baserd-faq .baserd-faq__list::before {
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--contrast-10);
	}

	.baserd-faq .wp-block-accordion-item:first-child::before {
		content: "";
		position: absolute;
		top: 0;
		right: calc(var(--wp--style--root--padding-right) * -1);
		left: calc(var(--wp--style--root--padding-left) * -1);
		border-top: 1px solid var(--wp--preset--color--contrast-10);
		pointer-events: none;
	}
}

/* В кадре 846:27971 значки «+» и «−» белые, в 871:37709 (375) и 888:2404 (1440) — primary. */
@media (min-width: 768px) and (max-width: 1023px) {
	.baserd-faq .wp-block-accordion-heading__toggle-icon {
		color: var(--wp--preset--color--contrast);
	}
}

/*
 * Телефон — кадр 871:37709 (375): список во всю ширину экрана, поля вопроса 16 и 24, ответ в колонке вопроса (291 на
 * 375), как на 1440; под списком поле 48. Ответ уже не во всю ширину, как было в front#808: в кадре он в колонке.
 */
@media (max-width: 767px) {
	.baserd-faq.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--48);
	}

	.baserd-faq .baserd-faq__list {
		margin-right: calc(var(--wp--style--root--padding-right) * -1);
		margin-left: calc(var(--wp--style--root--padding-left) * -1);
	}

	.baserd-faq .wp-block-accordion-item:first-child::before {
		right: 0;
		left: 0;
	}
}