/**
 * Metropolis Area Intro and signboard.
 */

.area-intro {
	padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 96px);
}

.area-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.area-intro--solo .area-intro__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* The area's neighbourhoods lettered like a fascia board. */
.signboard {
	padding: clamp(28px, 3vw, 40px);
	background: var(--fascia);
	border-radius: 8px;
	color: var(--on-fascia);
	box-shadow: 0 24px 48px -28px rgba(12, 39, 31, 0.45);
}

.signboard__list {
	/* Separators lead each name; the one that starts a line falls outside the clip. */
	margin: 0 0 0 -0.65em;
	padding: 0;
	list-style: none;
	clip-path: inset(-0.5em -0.5em -0.5em 0.65em);
	font-family: var(--serif);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.signboard__list li {
	position: relative;
	display: inline;
	padding-left: 0.65em;
	white-space: nowrap;
}

.signboard__list li::before {
	content: "·" / "";
	position: absolute;
	left: 0.08em;
	color: var(--on-fascia-soft);
}

/* A photo in place of the signboard, cropped to one shape across pages. */
.area-intro__media {
	margin: 0;
}

.area-intro__img {
	width: 100%;
	/* aspect-ratio: 3 / 2;
	object-fit: cover; */
	border-radius: var(--radius);
	box-shadow: 0 24px 48px -28px rgba(12, 39, 31, 0.45);
}

@media (max-width: 960px) {
	.area-intro__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.area-intro .actions .btn { width: 100%; }
	.signboard { padding: 24px 20px; }
}