/* ==========================================================================
   MODULE: Video Block

   Full-column-width video embed with custom play/pause button.
   Same layout rules as the image block.

   Behaviour:
   - Shows thumbnail image with centred play button overlay
   - On click: injects YouTube iframe with autoplay, no controls, no UI
   - Custom play/pause button is the ONLY control
   - No lightbox — plays inline in the page

   YouTube embed params used:
   - autoplay=1        starts playing immediately when injected
   - controls=0        hides all YouTube native controls
   - modestbranding=1  minimal YouTube branding
   - rel=0             no related videos at end
   - iv_load_policy=3  no annotations
   - disablekb=1       disables keyboard shortcuts
   - enablejsapi=1     allows play/pause via postMessage API

   WP DEVELOPER NOTES:
   ACF fields needed:
   - video_thumbnail  (Image)  — poster image shown before play
   - youtube_id       (Text)   — YouTube video ID only, e.g. "YAlWGwgzWW8"
                                 (not the full URL — just the ID after ?v=)

   PHP TEMPLATE SNIPPET:
   <?php
     $thumb      = get_sub_field('video_thumbnail');
     $youtube_id = get_sub_field('youtube_id');
   ?>
   <div class="skd-module-video">
     <div class="skd-container">
       <div class="skd-video" data-video-id="<?php echo esc_attr($youtube_id); ?>">
         <div class="skd-video__poster">
           <img class="skd-video__thumb"
                src="<?php echo esc_url($thumb['url']); ?>"
                alt="<?php echo esc_attr($thumb['alt']); ?>">
           <button class="skd-video__btn skd-video__btn--play" aria-label="Play video">
             <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <polygon points="6,4 20,12 6,20" fill="#0055FF"/>
             </svg>
           </button>
         </div>
       </div>
     </div>
   </div>

   JavaScript: Include video-block.js or add the inline script below once per
   theme. See preview.html for the full working JS implementation.
   ========================================================================== */

.skd-blog-new .skd-module-video {
  padding-top: 60px;
  padding-bottom: 0;
}

/* — Splitter variant: used when a video sits between a heading and body copy
   (i.e. the text block before has just an H2, the text block after has
   padding-top: 0 so no gap comes from above or below).
   Add class skd-module-video--splitter to the outer wrapper div.
   Pattern:
     <div class="skd-block skd-module-text">          ← H2 only
     <div class="skd-block skd-module-video skd-module-video--splitter">  ← this class
     <div class="skd-block skd-module-text" style="padding-top:0">        ← body copy
   ————————————————————————————————————————————————————————————————————— */
.skd-blog-new .skd-module-video.skd-module-video--splitter {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* — Outer wrapper — maintains aspect ratio 16:9 — */
.skd-blog-new .skd-video {
  position: relative;
  width: 100%;
  border-radius: var(--skd-radius-card);
  overflow: hidden;
  background: #000;
}

/* — Aspect ratio box — */
.skd-blog-new .skd-video::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

/* — Poster (thumbnail + button) — */
.skd-blog-new .skd-video__poster {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* — Thumbnail image — */
.skd-blog-new .skd-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* parent handles radius via overflow: hidden */
}

/* — YT API player div wrapper — injected by JS — */
.skd-blog-new .skd-video > div {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* — YouTube iframe — oversized to hide hidden YT control bar (black line) — */
.skd-blog-new .skd-video iframe {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100% !important;
  height: calc(100% + 120px) !important; /* clips YT bar top & bottom */
  border: none;
  border-radius: 0;
  pointer-events: none; /* overlay handles clicks */
}

/* — Play / Pause button — white circle, centred — */
.skd-blog-new .skd-video__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: opacity var(--skd-transition);
  z-index: 2;
}

.skd-blog-new .skd-video__btn:hover {
  transform: translate(-50%, -50%);
  opacity: 0.75;
}

/* — Play icon SVG — offset slightly right to visually centre the triangle — */
.skd-blog-new .skd-video__btn--play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

/* — Pause icon — two vertical bars — */
.skd-blog-new .skd-video__btn--pause svg {
  width: 20px;
  height: 20px;
}

/* — Overlay button shown over active iframe — */
.skd-blog-new .skd-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Hide overlay button until hovered so video is visible — */
.skd-blog-new .skd-video__overlay .skd-video__btn {
  opacity: 0;
  transition: opacity 0.25s ease, transform var(--skd-transition), box-shadow var(--skd-transition);
}

.skd-blog-new .skd-video__overlay:hover .skd-video__btn,
.skd-blog-new .skd-video--paused .skd-video__overlay .skd-video__btn {
  opacity: 1;
}

/* — Mute / unmute button — bottom right corner — */
.skd-blog-new .skd-video__mute {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: opacity var(--skd-transition);
  z-index: 3;
  flex-shrink: 0;
}

.skd-blog-new .skd-video__mute:hover {
  opacity: 0.75;
}

.skd-blog-new .skd-video__mute svg {
  width: 16px;
  height: 16px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .skd-blog-new .skd-module-video {
    padding-top: 40px;
  }
}

.skd-blog-new .video__play-button.blue-play-btn {
	background-color:#ffffff;
	width: 72px;
	height: 72px;
}
.skd-blog-new .new-media-content {
	padding-top:16px;
	padding-bottom:16px;
}
.skd-blog-new .new-media-content .responsive-image-container {
	border-radius:10px;
}