/* ═══════════════════════════════════════════════════════════════════
   vw_use_cases_bg.css
   Immagini di sfondo decorative per ogni .sc-card-view
   Posizionate sul lato destro, centrate verticalmente.

   ISTRUZIONI: sostituire i placeholder con i percorsi reali delle
   immagini nella cartella public/image/use-cases/
═══════════════════════════════════════════════════════════════════ */

/* ── Layout base per le card con immagine ── */
.sc-card-view.active {
  padding-right: 360px;         /* spazio per l'immagine a destra    */
  min-height: 260px;            /* altezza minima per centrare l'img */
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 500px auto;
  /* multiply: sfondo bianco delle PNG unDraw diventa trasparente su dark bg */
  background-blend-mode: multiply;
}

/* ═══════════════════════════════
   SEGNALI  (#s1 – #s6)
═══════════════════════════════ */
#s1 { background-image: url('/image/signal-01.svg'); }
#s2 { background-image: url('/image/signal-02.svg'); }
#s3 { background-image: url('/image/signal-03.svg'); }
#s4 { background-image: url('/image/signal-04.svg'); }
#s5 { background-image: url('/image/signal-05.svg'); }
#s6 { background-image: url('/image/signal-06.svg'); }

/* ═══════════════════════════════
   QUANDO VIENE USATA  (#w1 – #w6)
═══════════════════════════════ */
#w1 { background-image: url('/image/when-01.svg'); }
#w2 { background-image: url('/image/when-02.svg'); }
#w3 { background-image: url('/image/when-03.svg'); }
#w4 { background-image: url('/image/when-04.svg'); }
#w5 { background-image: url('/image/when-05.svg'); }
#w6 { background-image: url('/image/when-06.svg'); }

/* ═══════════════════════════════
   SCENARI TIPICI  (#u1 – #u6)
═══════════════════════════════ */
#u1 { background-image: url('/image/scenario-01.svg'); }
#u2 { background-image: url('/image/scenario-02.svg'); }
#u3 { background-image: url('/image/scenario-03.svg'); }
#u4 { background-image: url('/image/scenario-04.svg'); }
#u5 { background-image: url('/image/scenario-05.svg'); }
#u6 { background-image: url('/image/scenario-06.svg'); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE ≤ 992px
   Opzione A (default): nasconde le immagini → layout più leggibile.
   Opzione B (commentata): sposta l'immagine sotto il contenuto.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

  .sc-card-view.active {
    padding-right: 0;
    min-height: 0;
    background-image: none;   /* Opzione A: nasconde l'immagine */
  }

  /* ── Opzione B: immagine sotto il contenuto ──────────────────────
  .sc-card-view.active {
    padding-right: 0;
    padding-bottom: 220px;
    min-height: 0;
    background-position: center bottom 10px;
    background-size: 200px auto;
  }
  #s1, #s2, #s3, #s4, #s5, #s6,
  #w1, #w2, #w3, #w4, #w5, #w6,
  #u1, #u2, #u3, #u4, #u5, #u6 {
    background-image: revert;
  }
  ────────────────────────────────────────────────────────────────── */
}