/**
 * M8 Part 2 — editorial article / trust-page prose styles. Every value
 * references a token from tokens.css, same discipline as components.css;
 * no new design system, just the typographic rules single.php/page.php
 * need that no earlier milestone required (real long-form body content).
 */

.dv-page--article {
	max-width: 760px;
}

.dv-article__header {
	padding: var(--dv-space-5) 0 var(--dv-space-3);
}

.dv-article__header h1 {
	font-family: var(--dv-font-serif);
	font-size: var(--dv-text-hero-mobile);
	line-height: 1.1;
	font-weight: 500;
	color: var(--dv-color-primary);
	margin: 0 0 var(--dv-space-2);
	letter-spacing: -0.5px;
}

@media (min-width: 900px) {
	.dv-article__header h1 {
		font-size: var(--dv-text-h2);
	}
}

.dv-article__meta {
	font-size: var(--dv-text-meta);
	color: rgba(32, 35, 32, 0.6);
}

.dv-article__body {
	font-size: var(--dv-text-body-lg);
	line-height: 1.65;
	color: var(--dv-color-text);
	padding-bottom: var(--dv-space-6);
}

.dv-article__body h2 {
	font-family: var(--dv-font-serif);
	font-size: var(--dv-text-h3);
	font-weight: 500;
	color: var(--dv-color-primary);
	margin: var(--dv-space-6) 0 var(--dv-space-2);
}

.dv-article__body h3 {
	font-family: var(--dv-font-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--dv-color-primary);
	margin: var(--dv-space-4) 0 var(--dv-space-2);
}

.dv-article__body p {
	margin: 0 0 var(--dv-space-3);
}

.dv-article__body ul,
.dv-article__body ol {
	margin: 0 0 var(--dv-space-3);
	padding-left: var(--dv-space-4);
}

.dv-article__body li {
	margin-bottom: var(--dv-space-1);
}

.dv-article__body a {
	text-decoration: underline;
}

.dv-article__body strong {
	font-weight: 600;
}

.dv-article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--dv-space-4) 0;
	font-size: var(--dv-text-body);
}

.dv-article__body caption {
	text-align: left;
	font-size: var(--dv-text-meta);
	color: rgba(32, 35, 32, 0.6);
	margin-bottom: var(--dv-space-1);
}

.dv-article__body th,
.dv-article__body td {
	text-align: left;
	padding: var(--dv-space-2) var(--dv-space-3);
	border-bottom: 1px solid rgba(32, 35, 32, 0.1);
	vertical-align: top;
}

.dv-article__body th {
	font-weight: 600;
	color: var(--dv-color-primary);
	background: var(--dv-color-surface);
}

.dv-article__body tbody tr:hover {
	background: rgba(32, 35, 32, 0.02);
}

@media (max-width: 640px) {
	.dv-article__body table,
	.dv-article__body thead,
	.dv-article__body tbody,
	.dv-article__body th,
	.dv-article__body td,
	.dv-article__body tr {
		display: block;
	}

	.dv-article__body thead {
		display: none;
	}

	.dv-article__body tr {
		margin-bottom: var(--dv-space-3);
		border-bottom: 2px solid rgba(32, 35, 32, 0.1);
	}

	.dv-article__body td {
		border-bottom: none;
		padding: var(--dv-space-1) 0;
	}

	.dv-article__body td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--dv-text-meta);
		font-weight: 600;
		color: rgba(32, 35, 32, 0.5);
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
}

.dv-page--trust .dv-article__body {
	font-size: var(--dv-text-body);
}