/*
 * am-values — an editorial "what we live by" list: each row is a bold lead + a
 * muted explanation, separated by hairlines, with an auto-generated number
 * (CSS counter — no manual numbering). Calmer and more premium than boxed cards
 * for principles/values. Fills its container; narrow it via the Container or
 * .am-measure for a shorter line length.
 *
 * Marker modes (the left column):
 *   am-values            numbered (auto CSS counter — the default)
 *   am-values--icons     an icon per item (put an am-values__icon in each item)
 *   am-values--plain     no marker
 *
 * Structure:
 *   am-values [--icons|--plain]
 *     am-values__item
 *       am-values__icon                (only in --icons mode; inline SVG or icon font)
 *       am-values__body
 *         am-values__title
 *         am-values__text
 */

/* Fills its container (like body text). For a narrower, more readable column, put
   it in a narrower Container or add the .am-measure utility. */
.am-values {
	counter-reset: am-value;
}

.am-values__item {
	counter-increment: am-value;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--am-space-400);
	padding-block: var(--am-space-500);
	border-block-start: 1px solid var(--am-color-border);
}

.am-values__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

/* The number (01, 02, … 10) — accent, aligned with the title. */
.am-values__item::before {
	content: counter(am-value, decimal-leading-zero);
	color: var(--am-color-accent);
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
	font-size: var(--am-font-size-400);
	line-height: var(--am-leading-tight);
	font-variant-numeric: tabular-nums;
}

/* Icon marker (--icons mode). Sizes an icon-font <i> or an inline SVG. */
.am-values__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-space-600);
	height: var(--am-space-600);
	color: var(--am-color-accent);
	font-size: var(--am-space-500);
	line-height: 1;
}

.am-values__icon svg {
	width: 100%;
	height: 100%;
}

/* In --icons mode the number is replaced by the icon element. */
.am-values--icons .am-values__item::before {
	content: none;
}

.am-values__title {
	margin-block: 0 var(--am-space-100);
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
	font-size: var(--am-font-size-400);
	line-height: var(--am-leading-snug);
	color: var(--am-color-heading);
}

.am-values__text {
	margin-block: 0;
	color: var(--am-color-text-muted);
}

/* Plain — no numbers, just the hairline-separated rows. */
.am-values--plain .am-values__item {
	grid-template-columns: 1fr;
}

.am-values--plain .am-values__item::before {
	content: none;
}