/**
 * Centers hub and centre pages: the blocks that exist only there.
 * Values from design/source/centers.dc.html (closing statement) and
 * centers-phnom-penh / centers-banlung.dc.html ("Our goal here").
 */

/* ---- Centers hub: hero numbers ------------------------------------------------ */

.p-centers-hero {
	padding-top: 72px;
	padding-bottom: 78px;
}

.p-centers-hero .c-hero-navy__title {
	max-width: 20ch;
}

.p-centers-hero .c-hero-navy__lead {
	max-width: 64ch;
}

/* ---- Centers hub: closing statement ---------------------------------------------- */

.p-close {
	padding-top: clamp(76px, 9vw, 108px);
	padding-bottom: clamp(84px, 10vw, 120px);
}

.p-close__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: end;
}

.p-close__statement {
	display: flex;
	gap: 22px;
}

.p-close__title {
	margin: 0;
	max-width: 26ch;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(26px, 3.6vw, 46px);
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--navy);
}

.p-close__text {
	margin: 0;
	max-width: 38ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--muted);
}

.p-close__actions {
	margin-top: 24px;
	gap: 12px;
}

.p-close__actions .c-btn {
	padding-inline: 30px;
}

@media (max-width: 1024px) {
	.p-close__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* ---- Centre page: "Our other center" ------------------------------------------- */

.c-centers--other {
	padding-top: clamp(64px, 8vw, 100px);
	padding-bottom: clamp(70px, 8vw, 104px);
}

/* ---- Centre page: "Our goal here" and the support card ------------------------- */

.p-goal {
	overflow: hidden;
	padding-top: clamp(80px, 9vw, 120px);
	padding-bottom: clamp(84px, 10vw, 124px);
}

.p-goal__glow {
	top: -360px;
	width: 860px;
	height: 860px;
	background: radial-gradient(circle, rgba(245, 163, 4, .12), transparent 62%);
}

.p-goal__statement {
	display: flex;
	gap: 24px;
}

.p-goal__text {
	margin: 22px 0 0;
	max-width: 28ch;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(28px, 4.2vw, 52px);
	line-height: 1.08;
	letter-spacing: -.032em;
	color: var(--paper);
}

.p-goal__support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 26px;
	margin-top: clamp(46px, 5.6vw, 72px);
	padding: clamp(24px, 2.8vw, 32px);
	border: 1px solid rgba(245, 163, 4, .4);
	border-radius: 22px;
	background: rgba(245, 163, 4, .12);
}

.p-goal__statement + .p-goal__support {
	margin-top: clamp(46px, 5.6vw, 72px);
}

.p-goal__support:first-child {
	margin-top: 0;
}

.p-goal__support-body {
	flex: 1 1 220px;
	min-width: 0;
}

.p-goal__support-eyebrow {
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
}

.p-goal__support-text {
	margin: 12px 0 0;
	max-width: 28ch;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: clamp(20px, 2.3vw, 27px);
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--paper);
}

.p-goal__btn {
	flex: none;
	padding: 15px 30px;
	font-size: 14.5px;
}

/* Numbers in the hub hero: the design's own rhythm (first column indented,
   proportional figures, hairlines at .16). */
.p-centers-hero .c-hero-navy__facts {
	margin-top: 52px;
	border-top-color: rgba(255, 255, 255, .16);
}

.p-centers-hero .c-hero-navy__facts .c-facts__item {
	border-left-color: rgba(255, 255, 255, .16);
}

@media (min-width: 1025px) {
	.p-centers-hero .c-hero-navy__facts .c-facts__item:first-child {
		padding-left: 26px;
	}
}

.p-centers-hero .c-facts__value {
	font-variant-numeric: normal;
}

.c-centers--other .c-centers__list {
	margin-top: clamp(24px, 2.8vw, 34px);
}