/* ======================================================================
   Mervia Group Resources
   Built on the theme's tokens and components. Only what is genuinely new
   lives here — the cards, the callouts and the prose come from the theme.
   ====================================================================== */

.c-resgrid {
	margin-block: var(--co-space-6);
}

/* ----------------------------------------------------------------------
   A single resource
   ---------------------------------------------------------------------- */

.c-resource {
	/* The body sets its own measure; the block exists so the parts below
	   have something to hang off and so a theme can restyle the whole
	   article with one selector. */
	display: block;
}

.c-resource__body {
	margin-block-start: var(--co-space-6);
}

.c-resource__head {
	margin-block-end: var(--co-space-6);
}

.c-resource__eyebrow {
	margin: 0 0 var(--co-space-2);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	letter-spacing: var(--co-tracking-wide);
	text-transform: uppercase;
	color: var(--co-color-action);
}

.c-resource__standfirst {
	margin-block: var(--co-space-4) 0;
	font-size: var(--co-text-lg);
	line-height: var(--co-leading-snug);
	color: var(--co-color-text-muted);
}

.c-resource__answers {
	margin-block: var(--co-space-6);
}

.c-resource__answers ul {
	margin: var(--co-space-2) 0 0;
	padding-inline-start: var(--co-space-5);
}

/* ----------------------------------------------------------------------
   The facts panel
   Two columns where there is room, one where there is not. Never a table:
   these are label/value pairs, and a table of two columns announces itself
   to a screen reader as a table with nothing to navigate.
   ---------------------------------------------------------------------- */

.c-resfacts {
	display: grid;
	gap: 0;
	margin-block: var(--co-space-5);
	padding: var(--co-space-4) var(--co-space-5);
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-md);
}

.c-resfacts__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--co-space-4);
	padding-block: var(--co-space-3);
	border-block-end: var(--co-border-width) solid var(--co-color-rule);
}

.c-resfacts__row:last-child {
	border-block-end: 0;
}

.c-resfacts dt {
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

.c-resfacts dd {
	margin: 0;
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-medium);
}

@media (max-width: 30em) {
	.c-resfacts__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--co-space-1);
	}
}

/* ----------------------------------------------------------------------
   Glossary A to Z
   ---------------------------------------------------------------------- */

.c-azbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-2);
	margin-block: var(--co-space-6);
	padding: var(--co-space-3);
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-md);
	/* Sticky, because the index is one long page and the alphabet is the only
	   navigation it has. Offset by the header, which is sticky itself — at
	   top: 0 the alphabet slides underneath it and disappears. */
	position: sticky;
	top: var(--co-header-height);
	z-index: var(--co-z-raised);
}

.c-azbar__letter {
	min-width: 2rem;
	padding: var(--co-space-2);
	font-weight: var(--co-weight-semibold);
	text-align: center;
	text-decoration: none;
	border-radius: var(--co-radius-sm);
	color: var(--co-color-text);
}

.c-azbar__letter:hover {
	background: var(--co-color-surface);
	color: var(--co-color-action);
}

.c-azgroup {
	margin-block-start: var(--co-space-7);
	/* Clear the sticky alphabet when a letter link jumps here. */
	scroll-margin-top: calc(var(--co-header-height) + 4rem);
}

.c-azgroup__letter {
	margin: 0 0 var(--co-space-4);
	padding-block-end: var(--co-space-2);
	font-size: var(--co-text-2xl);
	color: var(--co-color-action);
	border-block-end: var(--co-border-width-thick) solid var(--co-color-rule);
}

.c-azlist {
	display: grid;
	gap: var(--co-space-4);
	margin: 0;
}

.c-azlist__term {
	font-weight: var(--co-weight-semibold);
}

.c-azlist__definition {
	margin: var(--co-space-1) 0 0;
	font-size: var(--co-text-sm);
	line-height: var(--co-leading-normal);
	color: var(--co-color-text-muted);
}

@media (min-width: 48em) {
	.c-azlist {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--co-space-3) var(--co-space-5);
	}

	.c-azlist__definition {
		margin: 0;
	}
}

/* ----------------------------------------------------------------------
   One term
   ---------------------------------------------------------------------- */

.c-term {
	max-width: var(--co-measure);
}

.c-term__short {
	margin-block: var(--co-space-4);
	font-size: var(--co-text-lg);
	line-height: var(--co-leading-snug);
}

.c-term__also {
	margin-block: var(--co-space-3);
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

.c-term__back {
	margin-block-start: var(--co-space-7);
	padding-block-start: var(--co-space-4);
	border-block-start: var(--co-border-width) solid var(--co-color-rule);
	font-size: var(--co-text-sm);
}

/* ----------------------------------------------------------------------
   Related
   ---------------------------------------------------------------------- */

.c-related {
	margin-block-start: var(--co-space-8);
	padding-block-start: var(--co-space-5);
	border-block-start: var(--co-border-width) solid var(--co-color-rule);
}

.c-related__title {
	margin: 0 0 var(--co-space-4);
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-muted);
}

.c-related__list {
	display: grid;
	gap: var(--co-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-related__type {
	margin-inline-start: var(--co-space-2);
	font-size: var(--co-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-subtle);
}

@media print {
	.c-azbar,
	.c-related {
		display: none;
	}
}