/*
 * Questions from You. Figma 2329:57274 desktop: header, 32 gap, rows 480 wide
 * (12 gap) on the left, answer panel 676 wide on the right (64 gap, same height
 * as the list). Mobile 2329:57588: one column, 16 gap, open item = grey panel.
 */

.questions .section-head { margin-bottom: 32px; }
.questions .section-head__text { font: var(--f-body-xs); }

.questions__grid {
	display: grid;
	grid-template-columns: minmax(0, 480fr) minmax(0, 676fr);
	/* One auto row per question, then a 1fr row that absorbs a tall answer. */
	grid-template-rows: repeat(var(--n, 6), auto) 1fr;
	gap: 12px clamp(24px, 4.4vw, 64px);
	align-items: start;
}

.questions__row {
	grid-column: 1;
	grid-row: var(--i);
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 15px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	font: var(--f-subtitle-l);
	text-align: left;
	transition: background-color .15s ease, border-color .15s ease;
}

.questions__row:hover { border-color: var(--c-dark-purple); }
.questions__row[aria-expanded="true"] { background: var(--c-bg-purple); }

.questions__q { flex: 1; min-width: 0; }

.questions__num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--c-primary);
	color: var(--c-text-white);
	font: var(--f-header-3xs);
}

.questions__num--l { width: 60px; height: 60px; font: var(--f-header-l); }

.questions__panel {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border-radius: var(--r-m);
	background: var(--c-bg-grey);
	outline: none;
}

.questions__panel[hidden] { display: none; }

.questions__title { font: var(--f-header-m); color: var(--c-text-dark); }

.questions__answer {
	margin-top: -4px;                 /* 12 between question and answer */
	font: var(--f-body-s);
	color: var(--c-text-dark);
}

@media (max-width: 767px) {
	.questions .section-head { margin-bottom: 24px; }

	.questions__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: 16px;
	}

	.questions__row,
	.questions__panel { grid-column: 1; grid-row: auto; }

	.questions__row[aria-expanded="true"] { display: none; }

	.questions__panel { padding: 16px; }
	.questions__title { font: var(--f-header-s); }
}