/*
 * Astro lesson-nav CSS — verbatim port of the .lesson-nav* rules from
 * ~/boswell-poc/src/pages/media/lessons/[order].astro lines 159-182.
 *
 * Owned by the bozzies/lesson-nav block.
 *
 * Documented edits vs the Astro source:
 *   (none) — `.lesson-nav__link` sets `border: 0` at (0,1,0) which beats
 *   global.css's `a { border-bottom: 1px solid var(--link) }` at (0,0,1);
 *   `.lesson-nav__name { color: var(--ink) }` and `.lesson-nav__label
 *   { color: var(--text-on-paper-muted) }` both at (0,1,0) beat `a { color:
 *   var(--link) }`. No specificity bump needed.
 */

/* Prev / All / Next */
.lesson-nav { border-top: 1px solid var(--paper-hairline); }
.lesson-nav__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--space-5);
	align-items: center;
}
.lesson-nav__link {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-1);
	border: 0;
	padding-block: var(--space-3);
	max-width: 22rem;
}
.lesson-nav__link--prev { text-align: left; }
.lesson-nav__link--all { text-align: center; }
.lesson-nav__link--next { text-align: right; justify-self: end; }
.lesson-nav__label { font-family: var(--font-ui); font-weight: 500; font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-on-paper-muted); }
.lesson-nav__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); line-height: 1.15; }
@media (max-width: 640px) {
	.lesson-nav__inner { grid-template-columns: 1fr; text-align: center; }
	.lesson-nav__link { text-align: center; justify-self: center; max-width: none; }
}