/* locale.css: neighborhood landing pages (/neighborhoods/*).
   Loaded AFTER /site.css and uses only its tokens. No new fonts or colors. */

/* Breadcrumb as a real list */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: '\203A'; margin-right: 6px; color: rgba(255,255,255,0.55); }
.crumbs [aria-current] { color: var(--white); }

/* Hero: copy left, illustration right; stacks on phones */
.nb-hero { padding: 56px 0 64px; }
.nb-hero .nb-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.nb-hero .nb-summary { font-size: 1.12rem; max-width: 34em; }
.nb-figure {
  position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  /* Fallback art if the illustration is missing: soft purple field with a gold glow */
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(219,171,58,0.35) 0%, rgba(219,171,58,0) 55%),
    linear-gradient(160deg, var(--purple-light) 0%, var(--purple-deep) 100%);
  box-shadow: 0 12px 40px rgba(27,18,48,0.28);
  border: 1px solid rgba(255,255,255,0.18);
}
.nb-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-figure figcaption {
  position: absolute; left: 12px; bottom: 10px; font-size: 0.72rem; color: var(--white);
  background: rgba(27,18,48,0.55); padding: 3px 10px; border-radius: 20px;
}

/* Center facts: one quiet strip, not a card grid */
.nb-facts { padding: 0; }
.nb-facts .container { transform: translateY(-28px); }
.nb-facts dl {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0;
  background: var(--white); border: 1px solid var(--purple-mist); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(91,44,142,0.12);
}
.nb-facts dl > div { padding: 20px 22px; }
.nb-facts dl > div + div { border-left: 1px solid var(--purple-mist); }
.nb-facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); margin-bottom: 4px; }
.nb-facts dd { color: var(--charcoal); font-weight: 600; line-height: 1.45; }
.nb-facts dd a { font-weight: 700; }
.nb-facts .nb-sub { display: block; font-weight: 400; font-size: 0.9rem; color: var(--slate); margin-top: 2px; }

/* Long-form sections */
.nb-story { padding-top: 24px; }
.nb-prose { max-width: 68ch; }
.nb-prose p { margin-bottom: 16px; }
.nb-prose h2 { margin-bottom: 14px; }
.nb-prose .btn { margin-top: 6px; }
.nb-route { background: var(--purple-wash); }

/* Q&A */
.nb-faq .faq:first-of-type { border-top: 1px solid var(--purple-mist); }
.nb-faq .faq p { max-width: 68ch; }

/* Nearby links: plain list with an arrow, two columns on wide screens */
.nb-links ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 32px; margin-top: 18px; }
.nb-links li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--purple-mist); font-weight: 600;
  transition: color 0.25s var(--ease-out);
}
.nb-links li a:hover { text-decoration: none; color: var(--purple-deep); }
.nb-links li a span { font-weight: 400; font-size: 0.85rem; color: var(--slate); white-space: nowrap; }
.nb-links .nb-also { margin-top: 22px; }

/* Phone-only sticky call / enroll bar */
.nb-sticky { display: none; }
@media (max-width: 640px) {
  .nb-sticky {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white);
    border-top: 1px solid var(--purple-mist); box-shadow: 0 -6px 24px rgba(91,44,142,0.14);
  }
  .nb-sticky .btn { flex: 1; padding: 13px 10px; }
  body.nb-page { padding-bottom: 76px; }
}

@media (max-width: 860px) {
  .nb-hero .nb-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .nb-facts dl { grid-template-columns: 1fr; }
  .nb-facts dl > div + div { border-left: 0; border-top: 1px solid var(--purple-mist); }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  section { padding: 56px 0; }
  .nb-hero { padding: 40px 0 52px; }
  .nb-hero .hero-btns .btn { flex: 1 1 100%; }
}

/* /neighborhoods hub */
.nb-hub-group + .nb-hub-group { margin-top: 44px; }
.nb-hub-group h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }

/* Row border is the affordance in the nearby list; hide the caption when the illustration fails */
.nb-links li a { text-decoration: none; }
.nb-noimg figcaption { display: none; }