/*
 * ECR Places — "Nearby schools & parks" and "Streets near this school"
 * internal-linking widgets. Shared by template-parts/ecr-nearby-places.php
 * and template-parts/ecr-school-streets.php.
 */

.ecr-nearby-places,
.ecr-school-streets {
	--ecr-places-forest: #2C3E2D;
	--ecr-places-gold: #B08D2E;
	--ecr-places-cream: #F7F3EC;
	--ecr-places-slate: #4A5568;

	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	font-family: var( --font-sans, 'Manrope', sans-serif );
	color: var( --ecr-places-slate );
}

.ecr-nearby-places *,
.ecr-school-streets * {
	box-sizing: border-box;
}

.ecr-nearby-places__title,
.ecr-school-streets__title {
	margin: 0 0 0.5rem;
	font-family: var( --font-serif, 'Playfair Display', serif );
	font-size: clamp( 1.3rem, 2.4vw, 1.7rem );
	font-weight: 700;
	color: var( --ecr-places-forest );
}

.ecr-nearby-places__note,
.ecr-school-streets__note {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var( --ecr-places-slate );
	opacity: 0.85;
	max-width: 56ch;
}

.ecr-nearby-places__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
}

.ecr-nearby-places__group h3 {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ecr-places-gold );
}

.ecr-nearby-places__list,
.ecr-school-streets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ecr-nearby-places__list li,
.ecr-school-streets__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.5rem;
	padding: 0.65rem 0.85rem;
	background: var( --ecr-places-cream );
	border-radius: 0.5rem;
	line-height: 1.3;
}

.ecr-nearby-places__list a,
.ecr-school-streets__list a {
	color: var( --ecr-places-forest );
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ecr-nearby-places__list a:hover,
.ecr-nearby-places__list a:focus-visible,
.ecr-school-streets__list a:hover,
.ecr-school-streets__list a:focus-visible {
	border-bottom-color: var( --ecr-places-gold );
}

.ecr-nearby-places__list span,
.ecr-school-streets__list span {
	font-weight: 600;
	color: var( --ecr-places-slate );
}

.ecr-nearby-places__meta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --ecr-places-slate );
	background: rgba(44, 62, 45, 0.08);
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
}

.ecr-nearby-places__distance,
.ecr-school-streets__distance {
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --ecr-places-gold );
	white-space: nowrap;
}

/* Home pages: one sentence per school role, full width above the parks. */
.ecr-nearby-places--home .ecr-nearby-places__group--schools {
	grid-column: 1 / -1;
}

.ecr-nearby-schools {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem 0.75rem;
}

.ecr-nearby-schools__item {
	padding: 0.75rem 0.9rem;
	background: var( --ecr-places-cream );
	border-radius: 0.5rem;
}

.ecr-nearby-schools__role {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7f6418;
}

.ecr-nearby-schools__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var( --ecr-places-slate );
}

.ecr-nearby-schools__text a,
.ecr-nearby-schools__note a,
.ecr-nearby-schools__source a {
	color: var( --ecr-places-forest );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(176, 141, 46, 0.6);
	text-underline-offset: 2px;
}

.ecr-nearby-schools__note {
	margin: 0.9rem 0 0.4rem;
	max-width: 72ch;
}

.ecr-nearby-schools__source {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --ecr-places-slate );
	max-width: 72ch;
}

@media ( max-width: 640px ) {
	.ecr-nearby-schools {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {
	.ecr-nearby-places,
	.ecr-school-streets {
		padding: 2rem 1rem;
	}

	.ecr-nearby-places__groups {
		grid-template-columns: 1fr;
	}

	.ecr-nearby-places__list li,
	.ecr-school-streets__list li {
		flex-direction: column;
		align-items: flex-start;
	}

	.ecr-nearby-places__distance,
	.ecr-school-streets__distance {
		margin-left: 0;
	}
}

@media ( max-width: 360px ) {
	.ecr-nearby-places__title,
	.ecr-school-streets__title {
		font-size: 1.2rem;
	}
}