/* =============================================================================
   Kevin Vaz Realty — Neighborhood guide pages
   Loaded IN ADDITION to styles.css, only on neighborhoods.html and the
   /neighborhoods/*.html area pages. Reuses base tokens/classes (--ink, --brass,
   .section, .btn, .sfaq, .pagecta, .eyebrow, .reveal); adds only what's new here.
   ========================================================================== */

/* ---- shared light page hero (no photo) for guide pages ---- */
.nb-hero { text-align: center; padding: clamp(7rem, 12vw, 10rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem); background: var(--paper); border-bottom: 1px solid var(--line); }
.nb-hero__crumbs { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; }
.nb-hero__crumbs a { color: var(--brass-d); }
.nb-hero__crumbs a:hover { text-decoration: underline; }
.nb-hero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; color: var(--ink); margin: 0; }
.nb-hero__lede { color: var(--ink-2); font-size: 1.1rem; line-height: 1.6; max-width: 60ch; margin: 1.1rem auto 0; }
.nb-hero__meta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.nb-hero__pill { font-size: .8rem; letter-spacing: .02em; color: var(--ink-2); background: var(--ivory-2); border: 1px solid var(--line); border-radius: 999px; padding: .38rem .9rem; }
.nb-hero__pill b { color: var(--ink); font-weight: 600; }

/* ---- hub: intro + region groups ---- */
.nb-intro { max-width: 62ch; margin: 0 auto; text-align: center; color: var(--ink-2); font-size: 1.06rem; }
.nb-group { max-width: var(--wrap); margin: 0 auto; }
.nb-group + .nb-group { margin-top: clamp(3rem, 6vw, 5rem); }
.nb-group__title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); margin: 0 0 .3rem; }
.nb-group__sub { color: var(--muted); font-size: .92rem; margin: 0 0 1.6rem; }

.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.2rem; }
.nb-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.45rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.nb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brass-mid); }
.nb-card__name { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: 0; }
.nb-card__meta { font-size: .8rem; color: var(--muted); letter-spacing: .02em; margin: .3rem 0 .8rem; }
.nb-card__blurb { color: var(--ink-2); font-size: .94rem; line-height: 1.55; margin: 0 0 1.1rem; }
.nb-card__foot { margin-top: auto; }
.nb-card__link { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-d); display: inline-flex; align-items: center; gap: .4rem; transition: gap .3s var(--ease); }
.nb-card:hover .nb-card__link { gap: .7rem; }

/* ---- lifestyle tag chips ---- */
.nb-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.nb-chip { font-size: .72rem; letter-spacing: .04em; text-transform: capitalize; color: var(--brass-d); background: rgba(147,180,201,.16); border-radius: 999px; padding: .26rem .7rem; }

/* ---- area page: prose + facts + who-for ---- */
.nb-body { max-width: 760px; margin: 0 auto; }
.nb-prose p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.75; margin: 0 0 1.3rem; }
.nb-prose h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.05rem); color: var(--ink); margin: 2.6rem 0 1rem; }
.nb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.5rem 0; }
.nb-fact { background: var(--paper); padding: 1.1rem 1.2rem; }
.nb-fact__k { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.nb-fact__v { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); line-height: 1.2; }
.nb-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.nb-list li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; color: var(--ink-2); line-height: 1.55; }
.nb-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border: 1.5px solid var(--brass-mid); border-radius: 50%; }

/* ---- nearby / cross-links ---- */
.nb-nearby { max-width: var(--wrap); margin: 0 auto; }
.nb-nearby__title { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 0 0 1.2rem; text-align: center; }
.nb-nearby__row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.nb-nearby__row a { font-size: .88rem; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; transition: border-color .3s var(--ease), color .3s var(--ease); }
.nb-nearby__row a:hover { border-color: var(--brass-mid); color: var(--ink); }

/* ---- photo hero variant (real licensed neighborhood photo behind the header) ---- */
.nb-hero--photo { position: relative; background: var(--ink); color: var(--ivory); border-bottom: none; overflow: hidden; }
.nb-hero--photo .nb-hero__bg { position: absolute; inset: 0; z-index: 0; }
.nb-hero--photo .nb-hero__bg img { width: 100%; height: 100%; object-fit: cover;
  filter: blur(1.5px) saturate(1.05); transform: scale(1.03); }
.nb-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,22,26,.62) 0%, rgba(18,22,26,.45) 45%, rgba(18,22,26,.86) 100%); }
.nb-hero--photo > *:not(.nb-hero__bg):not(.nb-hero__credit) { position: relative; z-index: 2; }
.nb-hero--photo .nb-hero__title { color: var(--ivory); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.nb-hero--photo .nb-hero__lede { color: rgba(243,244,242,.96); text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.nb-hero--photo .nb-hero__crumbs { color: rgba(243,244,242,.85); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.nb-hero--photo .nb-hero__crumbs a { color: var(--brass); }
.nb-hero--photo .nb-hero__pill { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: var(--ivory); }
.nb-hero--photo .nb-hero__pill b { color: #fff; }
.nb-hero__credit { position: absolute; left: clamp(1rem, 5vw, 3rem); bottom: .55rem; z-index: 3; margin: 0;
  font-size: .62rem; letter-spacing: .01em; line-height: 1.3; color: rgba(243,244,242,.72);
  text-shadow: 0 1px 6px rgba(0,0,0,.7); text-align: left; max-width: min(70%, 34rem); }
.nb-hero__credit a { color: rgba(243,244,242,.88); text-decoration: underline; }

/* ---- nav legibility on neighborhood pages ----
   At the very top the nav is transparent with light text over the dark photo
   hero (.is-top). Once it turns solid/light (.is-scrolled) while still
   overlapping the hero, force dark text + the dark logo so it never goes
   light-on-light. Scoped here (neighborhoods.css loads after styles.css). */
.nav.is-scrolled .nav__links a,
.nav.is-scrolled .nav__cta,
.nav.is-scrolled .nav__brand,
.nav.is-scrolled .nav__brand-name { color: var(--ink-2); }
.nav.is-scrolled .nav__brand-sub { color: var(--brass-d); }
.nav.is-scrolled .brand-logo::after { opacity: 0; }
.nav.is-scrolled .nav__burger span { background: var(--ink); }