/* @doxallia/design — Marketing section
 * Vertical content section with optional alternating background.
 * Class prefix: .mk-section*
 */

.mk-section {
	padding: var(--s-16, 4rem) var(--s-6);
	background: var(--color-bg);
}

/* Alternating background variant — use on every other section */
.mk-section--alt {
	background: var(--color-surface-muted);
}

/* Surface background (white) */
.mk-section--surface {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.mk-section__inner {
	max-width: var(--page-max-width, 1280px);
	margin: 0 auto;
}

/* Section header — centered, max-width for readability */
.mk-section__header {
	max-width: 42rem;
	margin: 0 auto var(--s-10) auto;
	text-align: center;
}

.mk-section__eyebrow {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium, 500);
	color: var(--color-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--s-2) 0;
}

.mk-section__title {
	font-size: var(--text-3xl, 1.875rem);
	font-weight: var(--fw-bold, 700);
	color: var(--color-text);
	margin: 0 0 var(--s-4) 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.mk-section__lead {
	font-size: var(--text-lg, 1.125rem);
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
}

/* Body content — prose or custom HTML */
.mk-section__body {
	max-width: 42rem;
	margin: 0 auto;
	line-height: 1.75;
	color: var(--color-text);
}

.mk-section__body p {
	margin: 0 0 var(--s-4) 0;
}
.mk-section__body p:last-child {
	margin-bottom: 0;
}

.mk-section__body ul,
.mk-section__body ol {
	padding-left: var(--s-6);
	margin: 0 0 var(--s-4) 0;
}

.mk-section__body li {
	margin-bottom: var(--s-1);
}

.mk-section__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin: var(--s-4) 0;
}

.mk-section__body th,
.mk-section__body td {
	text-align: left;
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--color-border);
}

.mk-section__body th {
	font-weight: var(--fw-medium, 500);
	color: var(--color-text-muted);
}

/* CTA link at the bottom of a section */
.mk-section__cta {
	text-align: center;
	margin-top: var(--s-8);
}

/* Source citation — regulatory references at the bottom */
.mk-section__sources {
	margin-top: var(--s-8);
	padding-top: var(--s-4);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.mk-section__sources p {
	margin: 0;
}

/* ── Schema en Y diagram wrapper ────────────────────────── */

/* Allows horizontal scroll on narrow viewports so the SVG stays legible. */
.mk-schema-y-wrap {
	overflow-x: auto;
	margin: var(--s-6) 0;
	-webkit-overflow-scrolling: touch;
}

.mk-schema-y-wrap svg {
	/* Below this width the SVG text becomes unreadable — prefer scroll to shrink. */
	min-width: 640px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
	.mk-section {
		padding: var(--s-10, 2.5rem) var(--s-4);
	}
	.mk-section__title {
		font-size: var(--text-2xl, 1.5rem);
	}
	.mk-section__lead {
		font-size: var(--text-base);
	}
}