/* ============================================================
   Emerald Exteriors — Neighborhood landing page (v2)
   ------------------------------------------------------------
   Loaded ONLY on /neighborhoods/<slug>/ pages, in addition to
   the global styles.css. Prefix: .ee-nb-

   Design direction: pride-forward. Photo collage hero, big
   lime-light stats on emerald-900 pride band, positive-only
   material chips (no red Xs), 3-card project gallery, 4-cell
   photo band, light closing.

   All colors/sizes/radii come from --ee-* tokens; no hardcoded
   hex. Breakpoints follow the global 1024 / 640 rhythm.
   ============================================================ */

/* ---------- Page body ---------- */
.ee-nb-body { background: var(--ee-bg); color: var(--ee-fg); }

/* ---------- Minimal header (overrides slight) ---------- */
/* Uses _includes/minimal_header.html — no overrides needed.   */

/* ============================================================
   HERO  —  copy + photo collage
   ============================================================ */
.ee-nb-hero {
  padding: 64px 0 80px;
  background:
    radial-gradient(800px 600px at 90% -10%, rgba(130, 195, 65, 0.12), transparent 60%),
    var(--ee-bg);
}
.ee-nb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.ee-nb-hero__chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ee-emerald-50);
  color: var(--ee-emerald-800);
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-12);
  font-weight: var(--ee-fw-bold);
  letter-spacing: var(--ee-tracking-allcaps);
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--ee-radius-pill);
  margin-bottom: 24px;
}
.ee-nb-hero__chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ee-emerald-600);
}
.ee-nb-hero__title {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ee-fg);
  margin: 0 0 24px;
  text-wrap: balance;
}
.ee-nb-hero__title em {
  color: var(--ee-emerald-700);
  font-style: italic;
  font-weight: var(--ee-fw-semibold);
}
.ee-nb-hero__lede {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-18);
  line-height: 1.55;
  color: var(--ee-fg-muted);
  max-width: 52ch;
  margin: 0 0 36px;
}
.ee-nb-hero__ctas {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.ee-nb-hero__phone-inline {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  color: var(--ee-fg-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.ee-nb-hero__phone-inline strong {
  font-size: var(--ee-fs-16); color: var(--ee-fg); font-weight: var(--ee-fw-bold);
}
.ee-nb-hero__trust {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--ee-border);
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  color: var(--ee-fg-muted);
}
.ee-nb-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.ee-nb-hero__trust svg { color: var(--ee-emerald-600); }

/* Hero photo collage: 1 big (left, full height) + 2 small (right, stacked) */
.ee-nb-hero__collage {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  aspect-ratio: 5 / 4;
}
.ee-nb-hero__collage-big { grid-row: 1 / 3; position: relative; }
.ee-nb-hero__collage-sm  { position: relative; }
.ee-nb-hero__collage .ee-photo { height: 100%; aspect-ratio: auto; }
.ee-nb-hero__collage-caption {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(255, 255, 255, 0.96);
  padding: 8px 12px;
  border-radius: var(--ee-radius-sm);
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-12);
  font-weight: var(--ee-fw-bold);
  color: var(--ee-fg);
  box-shadow: var(--ee-shadow-sm);
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 1;
}
.ee-nb-hero__collage-caption::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ee-emerald-600);
}
.ee-nb-hero__collage-caption em {
  font-style: normal; font-weight: var(--ee-fw-regular); color: var(--ee-fg-muted);
}

/* ============================================================
   PRIDE STRIP  —  3-up stat band on emerald-900
   ============================================================ */
.ee-nb-pride {
  background: var(--ee-emerald-900);
  color: #fff;
  padding: 64px 0;
}
.ee-nb-pride__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.ee-nb-pride__cell {
  padding: 0 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.ee-nb-pride__cell:first-child { padding-left: 0; }
.ee-nb-pride__cell:last-child  { padding-right: 0; border-right: 0; }
.ee-nb-pride__n {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-black);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ee-emerald-300);
  margin-bottom: 12px;
}
.ee-nb-pride__n .ee-nb-pride__star { color: var(--ee-emerald-300); }
.ee-nb-pride__label {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-12);
  font-weight: var(--ee-fw-bold);
  letter-spacing: var(--ee-tracking-allcaps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.ee-nb-pride__body {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 32ch;
}

/* ============================================================
   SECTION CHROME  —  used by gallery / materials / process
   ============================================================ */
.ee-nb-sec { padding: 96px 0; }
.ee-nb-sec--soft { background: var(--ee-bg-soft); }
.ee-nb-sec__head {
  max-width: 720px;
  margin: 0 0 48px;
}
.ee-nb-sec__title {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: clamp(1.625rem, 2.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ee-fg);
  text-wrap: balance;
}
.ee-nb-sec__lede {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-18);
  line-height: 1.6;
  color: var(--ee-fg-muted);
  margin: 0;
  max-width: 56ch;
}

/* ============================================================
   GALLERY  —  3 cards, "what your neighbors chose"
   ============================================================ */
.ee-nb-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ee-nb-gallery__card {
  background: var(--ee-bg);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-radius-lg);
  overflow: hidden;
  transition: transform var(--ee-dur-base) var(--ee-ease-out),
              box-shadow var(--ee-dur-base) var(--ee-ease-out),
              border-color var(--ee-dur-base) var(--ee-ease-out);
}
.ee-nb-gallery__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ee-shadow-md);
  border-color: var(--ee-border-strong);
}
.ee-nb-gallery__photo .ee-photo { border-radius: 0; }
.ee-nb-gallery__body { padding: 20px; }
.ee-nb-gallery__where {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-12);
  font-weight: var(--ee-fw-bold);
  letter-spacing: var(--ee-tracking-allcaps);
  text-transform: uppercase;
  color: var(--ee-emerald-700);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 8px;
}
.ee-nb-gallery__where::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ee-emerald-600);
}
.ee-nb-gallery__title {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: var(--ee-fs-20);
  margin: 0 0 6px;
  color: var(--ee-fg);
}
.ee-nb-gallery__meta {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  color: var(--ee-fg-muted);
  margin: 0;
}

/* ============================================================
   MATERIALS  —  positive-only chips, with "anything else?" card
   ============================================================ */
.ee-nb-mats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ee-nb-mat {
  background: var(--ee-bg);
  border: 1px solid var(--ee-border-emerald);
  border-radius: var(--ee-radius-lg);
  padding: 24px;
  transition: background var(--ee-dur-base) var(--ee-ease-out),
              transform var(--ee-dur-base) var(--ee-ease-out);
}
.ee-nb-mat:hover {
  background: var(--ee-emerald-25);
  transform: translateY(-1px);
}
.ee-nb-mat__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.ee-nb-mat__icon {
  width: 40px; height: 40px;
  border-radius: var(--ee-radius-md);
  background: var(--ee-emerald-50);
  color: var(--ee-emerald-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ee-nb-mat__check {
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ee-emerald-600);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ee-nb-mat__name {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--ee-fg);
}
.ee-nb-mat__note {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  line-height: 1.5;
  color: var(--ee-fg-muted);
  margin: 0;
}
/* The "something not on this list?" empty-state card */
.ee-nb-mat--ask {
  background: var(--ee-bg-soft);
  border-style: dashed;
  border-color: var(--ee-border-strong);
}
.ee-nb-mat--ask:hover { background: var(--ee-bg-soft); transform: none; }
.ee-nb-mat--ask .ee-nb-mat__icon {
  background: var(--ee-ink-50);
  color: var(--ee-fg-muted);
}
.ee-nb-mat--ask .ee-nb-mat__name { color: var(--ee-fg-muted); }

.ee-nb-mats__footnote {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--ee-emerald-25);
  border-radius: var(--ee-radius-md);
  border-left: 3px solid var(--ee-emerald-300);
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  line-height: 1.6;
  color: var(--ee-fg);
}
.ee-nb-mats__footnote strong { color: var(--ee-emerald-800); font-weight: var(--ee-fw-bold); }
.ee-nb-mats__footnote a {
  color: var(--ee-emerald-700);
  font-weight: var(--ee-fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  margin-left: 6px;
}
/* "Source unknown / observed only" variant of the footnote */
.ee-nb-mats__footnote--observed {
  background: var(--ee-warning-soft);
  border-left-color: var(--ee-warning);
}
.ee-nb-mats__footnote--observed strong { color: var(--ee-warning); }

/* ============================================================
   COVENANT / BOARD PROCESS  —  3-step horizontal card
   ============================================================ */
.ee-nb-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ee-bg);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-radius-lg);
  overflow: hidden;
  box-shadow: var(--ee-shadow-sm);
}
.ee-nb-process__step {
  padding: 32px;
  border-right: 1px solid var(--ee-border);
}
.ee-nb-process__step:last-child { border-right: 0; }
.ee-nb-process__step--lit { background: var(--ee-emerald-25); }
.ee-nb-process__step--lit .ee-nb-process__n { background: var(--ee-emerald-700); }
.ee-nb-process__n {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ee-emerald-600);
  color: #fff;
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: var(--ee-fs-16);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ee-nb-process__title {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: var(--ee-fs-18);
  margin: 0 0 8px;
  color: var(--ee-fg);
}
.ee-nb-process__body {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-14);
  line-height: 1.55;
  color: var(--ee-fg-muted);
  margin: 0;
}

/* ============================================================
   PHOTO BAND  —  full-bleed 4-cell strip
   ============================================================ */
.ee-nb-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.ee-nb-band__cell { position: relative; aspect-ratio: 1 / 1; }
.ee-nb-band__cell .ee-photo { border-radius: 0; height: 100%; }

/* ============================================================
   CLOSING  —  light variant, italic accent, name-drops the hood
   ============================================================ */
.ee-nb-closing {
  padding: 96px 0 80px;
  text-align: center;
}
.ee-nb-closing__title {
  font-family: var(--ee-font-display);
  font-weight: var(--ee-fw-bold);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ee-fg);
  margin: 0 auto 16px;
  max-width: 24ch;
  text-wrap: balance;
}
.ee-nb-closing__title em {
  color: var(--ee-emerald-700);
  font-style: italic;
}
.ee-nb-closing__sub {
  font-family: var(--ee-font-sans);
  font-size: var(--ee-fs-18);
  line-height: 1.6;
  color: var(--ee-fg-muted);
  max-width: 50ch;
  margin: 0 auto 32px;
}
.ee-nb-closing__ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ee-nb-hero__grid       { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ee-nb-mats             { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ee-nb-gallery          { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ee-nb-gallery__card:nth-child(3) { grid-column: span 2; max-width: 50%; }
  .ee-nb-band             { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ee-nb-pride__grid      { grid-template-columns: minmax(0, 1fr); }
  .ee-nb-pride__cell      {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ee-nb-pride__cell:last-child { border-bottom: 0; }
  .ee-nb-mats             { grid-template-columns: minmax(0, 1fr); }
  .ee-nb-gallery          { grid-template-columns: minmax(0, 1fr); }
  .ee-nb-gallery__card:nth-child(3) { grid-column: auto; max-width: none; }
  .ee-nb-process          { grid-template-columns: minmax(0, 1fr); }
  .ee-nb-process__step    {
    border-right: 0;
    border-bottom: 1px solid var(--ee-border);
  }
  .ee-nb-process__step:last-child { border-bottom: 0; }
}