/* ============================================================
   VIDEO LAYER
============================================================ */

/* Base video behavior: no clicks on iframe/video directly */
.p3-hero__video-bg iframe,
.p3-hero__video-bg video {
  pointer-events: none !important; /* click overlay captures interactions */
  z-index: 0;
}

/* Kill iframe mouse events even if HubSpot injects wrappers */
.p3-hero-banner__bg 
  .hs-video-widget 
  .hs-video-container 
  .hs-video-wrapper iframe {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 🔧 NEW: flatten HubSpot’s aspect-ratio wrappers on ALL sizes
   so the video can follow the hero’s height instead of 16:9 */
.p3-hero__video-bg .hs-video-container,
.p3-hero__video-bg .hs-video-wrapper {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;      /* removes padding-bottom:56.25% */
}

/* Background and video sit on same base layer */
.p3-hero-banner__bg,
.p3-hero__video-bg {
  inset: 0;
  z-index: 0 !important;
}


/* ============================================================
   HERO LAYOUT & BACKGROUND
   ------------------------------------------------------------
   .p3-hero-banner__wrapper : outer hero container
   .p3-hero-banner__inner   : flex container for content
   .p3-hero-banner__bg      : absolute background layer (image/video)
============================================================ */

.p3-hero-banner__wrapper {
  width: 100%;
  position: relative;
  overflow: visible !important; /* allow content to overflow if needed */
}

.p3-hero-banner__inner {
  position: relative;          /* creates stacking context for BG + content */
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 600px;           /* base hero height */
}

/* Background container (image or video) fills entire hero */
.p3-hero-banner__bg {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
}

/* Solid color background should fill the entire hero background layer */
.p3-hero-banner__bg__color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; /* required for true background fill */
  z-index: 0;
}

/* Background image variant */
.p3-hero-banner__bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* Gradient / pseudo-element overlay should never block clicks */
.p3-hero-banner__bg::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ============================================================
   VIDEO LAYER
============================================================ */

/* Base video behavior: no clicks on iframe/video directly */
.p3-hero__video-bg iframe,
.p3-hero__video-bg video {
  pointer-events: none !important; /* click overlay captures interactions */
  z-index: 0;
}

/* Kill iframe mouse events even if HubSpot injects wrappers */
.p3-hero-banner__bg 
  .hs-video-widget 
  .hs-video-container 
  .hs-video-wrapper iframe {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Background and video sit on same base layer */
.p3-hero-banner__bg,
.p3-hero__video-bg {
  inset: 0;
  z-index: 0 !important;
}

/* ============================================================
   CLICK OVERLAY (PLAY/PAUSE AREA)
============================================================ */

.p3-hero__video-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto; /* overlay is clickable */
  z-index: 1 !important; /* above video, below content */
}

/* ============================================================
   HERO CONTENT (TEXT & BUTTONS)
============================================================ */

.p3-hero-banner__content {
  position: relative;
  top: 55px;                 /* desktop offset */
  width: 100%;
  margin: 0 auto;
  color: #fff;
  padding-top: 20px;
  padding-right: 100px;
  padding-bottom: 20px;
  padding-left: var(--spacing);
  z-index: 2 !important;
}

.p3-hero-banner__content-block {
  background: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  max-width: 50%;
  margin-bottom: 2rem;
}

/* Typography */
.p3-hero-banner__overtitle {
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 145%;
}

.p3-hero-banner__title {
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 3.2rem;
}

.p3-hero-banner__subtitle {
  margin: 0;
  font-size: 1.2rem;
  line-height: 145%;
}

/* Buttons */
.p3-hero-banner__buttons {
  display: flex;
  gap: 25px;
  justify-content: flex-start;
  align-items: center;
}

/* CTAs always above everything */
.button_max--wrapper-all {
  z-index: 4 !important;
}

/* ============================================================
   HUBSPOT DnD LAYOUT FIXES
============================================================ */

.dnd-section > .row-fluid {
  max-width: none;
}

.dnd-section .dnd-column {
  padding: 0;
}

/* ============================================================
   RESPONSIVE: TABLET (≤ 1024px)
============================================================ */

@media (max-width: 1024px) {
  .p3-hero-banner__content {
    padding-top: 60px;
    padding-right: var(--spacing);
    padding-bottom: 20px;
    padding-left: var(--spacing);
    top: 0; /* remove desktop offset */
  }
}

/* ------------------------------------------------------------
   TABLET FIX: Remove bottom padding on hero row only
   (ensures video/content do not leave huge whitespace below hero)
------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
  .row-fluid-wrapper.row-depth-1.row-number-1.dnd-section.dnd_area-row-0-padding {
    padding-bottom: 0 !important; /* tablet-only correction */
  }
}

/* ============================================================
   RESPONSIVE: MOBILE (≤ 767px)
============================================================ */

@media (max-width: 767px) {
  .p3-hero-banner__content-block {
    padding: 1.5rem;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .p3-hero-banner__inner {
    align-items: flex-end;
  }

  h1.p3-hero-banner__title {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }

  .p3-hero-banner__buttons {
    gap: 5px;
  }
}

/* ------------------------------------------------------------
   MOBILE FIX: Remove bottom padding on hero row only
   (prevents huge empty space when hero video auto-scales)
------------------------------------------------------------ */
@media (max-width: 767px) {
  .row-fluid-wrapper.row-depth-1.row-number-1.dnd-section.dnd_area-row-0-padding {
    padding-bottom: 0 !important; /* mobile-only correction */
  }
}


/* ============================================================
   XXL SCREENS (≥ 2000px)
============================================================ */

@media (min-width: 2000px) {
  .p3-hero-banner__wrapper {
    background-color: #fff;
    position: relative;
    z-index: 1;
  }

  /* Remove auto-generated margins */
  [class*="dnd_area-row-"][class$="-margin"] {
    margin: 0 !important;
  }

  /* Remove DnD padding */
  .row-fluid-wrapper.dnd-section[class*="dnd_area-row-"][class$="-padding"] {
    padding: 0 !important;
  }

  /* BG container paints white behind contained video */
  .p3-hero-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    z-index: 0;
  }

  /* Flatten HubSpot’s aspect-ratio wrappers 
  .p3-hero__video-bg .hs-video-container,
  .p3-hero__video-bg .hs-video-wrapper {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  /* XXL: video fits hero with letterboxing */
  .p3-hero__video-bg iframe,
  .p3-hero__video-bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background-color: #fff;
    pointer-events: none !important;
    z-index: 0;
  }

  /* Overlay between video + content */
  .p3-hero__video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
  }
}

/* ============================================================
   GLOBAL SAFEGUARD
============================================================ */

.dnd-section + .dnd-section {
  position: relative;
  z-index: 2;
  background-color: #fff; /* prevents video overlap showing through */
}

/* Remove padding/margin when flagged by JS overlap handler */
.p3-hero-no-dnd-spacing {
  margin: 0 !important;
  padding: 0 !important;
}

.p3-hero-no-dnd-spacing[class*="dnd_area-row-"][class$="-margin"],
.p3-hero-no-dnd-spacing[class*="dnd_area-row-"][class$="-padding"] {
  margin: 0 !important;
  padding: 0 !important;
}
@media screen and (min-width:1200px){
  .p3-hero-banner__inner{
  min-height:1000px;
  }
}
/* ============================================================
   Z-INDEX MAP
============================================================ */
/*
  0 → Background (image/video)
  1 → Click overlay
  2 → Hero content
  3 → Text panel / accents
  4 → Buttons / CTAs
*/