/* ===========================================================
   ABM Video Player - Hero + Lazy + Icons (final v2)
   =========================================================== */

/* Grundläggande video-styling */
video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #000;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Grundstruktur */
.wp-block-video.video-hero,
.wp-block-video.video-lazy,
figure.video-hero,
figure.video-lazy {
  position: relative;
  line-height: 0;
  margin: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

/* -----------------------------------------------------------
   ICONS
   ----------------------------------------------------------- */

/* Bas för pseudo-element */
figure.video-hero::after,
figure.video-hero::before,
figure.video-lazy::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hero: loading spinner */
figure.video-hero::before {
  background: url("https://abm-film.se/wp-content/themes/abm/images/icon-loading-w.svg") center/180px no-repeat;
  animation: abm-spin 1.5s linear infinite;
  opacity: 0;
}

/* Visa loading innan spelning */
figure.video-has-loading::before {
  opacity: 0.7;
}

/* Hero + Lazy: play ikon */
figure.video-hero::after,
figure.video-lazy::after {
  background: url("https://abm-film.se/wp-content/themes/abm/images/icon-play-w.svg") center/180px no-repeat;
  opacity: 0;
}

/* Visa play-ikon när pausad (både hero och lazy) */
figure.video-hero.video-paused::after,
figure.video-lazy.video-paused::after {
  opacity: 1;
}

/* Lazy: göm play-ikon under uppspelning */
figure.video-lazy:not(.video-paused)::after {
  opacity: 0;
}

/* Klick-overlay (lazy) */
.video-lazy .video-click-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
  background: transparent;
}

/* -----------------------------------------------------------
   Responsive icon sizes
   ----------------------------------------------------------- */
@media (max-width: 1200px) {
  figure.video-hero::before,
  figure.video-hero::after,
  figure.video-lazy::after { background-size: 160px; }
}
@media (max-width: 1024px) {
  figure.video-hero::before,
  figure.video-hero::after,
  figure.video-lazy::after { background-size: 140px; }
}
@media (max-width: 767px) {
  figure.video-hero::before,
  figure.video-hero::after,
  figure.video-lazy::after { background-size: 120px; }
}
@media (max-width: 480px) {
  figure.video-hero::before,
  figure.video-hero::after,
  figure.video-lazy::after { background-size: 80px; }
}
@media (max-width: 374px) {
  figure.video-hero::before,
  figure.video-hero::after,
  figure.video-lazy::after { background-size: 60px; }
}

/* -----------------------------------------------------------
   Loading animation
   ----------------------------------------------------------- */
@keyframes abm-spin {
  from { transform: rotate(0deg) translateZ(0); }
  to { transform: rotate(360deg) translateZ(0); }
}