.elementor-900 .elementor-element.elementor-element-152fe75{--display:flex;}.elementor-900 .elementor-element.elementor-element-20a193d{width:100%;max-width:100%;}/* Start custom CSS *//* =========================================================
   SINGLE PROJECT — PREMIUM (match Single Property look)
   Targets:
   - body.single-project
   - section.sr-single.sr-single--project.surface
   - gallery: .sr-g-grid / .sr-g-item
   ========================================================= */

/* 0) Let full-bleed breakout work (Astra/Elementor parents often clip) */
body.single-project .site,
body.single-project .site-content,
body.single-project .content-area,
body.single-project .site-main,
body.single-project article,
body.single-project .entry-content,
body.single-project .elementor,
body.single-project .elementor-element,
body.single-project .e-con,
body.single-project .e-con-inner,
body.single-project .elementor-widget-wrap{
  overflow: visible !important;
  max-width: none !important;
}

/* 1) Force main wrappers full width on single project */
body.single-project .site-content,
body.single-project .site-content .ast-container,
body.single-project .site-main,
body.single-project .site-main > article,
body.single-project .entry-content,
body.single-project .elementor,
body.single-project .elementor-section-wrap{
  max-width: 100% !important;
  width: 100% !important;
}

/* Astra container padding off (project only) */
body.single-project .site-content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Elementor shortcode widget padding off (project only) */
body.single-project .elementor-shortcode{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) FULL BLEED the sr-single project section (like single property) */
body.single-project section.sr-single.sr-single--project.surface{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  /* premium surface shell (same vibe as property) */
  background: rgba(10,12,14,0.74);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);

  /* not boxed */
  border-radius: 0 !important;
  padding: 22px 0 !important;
  margin-top: 34px !important;
}

/* Header overlap protection */
html{ scroll-padding-top: 120px; }
body.single-project section.sr-single.sr-single--project.surface{
  padding-top: 42px !important;
}

/* 3) Inner grid becomes the “container” width (align with deck width) */
body.single-project .sr-single--project .sr-single__grid{
  width: calc(100vw - 40px) !important;   /* 20px each side */
  max-width: 1600px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  gap: 22px !important;
  align-items: start !important;
}

body.single-project .sr-single--project .sr-single__media,
body.single-project .sr-single--project .sr-single__panel{
  min-width: 0 !important;
}

/* 4) Right panel (same premium card) */
body.single-project .sr-single--project .sr-single__panel{
  padding: 18px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Title */
body.single-project .sr-single--project .sr-single__title{
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: clamp(24px, 2.1vw, 36px) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  word-break: break-word;
}

/* Status badge */
body.single-project .sr-single--project .sr-avail2{
  display: inline-flex !important;
  margin: 0 0 10px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(198,167,94,0.18) !important;
  border: 1px solid rgba(198,167,94,0.32) !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Meta chips */
body.single-project .sr-single--project .sr-single__meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 6px 0 12px !important;
}
body.single-project .sr-single--project .sr-chip{
  padding: 8px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Blocks */
body.single-project .sr-single--project .sr-single__block{
  margin-top: 18px !important;
}
body.single-project .sr-single--project .sr-single__blocktitle{
  margin: 14px 0 10px !important;
  color: rgba(198,167,94,0.95) !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
body.single-project .sr-single--project .sr-single__blocktext{
  color: rgba(255,255,255,0.76) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* 5) GALLERY — make sure it is GRID on desktop (fix vertical stacking) */
body.single-project .sr-single--project .sr-gallery{
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* CRITICAL: force grid back on (in case theme/elementor overrides) */
body.single-project .sr-single--project .sr-g-grid{
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  grid-auto-rows: 140px !important;
  gap: 10px !important;
  padding: 10px !important;
}

body.single-project .sr-single--project .sr-g-item{
  display: block !important;
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  transform: translateZ(0);
}

body.single-project .sr-single--project .sr-g-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease, filter .35s ease;
}

body.single-project .sr-single--project .sr-g-item:hover img{
  transform: scale(1.03);
  filter: saturate(1.08);
}

/* First image = hero span */
body.single-project .sr-single--project .sr-g-grid .sr-g-item:first-child{
  grid-row: 1 / span 2 !important;
}

@media (min-width: 1024px){
  body.single-project .sr-single--project .sr-g-grid{
    grid-auto-rows: 165px !important;
  }
  body.single-project .sr-single--project .sr-g-grid .sr-g-item:first-child{
    grid-row: 1 / span 3 !important;
  }
}

/* 6) GALLERY — Mobile slider */
@media (max-width: 820px){
  body.single-project .sr-single--project .sr-single__grid{
    grid-template-columns: 1fr !important;
  }

  body.single-project .sr-single--project .sr-g-grid{
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 82% !important;
    grid-template-columns: unset !important;
    grid-auto-rows: 260px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }

  body.single-project .sr-single--project .sr-g-grid::-webkit-scrollbar{ height: 8px; }
  body.single-project .sr-single--project .sr-g-grid::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
  }

  body.single-project .sr-single--project .sr-g-item{
    scroll-snap-align: start !important;
  }

  body.single-project .sr-single--project .sr-g-grid .sr-g-item:first-child{
    grid-row: auto !important;
  }
}

/* 7) Map: match premium click-to-activate feel */
body.single-project .sr-single--project .sr-single__block.location-block{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.08);
}

body.single-project .sr-single--project .sr-single__map{
  position: relative;
  margin-top: 12px !important;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

/* Dim iframe by default */
body.single-project .sr-single--project .sr-single__map iframe{
  filter: grayscale(100%) brightness(0.58) contrast(0.95) saturate(0.7);
  transition: filter .25s ease;
}

/* click-block overlay */
body.single-project .sr-single--project .sr-single__map .sr-map-overlay{
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.40));
  cursor: pointer;
  z-index: 2;
}

/* “View on map” button */
body.single-project .sr-single--project .sr-single__map .sr-map-activate{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(12,14,18,0.62);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

/* active state */
body.single-project .sr-single--project .sr-single__map.is-active iframe{
  filter: none;
}
body.single-project .sr-single--project .sr-single__map.is-active .sr-map-overlay,
body.single-project .sr-single--project .sr-single__map.is-active .sr-map-activate{
  display: none;
}

/* 8) Project Deck: match “Similar Properties” deck rounding */
.sr-featured-deck.sr-featured-deck--project{
  border-radius: 22px !important;
  overflow: hidden !important;
}
.sr-featured-deck.sr-featured-deck--project .sr-deck-arrow{
  border-radius: 999px !important;
}

/* 9) Small screen spacing */
@media (max-width: 980px){
  body.single-project section.sr-single.sr-single--project.surface{
    padding-top: 40px !important;
  }
  body.single-project .sr-single--project .sr-single__grid{
    width: calc(100vw - 24px) !important;
  }
}


/* =========================================================
   SINGLE PROJECT — FORCE DARK CANVAS (ASTRA SEPARATE CONTAINER)
   ========================================================= */

/* 0) Astra often uses global color vars for page background in separate-container mode */
body.single-project{
  --ast-global-color-4: #070A0F; /* Astra sometimes uses these for backgrounds */
  --ast-global-color-5: #070A0F;
  --ast-global-color-6: #070A0F;
}

/* 1) Put the actual page background on BOTH html + body */
html,
body.single-project{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, rgba(215,170,74,.10), transparent 55%),
    #070A0F !important;
}

/* 2) Kill Astra’s “white sheet” layers in separate-container mode */
body.single-project.ast-separate-container,
body.single-project.ast-separate-container #page,
body.single-project.ast-separate-container #content,
body.single-project.ast-separate-container .site-content,
body.single-project.ast-separate-container .ast-container,
body.single-project.ast-separate-container #primary,
body.single-project.ast-separate-container main#main,
body.single-project.ast-separate-container .site-main,
body.single-project.ast-separate-container article.ast-article-single{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* SINGLE PROJECT — remove Elementor top gap under header */
body.single-project .elementor-location-single > .elementor-element.e-con-full{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Single Project — remove the remaining top gap (Elementor template wrapper) */
body.single-project .elementor.elementor-location-single{
  padding-top: 0 !important;
}/* End custom CSS */