/*
	The mobile pass.

	Every rule here closes a defect measured on a 375 or 768 pixel viewport by
	app/restructure/findings/mobile-spacing.md on 5 September 2026. Each block
	is named against its defect (D1 to D12) so it can be judged later against
	the number it was written to move. Nothing here is taste; the taste items
	from that audit are listed at its foot and two cheap ones are taken at the
	end of this file, marked as such.

	Loaded after lr-modern.css. Two rules have to fight `!important`
	declarations that sit inside `@layer components` in style.css, and for
	important declarations the cascade INVERTS layer order: an unlayered
	important loses, an important in an EARLIER layer wins. `primitives` is
	declared before `components` in style.css, and a layer block here appends
	to that same layer. That is the last block in this file and the comment
	on it says so again, because it is the third time this trap has cost an
	hour in this repository.
*/

/* D1: crosslink cards touched (0px) on 13 of 14 pages, because
   lr-content.php inserts a zero height spacer div between them and the
   spacing rule in style.css uses `+`, so the spacer is the adjacent sibling
   and the rule never matches. Same shape where a card follows a tile grid. */
.entry-content .lr-spacer-md + .lr-surface-raised,
.entry-content > .lr-surface-raised + .lr-surface-raised,
.entry-content .lr-grid-equal + .lr-card,
.entry-content .lr-card-grid + .lr-card,
.entry-content [class*="lr-grid"] + .lr-card {
	margin-top: var(--lr-space-6);
}

/* D3: a page level heading margin (clamp 60px to 100px) inside a 20px
   panel: "Start with your question" opened with 80px of blank. The reset in
   style.css covers .lr-card and its kin; the intent guide and the author
   provenance panel are .lr-surface-raised and were missed. */
.lr-surface-raised .lr-section-heading,
.lr-intent-guide .lr-section-heading,
.lr-author-provenance .lr-section-heading {
	margin-top: 0;
	margin-bottom: var(--lr-gap-medium);
	text-align: inherit;
}

/* D9: inline maths in the mock modules' Key Idea callouts ran up to 341px
   off the right edge and was clipped, unreadable where it matters most.
   style.css gives question text and list items a scroll box; the callout
   had none. */
.entry-content .lr-esat-key-idea {
	min-width: 0;
}

.entry-content .lr-esat-key-idea p,
.entry-content .lr-esat-key-idea li {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
}

@media (max-width: 921px) {
	/* D12: 160px of cream between sections on the home and contact pages,
	   six times down the home page: 64 padding plus 32 gap plus 64 padding. */
	.entry-content .lr-section {
		padding-block: var(--lr-space-6);
	}

	.entry-content .lr-container.lr-stack-lg {
		gap: 0;
	}

	/* Taste, taken: the home hero at 768 was two 344px columns with the photo
	   270px below the heading. One column up to the header breakpoint, which
	   the text first order rule in lr-modern.css already uses. */
	#home-hero .lr-grid-equal {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 601px) and (max-width: 921px) {
	/* D2, tablet: the same desktop token, one step smaller. */
	.entry-content {
		--lr-gap-section: 40px;
		--lr-padding-section: 40px;
	}
}

@media (max-width: 600px) {
	/* D2: one desktop token, --lr-gap-section at 56px, spaced every block in
	   the article wrapper and the top of every h2, against 20px card padding.
	   Remapping the token is the lever style.css itself documents. */
	.entry-content {
		--lr-gap-section: 32px;
		--lr-padding-section: 32px;
	}

	/* D5: the ink hero plate. 40px padding plus browser default heading and
	   paragraph margins the reset never zeroed, an eyebrow wrapping to three
	   lines around its 32px rule, and an 18px lede at seven to twelve lines:
	   first screens of 560 to 870px on a 812px phone. */
	.entry-content header.wp-block-group:has(.lr-hero-heading) {
		padding: 28px 20px;
	}

	.entry-content header.wp-block-group:has(.lr-hero-heading) > :first-child {
		margin-top: 0;
	}

	.entry-content header.wp-block-group:has(.lr-hero-heading) > :last-child {
		margin-bottom: 0;
	}

	.entry-content header.wp-block-group:has(.lr-hero-heading) .lr-eyebrow {
		display: block;
	}

	.entry-content header.wp-block-group:has(.lr-hero-heading) .lr-eyebrow::before {
		display: none;
	}

	.entry-content header.wp-block-group:has(.lr-hero-heading) .lr-hero-subheading {
		font-size: 16px;
		line-height: 1.55;
	}

	/* D6: the current page's full title in the breadcrumb wrapped to three
	   lines and took up to 74px of the first screen. One truncated line. */
	.lr-breadcrumb-item[aria-current="page"] {
		display: block;
		flex: 1 1 100%;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* D7: button labels could not wrap and the plate clipped both ends of
	   "Book an Academic Assessment Call". */
	.entry-content .wp-block-button__link,
	.entry-content .lr-btn {
		white-space: normal;
		line-height: 1.3;
		padding-block: 0.7em;
		text-align: center;
	}

	/* D8: the 62 character solution toggle stood 101px tall, 27 times per
	   ESAT page. Two lines at about 66px. Shortening the label in the
	   compiler is the better fix and is content, not CSS. */
	details.lr-details-solution summary {
		font-size: 15px;
		line-height: 1.35;
		padding: 12px 14px;
	}

	/* D10: tables with a 480px floor in a 241px box showed one column and,
	   on the A level page, a 504px blank row. Let two column tables fit and
	   wrap; paint a right edge fade on the wrapper so a wider one reads as
	   scrollable, since overlay scrollbars are invisible at rest. */
	.entry-content table {
		min-width: 0;
	}

	.entry-content .wp-block-table td:first-child,
	.entry-content .wp-block-table th:first-child {
		min-width: 0;
		width: auto;
		white-space: normal;
	}

	.entry-content :has(> table) {
		background: linear-gradient(to left, rgba(0, 33, 71, 0.12), transparent 24px) right / 24px 100% no-repeat;
	}

	/* Taste, taken: the footer index was one column of 26 links, about
	   900px of footer on every page. Two columns halves it. */
	#colophon .lr-footer-nav ul {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}
}

/*
	D4 and D11 fight `!important` declarations that live in @layer components.

	For important declarations the layer order INVERTS: an unlayered important
	loses to a layered one, and an important in an EARLIER layer beats one in a
	later layer. `primitives` is declared before `components` in style.css, so
	a `@layer primitives` block here appends to that layer and wins. This is
	why the phone override for list item insets in lr-modern.css never applied
	on any page: it was unlayered and not important.
*/
@layer primitives {
	@media (max-width: 600px) {
		/* D4: a 36px indent and 16px right padding inside a 325px column. */
		.entry-content .lr-list-item {
			padding-left: 22px !important;
			padding-right: 8px !important;
		}

		/* D11: the intent guide 32px narrower than the cards around it. */
		.entry-content .lr-intent-guide {
			width: 100% !important;
		}
	}
}