/*
 * FAQ list: question-and-answer pairs on hairlines, each a native <details>.
 *
 * No canvas draws one (open point B), so it is built from the ruled rows
 * already on the boards: the hairline rhythm and 24 padding of the document
 * list, the question set as a row title at 20 / 600 / 112% (h3--sm, D6), and
 * a brand-colour glyph at the right edge where a link row carries its arrow
 * (D18). The glyph is a plus when closed and a minus when open; both are in
 * the markup and the open state picks one, since a single-path glyph cannot
 * lose its upright stroke.
 *
 *   <div class="vdt-faq-list">
 *     <details class="vdt-faq-list__item">
 *       <summary class="vdt-faq-list__question">
 *         <span class="vdt-faq-list__question-text">…</span>
 *         <span class="vdt-faq-list__glyph vdt-faq-list__glyph--open"><?= svg(…plus.svg) ?></span>
 *         <span class="vdt-faq-list__glyph vdt-faq-list__glyph--close"><?= svg(…minus.svg) ?></span>
 *       </summary>
 *       <div class="vdt-faq-list__answer"><div class="vdt-prose">…</div></div>
 *     </details>
 *   </div>
 *
 * The answer is body copy (17 / 1.65) held to the article measure, so a long
 * answer reads as prose rather than stretching across a full-width column.
 * Everything reads semantic tokens, so it comes out right on a purple band.
 * Nothing animates open: motion is for hover and focus only.
 */

@layer vdt.components {
	.vdt-faq-list {
		border-top: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	.vdt-faq-list__item {
		border-bottom: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	/* ————————————————————————— Question ————————————————————————— */

	.vdt-faq-list__question {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--vdt-space-24);
		padding-block: var(--vdt-space-24);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-h3-sm);
		font-stretch: var(--vdt-width-sub);
		font-weight: var(--vdt-weight-semibold);
		line-height: var(--vdt-leading-h3-sm);
		list-style: none;
		cursor: pointer;
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	/* The browser's own triangle; the glyph replaces it. */
	.vdt-faq-list__question::-webkit-details-marker {
		display: none;
	}

	.vdt-faq-list__question:hover {
		color: var(--vdt-link-hover);
	}

	.vdt-faq-list__question-text {
		text-wrap: pretty;
	}

	.vdt-faq-list__glyph {
		display: inline-flex;
		grid-row: 1;
		grid-column: 2;
		width: var(--vdt-glyph);
		height: var(--vdt-glyph);
		color: var(--vdt-text-brand);
	}

	.vdt-faq-list__glyph > svg {
		width: 100%;
		height: 100%;
	}

	.vdt-faq-list__item[open] .vdt-faq-list__glyph--open,
	.vdt-faq-list__item:not([open]) .vdt-faq-list__glyph--close {
		display: none;
	}

	/* ————————————————————————— Answer ————————————————————————— */

	/*
	 * Pulled up 8 under the question, so the pair reads as one row, and
	 * padded 32 at the foot so the next question clears it. The right padding
	 * keeps the copy out from under the glyph column.
	 */
	.vdt-faq-list__answer {
		margin-top: calc(var(--vdt-space-8) * -1);
		padding: 0 calc(var(--vdt-glyph) + var(--vdt-space-24)) var(--vdt-space-32) 0;
		color: var(--vdt-text);
		font-size: var(--vdt-size-body);
		line-height: var(--vdt-leading-body);
	}

	/* ————————————————————————— Mobile ————————————————————————— */

	@media (max-width: 45rem) {
		.vdt-faq-list__question {
			column-gap: var(--vdt-space-16);
			padding-block: var(--vdt-space-20);
			font-size: var(--vdt-size-18);
		}

		.vdt-faq-list__answer {
			padding-right: 0;
			padding-bottom: var(--vdt-space-24);
		}
	}
}