/*
 * Quote (About, two across).
 *
 * An ink rule, 40 above the quote, then 26 / 1.4 / 500 with a hanging
 * opening mark, and a cite at 15 / 600 / 0.08em in the brand colour.
 * Two across with the 96 column gap; one column below 960.
 *
 *   <div class="vdt-quote-grid">
 *     <figure class="vdt-quote">
 *       <blockquote class="vdt-quote__text"><p>…</p></blockquote>
 *       <figcaption class="vdt-quote__cite">J.H.</figcaption>
 *     </figure>
 *   </div>
 */

@layer vdt.components {
	.vdt-quote-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vdt-space-48) var(--vdt-gap-columns);
	}

	.vdt-quote {
		padding-top: var(--vdt-space-40);
		border-top: var(--vdt-rule-width) solid var(--vdt-rule);
	}

	.vdt-quote__text {
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-quote);
		font-weight: var(--vdt-weight-medium);
		line-height: var(--vdt-leading-quote);
		letter-spacing: var(--vdt-tracking-lead);
		text-indent: -0.4em;
	}

	.vdt-quote__text p::before {
		content: "\201C";
	}

	.vdt-quote__text p::after {
		content: "\201D";
	}

	.vdt-quote__text > * + * {
		margin-top: var(--vdt-flow-para);
		text-indent: 0;
	}

	.vdt-quote__cite {
		margin-top: var(--vdt-space-24);
		color: var(--vdt-text-brand);
		font-size: var(--vdt-size-15);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-cite);
		font-style: normal;
	}

	.vdt-quote__cite::before {
		content: "\2014\00a0";
	}

	@media (max-width: 60rem) {
		.vdt-quote-grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}