/*
 * Problems. Figma 2359:62103 desktop (grey band, 84px top/bottom; column,
 * 32 gap: centred header 790 wide, pill row 10 apart clipped to the column,
 * then text 576 + photo 580x387 r16, space-between), mobile 2373:58264
 * (grey band, 84px; 24 gap: left header/L, pill row bleeding to the right
 * edge, photo 350x234 r16, header/M title, full-width button).
 */

.problems {
	padding-block: 84px;
	background: var(--c-bg-grey);
}

.problems__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.problems__head { max-width: 790px; }

.problems__picker {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-self: stretch;
	min-width: 0;
}

.problems__pills {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.problems__pills::-webkit-scrollbar { display: none; }

.problems__pill { flex: none; padding-inline: 16px; }
.problems__check { display: none; }
.problems__pill[aria-selected="true"] .problems__check { display: inline-block; }

.problems__detail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(32px, 5vw, 64px);
}

.problems__detail[hidden] { display: none; }

.problems__text {
	display: flex;
	flex: 0 1 576px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.problems__title { font: var(--f-header-l); color: var(--c-text-dark); }
.problems__para { margin-top: -4px; font: var(--f-body-s); color: var(--c-text-dark); }

.problems__media {
	flex: 0 1 580px;
	min-width: 0;
	aspect-ratio: 580 / 387;
	overflow: hidden;
	border-radius: var(--r-m);
}

@media (max-width: 1023px) {
	.problems__detail { flex-direction: column-reverse; align-items: stretch; }
	.problems__text { flex-basis: auto; }
	.problems__media { flex-basis: auto; }
}

@media (max-width: 767px) {
	.problems__inner { align-items: stretch; gap: 24px; }
	.problems__picker { gap: 24px; }

	.problems__pills {
		margin-right: calc(-1 * var(--gutter));
		padding-right: var(--gutter);
	}

	.problems__detail { gap: 24px; }
	.problems__media { aspect-ratio: 350 / 234; }
	.problems__title { font: var(--f-header-m); }
	.problems__btn { width: 100%; }
}