/* Omni page hero/video: keep full-width while controlling height on small desktops */

/* Banner should size from content and not clip following sections */
body.page-template-template-omni #banner {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Keep hero large but not overly tall on laptop/small desktop */
body.page-template-template-omni #banner figure,
body.page-template-template-omni #banner .slide-content {
  height: auto !important;
  min-height: clamp(420px, 56.25vw, 760px) !important;
  max-height: none !important;
}

/* Small desktop tuning */
@media (max-width: 1366px) {
  body.page-template-template-omni #banner figure,
  body.page-template-template-omni #banner .slide-content {
    min-height: clamp(380px, 56.25vw, 620px) !important;
  }
}

/* Tablet/mobile tuning */
@media (max-width: 1279px) {
  body.page-template-template-omni #banner figure,
  body.page-template-template-omni #banner .slide-content {
    min-height: clamp(300px, 56.25vw, 520px) !important;
  }
}

/* Video should fill width and keep 16:9 height without overgrowing */
body.page-template-template-omni #banner #petro-yt-player,
body.page-template-template-omni #banner .petro-yt-player-slide,
body.page-template-template-omni #banner .plyr,
body.page-template-template-omni #banner .plyr__video-wrapper,
body.page-template-template-omni #banner .plyr__video-embed {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
}

body.page-template-template-omni #banner .plyr__video-embed {
  padding-bottom: 0 !important;
}

body.page-template-template-omni #banner #petro-yt-player iframe,
body.page-template-template-omni #banner .petro-yt-player-slide iframe,
body.page-template-template-omni #banner .plyr__video-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.articel-main-header-banner {
  margin-bottom: 23%;
}

/* Omni template video hero (custom iframe background) */
body.page-template-template-omni .omni-video-hero-wrap {
  position: relative;
  overflow: hidden;
}

body.page-template-template-omni .omni-video-hero-bg {
  z-index: 0;
}

body.page-template-template-omni .omni-video-hero-bg iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  pointer-events: none;
  border: 0;
}

body.page-template-template-omni .omni-video-hero-overlay {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

body.page-template-template-omni .omni-video-hero-wrap .slide-content {
  position: relative;
  z-index: 2;
}

/* Omni desktop: keep banner inner content centered */
@media (min-width: 992px) {
  body.page-template-template-omni #banner .slide-content {
    justify-content: center !important;
    align-items: flex-start;
    text-align: left;
  }

  body.page-template-template-omni #banner .aside-home-banner-template-omniblade-technolube {
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }

  body.page-template-template-omni #banner .articel-main-header-banner {
    margin-bottom: 12%;
  }
}

@media (min-width: 992px) and (max-width: 1366px) {
  body.page-template-template-omni #banner .articel-main-header-banner {
    margin-bottom: 18%;
  }
}

/* Prevent horizontal overflow on all devices for Omni page */
html,
body.page-template-template-omni {
  overflow-x: hidden;
}

body.page-template-template-omni #app,
body.page-template-template-omni #banner,
body.page-template-template-omni #omni--main,
body.page-template-template-omni #omni,
body.page-template-template-omni #golden-rules {
  max-width: 100vw;
}

/* Final Omni video settings (applied last to override previous rules) */
body.page-template-template-omni #banner .omni-video-hero-wrap {
  position: relative;
  overflow: hidden;
}

body.page-template-template-omni #banner .omni-video-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
}

body.page-template-template-omni #banner .omni-video-hero-bg iframe,
body.page-template-template-omni #banner #petro-yt-player iframe,
body.page-template-template-omni #banner .petro-yt-player-slide iframe,
body.page-template-template-omni #banner .plyr__video-embed iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  aspect-ratio: 16 / 9 !important;
  border: 0;
}

body.page-template-template-omni #banner .slide-content {
  position: relative;
  z-index: 2;
}

/* Mobile only: full-screen banner with visible header card */
@media (max-width: 767px) {
  body.page-template-template-omni #banner,
  body.page-template-template-omni #banner .omni-video-hero-wrap,
  body.page-template-template-omni #banner figure,
  body.page-template-template-omni #banner .slide-content {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  body.page-template-template-omni #banner .slide-content {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.page-template-template-omni #banner .articel-main-header-banner {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 16px !important;
  }
}

/* Omni hero banner: force full viewport width */
body.page-template-template-omni #banner,
body.page-template-template-omni #banner .carousel,
body.page-template-template-omni #banner .carousel-inner,
body.page-template-template-omni #banner .carousel-item,
body.page-template-template-omni #banner figure,
body.page-template-template-omni #banner .omni-video-hero-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 768px) {
  body.page-template-template-omni #banner .omni-video-hero-wrap,
  body.page-template-template-omni #banner figure,
  body.page-template-template-omni #banner .slide-content {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Omni hero video: force true edge-to-edge fill without left/right black bars */
body.page-template-template-omni #banner .omni-video-hero-bg iframe,
body.page-template-template-omni #banner #petro-yt-player iframe,
body.page-template-template-omni #banner .petro-yt-player-slide iframe,
body.page-template-template-omni #banner .plyr__video-embed iframe {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  object-fit: fill !important;
}

/* Final mobile override: force true full-height hero video on phones only */
@media (max-width: 767px) {
  body.page-template-template-omni #banner,
  body.page-template-template-omni #banner .omni-video-hero-wrap,
  body.page-template-template-omni #banner .omni-video-hero-bg,
  body.page-template-template-omni #banner figure,
  body.page-template-template-omni #banner .slide-content {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.page-template-template-omni #banner .omni-video-hero-bg iframe,
  body.page-template-template-omni #banner #petro-yt-player iframe,
  body.page-template-template-omni #banner .petro-yt-player-slide iframe,
  body.page-template-template-omni #banner .plyr__video-embed iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 177.78vh !important;
    height: 56.25vw !important;
    min-width: 100% !important;
    min-height: 100dvh !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
  }
}
@media (max-width: 767px) {
  /* #banner,
  #banner .carousel,
  #banner .carousel-inner,
  #banner .carousel-item,
  #banner figure,
  #banner .slide-content,
  #banner .omni-video-hero-wrap {
      height: 100vh !important;
      height: 100dvh !important;
      min-height: 100vh !important;
      min-height: 100dvh !important;
  } */
}

/* Mobile only: reduce Omni hero height */
@media (max-width: 767px) {
  body.page-template-template-omni #banner,
  body.page-template-template-omni #banner .omni-video-hero-wrap,
  body.page-template-template-omni #banner .omni-video-hero-bg,
  body.page-template-template-omni #banner figure,
  body.page-template-template-omni #banner .slide-content {
    height: 72vh !important;
    height: 72dvh !important;
    min-height: 520px !important;
    max-height: 640px !important;
  }

  body.page-template-template-omni #banner .omni-video-hero-bg iframe,
  body.page-template-template-omni #banner #petro-yt-player iframe,
  body.page-template-template-omni #banner .petro-yt-player-slide iframe,
  body.page-template-template-omni #banner .plyr__video-embed iframe {
    top: 50% !important;
    left: 50% !important;
    width: 130vh !important;
    width: 130dvh !important;
    height: 100% !important;
    min-height: 520px !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
  }
}