/* HarishProperties.ca — Release 7 / Sprint 6
   Hero clarity, portrait positioning and compact popular-search panel. */

/* Sharper, wider hero house image with the architecture kept visible. */
.hero{
  background-image:
    linear-gradient(90deg,rgba(4,15,48,.93) 0%,rgba(6,19,61,.80) 38%,rgba(7,19,54,.38) 68%,rgba(5,12,32,.20) 100%),
    url('/assets/images/hero-toronto-night.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.hero::before{
  filter:none!important;
  background:linear-gradient(90deg,rgba(4,14,43,.28),transparent 55%)!important;
}
.hero-grid{position:relative;overflow:visible}
.hero-copy{position:relative;z-index:8}

/* Raise Harish and reduce the amount of house covered by the portrait. */
.hero-person{
  width:min(535px,37vw)!important;
  right:-1.25%!important;
  bottom:34px!important;
  margin-right:0!important;
  overflow:visible!important;
  z-index:6!important;
}
.hero-person img{
  width:100%!important;
  max-height:690px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.34))!important;
}

/* Keep search suggestions inside the hero and easy to scan. */
.hero-search-dock{position:relative;z-index:30}
.hero-search-main{position:relative}
.hero-search-main .hp-search-suggestions{
  left:0;
  right:0;
  top:calc(100% + 12px);
  max-height:min(360px,42vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
  border-radius:16px;
  padding:8px;
  background:rgba(5,13,38,.98);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.hero-search-main .hp-search-suggestions::-webkit-scrollbar{width:8px}
.hero-search-main .hp-search-suggestions::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:20px}
.hero-search-main .hp-search-suggestions.is-popular{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.hero-search-main .hp-search-suggestions.is-popular .hp-search-heading{
  grid-column:1/-1;
  padding:7px 10px 4px;
}
.hero-search-main .hp-search-suggestions.is-popular .hp-search-suggestion{
  min-height:62px;
  padding:9px 10px;
  grid-template-columns:32px 1fr;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
}
.hero-search-main .hp-search-suggestions.is-popular .hp-search-suggestion em{display:none}
.hero-search-main .hp-search-suggestions.is-popular .hp-search-suggestion:hover{background:rgba(249,94,40,.17)}
.hero-search-main .hp-search-suggestion strong{font-size:13px}
.hero-search-main .hp-search-suggestion small{font-size:10px}

@media (max-width:1180px){
  .hero{background-position:58% center!important}
  .hero-person{width:min(480px,40vw)!important;right:-3%!important;bottom:28px!important}
}
@media (max-width:880px){
  .hero{background-position:65% center!important}
  .hero-person{width:52%!important;right:-8%!important;bottom:18px!important;opacity:.58!important}
  .hero-search-main .hp-search-suggestions.is-popular{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hero{background-position:70% center!important}
  .hero-person{width:78%!important;right:-27%!important;bottom:8px!important;opacity:.36!important}
  .hero-search-main .hp-search-suggestions{max-height:330px;top:calc(100% + 8px)}
}