/**
 * Area List widget.
 */

.msd-alist {
	--msd-alist-hover: var(--msd-cream, #f7f4ee);

	padding-bottom: clamp(80px, 11vw, 140px);
	color: var(--msd-ink, #1e2a30);
}

.msd-alist .msd-alist__card {
	padding: clamp(20px, 3.5vw, 48px);
	border: 1px solid var(--msd-line, #e6e0d5);
	border-radius: clamp(24px, 3vw, 36px);
	background-color: var(--msd-white, #fff);
}

/*
 * The list flows into columns (count set by the widget, 2 by default on
 * desktop). The browser balances their height, so long and short texts
 * end level without anyone having to decide where to split.
 */
.msd-alist__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--msd-line, #e6e0d5);
	column-gap: clamp(24px, 4vw, 56px);
	list-style: none;
}

.msd-alist__item {
	break-inside: avoid;
}

.msd-alist .msd-alist__row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 44px;
	gap: 20px;
	align-items: center;
	padding: 24px 20px;
	border-bottom: 1px solid var(--msd-line, #e6e0d5);
	border-radius: 0;
	color: var(--msd-ink, #1e2a30);
	text-decoration: none;
	transition: background-color 0.2s, border-radius 0.2s;
}

.msd-alist a.msd-alist__row:hover {
	border-radius: 16px;
	background-color: var(--msd-alist-hover);
	color: var(--msd-ink, #1e2a30);
}

.msd-alist__number {
	color: var(--msd-text-faint, #68727a);
	font-family: var(--msd-font-heading, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: 15px;
	font-weight: 800;
}

.msd-alist__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.msd-alist .msd-alist__name {
	margin: 0;
	color: var(--msd-ink, #1e2a30);
	font-family: var(--msd-font-heading, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.msd-alist__text {
	color: var(--msd-text-muted, #4c565d);
	font-size: 15.5px;
	line-height: 1.55;
}

.msd-alist__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--msd-sand, #efe9df);
	color: var(--msd-ink, #1e2a30);
	font-size: 20px;
}

/* Fallback for the widget's "Columns" setting: one column, two from 980px. */
@media (min-width: 980px) {

	.msd-alist__list {
		column-count: 2;
	}
}

@media (max-width: 480px) {

	.msd-alist .msd-alist__row {
		grid-template-columns: 32px minmax(0, 1fr) 40px;
		gap: 12px;
		padding: 20px 8px;
	}

	.msd-alist__arrow {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.msd-alist .msd-alist__row {
		transition: none;
	}
}