/* About (page-about-us.php, boards about-v1 / -mobile). Sections alternate the two grounds; spacing follows the
   code scale (DESIGN.md section 4). Tablet 768-1023 keeps the desktop columns: every row is short text. */

/* ---------- Page head: board 56 / 48, title -> intro 24 (mobile 40 / 28, 16) ---------- */
.about-intro { max-width: 820px; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }
.about-head .page-title-col { gap: 16px; }

.about-section { padding-block: var(--section-y); }
.about-alt { background: var(--ground-alt); }
.about-text { font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }
.about-measure { max-width: 820px; }

/* ---------- What we make: three cells, each with its own rule on top ---------- */
.about-make { display: grid; gap: 24px; }
.about-make li { padding-top: 18px; box-shadow: inset 0 1px 0 var(--line); font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.6; }

/* ---------- For modelers: two link cards ---------- */
.about-community { margin-top: var(--group-gap); display: grid; gap: 16px; }
.about-card {
	display: grid; gap: 8px; padding: 18px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line);
	text-decoration: none; transition: box-shadow 150ms;
}
.about-card:hover { box-shadow: inset 0 0 0 1px var(--sage); }
.about-card-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--sage-deep); }
.about-card-val { font-size: 18px; font-weight: 500; line-height: 1.3; }

/* ---------- Custom work and care ---------- */
.about-care { display: grid; gap: var(--group-gap); }
.about-care-cell { display: grid; justify-items: start; align-content: start; gap: 14px; }
.about-care-title { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: 22px; line-height: 1.2; }
.about-care-btn { margin-top: 10px; width: 100%; }
/* The two application guides (blog posts), linked like the legal text's links. */
.about-guides { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: 16px; line-height: 1.5; }
.about-guides a { color: var(--sage-deep); font-weight: 500; text-decoration-color: var(--sage); text-underline-offset: 3px; }

@media (min-width: 768px) {
	.about-head { padding-bottom: 48px; }
	.about-head .page-title-col { gap: 24px; }

	.about-make, .about-community, .about-care, .about-how { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.about-make li { grid-column: span 4; padding-top: 20px; }
	.about-community li, .about-care-cell { grid-column: span 6; }
	.about-card { padding: 24px; }
	.about-card-val { font-size: 20px; }
	.about-care-cell { gap: 16px; }
	.about-care-title { font-size: 26px; }
	.about-care-btn { margin-top: 8px; width: auto; }

	/* How we work: the title leaves the head and sits beside the text (columns 1-4 / 5-12). */
	.about-how { display: grid; row-gap: 0; }
	.about-how .section-head { display: contents; }
	.about-how .label-row { grid-column: 1 / -1; margin-bottom: var(--head-gap); }
	.about-how .h2 { grid-column: 1 / span 4; }
	.about-how .about-text { grid-column: 5 / -1; }
}