/* Neighborhood pages — builds on ../styles.css */

/* Hero */
.nhero { position: relative; min-height: 78vh; display: grid; place-items: center; color: var(--white); overflow: hidden; }
.nhero__bg { position: absolute; inset: 0; z-index: 0; }
.nhero__bg video { width: 100%; height: 100%; object-fit: cover; }
.nhero__shade { z-index: 1; }
.nhero__content { z-index: 2; }
.nhero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.6)); }
.nhero__credit { position: absolute; right: 12px; bottom: 8px; z-index: 2; margin: 0; font-size: 10px; letter-spacing: .3px; color: rgba(255,255,255,.65); max-width: calc(100% - 24px); text-align: right; }
.nhero__credit a { color: inherit; text-decoration: underline; }
.nhero__content { position: relative; text-align: center; padding: 140px var(--gutter) 80px; max-width: 900px; }
.nhero__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; opacity: .85; margin-bottom: 14px; }
.nhero h1 { font-family: var(--head); font-weight: 400; font-size: clamp(38px, 6vw, 76px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.nhero__tag { font-size: clamp(15px, 1.4vw, 18px); margin: 18px auto 34px; max-width: 620px; opacity: .92; }

/* Intro + quick facts */
.nintro { padding: 90px 0; }
.nintro__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; width: min(100% - 2 * var(--gutter), 1100px); }
.nintro__text .h2 { margin-bottom: 22px; }
.nintro__text p { font-size: 15px; line-height: 1.8; margin-bottom: 18px; color: #333; }
.nfacts { background: var(--black); color: var(--white); padding: 34px 32px; }
.nfacts h3 { font-family: var(--head); font-weight: 400; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
.nfacts dl div { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); }
.nfacts dt { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: .65; margin-bottom: 4px; }
.nfacts dd { font-size: 15px; margin: 0; }

/* Map */
.nmap { padding: 90px 0; }
.nmap__sub { font-size: 14px; opacity: .75; margin: 10px 0 30px; }
.nmap__map { height: clamp(360px, 55vh, 560px); width: 100%; background: #111; border: 1px solid rgba(255,255,255,.15); }
.nmap__note { font-size: 12px; opacity: .55; margin-top: 10px; }
.nmap .leaflet-container { font-family: var(--body); background: #1b1b1b; }
.nmap .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.82) contrast(1.15); }
.nmap__label { background: rgba(4,4,4,.85); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; box-shadow: none; }
.nmap__label--current { background: #fff; color: #040404; border-color: #fff; font-weight: 600; }
.nmap__label::before { display: none; }
.leaflet-interactive { cursor: pointer; }
.nmap__label--g { position: absolute; transform: translate(-50%, calc(-100% - 6px)); white-space: nowrap; pointer-events: none; font-family: var(--body); }

/* Highlights */
.nhigh { padding: 90px 0 70px; }
.nhigh__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; width: min(100%, 1100px); margin-inline: auto; }
.nhigh__item { border-top: 2px solid #0d0d0d; padding-top: 20px; }
.nhigh__item h3 { font-family: var(--head); font-weight: 600; font-variation-settings: "opsz" 11; font-size: 18px; color: #0d0d0d; margin-bottom: 10px; }
.nhigh__item p { font-size: 14px; line-height: 1.7; color: #444; }

/* CTA */
.ncta { background: var(--black); color: var(--white); padding: 90px 0; }
.ncta .container { max-width: 700px; }
.ncta p { font-size: 15px; line-height: 1.7; opacity: .85; margin: 18px 0 32px; }
.ncta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn--outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--outline:hover { background: var(--white); color: var(--black); }

/* Other neighborhoods */
.nother { padding: 90px 0 100px; }
.nother__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 44px auto 0; width: min(100%, 1100px); }
.ntile { position: relative; height: 150px; overflow: hidden; display: grid; place-items: center; color: var(--white); }
.ntile img { position: absolute; inset: 0; transition: transform .6s; }
.ntile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); transition: background .3s; }
.ntile:hover img { transform: scale(1.08); }
.ntile:hover::after { background: rgba(0,0,0,.65); }
.ntile span { position: relative; z-index: 1; font-family: var(--head); font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; padding: 0 10px; }

@media (max-width: 900px) {
  .nintro__grid { grid-template-columns: 1fr; gap: 36px; }
  .nhigh__grid { grid-template-columns: 1fr 1fr; }
  .nother__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nhero { min-height: 70vh; }
  .nhigh__grid, .nother__grid { grid-template-columns: 1fr; }
  .ntile { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .nhero__bg { animation: none; } }