/* neighborhood.css — the area-guide pages (/neighborhoods/<city>/).
 *
 * Loaded alongside property.css, which supplies the header, slide-out menu,
 * contact block and footer plus the :root tokens used below. Everything here
 * is the page's own middle: the stat tiles, the Walk/Bike/Transit scores with
 * their methodology popovers, the points-of-interest list and the map.
 *
 * These sections all paint over a position:fixed hero, so each one carries an
 * opaque background and z-index:1. A transparent section here would show the
 * hero through it — that is the single constraint the whole file works under.
 */

.nb-section{position:relative;z-index:1;background:var(--bg);
	padding:clamp(3.5rem,8vw,6rem) 1.25rem}
/* The first section under the hero: nothing above it on the page, so it takes
   the extra top padding that would otherwise read as a gap in the scroll. */
.nb-section--first{padding-top:clamp(4rem,9vw,7rem)}
.nb-section--alt{background:#faf9f6}
.nb-container{max-width:1080px;margin:0 auto}

.nb-heading{font-family:var(--serif);font-size:clamp(26px,3.6vw,40px);font-weight:300;
	letter-spacing:.02em;color:var(--ink);text-align:center}
.nb-heading--sm{font-size:clamp(22px,2.8vw,32px)}
.nb-subheading{margin:clamp(3rem,6vw,4.5rem) 0 0;font-family:var(--serif);
	font-size:clamp(20px,2.4vw,28px);font-weight:300;letter-spacing:.02em;
	color:var(--ink);text-align:center}
.nb-intro{max-width:62ch;margin:1.1rem auto 0;font-size:clamp(15px,1.5vw,17px);
	line-height:1.75;color:#3d3d3d;text-align:center}
.nb-intro--tight{margin-top:.85rem}
.nb-source{max-width:62ch;margin:1.75rem auto 0;font-size:.78rem;line-height:1.7;
	color:var(--muted);text-align:center}
.nb-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- Stat tiles -------------------------------------------------------- */
/* auto-fit rather than a fixed four-up: the same grid then handles a fifth
   stat, or a narrow window, without a media query per breakpoint. */
.nb-stats{display:grid;gap:1rem;margin:clamp(2.25rem,4vw,3rem) 0 0;
	grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.nb-stat{display:flex;flex-direction:column;align-items:center;text-align:center;
	padding:2rem 1.25rem;background:var(--bg);border:1px solid var(--line);border-radius:4px}
.nb-section--alt .nb-stat{background:var(--bg)}
.nb-stat-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 0 1.1rem;
	border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.nb-stat-icon svg{width:21px;height:21px;display:block}
.nb-stat-value{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:300;
	line-height:1.1;color:var(--ink)}
.nb-stat-label{margin:.7rem 0 0;font-size:.7rem;font-weight:500;letter-spacing:.16em;
	text-transform:uppercase;color:var(--ink)}
.nb-stat-note{margin:.4rem 0 0;font-size:.78rem;color:var(--muted)}

/* ---- Walk / Bike scores ------------------------------------------------ */
/* A row of dials rather than a grid of cards: the number rides inside a ring
   whose fill IS the score, with the plain-English descriptor beside it. Centred
   because this row is short (Walk Score publishes a Transit Score only where an
   agency supplies data, so there are two of these here, not three). */
.nb-scores{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
	gap:clamp(2rem,6vw,5rem);margin:clamp(2.25rem,4vw,3rem) 0 0;padding:.5rem 0}
.nb-score{display:flex;align-items:center;gap:1.25rem}
.nb-divider{align-self:stretch;width:1px;border-left:1px solid var(--line)}

/* The ring: a conic-gradient cut to a donut by the inner disc sitting on top.
   --progress is set inline from the score, so the fill and the number can
   never disagree. The inner disc paints the section's own background, which is
   why the alt section re-declares it below. */
.nb-dial{position:relative;display:grid;place-items:center;width:72px;height:72px;
	flex:0 0 auto;border-radius:50%;
	background-image:conic-gradient(var(--ink) var(--progress),#eceae4 var(--progress))}
.nb-dial-inner{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
	background:var(--bg);font-family:var(--serif);font-size:1.55rem;font-weight:300;
	line-height:1;color:var(--ink)}
.nb-section--alt .nb-dial-inner{background:#faf9f6}

.nb-score-copy{text-align:left}
.nb-score-title{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);font-weight:300;
	line-height:1.25;color:var(--ink)}
.nb-score-help{position:relative;display:flex;align-items:center;gap:.4rem;margin:.4rem 0 0}
.nb-score-label{font-size:.68rem;font-weight:500;letter-spacing:.14em;
	text-transform:uppercase;color:var(--muted)}

/* Info dot. A real button so it is reachable by keyboard and works on touch,
   where :hover never fires. */
.nb-info{display:grid;place-items:center;width:16px;height:16px;padding:0;flex:0 0 auto;
	background:none;border:1px solid var(--muted);border-radius:999px;color:var(--muted);
	font-family:var(--sans);font-size:10px;font-weight:700;line-height:1;
	cursor:pointer;transition:color .2s ease,border-color .2s ease}
.nb-info:hover{color:var(--ink);border-color:var(--ink)}
.nb-info:focus-visible{outline:2px solid #0b5fff;outline-offset:2px}
/* Anchored to .nb-score-help (the label+dot row) so it sits above the dot it
   belongs to rather than being centred on the whole dial. */
.nb-pop{position:absolute;left:0;bottom:calc(100% + .5rem);z-index:5;
	width:min(300px,calc(100vw - 3rem));
	padding:.85rem 1rem;background:#1c1c1c;color:#fff;border-radius:4px;
	font-size:.78rem;font-weight:300;line-height:1.6;letter-spacing:0;
	text-transform:none;text-align:left;box-shadow:0 6px 24px rgba(0,0,0,.22)}
.nb-pop b{font-weight:600}
.nb-pop a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.nb-pop[hidden]{display:none}

/* ---- Points of interest ------------------------------------------------ */
/* auto-FILL, not auto-fit: with a single point of interest auto-fit collapses
   the empty tracks and lets the one card stretch the full row, which reads as a
   banner rather than a card. auto-fill keeps the track width, so the first card
   is card-sized whether there is one of them or six. max-width keeps the row
   from running wider than the tiles above it on a very wide screen. */
.nb-poi{list-style:none;display:grid;gap:1rem;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.nb-poi-item{display:flex;flex-direction:column;padding:1.6rem 1.5rem;background:var(--bg);
	border:1px solid var(--line);border-radius:4px}
.nb-poi-cat{font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
	color:var(--muted)}
.nb-poi-name{margin:.55rem 0 0;font-family:var(--serif);font-size:1.3rem;font-weight:300;
	line-height:1.3;color:var(--ink)}
.nb-poi-addr{margin:.5rem 0 0;font-size:.86rem;line-height:1.6;color:#3d3d3d}
.nb-poi-addr a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* margin-top:auto pins the rating to the bottom, so cards of differing address
   length still line their ratings up across the row. */
.nb-poi-rating{display:flex;align-items:center;gap:.5rem;margin:auto 0 0;padding:.9rem 0 0}
.nb-stars{display:inline-flex;gap:1px;color:#c8a04a}
.nb-stars svg{width:15px;height:15px;display:block}
.nb-poi-reviews{font-size:.78rem;color:var(--muted)}

/* ---- Map --------------------------------------------------------------- */
/* The map itself is the listing pages' component — <section class="map">, sized
   and grayscaled by property.css. Nothing is restyled here: this wrapper only
   supplies the opaque background and z-index every section on this page needs
   in order to paint over the position:fixed hero. */
.nb-map-wrap{position:relative;z-index:1;background:var(--bg);line-height:0}

@media (max-width:600px){
	.nb-stat{padding:1.6rem 1rem}
	/* Stack the dials and drop the divider that separated them in a row. */
	.nb-scores{flex-direction:column;align-items:flex-start;gap:2rem;
		max-width:320px;margin-inline:auto}
	.nb-divider{display:none}
}