/**
 * Highlights, editorial rows.
 *
 * Loaded only on a tour that chose this layout, and every selector is under
 * .wptm-sara. The card layout's rules are in tour.css and are untouched: a
 * tour using the cards never fetches this file, and a tour using this never
 * has both.
 *
 * The accent is inherited. tour.css declares --wptm-accent on the page and the
 * accent setting overrides it, so this file names a colour exactly nowhere —
 * change the accent in settings and these rows follow it.
 *
 * Logical properties throughout, so the same file serves Arabic. No font
 * family: the rows inherit the theme's typography, which is what stops them
 * looking like something pasted onto the page.
 */

/*
 * Every rule is scoped under the section wrapper. SaraDesign, a tour
 * layout, carries the same .wptm-sara prefix on its page root; on a
 * SaraDesign tour that uses these highlights an unscoped .wptm-sara rule
 * reached the whole page, and this 46rem measure was narrowing it.
 */
.wptm-block--sara .wptm-sara {
	max-width: 46rem;
}

.wptm-block--sara .wptm-sara__heading {
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-family: inherit;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.012em;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.wptm-block--sara .wptm-sara__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/*
 * A rule between rows rather than a border around each.
 *
 * Boxing every highlight is what turns three sentences into three cards
 * competing for attention. One hairline says "these are separate" and nothing
 * else, which is all that needed saying.
 */
.wptm-block--sara .wptm-sara__item {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	align-items: start;
	gap: 0 1rem;
	margin: 0;
	padding-block: clamp(18px, 2.4vw, 26px);
	border-block-start: 1px solid var(--wptm-line, rgba(0, 0, 0, 0.1));
	list-style: none;
}

.wptm-block--sara .wptm-sara__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.wptm-block--sara .wptm-sara__item:last-child {
	padding-block-end: 0;
}

/*
 * The number is the only ornament, and it is information: it says which of six
 * this is. Set in the accent, at the weight of the body text rather than
 * larger, so it anchors the row without competing with its title.
 */
.wptm-block--sara .wptm-sara__number {
	padding-block-start: 0.15em;
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--wptm-accent, #b8853a);
}

.wptm-block--sara .wptm-sara__body {
	min-width: 0;
}

.wptm-block--sara .wptm-sara__title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(1.02rem, 1.7vw, 1.16rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}

.wptm-block--sara .wptm-sara__note {
	margin: 0.4rem 0 0;
	max-width: 62ch;
	font-size: 0.97rem;
	line-height: 1.7;
	color: var(--wptm-muted, #5b6472);
	text-wrap: pretty;
}

@media (max-width: 600px) {
	.wptm-block--sara .wptm-sara__item {
		grid-template-columns: 1.9rem 1fr;
		gap: 0 0.7rem;
		padding-block: 20px;
	}

	/* Never below the body size the theme sets: a note nobody can read on a
	   phone is a note that may as well not be there. */
	.wptm-block--sara .wptm-sara__note {
		font-size: 0.95rem;
	}
}