/* Homepage section-video banner. Sits directly above the "إعلانات مميزة"
   section (#mainAdsSliders). Section videos live in folders under images/home-banner.
   home-banner-slider.js skips missing videos and only reveals this section (removing
   [hidden]) after an available video loads.
   Width is matched to #mainAdsSliders by banner-align.js (must stay exact, not a fixed
   px value) — the width below is just the pre-JS/no-JS fallback. Height is fixed per spec. */

.b24-home-ad-slot,
.b24-home-ad-slot[hidden] {
  display: none;
}

@media (min-width: 901px) {
  .b24-home-ad-slot:not([hidden]) {
    display: block !important;
    width: min(1140px, calc(100vw - 32px)) !important;
    height: 220px !important;
    margin: 10px auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* Adjacent block-level siblings' vertical margins collapse in normal flow — .main-container
     already carries its own margin-bottom, and #mainAdsSliders carries a margin-top:-28px
     (pulling it toward whatever used to precede it) elsewhere in the stylesheets. Left alone,
     both would collapse against this slot's margin and either shrink the gap or make it
     overlap outright. Neutralize both neighbors' margins in this specific adjacency so the
     28px above/below is exactly what's declared here, not whatever collapsing produces. */
  .main-container:has(+ .b24-home-ad-slot:not([hidden])) {
    margin-bottom: 0 !important;
  }
  .b24-home-ad-slot:not([hidden]) + #mainAdsSliders {
    margin-top: 0 !important;
  }
}

.b24-home-ad-slot__link,
.b24-home-ad-slot__video {
  display: block;
  width: 100%;
  height: 100%;
}

.b24-home-ad-slot__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.b24-home-ad-slot__video {
  object-fit: cover;
  object-position: center;
  background: #000;
  pointer-events: none;
}

/* Mobile: use the video's own aspect ratio instead of a fixed-height crop.
   This scales the desktop creative down proportionally, so every word, logo
   and visual at either edge remains visible on every phone width. */
@media (max-width: 900px) {
  html body .b24-home-ad-slot:not([hidden]) {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 165px !important;
    margin-top: 10px !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 12px !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #050b13 !important;
    direction: ltr !important;
  }

  html body .b24-home-ad-slot[hidden] {
    display: none !important;
  }

  html body .b24-home-ad-slot__link,
  html body .b24-home-ad-slot__video {
    width: 100% !important;
    height: 165px !important;
    max-width: 100% !important;
  }

  html body .b24-home-ad-slot__video {
    object-fit: fill !important;
    object-position: center !important;
    background: #050b13 !important;
  }

  html body .b24-home-ad-slot:not([hidden]) + #mainAdsSliders {
    margin-top: 0 !important;
  }
}