/* Shared design-system specimen infrastructure.
   Used across multiple specimen pages. Page-specific layouts go in
   their own file under foundations/ or components/. */


/* module-example — wrapper for specimen blocks: heading + component. */

module-example {
	display: block;
	padding-block: 2rem;
	border-top: 1px solid var(--stroke-auxiliary);

	h3, h4 {
		color: var(--ink-primary);
		margin-bottom: 1rem;
	}

	p {
		color: var(--ink-secondary);
		margin-bottom: 1rem;
	}

	code {
		background-color: var(--fill-auxiliary);
		padding: 0.125em 0.375em;
		border-radius: 3px;
		font-size: 0.9em;
	}
}


/* Syntax comparison — side-by-side layout for comparing snippet vs study. */

.syntax-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-block: 1rem;
}

.syntax-comparison .snippet-side,
.syntax-comparison .study-side {
	min-width: 0; /* prevent grid blowout */
}

.syntax-comparison h3 {
	margin-bottom: 0.5rem;
}

@media (max-width: 800px) {
	.syntax-comparison {
		grid-template-columns: 1fr;
	}
}