/* ============================================================
   SECTION: NEIGHBORHOOD HERO + INTRO — START
   Ported from live-html-css-lvl29's neighborhood page. Same two components as
   amenities (.inner-hero-section + .intro-type-1) but a different treatment,
   so everything here is scoped under .page-nb on the wrapper — without that
   scope these rules would rewrite the amenities hero too.

   Two differences from amenities: the photo runs the FULL height of the wrapper
   behind a left-to-right gradient (amenities fades to black at the bottom with
   a radial vignette), and the intro copy sits in a right-hand column instead of
   centred.
   ============================================================ */
.neighborhood.new-section{
  contain: paint;
}
/* v1: .page-hero-bg.page-nb { height: 100% } — the photo covers the whole
   wrapper, not amenities' fixed 56vw band */
.inner-page-body-wrapper.page-nb .inner-hero-section {
  height: 100%;
}

/* v1: .page-hero-bg.page-nb::before — dots motif down the right side */
.inner-page-body-wrapper.page-nb .inner-hero-section::before {
  top: 115px;
  right: 8.984375vw;
  bottom: auto;
  left: auto;
  width: 100px;
  height: 100%;
  max-height: 750px;
  background: url(../images/icons/pattern-dots.svg) no-repeat 50%;
  opacity: 1;
  z-index: 2;
}

/* v1: .page-hero-bg.page-nb::after — flat left-to-right darkening, replacing
   the radial vignette the amenities hero uses */
.inner-page-body-wrapper.page-nb .inner-hero-section::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: none;
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 26%, #000000);
}

/* v1: .inner-page-intro.to-right — copy pushed into a right-hand column, over
   the photo. Overrides .intro-type-1's centred 665px .content-wrapper.

   The column is a fixed width pushed right with margin-left:auto, NOT v1's
   "wide box with a big left padding". Two reasons that approach failed here:
   v1's fixed 800px inset left only ~280px of text on a wide screen, so
   headings broke mid-phrase; and swapping it for a percentage does not help,
   because percentage padding resolves against the PARENT's width, not the
   element's — 52% became a 740px inset and the column was still only 340px.
   A fixed max-width gives the same readable column at every desktop size. */
.page-nb .intro-type-1.intro-to-right .content-wrapper {
  width: 100%;
  /* 440 box = 400px of text. Narrower than the 560 it started at, and chosen
     so the centred FIND US AT cue clears it: with the column pinned right the
     clearance works out to containerWidth/2 - boxWidth - 83, which is
     independent of the viewport and depends only on the container max at each
     breakpoint. At 440 that stays positive down to the 1024 breakpoint
     (+209px at the widest container, +47px at the narrowest above 1024);
     at 560 it went negative below ~1440 and the cue ran into the copy. */
  max-width: 440px;
  margin-left: auto;
  margin-right: 0;
  padding: 240px 20px 90px;
  text-align: left;
}

/* v1 downsizes the neighborhood title (typography.css:118 — 30px). Expressed in
   rem so it keeps tracking typo.css's stepped root font-size. */


/* --- FIND US AT: rotated, bouncing scroll cue ---
   Centred, matching v1. The copy column is a fixed 520px pinned right, so the
   cue clears it on a wide screen; the narrower breakpoints pull it further
   left (see the 1024 block) because the column's left edge marches left as the
   container shrinks. */
.page-nb .location-content__cta {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  transform: translate(-50%, -50%);
  /* own compositing layer — stops the rotated text jittering during the hop */
  will-change: transform;
  animation: bounce 7s infinite alternate;
}

.page-nb .location-content__cta a {
  display: flex;
  align-items: center;
  font-size: 0.667rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  transform: rotate(-90deg);
}

.page-nb .location-content__cta span {
  position: relative;
  display: block;
  width: 57px;
  height: 57px;
  margin-right: 20px;
}

.page-nb .location-content__cta span::before,
.page-nb .location-content__cta span::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(214, 209, 196, 0.12);
}

.page-nb .location-content__cta span::before {
  top: 0;
  left: 0;
  width: 57px;
  height: 57px;
}

.page-nb .location-content__cta span::after {
  top: 12.5px;
  left: 12.5px;
  width: 32px;
  height: 32px;
}

.page-nb .location-content__cta span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
}

/* rest, hop up at the midpoint, rest again. The translateX(-50%) has to be
   repeated in every frame or the element snaps back to the left on animate. */
@keyframes bounce {
  0%,
  30%,
  70%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-50px) translateX(-50%);
  }
}
/* ============================================================
   SECTION: NEIGHBORHOOD HERO + INTRO — END
   ============================================================ */

/* ============================================================
   SECTION: NEIGHBORHOOD MAP + PLACES — START
   The markup is Swifty's Variant B, which the framework styles as a TWO-PANE
   layout: map on the left, a vertical bulleted list on the right, capped at
   549px and scrolling down. v1's design is stacked instead — a full-width map
   with a horizontal scrolling strip of places beneath it — so the rules below
   turn the component's own layout back off.

   Every override is written .neighborhood.new-section, matching the shape
   component-common.css uses (component-common.css:2424-2553). style.css loads
   last, so equal specificity resolves here. Written any weaker and the
   framework's column layout silently wins.

   Untouched framework behaviour, deliberately reused rather than rewritten:
   .nbp-filter-mob-wrap is hidden by default and revealed at ≤767, where
   .nbp-filter-opt-wrapp is killed with !important (component-common.css:4049
   and :4053). That is exactly v1's pills-to-dropdown swap, so it is left alone.
   ============================================================ */

/* --- Filter pill rail --- */
.neighborhood.new-section .nbp-filter-wrapper {
  padding: 20px 0;
}

.neighborhood.new-section .nbp-filter-opt-wrapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* the rail scrolls horizontally; main.js drives the arrows either side */

.neighborhood.new-section .nbp-filter-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.neighborhood.new-section .nbp-filter-scroll::-webkit-scrollbar {
  display: none;
}

.neighborhood.new-section .nbp-filter-options {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 0 auto;
}

/* v1: div#nbp-filter-options a.nb-map-filter — the rounded outline pill. The
   hover/active fill comes from the bg-primary-* and text-color-light-* classes
   on the markup, so no colour is named here. */
.neighborhood.new-section .nb-map-filter {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 6px 16px;
  border: 1px solid rgba(163, 147, 131, 1);
  border-radius: 50px;
  white-space: nowrap;
  font-size: 0.722rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}

.neighborhood.new-section .nb-map-filter i.swi {
  margin-right: 6px;
  font-size: 1em;
}

/* main.js adds .hidden to an arrow when the rail is at that end */
.neighborhood.new-section .nbp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.neighborhood.new-section .nbp-nav-btn.hidden {
  visibility: hidden;
}

/* --- Map View / List View toggle (≤767 only) ---
   The component ships these as bare <button>s with no utility classes
   (swifty-components.php:2110-2115) and component-common.css gives them only
   `width: 50%`, so they rendered as default grey browser buttons.
   Matched to the site's button treatment rather than the pill rail: the
   padding and 2px radius come from .btn (component-main.css:212-225) as the
   header narrows it in ._header .header-btn, and the type from
   `.new-section .btn` in typo-8.css. .active is the only state class the
   markup carries. */
.neighborhood.new-section .nbp-view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid rgba(163, 147, 131, 1);
  border-radius: 2px;
  background: transparent;
  color: #382f2d;
  white-space: nowrap;
  /* buttons do not inherit type styling, so without this the label sits in the
     UA font while every other button on the page uses the theme's */
  font-family: inherit;
  font-size: 0.778rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.2s;
}

.neighborhood.new-section .nbp-view-tab .npb-tab-icon {
  display: inline-flex;
  margin-right: 6px;
  font-size: 1em;
}

.neighborhood.new-section .nbp-view-tab.active {
  background: #382f2d;
  border-color: #382f2d;
  color: #ffffff;
}

/* --- Stacked layout: map above, places below (v1), not side by side --- */
.neighborhood.new-section .map-list-wrapper {
  display: block;
}

.neighborhood.new-section .map-canvas {
  width: 100%;
  height: 50vh;
  min-height: 450px;
}

.neighborhood.new-section .map-canvas iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.neighborhood.new-section .map-list-wrapper .nbp-filter-places {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* v1: .container.nb-places-list — heading column beside the strip */
.neighborhood.new-section .nbp-list-view-wrap {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  padding: 30px 0;
}

.neighborhood.new-section .nbp-heading-wrap {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: 20%;
  margin-bottom: 0;
  gap: 10px;
}

.neighborhood.new-section .nbp-heading-wrap .nbp-places-heading {
  margin: 0;
}

/* v1: .nb-places-wrapper — the horizontal scroller. The framework caps this at
   549px and scrolls it vertically; both are undone here. */
.neighborhood.new-section .nbp-places-list {
  width: 80%;
  height: auto;
  max-height: none;
  padding: 0 15px 15px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  /* the arrows just set scrollLeft; the easing lives here, so it also honours
     prefers-reduced-motion without any JS */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .neighborhood.new-section .nbp-places-list {
    scroll-behavior: auto;
  }
}

.neighborhood.new-section .nbp-places-list::-webkit-scrollbar {
  height: 8px;
}

.neighborhood.new-section .nbp-places-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
}

.neighborhood.new-section .nbp-places-list::-webkit-scrollbar-thumb {
  background: #9f662d;
}

/* framework makes this a disc-bulleted flex column — back to a plain row */
.neighborhood.new-section .nbp-places-list .nb-places-ul {
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  list-style: none;
}

/* v1: 5 cards per view, divided by hairlines */
.neighborhood.new-section .nbp-places-list .nb-places-ul li {
  display: inline-block;
  width: 20%;
  padding: 0 15px;
  border-right: 1px solid rgba(56, 47, 45, 0.35);
  vertical-align: top;
  white-space: normal;
  font-size: 0.778rem;
}

.neighborhood.new-section .nbp-places-list .nb-places-ul li:last-child {
  border-right: 0;
}

/* the default category is set in the markup, so the list is correct before any
   JS runs; main.js moves this class as the filter changes */
.neighborhood.new-section .nb-places-ul li.hide-place {
  display: none;
}

/* --- Card contents: name over address, as v1 --- */
.neighborhood.new-section .nb-places-ul li a {
  display: block;
  text-decoration: none;
}

.neighborhood.new-section .nb-places-ul .place-name {
  margin: 0 0 10px;
  font-size: 0.889rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.neighborhood.new-section .nb-places-ul .place-address {
  font-size: 0.833rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #382f2d;
}

/* --- Strip chevrons (theme-added; the component ships none) --- */
.neighborhood.new-section .nbp-places-scroller {
  display: flex;
  align-items: center;
  width: 80%;
}

/* the list sizes itself inside the scroller now, so the width moves up a level */
.neighborhood.new-section .nbp-places-scroller .nbp-places-list {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.neighborhood.new-section .nbp-places-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #382f2d;
  font-size: 1.1rem;
  cursor: pointer;
}

/* kept in the layout when disabled so the strip does not shift width */
.neighborhood.new-section .nbp-places-nav[disabled] {
  opacity: 0.25;
  cursor: default;
}
/* ============================================================
   SECTION: NEIGHBORHOOD MAP + PLACES — END
   ============================================================ */

@media (max-width: 1024px) {
  /* ===== NEIGHBORHOOD HERO + INTRO — START ===== */
  .page-nb .intro-type-1.intro-to-right .content-wrapper {
    padding: 180px 20px 60px;
  }

  /* The container narrows here while the column stays 520px, so its left edge
     marches left — the cue has to move further left or it crowds the copy.
     12%, not 26%: at the bottom of this range 26% left only 9px of gap, and
     right at the 768 boundary the copy and the cue actually overlapped. */
  .page-nb .location-content__cta {
    left: 12%;
  }
  /* ===== NEIGHBORHOOD HERO + INTRO — END ===== */

  /* ===== NEIGHBORHOOD MAP + PLACES — START =====
     v1 drops to 3 cards per view here and moves the category heading above the
     strip as a full-width, uppercase label. */
  .neighborhood.new-section .nbp-heading-wrap {
    width: 100%;
    margin-bottom: 25px;
    text-align: center;
  }

  .neighborhood.new-section .nbp-places-scroller {
    width: 100%;
  }

  .neighborhood.new-section .nbp-places-list .nb-places-ul li {
    width: 33.33%;
  }
  /* ===== NEIGHBORHOOD MAP + PLACES — END ===== */
}

@media (max-width: 767px) {
  /* ===== NEIGHBORHOOD HERO + INTRO — START =====
     No room for a side column on a phone: the copy goes full width, and the
     rotated CTA is dropped (v1 hides it at this breakpoint too). */
  .page-nb .intro-type-1.intro-to-right .content-wrapper {
    max-width: 100%;
    padding: 150px 20px 40px;
  }

  .page-nb .location-content__cta {
    display: none;
  }
  /* ===== NEIGHBORHOOD HERO + INTRO — END ===== */

  /* ===== NEIGHBORHOOD MAP + PLACES — START =====
     v1 goes to one 80%-wide swipe card. The pill rail is already hidden and the
     mobile dropdown revealed by component-common.css:4049/4053 — not repeated
     here. The rail's arrows go with it. */
  .neighborhood.new-section .nbp-places-list .nb-places-ul li {
    width: 100%;
    padding: 0 10px;
    border-right: 0;
  }

  .neighborhood.new-section .nbp-nav-btn {
    display: none;
  }

  .neighborhood.new-section .nbp-places-scroller {
    width: 100%;
  }

  .neighborhood.new-section .nbp-places-nav {
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }

  .neighborhood.new-section .nbp-places-list {
    padding: 0 5px 15px;
  }

  .neighborhood.new-section .map-canvas {
    height: 45vh;
    min-height: 320px;
  }
  /* ===== NEIGHBORHOOD MAP + PLACES — END ===== */
}