/*
 * The free bursary pass line (includes/lr-bursary-line.php): a banner under the pass page's
 * hero, and the last line of the free account card on the ESAT pages, /teaching/ and the
 * homepage. Theme tokens only, so the dark theme redefines the colours and nothing here
 * changes. The mark is 24px and takes the colour of the text beside it, as every mark on the
 * site does (theme-next/prototypes/icons/README.md).
 *
 * Selectors carry three classes on purpose: the prose measure in lr-modern.css,
 * body:not(.lr-home) .entry-content p { max-width: var(--lr-measure) }, is specificity 0,2,2,
 * and would hold the line to about 560 px.
 */

.lr-bursary-line__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lr-notice-mark__svg {
	display: block;
	width: 24px;
	height: 24px;
}

.lr-bursary-line__link,
.lr-bursary-line__keep {
	white-space: nowrap;
}

.lr-bursary-line__link {
	font-weight: 600;
}

/* The banner under the pass page's hero, as wide as the hero (.lr-section-centered) so the two
   line up, in the card look of the free account card. */
.lr-bursary-banner {
	box-sizing: border-box;
	max-width: var(--lr-max-width-centered, 900px);
	margin: var(--lr-gap-large, 24px) auto 0;
}

.lr-bursary-banner .lr-bursary-line.lr-bursary-line--pass {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: none;
	margin: 0;
	padding: 14px 20px;
	background: var(--lr-color-bg-card);
	border: 1px solid var(--lr-color-border-card);
	border-left: 4px solid var(--lr-color-accent);
	border-radius: 14px;
	color: var(--lr-color-text-main);
	font-size: var(--lr-font-size-body, 1rem);
	line-height: var(--lr-line-height-small, 1.4);
}

.lr-bursary-line--pass .lr-bursary-line__mark {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lr-color-primary-subtle, rgba(0, 33, 71, 0.1));
}

/* The last line of the free account card's text, beside the button: one line more, not a row,
   because the quiet card on the ESAT pages exists to stay short (a teacher read the full card
   as a sign up wall, 24 September 2026). The funnel's .lr-pass-funnel p { margin: 0 } is
   0,1,1; this is 0,3,0. */
.lr-pass-funnel .lr-bursary-line.lr-bursary-line--card {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: none;
	margin: 6px 0 0;
	color: var(--lr-color-text-muted);
	font-size: var(--lr-font-size-small, 0.9375rem);
	line-height: var(--lr-line-height-small, 1.4);
}

/* Phone: the text runs to two or three lines, so the mark sits beside the first. */
@media (max-width: 640px) {
	.lr-bursary-banner .lr-bursary-line.lr-bursary-line--pass {
		align-items: flex-start;
		padding: 12px 14px;
	}

	.lr-pass-funnel .lr-bursary-line.lr-bursary-line--card {
		align-items: flex-start;
	}
}