/**
 * Аккордеон вопросов и ответов.
 *
 * reference: белые карточки со скруглением 14px и рамкой; вопрос —
 * кнопка на всю ширину, знак справа; ответ раскрытого вопроса лежит
 * внутри той же карточки.
 *
 * ОДИН КОМПОНЕНТ НА ВСЕ СТРАНИЦЫ. Разметка аккордеона одинакова у
 * программы обучения и у страницы агента, а оформление было написано
 * только для программы: `.tri-ai-faq__*` не описан в CSS ни одним
 * правилом, и на странице агента блок выводился маркированным списком.
 *
 * Доступность обеспечивает разметка, а не этот файл: вопрос — настоящая
 * кнопка с aria-expanded и aria-controls, свёрнутый ответ скрыт
 * атрибутом hidden и присутствует в HTML всегда. Без JavaScript
 * страница остаётся читаемой.
 */

.tri-accordion__list {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-10);
}

.tri-accordion__item {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-14);
	border: var(--tri-border-width) solid var(--tri-color-border);
	overflow: hidden;
}

.tri-accordion__button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-16);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: start;
	padding: var(--tri-space-20) var(--tri-space-24);
	font: inherit;
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

.tri-accordion__sign {
	font-size: var(--tri-fs-20);
	color: var(--tri-color-muted-soft);
	flex-shrink: 0;
	line-height: 1;
}

/* Раскрытый вопрос показывает знак «минус» поворотом, а не подменой
   символа: так знак не прыгает по ширине. */
.tri-accordion__button[aria-expanded="true"] .tri-accordion__sign {
	transform: rotate(45deg);
}

.tri-accordion__answer {
	padding: 0 var(--tri-space-24) var(--tri-space-20);
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
}

.tri-accordion__answer > p {
	margin: 0;
}