/* Local area guide pages (/areas/{slug}/) — only enqueued on that route. */

.zre-breadcrumb {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-4) var(--container-pad) 0;
	font-size: var(--text-micro);
	color: var(--color-muted);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.zre-breadcrumb a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.zre-breadcrumb a:hover { color: var(--color-navy); }
.zre-breadcrumb [aria-current] { color: var(--color-ink); font-weight: 600; }

.zre-area-hero { text-align: left; }
.zre-area-hero .zre-lede { color: #d7dde8; max-width: 62ch; margin-bottom: var(--space-5); }
.zre-area-hero h1 { color: #fff; }

.zre-area-body { max-width: 72ch; }
.zre-area-body p { color: var(--color-muted); line-height: var(--leading-body); }

.zre-area-note {
	max-width: 72ch;
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--color-cobalt-tint);
	border-radius: var(--radius-sm);
	font-size: var(--text-small);
	color: var(--color-navy);
}
.zre-area-note a { color: var(--color-navy); text-decoration: underline; }

.zre-considerations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.zre-considerations > div {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}
.zre-considerations h3 { font-size: var(--text-body); margin-bottom: var(--space-2); }
.zre-considerations p { color: var(--color-muted); margin: 0; font-size: var(--text-small); }

.zre-area-crosslinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

@media (max-width: 820px) {
	.zre-considerations { grid-template-columns: 1fr; }
}