/* Caps viewport-relative hero height when index.html runs inside a tall CMS iframe. */
html.cms-embed {
  --cms-embed-vh: 900px;
  --cms-embed-modal-top: 0px;
  background-color: #000 !important;
  height: auto !important;
  min-height: 0 !important;
}

html.cms-embed body,
html.cms-embed #page,
html.cms-embed #__next,
html.cms-embed main {
  background-color: #000 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Discover More banner — CSS background is source of truth (React breaks Next/Image src) */
html.cms-embed #banner-slim,
#banner-slim,
html.cms-embed #banner-slim .css-4rpnm8,
#banner-slim .css-4rpnm8 {
  background-color: #000 !important;
}

html.cms-embed #banner-slim .lam-banner,
#banner-slim .lam-banner {
  background-color: #000 !important;
  background-image: url('/models/urus/urus-se-performante/assets/images/banner.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 320px !important;
}

html.cms-embed #urus-banner-slim-image,
#urus-banner-slim-image,
html.cms-embed #banner-slim .lam-banner__image,
#banner-slim .lam-banner__image,
html.cms-embed #banner-slim .lam-banner__image.css-81cm2m,
#banner-slim .lam-banner__image.css-81cm2m {
  background-image: url('/models/urus/urus-se-performante/assets/images/banner.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide broken Next/Image shell so alt text never shows over the CSS background */
html.cms-embed #banner-slim img.lam-banner__image,
#banner-slim img.lam-banner__image,
html.cms-embed #banner-slim .lam-banner__image img,
#banner-slim .lam-banner__image img {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Empty trailing Lambo sections create bottom gap under banner */
html.cms-embed #form-model-page,
html.cms-embed #lamborghini-connect-list,
html.cms-embed #free-html {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Floating CTA must not inflate document height (causes white gap under banner) */
html.cms-embed .floating-menu-button {
  position: fixed !important;
  top: auto !important;
  bottom: 32px !important;
  max-height: min(70vh, 420px) !important;
  overflow: hidden !important;
}

/* Hide banner breadcrumbs on CMS embed */
html.cms-embed .lam-hero__breadcrumbs,
.lam-hero__breadcrumbs {
  display: none !important;
}

html.cms-embed .lam-hero-slide {
  height: 900px !important;
  min-height: 700px !important;
  max-height: 900px !important;
}

/* CMS hero banner video — poster shows immediately before MP4 is ready */
html.cms-embed #urus-hero-banner-video-wrap,
#urus-hero-banner-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  overflow: hidden !important;
  background-color: #000 !important;
  background-image: url('/models/urus/urus-se-performante/assets/images/banner-video-poster.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

html.cms-embed .lam-hero-slide,
.lam-hero-slide {
  background-color: #000 !important;
  background-image: url('/models/urus/urus-se-performante/assets/images/banner-video-poster.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.cms-embed #urus-hero-banner-video,
#urus-hero-banner-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Hide leftover Meride hero shell so it cannot cover the local MP4 */
html.cms-embed .lam-hero-slide__video[data-cms-hidden-meride='1'],
html.cms-embed #video-2705[data-cms-hidden-meride='1'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Gradient overlays on hero — keep subtle so first paint is not a black void */
html.cms-embed .lam-hero-slide::before,
.lam-hero-slide::before {
  pointer-events: none !important;
  opacity: 0.25 !important;
  z-index: 3 !important;
}

html.cms-embed .lam-hero-slide::after,
.lam-hero-slide::after {
  pointer-events: none !important;
  opacity: 0.7 !important;
  z-index: 3 !important;
  height: 35% !important;
}

/* Meride / video layer must not steal clicks */
html.cms-embed .lam-hero-slide__video,
.lam-hero-slide__video,
html.cms-embed .lam-hero-slide .meride-video-container,
.lam-hero-slide .meride-video-container {
  pointer-events: none !important;
}

/* Hero text + buttons above gradients (z-index 10) */
html.cms-embed .lam-hero-slide__header,
.lam-hero-slide__header {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

html.cms-embed .lam-hero-slide__header a,
html.cms-embed .lam-hero-slide__header button,
html.cms-embed .lam-hero-slide__actions,
html.cms-embed .lam-hero-slide__actions a,
.lam-hero-slide__header a,
.lam-hero-slide__header button,
.lam-hero-slide__actions,
.lam-hero-slide__actions a {
  position: relative !important;
  z-index: 21 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html.cms-embed .lam-hero-slide [data-cms-hidden-meride="1"],
.lam-hero-slide [data-cms-hidden-meride="1"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Chapter header videos: Lambo CSS defaults media to opacity:.1 until .is-inview.
   In the tall iframe, IntersectionObserver often never flips that — force visible. */
html.cms-embed .chapter-header__media,
.chapter-header__media {
  opacity: 1 !important;
  visibility: visible !important;
}

html.cms-embed #urus-aero-chapter-video-wrap,
html.cms-embed #urus-mechanical-powertrain-video-wrap,
html.cms-embed #urus-carbon-elements-video-wrap,
html.cms-embed #urus-exterior-chapter-video-wrap,
#urus-aero-chapter-video-wrap,
#urus-mechanical-powertrain-video-wrap,
#urus-carbon-elements-video-wrap,
#urus-exterior-chapter-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #000 !important;
  pointer-events: none !important;
}

html.cms-embed #urus-aero-chapter-video,
html.cms-embed #urus-mechanical-powertrain-video,
html.cms-embed #urus-carbon-elements-video,
html.cms-embed #urus-exterior-chapter-video,
#urus-aero-chapter-video,
#urus-mechanical-powertrain-video,
#urus-carbon-elements-video,
#urus-exterior-chapter-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #000 !important;
}

/* Keep the KPI video row tall enough for the overlay MP4 */
html.cms-embed #video-with-preview .video-row__inner,
#video-with-preview .video-row__inner {
  position: relative !important;
  min-height: 26.25rem !important;
}

html.cms-embed #video-with-preview .video-lazy-container,
html.cms-embed #video-with-preview #video-2709,
#video-with-preview .video-lazy-container,
#video-with-preview #video-2709 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Carbon Elements light configurator media frame */
html.cms-embed #light-configurator .light-configurator__media,
#light-configurator .light-configurator__media,
#carbon-configurator-content .light-configurator__media {
  position: relative !important;
  min-height: 320px !important;
  height: 31.25rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Never show Meride players — static local MP4s only (no blob:) */
.meride-video-container,
.md-settings,
.meride-video-container video {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Exception: our own replacement wrappers (see urus-block-meride.js) are tagged
   .meride-video-container so the page's `video.closest('.meride-video-container')`
   resolves and can't throw — but they hold the visible local MP4, so the blanket
   hide rule above must not catch them. Two-class selectors win on specificity. */
.meride-video-container.urus-static-video,
.meride-video-container.urus-static-video > video.urus-native-video {
  display: block !important;
  visibility: visible !important;
}

/* Popup / full-video modal (Meride 2711) — local MP4 with controls */
.full-video-player-wrapper,
#video-2703-modal,
#video-2711-modal,
#video-2712-modal {
  position: relative !important;
  width: 100% !important;
  min-height: 50vh !important;
  background: #000 !important;
}

.meride-video-container.urus-static-video--modal,
.meride-video-container.urus-static-video--modal > video.urus-native-video--modal {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  object-fit: contain !important;
}

html.cms-embed .css-6up8nm .swiper-container {
  height: 900px !important;
  max-height: 900px !important;
}

html.cms-embed .modal {
  z-index: 1055 !important;
}

html.cms-embed .modal-backdrop {
  z-index: 1050 !important;
}

html.cms-embed body.modal-open {
  padding-right: 0 !important;
}

/* Allow scroll inside modals while the page body is locked */
html.cms-embed.cms-embed-modal-active,
html.cms-embed.cms-embed-modal-active body.modal-open,
html.cms-embed.cms-embed-modal-active body.modal-open #scroll-container {
  touch-action: auto !important;
  overflow: hidden !important;
}

/* Full-screen modal overlay inside the fixed iframe */
html.cms-embed.cms-embed-modal-active .modal.show {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--cms-embed-vh, 100dvh) !important;
  max-height: var(--cms-embed-vh, 100dvh) !important;
  overflow: hidden !important;
  z-index: 1055 !important;
}

html.cms-embed.cms-embed-modal-active .modal-backdrop.show {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--cms-embed-vh, 100dvh) !important;
  max-height: var(--cms-embed-vh, 100dvh) !important;
  z-index: 1050 !important;
}

html.cms-embed.cms-embed-modal-active .modal.show .modal-dialog,
html.cms-embed.cms-embed-modal-active .css-ozz6ep.modal.show .modal-dialog,
html.cms-embed.cms-embed-modal-active .css-1dtleq7.modal.show .modal-dialog {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: var(--cms-embed-vh, 100dvh) !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

html.cms-embed.cms-embed-modal-active .modal.show .modal-content,
html.cms-embed.cms-embed-modal-active .css-ozz6ep.modal.show .modal-content,
html.cms-embed.cms-embed-modal-active .css-1dtleq7.modal.show .modal-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html.cms-embed.cms-embed-modal-active .modal.show .modal-body,
html.cms-embed.cms-embed-modal-active .css-ozz6ep.modal.show .modal-body,
html.cms-embed.cms-embed-modal-active .css-1dtleq7.modal.show .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

@media (max-width: 991.98px) {
  html.cms-embed {
    --cms-embed-vh: 600px;
  }

  html.cms-embed .lam-hero-slide {
    height: 600px !important;
    max-height: 600px !important;
  }

  html.cms-embed .css-6up8nm .swiper-container {
    height: 600px !important;
    max-height: 600px !important;
  }
}