/*
 * Route `about` — "About the Awards".
 *
 * Ported from `pca-web/about-awards.html` (lines 76-100), which is the whole of
 * that page's page-specific CSS. Every metric — the 48px column gutter, the
 * 800px stacking breakpoint, the 2px outlined disclosure box, the 18px bullet
 * indent — is carried over unchanged. The substitutions are the ones every page
 * stylesheet here makes: raw hex becomes the semantic tokens from public.css so
 * dark mode remaps the page, and physical directions become logical properties.
 *
 * One structural note. In the prototype `.en` and `.ar` literally mean English
 * and Arabic, and the Arabic column is hard-coded `direction: rtl`. Here they
 * mean *primary* and *secondary* column: `Lang::pick()` decides which language
 * leads, and the template emits a per-node `dir`. So direction is never set by
 * class below — the attribute is the source of truth, and the mirrored bullet
 * indent keys off `dir` rather than off `.ar`.
 */

.about-section {
	padding: 44px 0;
}

.about-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 48px;
	align-items: start;
}

@media (max-width: 800px) {
	.about-columns {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

.about-columns h1 {
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 900;
	color: var(--heading-ink);
	margin: 0 0 8px;
}

.about-columns .tagline {
	font-size: 15px;
	font-weight: 700;
	color: var(--blue-bright);
	margin: 0 0 22px;
}

.about-columns p {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--body-ink);
	margin: 0;
	text-align: justify;
}

@media (max-width: 800px) {
	.about-columns p {
		margin-block-end: 16px;
	}

	.about-columns .tagline {
		margin-block-end: 16px;
	}
}

/* ==========================================================================
   Important information box
   ========================================================================== */

.important-box {
	grid-column: 1 / -1;
	margin-block-start: 16px;
	/* `--heading-ink` is `--navy-deep` in light mode, so this is the prototype's
	   2px navy outline exactly, and it stays legible once dark mode remaps it. */
	border: 2px solid var(--heading-ink);
	border-radius: var(--radius);
	background: var(--blue-pale);
	padding: 22px 22px 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	align-items: start;
}

@media (max-width: 800px) {
	.important-box {
		grid-template-columns: 1fr;
	}
}

.important-box h2 {
	font-size: 15px;
	font-weight: 900;
	color: var(--heading-ink);
	margin: 0 0 14px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* The prototype drops the uppercasing on the Arabic heading; keyed off the
   emitted direction rather than the column class, so it follows the language
   even after the visitor switches the site to Arabic. */
.important-box [dir='rtl'] h2 {
	text-transform: none;
}

.info-item {
	position: relative;
	font-size: 13.5px;
	line-height: 1.75;
	margin-block-end: 14px;
	padding-inline-start: 18px;
	color: var(--body-ink);
	text-align: justify;
}

.info-item .dot {
	position: absolute;
	inset-inline-start: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue-bright);
}

/* No RTL override is needed for the bullet gutter: each column carries its own
   `dir`, and `padding-inline-start` / `inset-inline-start` resolve against it,
   so the Arabic column indents and dots itself from the right automatically —
   which is precisely what the prototype hard-codes with `padding-right`. */

.important-box .en,
.important-box .ar {
	min-width: 0;
}