/* ==========================================================
   M3 TECHNOLOGY — RESTAURAÇÃO DE LAYOUT V1
   Corrige somente a quebra causada pela ausência/inconsistência
   do CSS de camada do hero após a integração de marketplaces.
   ========================================================== */

.project-hero-layered{
  position:relative!important;
  min-height:510px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 72% 42%,rgba(9,102,218,.26),transparent 34%),
    linear-gradient(108deg,#020b17 0%,#06182f 58%,#0a2d58 100%)!important;
}

.project-hero-layered::before,
.project-hero-layered::after{
  display:none!important;
}

.hero-visual-layer{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:58%!important;
  height:auto!important;
  z-index:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
  display:block!important;
}

.hero-visual-layer::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:18%!important;
  z-index:2!important;
  background:linear-gradient(
    90deg,
    #06182f 0%,
    rgba(6,24,47,.78) 30%,
    rgba(6,24,47,.28) 67%,
    rgba(6,24,47,0) 100%
  )!important;
}

.hero-visual-layer img{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:118%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  display:block!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  object-position:center center!important;
  image-rendering:auto!important;
  filter:saturate(1.045) contrast(1.02) brightness(1.015)!important;
}

.project-hero-grid{
  position:relative!important;
  z-index:3!important;
  min-height:510px!important;
  display:block!important;
}

.project-hero-copy{
  width:43%!important;
  max-width:610px!important;
  min-height:510px!important;
  padding:58px 0 52px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  position:relative!important;
  z-index:4!important;
}

.project-hero-art{
  display:none!important;
}

/* Keep the marketplace section completely independent from the hero. */
.marketplaces-home{
  position:relative!important;
  z-index:1!important;
}

/* Notebook */
@media(min-width:1051px) and (max-width:1350px){
  .hero-visual-layer{width:60%!important}
  .hero-visual-layer img{width:114%!important;left:51%!important}
}

/* Tablet */
@media(min-width:761px) and (max-width:1050px){
  .hero-visual-layer{width:57%!important}
  .hero-visual-layer img{width:122%!important;left:55%!important}
  .project-hero-copy{width:46%!important}
}

/* Mobile: this simply prevents the catastrophic oversized image.
   We are NOT doing the mobile redesign here. */
@media(max-width:760px){
  .project-hero-layered{
    min-height:auto!important;
  }

  .hero-visual-layer{
    position:relative!important;
    width:100%!important;
    height:280px!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    overflow:hidden!important;
  }

  .hero-visual-layer::before{
    inset:0!important;
    width:100%!important;
    height:32%!important;
    background:linear-gradient(
      180deg,
      #06182f 0%,
      rgba(6,24,47,.74) 30%,
      rgba(6,24,47,0) 100%
    )!important;
  }

  .hero-visual-layer img{
    width:130%!important;
    left:64%!important;
    top:50%!important;
  }

  .project-hero-grid{
    min-height:auto!important;
  }

  .project-hero-copy{
    width:100%!important;
    min-height:auto!important;
  }

  .project-hero-art{
    display:none!important;
  }
}

@media(max-width:430px){
  .hero-visual-layer{
    height:245px!important;
  }
  .hero-visual-layer img{
    width:138%!important;
    left:68%!important;
  }
}