/**
 * Meridian Sections — Office Locations
 *
 * Figma 18:9927. A headed band on a dotted ground holding a grid of office
 * cards, closed by a footnote.
 *
 * Geometry is from the comp's own numbers rather than from the screenshot: the
 * card is 337.66 wide with a 251.74 map, the grid gap is 20, the head clears the
 * grid by 48 and the footnote by 40.
 */

.md-section.md-locations {
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
}

/*
 * The ground is .md-dots, with one delta: this comp's wash comes in from both
 * the top and the bottom and thins out around the middle, where the earlier
 * sections wash in from one side. Measured from the 1:1 render — dot contrast is
 * nil at both edges and peaks at 47.5% of the height, which is the 46.62% stop
 * below plus antialiasing.
 *
 * Pitch, dot size, dot ink and ground colour are all the primitive's defaults
 * and are deliberately not restated: #fcfdfd is already what this comp's flat
 * 50% #f9fafb layer resolves to over white.
 *
 * The transparent stop is written out because a custom property cannot carry the
 * token's own value at zero alpha; it is --md-color-surface-tint, faded.
 */
.md-locations.md-dots {
	--md-dot-wash-image: linear-gradient(
		180deg,
		var(--md-color-surface-tint, #f9fafb) 0%,
		rgba(249, 250, 251, 0) 46.62%,
		var(--md-color-surface-tint, #f9fafb) 100%
	);
}

/* --- Grid ---------------------------------------------------------------- */
.md-locations__grid {
	display: grid;
	/* One column to start; the wider steps are opted into below. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem; /* 20px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-shead + .md-locations__grid {
	margin-block-start: var(--md-space-xl, 3rem); /* 48px */
}

@media (min-width: 36em) {
	.md-locations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.md-locations__grid {
		grid-template-columns: repeat(var(--md-loc-columns, 3), minmax(0, 1fr));
	}
}

/* --- Card ---------------------------------------------------------------- */
.md-locations__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--md-border-width, 1px) solid var(--md-color-border, #e0e0e0);
	border-radius: 0.625rem; /* 10px */
	background-color: var(--md-white, #fff);
}

/*
 * The map is a .md-media-cell for its clipping and its two-class object-fit
 * rule, with the radius switched off — the card already clips these corners, and
 * rounding them again would leave a sliver of card showing through at each one.
 *
 * 337.66 / 251.742 in the comp. A ratio rather than a height so the maps stay
 * proportional as the column widens, and so all three cards in a row line up.
 */
.md-locations__map {
	--md-cell-radius: 0;

	flex: none;
	aspect-ratio: var(--md-loc-map-ratio, 337.66 / 251.74);
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* A linked map should say so, without a hover state on the whole card. */
a.md-locations__map .md-media-cell__img {
	transition: transform var(--md-duration, 0.3s) var(--md-ease, ease);
}

a.md-locations__map:hover .md-media-cell__img,
a.md-locations__map:focus-visible .md-media-cell__img {
	transform: scale(1.03);
}

.md-locations__body {
	padding: 1.25rem; /* 20px */
}

/* --- Name and standing --------------------------------------------------- */
/*
 * Baseline-aligned, not centred: the comp sets the 10px tag's baseline on the
 * 15px name's. Wrapping is allowed because a longer name and a longer tag will
 * eventually not fit a narrow column together.
 */
.md-locations__name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem; /* 8px */
	margin: 0;
}

.md-locations__name {
	color: var(--md-color-text, #0a1628);
	font-size: 0.9375rem; /* 15px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 22.5px */
}

.md-locations__tag {
	color: var(--md-blue, #006bb6);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 15px */
	letter-spacing: 0.12em; /* 1.2px on 10px */
	text-transform: uppercase;
}

/* --- Detail rows --------------------------------------------------------- */
.md-locations__details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* 8px */
	margin: var(--md-space-sm, 1rem) 0 0; /* 16px */
	padding: 0;
	list-style: none;
}

.md-locations__row {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* 8px */
}

/*
 * An address wraps; a phone number does not. So this one row aligns to the top
 * and nudges its icon down to sit on the first line, which is what the comp
 * draws, while the single-line rows stay centred.
 */
.md-locations__row--address {
	align-items: flex-start;
}

.md-locations__row--address .md-locations__icon {
	margin-block-start: 1px;
}

.md-locations__icon {
	/* 14px. The brand default is 48. */
	--md-icon-size: 0.875rem;

	color: var(--md-blue, #006bb6);
}

.md-locations__value {
	color: var(--md-color-text-body, #364153);
	font-size: 0.75rem; /* 12px */
	line-height: 1.5; /* 18px */
}

/* The comp sets the address a touch tighter than the numbers. */
.md-locations__row--address .md-locations__value {
	line-height: 1.375; /* 16.5px */
}

/*
 * A tappable number that still reads as body copy — the comp draws no link
 * treatment, and underlining one of three otherwise identical rows would imply
 * the others are missing something.
 */
.md-locations__value--link {
	color: inherit;
	text-decoration: none;
}

.md-locations__value--link:hover,
.md-locations__value--link:focus-visible {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
}

/* --- Footnote ------------------------------------------------------------ */
.md-locations__footnote {
	margin: 2.5rem 0 0; /* 40px */
	color: var(--md-color-text-body, #364153);
	font-size: 0.875rem; /* 14px */
	line-height: 1.625; /* 22.75px */
}