/**
 * National Node country pages (includes/node-page.php). Header, then a reading
 * column beside a sticky column with contacts and links, then the country pager.
 */

.bbmri-nodepage {
	color: var(--bb-text);
	font-size: var(--bb-text-base);
	line-height: var(--bb-leading);
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.bbmri-nodepage__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bb-space-3) var(--bb-space-5);
	padding-block: var(--bb-space-3) var(--bb-space-4);
	border-bottom: 3px solid var(--bb-navy);
}

.bbmri-nodepage__head h1 {
	margin: 0;
	color: var(--bb-navy);
	font-family: var(--bb-font-display);
	font-size: var(--bb-h1);
	line-height: 1.1;
}

.bbmri-nodepage__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 var(--bb-space-1);
	color: var(--bb-muted);
	font-size: var(--bb-text-sm);
	font-weight: 600;
}

.bbmri-nodepage__status::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--bb-navy);
}

.bbmri-nodepage__status.is-observer::before {
	background: #98a6cc; /* the Observer colour of the hub map */
}

.bbmri-nodepage__logo {
	display: block;
	width: min(280px, 100%);
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Body
 * ------------------------------------------------------------------------ */

.bbmri-nodepage__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bb-space-5);
	padding-block: var(--bb-space-5);
}

@media (min-width: 960px) {
	.bbmri-nodepage__body {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--bb-space-6);
		align-items: start;
	}

	.bbmri-nodepage__side {
		position: sticky;
		top: var(--bb-space-3);
	}
}

.bbmri-nodepage__main {
	max-width: 46rem;
}

.bbmri-nodepage__main > p {
	margin: 0 0 var(--bb-space-2);
}

.bbmri-nodepage__main > p:first-child {
	color: var(--bb-ink);
	font-size: 1.2rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * Top 3 lists
 * ------------------------------------------------------------------------ */

.bbmri-nodepage__top3 {
	margin-top: var(--bb-space-5);
}

.bbmri-nodepage__top3 h2 {
	margin: 0 0 var(--bb-space-3);
	color: var(--bb-navy);
	font-family: var(--bb-font-display);
	font-size: var(--bb-h2);
	line-height: 1.2;
}

.bbmri-nodepage__kicker {
	display: block;
	margin-bottom: 0.35em;
	color: var(--bb-green-800);
	font-family: var(--bb-font-text);
	font-size: var(--bb-text-sm);
	font-weight: 700;
}

.bbmri-nodepage__top3 ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bbmri-top3;
}

.bbmri-nodepage__top3 ol > li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	padding-block: var(--bb-space-3);
	border-top: 1px solid var(--bb-line);
	counter-increment: bbmri-top3;
}

.bbmri-nodepage__top3 ol > li::before {
	content: counter(bbmri-top3);
	grid-row: 1 / span 9;
	color: var(--bb-orange);
	font-family: var(--bb-font-display);
	font-size: 1.5rem;
	line-height: 1.2;
}

.bbmri-nodepage__top3 ol > li > * {
	grid-column: 2;
	margin: 0;
}

.bbmri-nodepage__top3 ol > li > * + * {
	margin-top: var(--bb-space-1);
}

.bbmri-nodepage__top3 strong {
	color: var(--bb-ink);
}

.bbmri-nodepage__top3 ul {
	padding-left: 1.2em;
}

.bbmri-nodepage__note {
	margin: 0;
	padding-top: var(--bb-space-2);
	border-top: 1px solid var(--bb-line);
	color: var(--bb-muted);
	font-size: var(--bb-text-sm);
}

/* ---------------------------------------------------------------------------
 * Side column
 * ------------------------------------------------------------------------ */

.bbmri-nodepage__side {
	display: grid;
	gap: var(--bb-space-3);
	font-size: var(--bb-text-sm);
}

.bbmri-nodepage__card {
	padding: var(--bb-space-3);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
}

.bbmri-nodepage__card h2 {
	margin: 0 0 var(--bb-space-2);
	color: var(--bb-navy);
	font-family: var(--bb-font-display);
	font-size: var(--bb-h3);
	line-height: 1.2;
}

.bbmri-nodepage__people {
	display: grid;
	gap: var(--bb-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbmri-nodepage__person {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}

.bbmri-nodepage__person p {
	margin: 0;
	line-height: 1.35;
}

.bbmri-nodepage__avatar {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bb-navy-tint);
	color: var(--bb-navy);
	font-weight: 700;
	object-fit: cover;
	object-position: 50% 20%;
}

.bbmri-nodepage__person-name {
	color: var(--bb-ink);
	font-weight: 700;
}

.bbmri-nodepage__person-role {
	color: var(--bb-muted);
}

.bbmri-nodepage__person-email,
.bbmri-nodepage__web {
	overflow-wrap: break-word;
}

.bbmri-nodepage__person-email {
	display: inline-block;
	margin-top: 0.25em;
}

.bbmri-nodepage__web {
	display: block;
	margin-top: var(--bb-space-3);
	padding-top: var(--bb-space-2);
	border-top: 1px solid var(--bb-line);
}

.bbmri-nodepage__card.is-stat {
	border-color: transparent;
	background: var(--bb-navy);
	color: #fff;
}

.bbmri-nodepage__card.is-stat p {
	margin: 0;
}

.bbmri-nodepage__card.is-stat a {
	display: inline-block;
	margin-top: var(--bb-space-2);
	color: #fff;
	font-weight: 600;
}

.bbmri-nodepage__stat {
	font-family: var(--bb-font-display);
	font-size: var(--bb-stat);
	line-height: 1.1;
}

.bbmri-nodepage__map {
	justify-self: start;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Pager
 * ------------------------------------------------------------------------ */

.bbmri-nodepage__pager {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--bb-space-2);
	align-items: center;
	padding-block: var(--bb-space-3);
	border-top: 1px solid var(--bb-line);
	font-size: var(--bb-text-sm);
	font-weight: 600;
}

.bbmri-nodepage__pager .is-all {
	grid-column: 2;
	color: var(--bb-muted);
}

.bbmri-nodepage__pager .is-next {
	grid-column: 3;
	justify-self: end;
}

@media (max-width: 559px) {
	.bbmri-nodepage__pager {
		grid-template-columns: 1fr 1fr;
	}

	.bbmri-nodepage__pager .is-all {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}

	.bbmri-nodepage__pager .is-next {
		grid-column: 2;
	}
}