/* ==========================================================================
   Neighborhoods

   The one section kept from the existing site rather than rebuilt from the
   Carroll Group. Its markup is Divi plus Supreme Modules card modules
   (.dsm_card_*), left untouched so the 12 tiles keep working.

   This file is an overlay, not a rebuild. It does three things and nothing
   else: moves the section onto the brand tokens, left-aligns the heading to
   match every other section, and gives the tiles the same reveal the rebuilt
   sections use.

   Why an overlay: the tile markup is generated by a plugin whose classes we do
   not control. Restyling in place keeps the plugin's own layout and hover
   behaviour intact, and keeps _baseline diffs readable.
   ========================================================================== */

/* Divi bakes its colours inline with !important, so these have to match that
   weight to land. Everything else in the file is ordinary specificity. */
#noe.et_pb_section {
  background-color: var(--yp-sand) !important;
  padding-top: clamp(64px, 7vw, 110px);
  padding-bottom: clamp(64px, 7vw, 110px);
}

#noe .et_pb_text,
#noe .et_pb_text_inner,
#noe .dsm_card_title { color: var(--yp-ink) !important; }

/* ---- heading -------------------------------------------------------------
   Was centred and capitalised. Left aligned and set in the display caps every
   other section header uses, so the page reads as one system. The negative
   right margin offsets the trailing letter-space, which otherwise makes a
   tracked line sit a fraction right of its own left edge on the next line. */

#noe .et_pb_text_inner h2 {
  margin: 0 calc(-1 * var(--yp-track-display, 0.14em)) 0.6em 0;
  text-align: left !important;
  text-transform: uppercase !important;
  font-family: var(--yp-serif) !important;
  font-weight: var(--yp-w-section, 540) !important;
  letter-spacing: var(--yp-track-display, 0.14em);
  line-height: 1.16;
  font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.75rem);
  color: var(--yp-ink) !important;
}

#noe .et_pb_row { text-align: left; }

/* Space between the tiles. Divi floats the columns edge to edge, which made
   the twelve photographs read as a single sheet. Padding on the column rather
   than margin, because the column widths are Divi's own percentages and
   margins would push the fourth tile onto its own row. */
#noe .four-box-set .et_pb_column,
#noe .et_pb_row .et_pb_column[class*="et_pb_column_1_4"] {
  padding: 0 7px 14px !important;
  box-sizing: border-box;
}

/* ---- tiles ---------------------------------------------------------------
   The card module ships its own image and title layout; only the surround is
   ours. Sand on Shell keeps the tile readable as a distinct object without a
   border, which would fight the photography. */

#noe .dsm_card {
  background-color: transparent;
  overflow: hidden;
}

/* The name sits ON the photograph, so it is white. In ink it was unreadable
   on the brighter tiles: Bay Harbor Islands, Downtown, Edgewater and Sunny
   Isles all had dark type over pale sky and water.

   White alone does not fix it either, because half these photographs have
   bright skies exactly where the name sits. The scrim below is what makes the
   white reliable, and it is a gradient rather than a flat wash so the middle
   of the picture stays untouched. */
#noe .dsm_card_title {
  position: relative;
  z-index: 2;
  margin: 0 !important;
  padding: 0 18px 16px !important;
  font-family: var(--yp-serif) !important;
  font-size: clamp(0.9375rem, 0.35vw + 0.84rem, 1.125rem) !important;
  font-weight: var(--yp-w-sub, 500) !important;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--yp-track-sub, 0.09em);
  text-indent: var(--yp-track-sub, 0.09em);
  color: var(--yp-white) !important;
  text-shadow: 0 1px 12px rgb(var(--yp-ink-rgb) / 0.45);
}

/* The scrim. Sits under the name and above the picture. */
#noe .dsm_card_image_wrapper::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background: linear-gradient(to top,
              rgb(var(--yp-ink-rgb) / 0.62) 0%,
              rgb(var(--yp-ink-rgb) / 0.28) 45%,
              rgb(var(--yp-ink-rgb) / 0) 100%);
  pointer-events: none;
}

/* ---- tiles ---------------------------------------------------------------
   The inherited layout stays: twelve square tiles, four
   across, the name set below the picture. What changes is execution.

   The plugin ships object-fit:fill, which stretches every photograph to the
   square rather than cropping to it. On a 424px tile a 16:9 source is squashed
   by nearly half its height, and it is the reason the row read as slightly
   cheap. cover crops instead, so the pictures keep their proportions. */

#noe .dsm_card_image_wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

#noe .dsm_card_img,
#noe .dsm_card_image_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#noe .dsm_card:hover .dsm_card_img,
#noe .dsm_card:hover .dsm_card_image_wrapper img { transform: scale(1.05); }

/* A hairline that only appears on hover. It reads as the tile lifting rather
   than as a border switching on, which a full-time outline would. */
#noe .dsm_card_image_wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--yp-ink-rgb) / 0);
  transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
#noe .dsm_card:hover .dsm_card_image_wrapper::after {
  box-shadow: inset 0 0 0 1px rgb(var(--yp-ink-rgb) / 0.35);
}

/* ---- reveal --------------------------------------------------------------
   Same contract as every rebuilt section: the default is visible, .yp-anim
   (added by sections.js only when JS runs) applies the resting state, and
   .yp-in plays it. The stagger is per-column so the row builds left to right,
   matching the 0.1s steps the Carroll sections use. */

#noe .et_pb_column { transition: opacity 0.3s ease,
                                 transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

#noe.yp-anim .et_pb_column { opacity: 0; transform: translateY(20%); }
#noe.yp-anim.yp-in .et_pb_column { opacity: 1; transform: translateY(0); }

#noe.yp-anim .et_pb_column:nth-child(1) { transition-delay: 0.30s; }
#noe.yp-anim .et_pb_column:nth-child(2) { transition-delay: 0.40s; }
#noe.yp-anim .et_pb_column:nth-child(3) { transition-delay: 0.50s; }
#noe.yp-anim .et_pb_column:nth-child(4) { transition-delay: 0.60s; }

@media (max-width: 640px) {
  #noe.et_pb_section { padding-top: 52px; padding-bottom: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  #noe .et_pb_column,
  #noe .dsm_card_img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}