/**
 * SigmaGraft Clinical Education — What to know before a biomaterial is used.
 *
 * Heading beside a list of native <details>. No JavaScript: the browser owns the
 * open/close state, so it works with scripting disabled and more than one row
 * can stay open. Own `sgxs-fq` namespace.
 */

.sgxs-fq {
	--sgxs-fq-navy: #123D6D;
	--sgxs-fq-blue: #1767B0;
	--sgxs-fq-line: #DCE5EE;
	--sgxs-fq-text: #617479;

	position: relative;
	background-color: #FFFFFF;
	padding: 96px 0;
}

.sgxs-fq__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.sgxs-fq__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: 9vw;
	width: 100%;
	margin-inline: auto;
	padding-inline: 6vw;
}

.sgxs-fq--boxed .sgxs-fq__inner {
	max-width: 1240px;
}

.sgxs-fq--full .sgxs-fq__inner {
	max-width: none;
}

.sgxs-fq__head,
.sgxs-fq__list {
	min-width: 0;
}

/* ═════════ Heading ═════════ */

.sgxs-fq__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 23px;
	color: #165CA5;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sgxs-fq__eyebrow-rule {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
	background-color: currentColor;
}

.sgxs-fq__eyebrow-text {
	min-width: 0;
}

.sgxs-fq__title {
	margin: 0;
	color: var(--sgxs-fq-navy);
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.sgxs-fq__title em,
.sgxs-fq__title i {
	color: var(--sgxs-fq-blue);
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
}

.sgxs-fq__lede {
	margin: 18px 0 0;
	color: #65727E;
	font-size: 13px;
	line-height: 1.75;
	text-wrap: pretty;
}

/* ═════════ Rows ═════════ */

.sgxs-fq__item {
	border-top: 1px solid var(--sgxs-fq-line);
}

.sgxs-fq__item.is-last {
	border-bottom: 1px solid var(--sgxs-fq-line);
}

/*
 * The default disclosure triangle is suppressed in both syntaxes — Safari still
 * needs the WebKit pseudo-element — and replaced by a controllable glyph.
 */
.sgxs-fq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 23px 0;
	color: var(--sgxs-fq-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
	transition: color 200ms ease;
}

.sgxs-fq__q::-webkit-details-marker {
	display: none;
}

.sgxs-fq__q:hover {
	color: var(--sgxs-fq-blue);
}

.sgxs-fq__q:focus-visible {
	outline: 2px solid var(--sgxs-fq-blue);
	outline-offset: 3px;
}

.sgxs-fq__q-text {
	min-width: 0;
	text-wrap: pretty;
}

.sgxs-fq__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--sgxs-fq-blue);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 220ms ease, color 200ms ease;
}

/* Rotating the plus into a cross keeps one glyph doing both states. */
.sgxs-fq__item[open] .sgxs-fq__mark {
	transform: rotate(45deg);
}

.sgxs-fq__a {
	margin: 0;
	padding: 0 40px 25px 0;
	color: var(--sgxs-fq-text);
	font-size: 12px;
	line-height: 1.7;
	text-wrap: pretty;
}

/* ═════════ Tablet ═════════ */

@media (max-width: 1024px) {

	.sgxs-fq {
		padding: 80px 0;
	}

	.sgxs-fq__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* ═════════ Mobile ═════════ */

@media (max-width: 767px) {

	.sgxs-fq {
		padding: 64px 0;
	}

	.sgxs-fq__inner {
		gap: 26px;
	}

	/* A 40px right inset on a phone wastes a tenth of the line. */
	.sgxs-fq__a {
		padding-right: 0;
	}

	.sgxs-fq__q {
		gap: 14px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sgxs-fq__q,
	.sgxs-fq__mark {
		transition: none !important;
	}
}