.afiwai-vb-wrap {
  width: 100%;
  display: flex;
}

/* Alignement */
.afiwai-vb-wrap.is-full   { justify-content: flex-start; }
.afiwai-vb-wrap.is-left   { justify-content: flex-start; }
.afiwai-vb-wrap.is-center { justify-content: center; }
.afiwai-vb-wrap.is-right  { justify-content: flex-end; }

.afiwai-vb-box {
  position: relative;
  width: 100%;
  background: #000;

  /* Desktop */
  height: var(--afiwai-vb-h, auto);

  /* Rognage propre */
  overflow: hidden;
}

/* Largeur max si pas full (compatible PHP via max-width) */
.afiwai-vb-wrap.is-left .afiwai-vb-box,
.afiwai-vb-wrap.is-center .afiwai-vb-box,
.afiwai-vb-wrap.is-right .afiwai-vb-box {
  max-width: var(--afiwai-vb-maxw, none);
}

.afiwai-vb-wrap.is-full .afiwai-vb-box {
  max-width: none;
}

/* Media */
.afiwai-vb-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.afiwai-vb-video,
.afiwai-vb-iframe-wrap,
.afiwai-vb-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Vidéo proportionnelle + rognable (cover par défaut), réglable via variables admin */
.afiwai-vb-video,
.afiwai-vb-fallback {
  width: 100%;
  height: 100%;
  object-fit: var(--afiwai-vb-fit, cover);
  object-position: var(--afiwai-vb-pos, 50% 50%);
}

.afiwai-vb-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.afiwai-vb-content {
  position: absolute;
  pointer-events: auto;
}

.afiwai-vb-fallback {
  position: absolute;
  inset: 0;
  display: none;
}

/* Tablette */
@media (max-width: 1024px) {
  .afiwai-vb-box {
    height: var(--afiwai-vb-h-t, var(--afiwai-vb-h, auto));
  }
  .afiwai-vb-video,
  .afiwai-vb-fallback {
    object-fit: var(--afiwai-vb-fit-t, var(--afiwai-vb-fit, cover));
    object-position: var(--afiwai-vb-pos-t, var(--afiwai-vb-pos, 50% 50%));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .afiwai-vb-box {
    height: var(--afiwai-vb-h-m, var(--afiwai-vb-h-t, var(--afiwai-vb-h, auto)));
  }
  .afiwai-vb-video,
  .afiwai-vb-fallback {
    object-fit: var(--afiwai-vb-fit-m, var(--afiwai-vb-fit-t, var(--afiwai-vb-fit, cover)));
    object-position: var(--afiwai-vb-pos-m, var(--afiwai-vb-pos-t, var(--afiwai-vb-pos, 50% 50%)));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .afiwai-vb-box[data-disable-reduced-motion="1"] .afiwai-vb-fallback {
    display: block;
  }
}