/**
 * vdu.css
 * Stili dedicati SOLO alla pagina VDU+
 * Isolato sotto .vdu
 * Include glow arancio morbido sui box (hover / focus / tap)
 */

/* =========================================================
   HERO VDU
   ========================================================= */

.vdu .product-hero{
  padding: 96px 0 64px;
}

.vdu .product-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items:center;
}

.vdu .product-hero-copy h1{
  margin: 0 0 14px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
}

.vdu .product-hero-media{
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  background: rgba(255,255,255,.02);
}

.vdu .product-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
}

/* =========================================================
   FEATURES GRID
   ========================================================= */

.vdu .features-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 24px;
}

/* Feature box */
.vdu .feature-box{
  position: relative;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 16px;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

/* Badge */
.vdu .feature-box .badge{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(240,138,34,.10);
  border: 1px solid rgba(240,138,34,.25);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 10px;
}

/* =========================================================
   GLOW ARANCIO
   ========================================================= */

.vdu .feature-box:hover,
.vdu .feature-box:focus-visible,
.vdu .feature-box.is-active{
  border-color: rgba(240,138,34,.55);
  box-shadow:
    0 0 0 1px rgba(240,138,34,.35),
    0 10px 30px rgba(240,138,34,.18);
  transform: translateY(-1px);
  outline: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px){
  .vdu .product-hero-grid{
    grid-template-columns: 1fr;
  }

  .vdu .features-grid{
    grid-template-columns: 1fr;
  }
}