/* ==========================================================================
   Videos slider block
   ========================================================================== */

/* Section wrapper: positioning context for the navigation arrows */
.videos-section {
  position: relative;
}

/* Swiper container: never let it stretch its parent */
.videos-slider.swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* --------------------------------------------------------------------------
   Video card
   -------------------------------------------------------------------------- */
.video-card {
  position: relative;
}

.video-card__cover {
  aspect-ratio: 16 / 9;
  height: 163px;
}

.video-card__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 24px;
}

.video-card__overlay-icon {
  width: 31.28px;
  height: 31.28px;
  left: 12px;
  bottom: 12px;
  display: flex;
}

/* --------------------------------------------------------------------------
   Navigation arrows
   -------------------------------------------------------------------------- */

/* Full-size layer over the section; buttons are vertically centered */
.videos-nav {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    pointer-events: none;
    height: 44px;
    top: 65px;
}

.swiper-slider-nav {
  width: 44px;
  height: 44px;
  position: relative;
  pointer-events: auto;
  background: var(--Gradient-trim-highlight, linear-gradient(90deg, var(--Brand-Clover-Green-400, #54A65F) 0%, var(--Brand-Lemon-Lime-400, #CEDE47) 100%));
}
.swiper-slider-nav:after{
    content: "";
    background: linear-gradient(90deg, var(--Alias-Neutral-Pure-White, rgba(255, 255, 255, 0.10)) 0%, var(--Alias-Neutral-Pure-White, rgba(255, 255, 255, 0.10)) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    width: 58px;
    height: 58px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: -8px;
    left: 0;
    position: absolute;
    border-radius: 50%;
}

.swiper-slider-nav svg{
  position: absolute;
}
/* Prev stays at the start edge; next is pushed to the end edge,
   even when prev is hidden at the beginning of the slider */
.videos-button-next {
  margin-inline-start: auto;
}

/* Swiper adds this class to a disabled arrow (first/last slide) */
.swiper-button-disabled {
  display: none !important;
}

/*Fancy Styles*/
.fancybox__backdrop{
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  backdrop-filter: blur(17.5px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(135deg, rgba(196, 217, 74, 0.50) 0%, rgba(180, 208, 80, 0.50) 7.14%, rgba(164, 200, 84, 0.50) 14.29%, rgba(148, 191, 88, 0.50) 21.43%, rgba(131, 183, 90, 0.50) 28.57%, rgba(114, 174, 92, 0.50) 35.71%, rgba(97, 166, 94, 0.50) 42.86%, rgba(78, 157, 95, 0.50) 50%, rgba(69, 141, 85, 0.50) 57.14%, rgba(60, 125, 76, 0.50) 64.29%, rgba(52, 110, 66, 0.50) 71.43%, rgba(43, 95, 57, 0.50) 78.57%, rgba(35, 81, 48, 0.50) 85.71%, rgba(28, 67, 39, 0.50) 92.86%, rgba(20, 53, 31, 0.50) 100%) !important;
}


/*fix breaking layout in gutenberg*/

.wp-block-group.is-layout-flex > .wp-block-columns,
.wp-block-columns:has(.videos-section) {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.swiper,
.videos-slider {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: inline-size;   /* يقطع الـ feedback loop نهائياً */
}

/* 2) أي wrapper بيحتوي سلايدر (بغض النظر عن الصفحة أو البلوك) */
:is(.wp-block-column, .wp-block-group, .wp-block-columns, section, .videos-section__inner):has(.swiper) {
  min-width: 0;
  max-width: 100%;
}

/* 3) أي عنصر مباشر بداخل flex/grid من ووردبريس ما بينتفخ من محتواه */
.is-layout-flex > *,
.is-layout-grid > * {
  min-width: 0;
}
/* --------------------------------------------------------------------------
   Full-bleed layout on tablet and mobile
   Desktop (1024px and up) stays inside the page container.
   -------------------------------------------------------------------------- */

/* Tablet and mobile: full viewport width with 32px horizontal padding */
@media (max-width: 1023.98px) {
  .videos-section--bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    box-sizing: border-box;
  }

  .videos-section--bleed .videos-section__inner {
    /* Cancel Bootstrap's fixed container max-width */
    max-width: none;
    padding-inline: 32px;
  }

  /* Prevent horizontal scroll caused by 100vw */
  body {
    overflow-x: clip;
  }
}
@media (max-width: 992px) {
.videos-nav{
  display: none !important;
}
}

/* Mobile: 16px horizontal padding */
@media (max-width: 767.98px) {
  .videos-section--bleed .videos-section__inner {
    padding-inline: 16px;
  }
}