/*
 * Common questions. Figma 2022:61691 desktop: grey box 1220 wide, radius 20,
 * padding 64, two 480 columns 60 apart. 2022:61692 mobile: full-bleed grey band,
 * padding 64/20, stacked, 24 gap. Items: 16 gap, plus icon 16, line under each.
 */

.cq__box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 24px 60px;
	padding: 64px;
	border-radius: var(--r-l);
	background: var(--c-bg-grey);
}

.cq__intro,
.cq__list {
	flex: 0 1 480px;
	min-width: 0;
}

.cq__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.cq__head .section-head__text { font: var(--f-body-xs); }

.cq__img { width: 350px; max-width: 100%; height: auto; }

.cq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cq__item { border-bottom: 1px solid var(--c-border-light); }

.cq__question {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 15px;               /* 16 minus the line */
	font: var(--f-subtitle-l);
	color: var(--c-text-dark);
	list-style: none;
	cursor: pointer;
}

.cq__question::-webkit-details-marker { display: none; }
.cq__question:hover { color: var(--c-primary); }

/* Plus that turns into a minus. */
.cq__sign {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--c-primary);
}

.cq__sign::before,
.cq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
}

.cq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.cq__item[open] .cq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

.cq__answer {
	padding: 0 0 16px 24px;
	margin-top: -4px;
	font: var(--f-body-xs);
	color: var(--c-text-grey);
}

@media (max-width: 1023px) {
	.cq__box { flex-direction: column; align-items: stretch; padding: 64px 40px; }
	.cq__intro,
	.cq__list { flex-basis: auto; }
}

@media (max-width: 767px) {
	.cq .container { padding-inline: 0; }

	.cq__box {
		padding: 64px var(--gutter);
		border-radius: 0;
	}
}