/* ============================================================
   VIDEO MODULE — DDO (Purple comp spec)
   ============================================================ */

.acf-video-module { width: 100%; }

/* ---------- Split wrapper ---------- */
.acf-video-module .vm-inner{
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40% 60%;   /* match comp */
  align-items: center;
  gap: 0;                            /* no gap between color + video */
  padding:0; /* inner breathing room for copy */
  /* no rounding here for the purple layout */
}

/* Flip */
.acf-video-module.vm--split.is-flipped .vm-col--copy{ order:2; }
.acf-video-module.vm--split.is-flipped .vm-col--media{ order:1; }

/* ---------- Copy column ---------- */
.vm-col--copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-right: clamp(20px, 3vw, 48px);
}
.vm-content{
  max-width: 34ch;                   /* tight measure like comp */
}
.vm-content p {
  margin-bottom:0;
}

/* Actions (use calypso button from your TI block) */
.ddo-ti__actions{ margin-top: 1.55rem; }
.ddo-ti__actions .button.button--calypso{ display:inline-block; }

/* ---------- Media column ---------- */
.vm-col--media{ display:block; min-width:0;}
.vm-col--copy { width: 100%; max-width: 440px; padding: 2rem; margin-left:auto ;}
/* video sits hard against the right, full height of its column */
.vm-media-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:#000;
  overflow: hidden;
  min-height: 0;                 /* ensures presence at load */
  /* no border radius in split so it butts clean to edges like comp */
}

/* iframe fills */
.vm-media-wrap iframe,
.vm-media-wrap .wp-embedded-content{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  display:block; border:0;
}

/* --- Big white play triangle overlay (pure CSS) --- */
/*.vm-media-wrap::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-40%, -50%);
  width:0; height:0; pointer-events:none;
  border-left: 72px solid #fff;
  border-top: 44px solid transparent;
  border-bottom: 44px solid transparent;
  opacity: .95;
}
.vm-hide-play .vm-media-wrap::after{ display:none; }*/

/* ---------- Fullscreen variant ---------- */
.acf-video-module.vm--fullscreen .vm-media-wrap{ border-radius: 0; }
.acf-video-module.vm--fullscreen .vm-inner{ padding: 0; }
/* Flip: put VIDEO in the wide column (left) and COPY in the narrow (right) */
.acf-video-module.vm--split.is-flipped .vm-inner{
  grid-template-columns: 60% 40%;               /* swap 40/60 -> 60/40 */
}

/* keep media first, copy second */
.acf-video-module.vm--split.is-flipped .vm-col--media{ order: 1; }
.acf-video-module.vm--split.is-flipped .vm-col--copy {
  order: 2;
  padding: 0 2rem;
}
.acf-video-module.vm--split.is-flipped .vm-col--copy {
	margin-left:0;
}
/* mobile: reset to single column + default padding */
@media (max-width: 980px){
  .acf-video-module.vm--split.is-flipped .vm-inner{
    grid-template-columns: 1fr;
  }
  .acf-video-module.vm--split.is-flipped .vm-col--media,
  .acf-video-module.vm--split.is-flipped .vm-col--copy{
    order: initial;
  }
  .acf-video-module.vm--split.is-flipped .vm-col--copy{
    padding-left: 0;

  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .acf-video-module .vm-inner {
     display: block;             /* turn off grid to avoid width push */
     padding: 2rem 2rem;
   }
   .acf-video-module .vm-col--copy,
 .acf-video-module .vm-col--media{
   min-width: 0;
 }
  .vm-col--copy{ padding-right: 0; }
  .vm-content{ max-width: 42ch; }
  .vm-media-wrap::after{
    border-left: 52px solid #fff;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
  }
  /* reset flip ordering on mobile */
 .acf-video-module.vm--split.is-flipped .vm-col--media,
 .acf-video-module.vm--split.is-flipped .vm-col--copy{
   order: initial;
   padding: 0rem !important;
 }

 /* spacing between copy and video */
 .vm-col--copy{ padding-right: 0; padding-left: 0; padding-top:2rem; padding-bottom: 0rem;}
 .vm-col--media{ margin-top: clamp(16px, 4vw, 24px); }

 /* ensure iframe box can’t overflow */
 .vm-media-wrap{ width: 100%; aspect-ratio: 16/9; }
 .vm-media-wrap iframe{ width: 100% !important; height: 100% !important; }
}