/*
 * Legal pages (BUILD.md §10.10): the hero, the table of contents beside the document, the
 * document and the dark CTA band of page-legal.php. The document is the page content, built
 * from the siteupwell/page-* patterns (inc/legal.php). Loaded with the Legal template only, and
 * in the editor for the document. Values are site.css tokens (DECISIONS.md §8.1).
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.suw-legal-hero {
	padding: var(--hero-top) 0 var(--flow-xl);
}

.suw-legal-hero__title {
	margin-top: var(--s-7);
}

.suw-legal-hero__sub {
	max-width: 32em;
	margin-top: var(--flow-sm);
}

/* Draft note: the badge, then the text, which wraps below it on narrow screens. */
.suw-legal-hero__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-3-5);
	max-width: 820px; /* as the draft note block style in site.css */
	margin-top: var(--s-7);
	padding: var(--s-4) var(--s-5);
	border: 1px dashed var(--ink);
	border-radius: var(--radius-md);
	background: var(--note-bg);
}

.suw-legal-hero__note .suw-badge {
	flex: none;
}

.suw-legal-hero__note-text {
	flex: 1 1 280px; /* component constant: the width below which the text wraps under the badge */
	color: var(--text-2);
	font-size: var(--body-sm);
	font-weight: 500;
	line-height: var(--lh-body);
}

/* ==========================================================================
   Contents and document: two columns, one at 900px and below (the toc block is
   sticky above it)
   ========================================================================== */

.suw-legal {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr); /* component constant: the contents column */
	gap: var(--s-16);
	padding-bottom: var(--section-y);
}

.suw-legal__doc {
	min-width: 0;
}

@media (width <= 900px) {
	.suw-legal {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-10);
	}
}

/* Document header: number, title (H2), intro and the "Last updated" line. */
.suw-doc__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-3-5);
	padding: var(--s-6) 0 var(--s-7);
	border-top: 1px solid var(--ink);
}

.suw-doc__no {
	color: var(--muted);
	font-size: var(--label);
	font-weight: 700;
	line-height: normal;
	letter-spacing: var(--tr-label);
}

.suw-doc__head h2 {
	font-size: var(--h2-sm);
	font-weight: 300;
	line-height: var(--lh-heading);
	letter-spacing: var(--tr-heading);
}

.suw-doc__intro {
	max-width: 40em;
	color: var(--text-2);
	font-size: var(--body-lg);
	font-weight: 500;
	line-height: var(--lh-body);
}

/* Rows: the heading (H3) on the left, the row's paragraphs and lists on the right. */
.suw-doc__row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr); /* component constant: the heading column */
	gap: var(--s-2) var(--s-10);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--line-soft);
}

.suw-doc__row > * {
	grid-column: 2;
}

.suw-doc__row > :first-child {
	grid-column: 1;
}

.suw-doc__row h3 {
	font-size: var(--body-lg);
	font-weight: 700;
	line-height: var(--lh-list);
}

.suw-doc__row :where(p, ul) {
	max-width: 44em;
	color: var(--text-2);
	font-size: var(--body);
	font-weight: 500;
}

.suw-doc__row p {
	line-height: var(--lh-prose);
}

.suw-doc__row ul {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding-left: var(--s-5);
}

@media (width <= 900px) {
	.suw-doc__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.suw-doc__row > *,
	.suw-doc__row > :first-child {
		grid-column: auto;
	}
}

/* ==========================================================================
   CTA band: two-tone display heading, the white button at the bottom right
   ========================================================================== */

.suw-legal-cta {
	padding-block: var(--section-y-lg);
}

.suw-legal-cta__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); /* component constant */
	gap: var(--s-10) var(--s-20);
	align-items: end;
}

.suw-legal-cta__title {
	font-size: var(--h-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
}

.suw-legal-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-self: end;
}