/* ==========================================================
   M3 TECHNOLOGY V7 — HERO FULL-BLEED
   Correção estrutural: o hero deixa de ser uma imagem em uma
   "caixa" à direita e passa a ocupar todo o fundo da seção.
   ========================================================== */

@media(min-width:761px){

  /* HERO inteiro passa a usar a arte 4K como fundo */
  .project-hero{
    position:relative !important;
    min-height:510px !important;
    overflow:hidden !important;

    background:
      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%
      ),
      url('../images/hero-m3-v64-4k.webp') center center / cover no-repeat !important;
  }

  /* remove efeitos antigos que dividiam o hero em duas caixas */
  .project-hero::before,
  .project-hero::after{
    display:none !important;
  }

  /* o grid agora serve apenas para posicionar o texto;
     a imagem já está no fundo de toda a seção */
  .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;
  }

  /* esconde somente no desktop a antiga coluna de imagem.
     Isso elimina definitivamente o retângulo/box visto nas últimas versões. */
  .project-hero-art{
    display:none !important;
  }

  .project-hero-copy h1{
    max-width:590px !important;
  }

  .project-hero-copy p{
    max-width:530px !important;
  }
}

/* Monitores grandes: mantém o produto bem preenchido,
   sem empurrá-lo excessivamente para a direita */
@media(min-width:1450px){
  .project-hero{
    background-position:52% center !important;
  }
}

/* Tablet horizontal */
@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;
  }
}

/* Mobile continua usando a composição própria que já vinha funcionando */
@media(max-width:760px){
  .project-hero-art{
    display:block !important;
  }
}