/* Manava Widget — Handpicked Residential Projects mosaic base styles
   Mirrors the original design exactly; Elementor's control-generated
   CSS layers on top of this per widget instance. */

/* Global guard: nothing inside this widget ever shows an underline,
   no matter what the active theme's own link styles try to force. */
.mh-hp-section,
.mh-hp-section *,
.mh-hp-section *:hover,
.mh-hp-section *:focus,
.mh-hp-section *:active,
.mh-hp-section *:visited{
  text-decoration:none !important;
}

.mh-hp-section{
  --mh-bg-white:#ffffff;
  --mh-bg-cream:#f5f1e8;
  --mh-text-green:#1e3a2e;
  --mh-text-terracotta:#a8632f;
  --mh-btn-gold:#ba9959;
  --mh-btn-terracotta:#c1794a;

  background:var(--mh-bg-white);
  padding:80px 24px;
  font-family:'Segoe UI', Helvetica, Arial, sans-serif;
  box-sizing:border-box;
}
.mh-hp-section *{box-sizing:border-box;}

.mh-hp-inner{
  max-width:1200px;
  margin:0 auto;
}

.mh-hp-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--mh-text-terracotta);
  margin:0 0 16px;
  text-transform:uppercase;
}

.mh-hp-title{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:40px;
  line-height:1.2;
  color:var(--mh-text-green);
  margin:0 0 46px;
  font-weight:700;
  max-width:560px;
}

.mh-hp-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap:18px;
}

.mh-hp-tile{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none !important;
  isolation:isolate;
  box-shadow:0 8px 22px rgba(30,58,46,0.14);
}

.mh-hp-tile,
.mh-hp-tile:hover,
.mh-hp-tile:focus,
.mh-hp-tile:active,
.mh-hp-tile *{
  text-decoration:none !important;
}
.mh-hp-large{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.mh-hp-small:nth-of-type(2){
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.mh-hp-small:nth-of-type(3){
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.mh-hp-wide{
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.mh-hp-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transition:transform .55s ease;
}
.mh-hp-tile:hover img{
  transform:scale(1.08);
}

.mh-hp-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(30,58,46,0.05) 0%, rgba(30,58,46,0.32) 55%, rgba(30,58,46,0.88) 100%);
  transition:background .3s ease;
}
.mh-hp-tile:hover .mh-hp-overlay{
  background:linear-gradient(180deg, rgba(30,58,46,0.1) 0%, rgba(193,121,74,0.4) 55%, rgba(30,58,46,0.9) 100%);
}

.mh-hp-tag{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  color:#ba9959;
  font-family:Georgia, serif;
}

.mh-hp-content{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:22px;
}

.mh-hp-content h3{
  font-size:19px;
  font-weight:700;
  color:#ffffff;
  margin:0 0 6px;
}

.mh-hp-large .mh-hp-content h3{
  font-size:23px;
}

.mh-hp-content p{
  font-size:13px;
  color:rgba(255,255,255,0.82);
  margin:0 0 12px;
  line-height:1.5;
  max-width:280px;
}

.mh-hp-link{
  font-size:13px;
  font-weight:700;
  color:var(--mh-btn-gold);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.mh-hp-link i{
  font-style:normal;
  transition:transform .22s ease;
}
.mh-hp-tile:hover .mh-hp-link i{
  transform:translateX(4px);
}

/* ---------- TABLET ---------- */
@media (max-width: 900px){
  .mh-hp-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
  }
  .mh-hp-large{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .mh-hp-small:nth-of-type(2){
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .mh-hp-small:nth-of-type(3){
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .mh-hp-wide{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 560px){
  .mh-hp-section{padding:56px 16px;}
  .mh-hp-title{font-size:28px;margin-bottom:32px;}
  .mh-hp-grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap:14px;
  }
  .mh-hp-large,
  .mh-hp-small:nth-of-type(2),
  .mh-hp-small:nth-of-type(3),
  .mh-hp-wide{
    grid-column: 1 / 2;
    grid-row: auto;
    height:230px;
  }
}