/* Contenitore modulo: senza margini, nessun bordo */
.dp-hero-banner{
  position:relative;
  margin:0; /* la sezione deve avere padding:0 */
}

/* Immagine: rettangolo, full bleed, no border radius */
.dp-hero-media{ margin:0; line-height:0 }
.dp-hero-img{
  width:100%;
  height:var(--h-d);
  object-fit:cover;
  object-position:80%;
  display:block;
  border-radius:0;
}

/* Box overlay desktop:
   centrato verticalmente; 3 posizioni orizzontali; offset Y regolabile */
.dp-hero-box{
  position:absolute;
  left: 30px;
    right: 10px;
    bottom: 15%;
  transform:translateY(-50%);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.dp-hero-box.pos-left  { left:var(--gx); right:auto; }
.dp-hero-box.pos-center{
  left:50%;
  transform:translate(-50%, -50%); /* centrato X e Y */
}
.dp-hero-box.pos-right { right:var(--gx); left:auto; }

.dp-hero-title{ margin:0 0 8px; font-weight:800; font-size:32px; line-height:1.1 }
.dp-hero-sub  { margin:0;        font-weight:600; font-size:20px }

/* Mobile: immagine visibile, box scivola sotto */
@media (max-width:767px){
  .dp-hero-banner{ position:relative; }
  .dp-hero-media{ position:relative; z-index:1; }

  .dp-hero-box{
    position:relative;
    z-index:2;
    margin:-10px 10px 0;         /* centrato orizzontalmente */
    box-shadow:0 6px 18px rgba(0,0,0,.16);
    transform:none;
    max-width:90%;              /* evita che tocchi i bordi */
    left:0; right:0;            /* reset allineamenti desktop */
  }
}

  .dp-hero-title{ font-size:32px }
  .dp-hero-sub  { font-size:20px }

  /* focus immagine mobile */
  .dp-hero-media.dp-m-center .dp-hero-img{ object-position:center }
  .dp-hero-media.dp-m-left   .dp-hero-img{ object-position:left center }
  .dp-hero-media.dp-m-right  .dp-hero-img{ object-position:right center }
}