.section__displayHomeListing { position: relative; }
/* bg-color-beige/bg-color-yellow aren't global utility classes (same as media-gallery, image-copy,
   sticky-nav, richtext-content - each defines these locally); matching their colors here for consistency. */
.section__displayHomeListing.bg-color-beige { background: #b5ac9c; }
.section__displayHomeListing.bg-color-yellow { background: #ffd400; }
.displayHomeListing__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-7); flex-wrap: wrap; }
.displayHomeListing__headingLeft .button { margin-top: var(--space-2); }
.displayHomeListing__headingRight { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.displayHomeListing__headingCol p { margin: 0 0 4px; }
.displayHomeListing__headingCol p:first-child { margin-bottom: 8px; }

@media (max-width: 767px) {
  .displayHomeListing__heading { flex-direction: column; text-align: left; }
}

.displayHomeListing__viewport { overflow: visible; }
.displayHomeListing__track { display: flex; flex-direction: column; gap: var(--space-4); }

.displayHomeCard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "title facade floorplan" "stats facade floorplan" "desc facade floorplan" "tags facade floorplan" "cta facade floorplan";
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  background: var(--color-s-10);
}
.displayHomeCard__title { grid-area: title; text-transform: uppercase; margin: 0; }
.displayHomeCard__stats { grid-area: stats; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-black); }
.displayHomeCard__stat { display: flex; align-items: center; gap: 8px; font-family: Norms-Pro, sans-serif; font-weight: 600; font-size: 13px; }
.displayHomeCard__stat img { display: block; }
.displayHomeCard__desc { grid-area: desc; margin: 0; }
.displayHomeCard__desc p { margin: 0; }

.displayHomeCard__media { grid-area: facade; align-self: start; display: block; width: 100%; max-width: none; height: 260px; padding: 0; border: 0; cursor: zoom-in; background: var(--color-s-10); overflow: hidden; }
.displayHomeCard__media--floorplan { grid-area: floorplan; display: flex; align-items: center; justify-content: center; text-align: center; }
.displayHomeCard__media img { display: block; margin: 0 auto; width: 100%; height: 100%; object-fit: cover; }
.displayHomeCard__media--floorplan img { width: auto; max-width: 85%; height: auto; max-height: 100%; object-fit: contain; }
.displayHomeCard__noFloorplan { color: var(--color-grey); }
/* Spans the photo + floor plan columns. pointer-events: none so hovering/clicking still reaches the images underneath */
.displayHomeCard__video { grid-column: 2 / -1; grid-row: 1 / -1; align-self: start; z-index: 1; display: block; width: 100%; height: 380px; object-fit: cover; background: var(--color-s-10); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.displayHomeCard.is-video-playing .displayHomeCard__video { opacity: 1; }

.displayHomeCard__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.displayHomeCard__tag { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; background: rgba(13, 13, 13, .05); font-family: Norms-Pro, sans-serif; font-weight: 600; font-size: 14px; color: var(--color-black); text-decoration: none; white-space: nowrap; cursor: pointer; }
.displayHomeCard__tagIcon { flex: 0 0 auto; width: 14px; height: auto; }
.displayHomeCard__tag:hover { background: rgba(13, 13, 13, .1); }

.displayHomeCard__cta { grid-area: cta; }

.displayHomeListing__nav { display: none; }

@media screen and (min-width: 768px) {
  .displayHomeCard__media { height: 380px; }
}

/* Mobile: cards become a swipeable Embla carousel (one home per slide); layout stacks single-column */
@media (max-width: 767px) {
  .displayHomeListing__viewport { overflow: hidden; }
  .displayHomeListing__track { flex-direction: row; touch-action: pan-y pinch-zoom; }
  .displayHomeCard {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "stats" "facade" "floorplan" "tags" "cta";
    flex: 0 0 100%;
    min-width: 0;
    gap: var(--space-2);
  }
  .displayHomeCard__desc { display: none; }
  .displayHomeCard__video { display: none; }
  .displayHomeCard__media { height: auto; }
  .displayHomeCard__media--facade img { height: 244px; }
  .displayHomeCard__media--floorplan { min-height: 220px; }
  .displayHomeCard__tags { flex-wrap: nowrap; }
  .displayHomeCard__tag { flex: 1 1 0; justify-content: center; }
  .displayHomeCard__cta .button { width: 100%; max-width: none; justify-content: center; }

  .displayHomeListing__nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); }
  .displayHomeListing__dots { display: flex; gap: 6px; }
  .displayHomeListing__dots button { width: 8px; height: 8px; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; }
  .displayHomeListing__dots button.is-active { background: var(--color-black); }
  .displayHomeListing__arrows { display: flex; gap: var(--space-2); }
  .displayHomeListing__arrow { display: block; flex: 0 0 auto; width: 48px; height: 48px; max-width: none; padding: 0; border: 0; border-radius: 50%; background: transparent; line-height: 0; cursor: pointer; }
  .displayHomeListing__arrow svg { display: block; width: 48px; height: 48px; }
  .displayHomeListing__arrow:disabled { opacity: .3; pointer-events: none; background: transparent; }
}

/* Lightbox - moved to <body> by module.js. Structure/sizing mirrors media-gallery.module's
   proven Embla lightbox (stage > main > viewport > track > slides), so it's styled the same way. */
.displayHomeLightbox-isLocked { overflow: hidden; }
.displayHomeLightbox { --dh-backdrop: rgb(255 255 255 / 94%); --dh-gap: 40px; --dh-media-h: min(820px, calc(100vh - 220px)); --dh-max-w: min(78vw, 1400px); position: fixed; inset: 0; z-index: 10000; color: var(--color-black); }
@supports (height: 100dvh) { .displayHomeLightbox { --dh-media-h: min(820px, calc(100dvh - 220px)); } }
.displayHomeLightbox[hidden] { display: none; }
.displayHomeLightbox__backdrop { position: absolute; inset: 0; background: var(--dh-backdrop); }
.displayHomeLightbox__stage { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; box-sizing: border-box; }
.displayHomeLightbox__main { position: relative; }
.displayHomeLightbox__viewport { overflow: hidden; width: 100%; }
.displayHomeLightbox__track { display: flex; align-items: center; height: var(--dh-media-h); touch-action: pan-y pinch-zoom; }
.displayHomeLightbox__slide { --iw: 16; --ih: 9; flex: 0 0 auto; min-width: 0; padding: 0 calc(var(--dh-gap) / 2); opacity: .5; cursor: pointer; transition: opacity .3s ease; }
.displayHomeLightbox__slide.is-selected { opacity: 1; cursor: default; }
.displayHomeLightbox__slide[hidden] { display: none; }
.displayHomeLightbox__media {
  /* Explicit pixel height/width computed from the image's real aspect ratio (set as --iw/--ih on
     the slide by module.js) - percentage/auto heights don't resolve reliably through this many
     nested flex boxes, which is what left the image unsized and hugging the left edge. */
  --h: min(var(--dh-media-h), calc(var(--dh-max-w) * var(--ih) / var(--iw)));
  height: var(--h); width: calc(var(--h) * var(--iw) / var(--ih));
  display: flex; align-items: center; justify-content: center;
}
.displayHomeLightbox__img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.displayHomeLightbox__caption { max-width: 768px; margin: var(--space-3) auto 0; padding: 0 20px; text-align: center; }
.displayHomeLightbox__captionTitle { display: block; margin-bottom: var(--space-2); }
.displayHomeLightbox__captionCopy { display: block; }
.displayHomeLightbox__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.displayHomeLightbox__dots button { width: 8px; height: 8px; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; transition: background .2s ease; }
.displayHomeLightbox__dots button.is-active { background: var(--color-black); }
.displayHomeLightbox__close, .displayHomeLightbox__arrow { display: flex; align-items: center; justify-content: center; max-width: none; padding: 0; border: 0; color: var(--color-black); cursor: pointer; }
.displayHomeLightbox__close { position: absolute; top: 24px; right: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--color-white); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.displayHomeLightbox__arrow { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: var(--color-white); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); transform: translateY(-50%); transition: opacity .2s ease; }
.displayHomeLightbox__arrow--prev { left: 24px; }
.displayHomeLightbox__arrow--next { right: 24px; }
.displayHomeLightbox__arrow:disabled, .displayHomeLightbox__arrow[hidden] { display: none; }
.displayHomeLightbox__dots[hidden] { display: none; }
.displayHomeLightbox__close:focus-visible, .displayHomeLightbox__arrow:focus-visible, .displayHomeLightbox__dots button:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }

@media (max-width: 767px) {
  .displayHomeLightbox { --dh-max-w: 88vw; }
  .displayHomeLightbox__close { top: 16px; right: 16px; }
  .displayHomeLightbox__arrow--prev { left: 8px; }
  .displayHomeLightbox__arrow--next { right: 8px; }
}

/* Video / 3D Tour popup - moved to <body> by module.js */
.displayHomePopup-isLocked { overflow: hidden; }
.displayHomePopup { position: fixed; inset: 0; z-index: 10000; }
.displayHomePopup[hidden] { display: none; }
.displayHomePopup__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 85%); }
.displayHomePopup__frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(90vw, 1200px); aspect-ratio: 16 / 9; }
.displayHomePopup__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--color-black); }
.displayHomePopup__close { position: absolute; top: 24px; right: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; max-width: none; padding: 0; border: 0; border-radius: 50%; background: var(--color-white); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); color: var(--color-black); cursor: pointer; }
.displayHomePopup__close:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }

@media (max-width: 767px) {
  .displayHomePopup__frame { width: 92vw; }
  .displayHomePopup__close { top: 16px; right: 16px; width: 40px; height: 40px; }
}