/* ==========================================================
   M3 TECHNOLOGY V7.1 — HERO FULL-BLEED CORRIGIDO
   Corrige apenas o carregamento do hero e preserva o layout V7.
   ========================================================== */

@media(min-width:761px){
  .project-hero{
    position:relative !important;
    min-height:510px !important;
    overflow:hidden !important;

    /* usa a imagem definida diretamente no HTML via custom property,
       evitando dependência de caminhos relativos no CSS */
    background-image:
      linear-gradient(
        90deg,
        rgba(2,12,27,.98) 0%,
        rgba(2,12,27,.95) 22%,
        rgba(2,12,27,.74) 36%,
        rgba(2,12,27,.28) 50%,
        rgba(2,12,27,0) 66%
      ),
      var(--m3-hero-image) !important;

    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-color:#04142a !important;
  }

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

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

  .project-hero-copy{
    width:44% !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;
  }
}

@media(min-width:1450px){
  .project-hero{
    background-position:52% center !important;
  }
}

@media(min-width:761px) and (max-width:1050px){
  .project-hero{
    background-position:58% center !important;
  }
  .project-hero-copy{
    width:48% !important;
    padding-right:15px !important;
  }
}

@media(max-width:760px){
  .project-hero-art{
    display:block !important;
  }
}