/*
 * smh/service-ledger: the services ledger (docs/ARCHITECTURE.md 5.3.3, 5.4 aside, 5.5). Owner: WP3.
 * Rows, not cards: number | icon | title | summary | chevron, hairlines between rows, the whole row one link.
 * Both directions via logical properties; only the chevron mirrors in RTL. Chromium 114: no nesting, no :dir().
 */

.smh-service-ledger { --smh-ledger-pad-block: 1.5rem; --smh-ledger-pad-inline: 1rem; }
.smh-service-ledger__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: var(--smh-lh-snug);
	color: var(--smh-muted);
}
.smh-service-ledger__list { list-style: none; margin: 0; padding: 0; }

/* ---------- Row ---------- */
.smh-service-ledger__row {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem 2rem minmax(0, 1fr) 1.25rem;
	grid-template-areas:
		"num icon title chev"
		".   .    sum   sum";
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	align-items: center;
	padding: 1.25rem var(--smh-ledger-pad-inline);
	border-block-start: 1px solid var(--smh-line);
	transition: background-color var(--smh-state) linear;
}
.smh-service-ledger__row:last-child { border-block-end: 1px solid var(--smh-line); }
/* The 3 px petrol bar on the inline start (hover / keyboard focus). */
.smh-service-ledger__row::before {
	content: "";
	position: absolute;
	inset-block: -1px;
	inset-inline-start: 0;
	inline-size: 3px;
	background: var(--smh-petrol);
	opacity: 0;
	transition: opacity var(--smh-state) linear;
}
.smh-service-ledger__row:hover,
.smh-service-ledger__row:focus-within { background: var(--smh-ground); }
.smh-service-ledger__row:hover::before,
.smh-service-ledger__row:focus-within::before { opacity: 1; }

.smh-service-ledger__num {
	grid-area: num;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	color: var(--smh-petrol-light);
}
.smh-service-ledger__icon { grid-area: icon; display: flex; color: var(--smh-petrol); }
.smh-service-ledger__icon svg { inline-size: 2rem; block-size: 2rem; }
.smh-service-ledger__title {
	grid-area: title;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
	color: var(--smh-petrol);
}
html[lang|="en"] .smh-service-ledger__title { line-height: var(--wp--custom--line-height--heading-en); }
.smh-service-ledger__link { color: inherit; text-decoration: none; }
.smh-service-ledger__link::after { content: ""; position: absolute; inset: 0; } /* stretch the link over the row */
.smh-service-ledger__row:hover .smh-service-ledger__link { text-decoration: underline; text-decoration-thickness: 1px; }
.smh-service-ledger__summary {
	grid-area: sum;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--smh-ink);
}
.smh-service-ledger__chevron { grid-area: chev; display: flex; justify-content: flex-end; color: var(--smh-petrol); }
.smh-service-ledger__chevron svg { inline-size: 1.25rem; block-size: 1.25rem; }
[dir="rtl"] .smh-service-ledger__chevron svg { transform: scaleX(-1); }

/* ---------- Full variant (services page): who-for and regulatory frame ---------- */
.smh-service-ledger__meta {
	grid-column: 3 / -1;
	display: grid;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--smh-lh-relaxed);
}
.smh-service-ledger__meta dt { font-weight: 500; color: var(--smh-muted); }
.smh-service-ledger__meta dd { margin: 0; color: var(--smh-ink); }
.smh-service-ledger__meta dd + dd { margin-block-start: 0.25rem; }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
	.smh-service-ledger__row { padding-block: 1.25rem; padding-inline: 0.5rem; column-gap: 0.625rem; }
	.smh-service-ledger__summary { font-size: var(--smh-fs-control); }
	.smh-service-ledger__icon svg { inline-size: 1.75rem; block-size: 1.75rem; }
}

/* ---------- Tablet landscape and up: one line per service ---------- */
@media (min-width: 1024px) {
	.smh-service-ledger--home .smh-service-ledger__row,
	.smh-service-ledger--full .smh-service-ledger__row {
		grid-template-columns: 4rem 2.5rem minmax(0, 4fr) minmax(0, 6fr) 1.5rem;
		grid-template-areas: "num icon title sum chev";
		column-gap: 1.5rem;
		padding-block: var(--smh-ledger-pad-block);
	}
	.smh-service-ledger__icon svg { inline-size: 2rem; block-size: 2rem; }
	.smh-service-ledger--meta .smh-service-ledger__row { grid-template-areas: "num icon title sum chev" ". . . meta ."; }
	.smh-service-ledger--meta .smh-service-ledger__meta { grid-area: meta; grid-column: auto; }
}
@media (min-width: 1180px) {
	/* Full variant with meta (render.php adds --meta only when every row has who-for or a frame): who-for and frame
	   share one stacked column. Without it the full ledger keeps the home layout (no empty cells). */
	.smh-service-ledger--meta .smh-service-ledger__row {
		grid-template-columns: 3.5rem 2.5rem minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr) 1.5rem;
		grid-template-areas: "num icon title sum meta chev";
	}
	.smh-service-ledger--meta .smh-service-ledger__meta { margin: 0; }
}

/* ---------- Compact variant (service page aside, 404): number, title, chevron ---------- */
.smh-service-ledger--compact .smh-service-ledger__row {
	grid-template-columns: 2rem minmax(0, 1fr) 1.125rem;
	grid-template-areas: "num title chev";
	column-gap: 0.625rem;
	min-block-size: 3rem;
	padding: 0.625rem 0.75rem;
}
.smh-service-ledger--compact .smh-service-ledger__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--smh-lh-snug);
}
.smh-service-ledger--compact .smh-service-ledger__chevron svg { inline-size: 1.125rem; block-size: 1.125rem; }