/**
 * Meridian Sections — Callouts
 *
 * Figma 18:10044. A ruled band of icon-and-copy callouts over a block of legal
 * fine print.
 */

.md-section.md-callouts {
	padding-block: var(--md-section-pt, 4.0625rem) var(--md-section-pb, 4.0625rem); /* 65px */
	background-color: var(--md-white, #fff);
}

.md-callouts--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* --- Callout list -------------------------------------------------------- */
/*
 * The rule belongs to the list, not to the section, so it lands between the
 * callouts and the fine print wherever the fine print happens to be — and
 * disappears with the list rather than leaving a stray line behind.
 */
.md-callouts__list {
	display: flex;
	flex-direction: column;
	gap: var(--md-space-lg, 2rem);
	margin: 0;
	padding: 0 0 2.5625rem; /* 41px */
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
	list-style: none;
}

.md-callouts__item {
	display: flex;
	align-items: flex-start;
	gap: var(--md-space-sm, 1rem); /* 16px */
}

/* --- The ringed icon ----------------------------------------------------- */
/*
 * .md-disc supplies the circle; these four properties turn its filled CTA
 * treatment into the comp's outlined one.
 */
.md-callouts__disc {
	--md-disc-size: 2.5rem; /* 40px */
	--md-disc-glyph: var(--md-icon-size-xs, 1rem); /* 16px */
	--md-disc-bg: transparent;
	--md-disc-ink: var(--md-color-text, #0a1628);
	--md-disc-border-width: var(--md-border-width, 1px);
	--md-disc-border-color: var(--md-color-border, #d9d9d9);
}

/*
 * Two classes, not one. `.md-disc svg { fill: none }` is (0,1,1) and correct for
 * the stroked brand set; a single-class rule here would only tie with it and let
 * stylesheet order decide whether a solid social mark is visible at all. This is
 * (0,2,1), so the property below is always the one that is read.
 */
.md-disc.md-callouts__disc svg {
	fill: var(--md-callouts-glyph-fill, none);
}

.md-callouts__disc--filled {
	--md-callouts-glyph-fill: currentColor;
}

/* Only when it is a link — a plain ring has no state to show. */
a.md-callouts__disc:hover,
a.md-callouts__disc:focus-visible {
	--md-disc-bg: var(--md-blue, #006bb6);
	--md-disc-ink: var(--md-white, #fff);
	--md-disc-border-color: var(--md-blue, #006bb6);
}

/* --- Copy ---------------------------------------------------------------- */
.md-callouts__copy {
	/* The comp's 512px measure, but never wider than the column allows. */
	max-width: 32rem;
}

.md-callouts__title {
	margin: 0;
	color: var(--md-color-text, #0a1628);
	font-size: var(--md-text-caption, 0.875rem); /* 14px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 21px */
}

.md-callouts__text {
	margin: 0.25rem 0 0; /* 4px */
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	/*
	 * 16px, not the 13px drawn. Bumped deliberately across every section whose body
	 * copy sat at 13 — Callouts, Card Grid, Leadership Grid, Markets, Mosaic List —
	 * because 13px prose is small to read and 16px is the browser default a reader
	 * expects. The 1.625 leading is unitless, so it follows to 26px.
	 */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.625; /* 21.125px */
}

/*
 * Medium against the surrounding regular, and underlined only on interaction —
 * the comp distinguishes it by colour and weight alone, and the address is long
 * enough that a permanent underline turns into a solid bar.
 */
.md-callouts__link {
	color: var(--md-blue, #006bb6);
	font-weight: var(--md-weight-medium, 500);
	text-decoration: none;
	/* A long URL should break rather than push the band sideways. */
	overflow-wrap: anywhere;
}

a.md-callouts__link:hover,
a.md-callouts__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- Fine print ---------------------------------------------------------- */
.md-callouts__fine {
	/* 768px in the comp — a deliberately short measure for dense small type. */
	max-width: 48rem;
	margin-block-start: 2.5rem; /* 40px */
}

/*
 * --md-color-text-subtle is the comp's #99a1af, and it does not meet WCAG AA as
 * body text: 2.60:1 on white against the 4.5:1 that 11px type needs. It is the
 * designed value so it ships as drawn, but the token is one line and #6b7280
 * clears AA. Flagged in the README rather than quietly changed.
 */
.md-callouts__fine p {
	margin: 0;
	color: var(--md-color-text-subtle, #99a1af);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	line-height: 1.625; /* 17.875px */
}

.md-callouts__fine p + p {
	margin-block-start: 0.75rem;
}

/* --- Stacked ------------------------------------------------------------- */
/*
 * The ring drops above the copy rather than shrinking it — 40px is already the
 * smallest comfortable tap target, and the alternative is a two-word-per-line
 * paragraph.
 */
@media (max-width: 30em) {
	.md-callouts__item {
		flex-direction: column;
		gap: 0.75rem;
	}
}