/*
 * Chennai Home Guide — spec sheet component.
 *
 * Shared label/value layout for entity detail pages (Project's fields,
 * now Builder's). Values are populated server-side via Block Bindings
 * (see the plugin's *FieldBindings classes) — this file only styles
 * what's rendered, it never decides what the values are. Entity-specific
 * emphasis (e.g. Project's price rows) lives in that entity's own
 * pattern file and layers on top of this. See CLAUDE.md, "CSS
 * Architecture."
 */

.chg-spec-sheet {
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	padding-inline: var(--wp--preset--spacing--md);
	margin-block: var(--wp--preset--spacing--lg);
}

.chg-spec-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--sm);
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.chg-spec-row:last-child {
	border-bottom: none;
}

.chg-spec-row__label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chg-spec-row__value {
	margin: 0;
	font-weight: 600;
	text-align: right;
}