/**
 * BrandLift vault themes — keep hero/media inside the viewport.
 * Linked from all /vault/themes/* pages and injected by /api/template-preview.
 */
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Hero sections ─────────────────────────────────────────────────────── */
#bl-hero,
section.hero,
.hero-section {
  overflow: hidden !important;
  max-width: 100vw;
  box-sizing: border-box;
}

#bl-hero {
  min-height: 0;
  max-height: none;
}

#bl-hero > * {
  min-width: 0;
  box-sizing: border-box;
}

/* Split-column hero media wrappers (15-template gallery set) */
.hero-img-mc,
.hero-img-col,
.hero-img-card,
.hero-img-z,
.hero-img-w,
.hero-img-p,
.hero-img-pp,
.hero-img-m,
.hero-img-vl,
.hero-right-s,
.hero-film,
.hero-bg,
.hero-bg-l,
.hero-right,
.hero-img-wrap,
.hero-media-ah,
.hero-img-term,
.b-hero-bg,
.hero-img-col,
[class*="hero-img-"],
[class*="hero-bg-"] {
  overflow: hidden !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grid split heroes: cap media column height to visible viewport */
#bl-hero .hero-img-mc,
#bl-hero .hero-img-col,
#bl-hero .hero-img-z,
#bl-hero .hero-img-w,
#bl-hero .hero-img-m,
#bl-hero .hero-img-vl,
#bl-hero .hero-right-s,
#bl-hero .hero-img-p,
#bl-hero .hero-img-pp,
#bl-hero .hero-img-card {
  max-height: calc(100svh - 72px);
  max-height: calc(100vh - 72px);
  min-height: 0;
}

/* Full-bleed background heroes */
#bl-hero .hero-film,
#bl-hero .hero-bg,
#bl-hero .hero-bg-l,
#bl-hero .hero-media-ah,
#bl-hero .b-hero-bg,
#bl-hero > .hero-video,
.hero-video {
  inset: 0;
  max-width: 100vw;
  max-height: 100svh;
  max-height: 100vh;
  overflow: hidden !important;
}

/* Hero images & videos */
#bl-hero img,
#bl-hero video,
.hero-img-mc img,
.hero-img-mc video,
.hero-img-col img,
.hero-img-col video,
.hero-img-card img,
.hero-img-card video,
.hero-img-z img,
.hero-img-z video,
.hero-img-w img,
.hero-img-w video,
.hero-img-p img,
.hero-img-p video,
.hero-img-pp img,
.hero-img-pp video,
.hero-img-m img,
.hero-img-m video,
.hero-img-vl img,
.hero-img-vl video,
.hero-right-s img,
.hero-right-s video,
.hero-film img,
.hero-film video,
.hero-bg img,
.hero-bg video,
.hero-bg-l img,
.hero-bg-l video,
.hero-media-ah img,
.hero-media-ah video,
.hero-right .hero-img,
.hero-img-wrap img,
.hero-img-wrap video,
.b-hero-bg img,
.b-hero-bg video,
video.hero-video,
.hero-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Bento grid hero card */
.hero-bento,
.hero-grid {
  overflow: hidden;
  max-width: 100%;
}

/* ── In-page video sections ────────────────────────────────────────────── */
.vid-wrap-mc,
.vid-wrap-z,
.video-wrap,
.video-tile,
.video-player,
.vid-wrap {
  overflow: hidden !important;
  max-width: 100%;
  position: relative;
}

.vid-wrap-mc img,
.vid-wrap-mc video,
.vid-wrap-z img,
.vid-wrap-z video,
.video-wrap img,
.video-wrap video,
.video-wrap iframe,
.video-tile img,
.video-tile video {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

/* ── Carousels & galleries ─────────────────────────────────────────────── */
.bl-car-slide {
  overflow: hidden !important;
  max-width: 100%;
}

.bl-car-slide img,
.bl-car-slide video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(520px, 70svh, 70vh) !important;
  object-fit: cover !important;
  display: block !important;
}

.gal-item-mc,
.gal-item-z,
[data-bl-gallery-tile],
.bl-prod-img,
.bl-ev-media {
  overflow: hidden !important;
}

.gal-item-mc img,
.gal-item-z img,
[data-bl-gallery-tile] img,
.bl-prod-img img,
.bl-ev-media img,
.bl-prod-img video,
.bl-ev-media video {
  max-width: 100% !important;
  object-fit: cover !important;
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #bl-hero .hero-img-mc,
  #bl-hero .hero-img-col,
  #bl-hero .hero-img-z,
  #bl-hero .hero-img-w,
  #bl-hero .hero-img-m,
  #bl-hero .hero-img-vl,
  #bl-hero .hero-right-s,
  #bl-hero .hero-img-p,
  #bl-hero .hero-img-pp,
  #bl-hero .hero-img-card {
    max-height: min(70svh, 70vh, 560px);
    width: 100%;
  }

  #bl-hero {
    min-height: auto !important;
  }

  .hero-img-pp video,
  .hero-img-pp img,
  .hero-img-p video,
  .hero-img-p img {
    max-height: min(65svh, 65vh, 480px) !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }
}

/* Email preview outreach bar clearance */
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-mc,
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-col,
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-z,
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-w,
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-m,
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-vl,
body:has(#bl-email-outreach-bar) #bl-hero .hero-right-s,
body:has(#bl-email-outreach-bar) #bl-hero .hero-img-card {
  max-height: calc(100svh - 148px);
  max-height: calc(100vh - 148px);
}