/* ============================================================================
   VTP / J3dv samples page — small additions layered on the shared site.css
   design system. Keep site.css itself byte-identical to htdocs/css/site.css
   (mirrored asset); anything VTP-specific belongs here.
   ========================================================================= */

/* Keep the in-page anchor targets clear of the sticky header (site.css only
   lists the portfolio's own section ids). */
#top, #overview, #licensing, #capabilities, #samples {
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* The portfolio prose never contains lists; the overview here does. */
.feature-list {
	list-style: disc;
	padding-left: 1.25rem;
	margin-top: 1.15em;
	max-width: var(--measure);
	color: var(--text-muted);
}
.feature-list li + li { margin-top: .5em; }
.feature-list a { text-decoration: underline; }

/* The shared sticky .section-head fill (site.css) is a surface-2 tint that
   assumes a .section-alt parent. The Capabilities section sits on the plain
   page background, so its header should read white like the cards below it,
   not as a tinted band. */
@media (min-width: 900px) {
	#capabilities .section-head {
		background: var(--surface);
	}
}

/* Capabilities section: the plug-in modules grouped into category cards.
   Layout, spacing and card styling follow vtp-api-grid-mockup.html. */
.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.category-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem 1.35rem;
}
.category-title {
	font-size: .8125rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--accent);
	margin: 0 0 .85rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--border);
}
.module-list { margin: 0; padding: 0; list-style: none; }
.module-item { margin-bottom: .7rem; }
.module-item:last-child { margin-bottom: 0; }
.module-name { font-weight: 600; font-size: .9rem; display: block; }
.module-desc {
	color: var(--text-muted);
	font-size: .8125rem;
	line-height: 1.45;
	display: block;
	margin-top: .1rem;
}