/*
 * Accordion.
 *
 * Rows are <details>, so the open and closed states are the element's own and
 * need no class bookkeeping. The lead sits beside the rows on the same 1fr 1fr
 * grid the section intro uses, and drops above them when there is not room.
 */

.accordion__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;

	@media (min-width: 62rem) {
		grid-template-columns: 1fr 1fr;
	}
}

/* Without a lead the rows would otherwise sit in a half-width column with
	   nothing beside them. */

.accordion__inner--bare {
	@media (min-width: 62rem) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.accordion__lead {
	@media (min-width: 62rem) {
		position: sticky;

		/* Clears the header, which is not pinned, so this only matters once
			   the rows are long enough to scroll past the lead. */

		top: 2rem;
	}
}

.accordion__heading {
	margin: 0;
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.375rem);
	line-height: 1.02;
	letter-spacing: 0.5px;
}

.accordion__item {
	border-top: 1px solid color-mix(in srgb, var(--sk-gray) 30%, transparent);

	&:last-child {
		border-bottom: 1px solid color-mix(in srgb, var(--sk-gray) 30%, transparent);
	}
}

.accordion__question {
	display: flex;
	gap: 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 1.25rem;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;

	/* Removes the disclosure triangle, which no longer matches the marker
		   drawn on the right. Safari needs the -webkit pseudo-element; the
		   standard list-style covers everything else. */

	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}

	&:hover {
		color: var(--sk-accent);
	}

	/* :focus-visible alone would lose the ring in browsers that give summary
		   focus without the heuristic ever matching. */

	&:focus-visible {
		outline: 2px solid var(--sk-accent);
		outline-offset: -2px;
	}
}

/*
	 * A plus that becomes a minus: two bars, one of which is rotated away when
	 * the row opens. Drawn rather than set as a glyph so it lines up with the
	 * text at every size.
	 */

.accordion__marker {
	position: relative;
	flex: 0 0 auto;
	inline-size: 0.875rem;
	block-size: 0.875rem;
	align-self: center;

	&::before,
	&::after {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 100%;
		block-size: 2px;
		background: currentcolor;
		content: "";
		transition: transform var(--sk-transition);
	}

	&::before {
		transform: translateY(-50%);
	}

	&::after {
		transform: translateY(-50%) rotate(90deg);
	}
}

.accordion__item[open] .accordion__marker::after {
	transform: translateY(-50%) rotate(0deg);
}

.accordion__answer {
	padding-block-end: 1.5rem;
	color: var(--sk-gray-copy);
	font-size: 0.9375rem;
	line-height: 1.65;

	/* Keeps the answer clear of the marker column so the measure matches the
		   question above it. */

	padding-inline-end: 2.375rem;

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
	}

	a {
		color: var(--sk-accent);
	}
}
@media (prefers-reduced-motion: reduce) {
	.accordion__marker::before,
	.accordion__marker::after {
		transition: none;
	}
}

/*
 * Sliding the row open, where the browser can do it.
 *
 * <details> has nothing to animate between until the content has a size to
 * interpolate towards, which is what interpolate-size and ::details-content
 * provide. Guarded rather than assumed: without support the row snaps open,
 * which is how <details> has always behaved and is perfectly usable.
 */

@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	.accordion__item {
		interpolate-size: allow-keywords;

		&::details-content {
			overflow: hidden;
			block-size: 0;
			transition:
				block-size var(--sk-transition),
				content-visibility var(--sk-transition) allow-discrete;
		}

		&[open]::details-content {
			block-size: auto;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.accordion__item::details-content {
			transition: none;
		}
	}
}