/* ==========================================================================
   components-extra.css — pieces the rebuild needed that the template got from
   Bootstrap, plus the page furniture the template never styled (breadcrumbs,
   pagination, the blog index).
   --------------------------------------------------------------------------
   Kept separate from components.css so the "this is the template's vocabulary"
   file stays recognisable, and so this one can be read as a list of deltas.
   ========================================================================== */

/* ==========================================================================
   1. Page head (template: "Page title section")
   ========================================================================== */

/* Full-bleed photo, dark veil, centred uppercase h1 — the template's inner-page
   header, at its .section-xl height (180px of padding above and below). */
.page-head {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: 320px;
	padding: var(--s-xl) 0;
	overflow: hidden;
	color: #fff;
	text-align: center;
	background: var(--surface-dark);
}

.page-head__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.page-head__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
}

.page-head::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--veil-5);
}

.page-head__title {
	margin: 0;
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	/* The template uppercases this heading; for Chinese that is a no-op and for
	   English it is the signature of the design, so it stays. */
}

.page-head__sub {
	max-width: 56ch;
	margin: 1rem auto 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   2. Breadcrumbs
   ========================================================================== */

.crumbs {
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crumbs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.crumbs li + li::before {
	content: "/";
	color: var(--line-strong);
}

.crumbs a {
	color: var(--ink-3);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.crumbs [aria-current="page"] {
	color: var(--ink-2);
}

/* ==========================================================================
   3. Pagination
   ========================================================================== */

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: border-color var(--t-fast) var(--ease-out),
		background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.pagination .page-numbers:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
   4. Rounded image helper (template: `.border-radius`)
   ========================================================================== */

.radius {
	border-radius: var(--r);
	overflow: hidden;
}

/* ==========================================================================
   5. Tap targets
   --------------------------------------------------------------------------
   WCAG 2.5.5 asks for 44px; 40 is the floor applied here because several of
   these are inline text links where 44px would visibly break the line rhythm.
   The measured offenders were: the "all work" arrow links (25px), the slider
   dots (9–12px) and the footer's legal links (38px).

   An invisible hit area is used rather than a taller visual box: growing a text
   link's height would move the layout, while a pseudo-element overhang does not.
   ========================================================================== */

.link-arrow {
	position: relative;
	min-height: 40px;
}

.link-arrow::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

/* Slider dots are sized in components.css where the component lives; only the
   hit area of the text links needs fixing here. */

.footer__bar a {
	position: relative;
	display: inline-block;
	min-height: 40px;
	line-height: 40px;
}

/* Contact details: the email and phone links are inline inside a <p>, so they
   are only as tall as the line box (19px). They are primary actions on a phone
   — tapping one opens mail or the dialler — so they get a real target. */
.contact-aside__item a {
	display: inline-block;
	min-height: 40px;
	line-height: 40px;
}

/* Footer column links are 19px tall — the text height — which fails the tap
   target floor on every phone. The list rows get a min-height instead of extra
   padding so the visual gap between rows stays the template's. */
.footer__list a {
	display: inline-block;
	min-height: 40px;
	line-height: 40px;
}

.footer__list li {
	margin-bottom: 0.15rem;
}

/* The social circles are 40x40 in the footer but 38x38 on the team cards
   (.member__social a is 40px in components.css, yet the inner <svg> plus the
   flex parent shrank it on mobile). Pin the box explicitly. */
.member__social a {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

/* Filter buttons: 36px tall because their padding is 0.35rem. Growing the
   padding rather than the font keeps the label size the template's. */
.filter__btn {
	min-height: 40px;
	padding: 0.5rem 0;
}

@media (min-width: 992px) {
	/* On a fine pointer the extra hit area is unnecessary and the footer bar is
	   one line; restore compact metrics. */
	.footer__bar a,
	.footer__list a {
		min-height: 0;
		line-height: inherit;
	}

	.footer__list li {
		margin-bottom: 0.65rem;
	}
}

/* Breadcrumb links are 20px tall; the trail is a navigation affordance and gets
   the same treatment. */
.crumbs a {
	display: inline-block;
	min-height: 32px;
	line-height: 32px;
}

/* ==========================================================================
   6. Layout fixes found while building the pages
   ========================================================================== */

/* The template's `.container` had no max-width, so a 2-column text block ran
   the full width of a 2560px monitor. The grid caps at --wrap via `.wrap`. */
.grid > * {
	min-width: 0;
}

/* Feature grid on the about page: the photo pair is shorter than the text
   beside it, and `align-items: start` (the grid default here) left a gap that
   looked like a bug. Centre the pair instead. */
.grid--center > .col-6 {
	align-self: center;
}

/* A post card's image link is decorative (its title link is the real one), so
   it must not take a focus ring of its own — otherwise every card produces two
   tab stops for one destination. */
.post__media:focus-visible {
	outline: none;
}

/* Long Chinese headings break `balance` badly: balance works on line count, and
   a CJK line wraps anywhere. Left as-is for Latin, off for CJK. */
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) .page-head__title {
	text-wrap: wrap;
}

/* The stats band's numbers are tabular, but Chinese labels above them make the
   grid rows different heights; pin the row to the tallest cell. */
.band__grid > * {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   6. Reduced motion, second pass
   --------------------------------------------------------------------------
   motion.css already collapses transitions globally under `reduce`. The two
   things it deliberately keeps (the preloader bar and the ripple) are stopped
   here, because both are pure decoration with a visible moving element.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.page-head__img,
	.parallax-img {
		transform: none !important;
	}
}

/* ==========================================================================
   7. Print
   ========================================================================== */

@media print {
	.page-head {
		min-height: 0;
		padding: 12pt 0;
		background: #fff;
		color: #000;
	}

	.page-head__media,
	.page-head::after {
		display: none;
	}

	.page-head__title {
		color: #000;
	}
}