/**
 * Firm review — published rulebook.
 *
 * One card per rule type, one row per scope (data#321). The comparison between
 * products is the point of the card, so the rows share a grid and the values
 * sit in one column where the eye can run down them.
 */

.pfg-rv-rules__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 12px;
	margin: 0;
	min-width: 0;
}

.pfg-rv-rules__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 13px 15px;
	border-radius: 14px;
	background: rgba(13, 15, 22, 0.4);
	border: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
	min-width: 0;
}

.pfg-rv-rules__cardhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.pfg-rv-rules__type {
	margin: 0;
	font-size: clamp(10.5px, 0.6vw, 12.5px);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
}

.pfg-rv-rules__count {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--text-4, #838A9D);
}

/*
 * Product, stage, value. The value column is fixed-width and right-aligned so
 * three rows of one card line up: reading 35% / 20% / 40% down a column is the
 * comparison this card exists to make, and it does not survive being ragged.
 */
.pfg-rv-rules__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(64px, auto);
	align-items: baseline;
	column-gap: 12px;
	row-gap: 4px;
	padding-top: 9px;
	border-top: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
}

/* The first row sits under the card head, which is separation enough. */
.pfg-rv-rules__row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.pfg-rv-rules__product {
	font-size: clamp(12.5px, 0.72vw, 14.5px);
	color: var(--rv-text-strong, #E7EAF3);
	overflow-wrap: anywhere;
}

.pfg-rv-rules__stage {
	font-size: clamp(11px, 0.62vw, 12.5px);
	color: var(--text-4, #838A9D);
	white-space: nowrap;
}

.pfg-rv-rules__value {
	font-size: clamp(12.5px, 0.72vw, 14.5px);
	font-variant-numeric: tabular-nums;
	color: var(--rv-text-strong, #E7EAF3);
	text-align: right;
	white-space: nowrap;
}

/*
 * The editorial note, kept because it carries what the number cannot — one of
 * these records that the firm's own homepage contradicts the rule. Spans the
 * grid so it reads as prose rather than as a fourth column.
 */
.pfg-rv-rules__note {
	grid-column: 1 / -1;
	margin: 0;
	font-size: clamp(11.5px, 0.66vw, 13px);
	line-height: 1.55;
	color: var(--rv-text-body, #A6ACC0);
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	/* Stage and value drop under the product rather than squeezing to nothing. */
	.pfg-rv-rules__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.pfg-rv-rules__stage {
		text-align: right;
	}

	.pfg-rv-rules__value {
		grid-column: 1 / -1;
		text-align: left;
	}
}

/*
 * READABLE ON A PHONE (mobile follow-up, 2026-09-17). The type clamps above
 * bottom out at their minimum on every phone, so the note read at 11.5px, the
 * stage at 11px and product and value at 12.5px. Reading text takes the `ui`
 * token, which is 14px at these widths; the card's uppercase eyebrow (the rule
 * type) and its count stay labels, lifted to the 12.5px `small` step. The
 * breakpoint is the theme's phone tier; above it nothing changes.
 */
@media (max-width: 760px) {
	.pfg-rv-rules__product,
	.pfg-rv-rules__stage,
	.pfg-rv-rules__value,
	.pfg-rv-rules__note {
		font-size: var(--wp--preset--font-size--ui, 14px);
	}

	.pfg-rv-rules__type,
	.pfg-rv-rules__count {
		font-size: var(--wp--preset--font-size--small, 12.5px);
	}
}

/*
 * The firm heading on a rules collection page links the review (#380 N6).
 * It keeps the heading's colour and type; a hairline underline says it is a
 * link, and hover brightens the hairline (design.md: no lift, no colour fill).
 */
.pfg-rv-rules__headlink {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: var(--border-strong, rgba(255, 255, 255, 0.14));
}

.pfg-rv-rules__headlink:hover,
.pfg-rv-rules__headlink:focus-visible {
	text-decoration-color: currentColor;
}