/* Scenic rail structural UI extracted from custom.css.
   This file owns rail layout, fades, snap geometry, and nav controls. */

.bekaa-home-scenic-strip .mk-grid,
.bekaa-home-tours-elevated .mk-grid {
  --bekaa-rail-fade: clamp(40px, 5.2vw, 82px);
  position: relative;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  padding-left: 22px;
  padding-right: 22px;
}

.bekaa-home-scenic-strip .mk-grid::before,
.bekaa-home-scenic-strip .mk-grid::after,
.bekaa-home-tours-elevated .mk-grid::before,
.bekaa-home-tours-elevated .mk-grid::after {
  content: "" !important;
  position: absolute;
  top: 14px;
  bottom: 40px;
  width: calc(var(--bekaa-rail-fade) + 20px);
  pointer-events: none;
  z-index: 4;
}

.bekaa-home-scenic-strip .mk-grid::before,
.bekaa-home-tours-elevated .mk-grid::before {
  left: 22px;
  background: linear-gradient(to right, rgba(250, 249, 247, 1) 0%, rgba(250, 249, 247, 0.94) 38%, rgba(250, 249, 247, 0) 100%);
}

.bekaa-home-scenic-strip .mk-grid::after,
.bekaa-home-tours-elevated .mk-grid::after {
  right: 22px;
  background: linear-gradient(to left, rgba(250, 249, 247, 1) 0%, rgba(250, 249, 247, 0.94) 38%, rgba(250, 249, 247, 0) 100%);
}

.bekaa-home-scenic-strip .mk-padding-wrapper.wpb_row > .wpb_column,
.bekaa-home-tours-elevated .mk-padding-wrapper.wpb_row > .wpb_column {
  width: 100% !important;
  float: none !important;
}

.bekaa-home-scenic-strip .vc_column-inner,
.bekaa-home-tours-elevated .vc_column-inner {
  position: relative;
  z-index: 1;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bekaa-home-scenic-strip .vc_column-inner::before,
.bekaa-home-scenic-strip .vc_column-inner::after,
.bekaa-home-tours-elevated .vc_column-inner::before,
.bekaa-home-tours-elevated .vc_column-inner::after {
  content: none !important;
  display: none !important;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail,
.bekaa-home-tours-elevated .bekaa-tours-rail {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: auto;
  padding: 14px 6px 40px;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.mk-page-section.bekaa-home-scenic-strip .bekaa-scenic-rail > .tour-card,
.mk-page-section.bekaa-home-tours-elevated .bekaa-tours-rail > .tour-card {
  flex: 0 0 clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  width: clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  min-width: clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail:focus-visible,
.bekaa-home-tours-elevated .bekaa-tours-rail:focus-visible {
  outline: 2px solid #ec1d25;
  outline-offset: 2px;
}

.bekaa-home-scenic-strip .tour-card,
.bekaa-home-tours-elevated .tour-card {
  flex: 0 0 clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  width: clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  min-width: clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  contain: paint;
  margin-top: 2px !important;
  margin-bottom: 12px !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.bekaa-home-scenic-strip .tour-image-link,
.bekaa-home-tours-elevated .tour-image-link,
.bekaa-smart-grid .tour-image-link {
  display: block;
  color: inherit;
  text-decoration: none !important;
}

.bekaa-home-scenic-strip .tour-image-link:focus-visible,
.bekaa-home-tours-elevated .tour-image-link:focus-visible,
.bekaa-smart-grid .tour-image-link:focus-visible {
  outline: 2px solid #ec1d25;
  outline-offset: 2px;
}

.bekaa-home-scenic-strip .tour-image,
.bekaa-home-tours-elevated .tour-image,
.bekaa-smart-grid .tour-image {
  cursor: pointer;
}

@media (max-width: 767px) {
  .mk-page-section.bekaa-home-scenic-strip .mk-grid::before,
  .mk-page-section.bekaa-home-scenic-strip .mk-grid::after,
  .mk-page-section.bekaa-home-tours-elevated .mk-grid::before,
  .mk-page-section.bekaa-home-tours-elevated .mk-grid::after {
    display: none !important;
  }

  .mk-page-section.bekaa-home-scenic-strip .mk-grid,
  .mk-page-section.bekaa-home-tours-elevated .mk-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mk-page-section.bekaa-home-scenic-strip .mk-padding-wrapper.wpb_row,
  .mk-page-section.bekaa-home-tours-elevated .mk-padding-wrapper.wpb_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mk-page-section.bekaa-home-scenic-strip .mk-text-block,
  .mk-page-section.bekaa-home-tours-elevated .mk-text-block {
    overflow: visible !important;
  }

  .mk-page-section.bekaa-home-scenic-strip .bekaa-scenic-rail,
  .mk-page-section.bekaa-home-tours-elevated .bekaa-tours-rail {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    scroll-snap-type: x mandatory !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    scroll-padding-left: max(12px, env(safe-area-inset-left)) !important;
    scroll-padding-right: max(12px, env(safe-area-inset-right)) !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    --bekaa-rail-fade: 0px;
  }

  .mk-page-section.bekaa-home-scenic-strip .tour-card,
  .mk-page-section.bekaa-home-tours-elevated .tour-card {
    flex: 0 0 min(78vw, 340px) !important;
    width: min(78vw, 340px) !important;
    min-width: min(78vw, 340px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
}

.bekaa-smart-grid {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 14px 22px 40px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: auto;
  --bekaa-glimpses-rail-fade: clamp(40px, 5.2vw, 82px);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0, 0, 0, 0.08) 8px,
    rgba(0, 0, 0, 0.28) 18px,
    rgba(0, 0, 0, 0.58) 30px,
    rgba(0, 0, 0, 0.84) 40px,
    #000 var(--bekaa-glimpses-rail-fade),
    #000 calc(100% - var(--bekaa-glimpses-rail-fade)),
    rgba(0, 0, 0, 0.84) calc(100% - 40px),
    rgba(0, 0, 0, 0.58) calc(100% - 30px),
    rgba(0, 0, 0, 0.28) calc(100% - 18px),
    rgba(0, 0, 0, 0.08) calc(100% - 8px),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0, 0, 0, 0.08) 8px,
    rgba(0, 0, 0, 0.28) 18px,
    rgba(0, 0, 0, 0.58) 30px,
    rgba(0, 0, 0, 0.84) 40px,
    #000 var(--bekaa-glimpses-rail-fade),
    #000 calc(100% - var(--bekaa-glimpses-rail-fade)),
    rgba(0, 0, 0, 0.84) calc(100% - 40px),
    rgba(0, 0, 0, 0.58) calc(100% - 30px),
    rgba(0, 0, 0, 0.28) calc(100% - 18px),
    rgba(0, 0, 0, 0.08) calc(100% - 8px),
    transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.bekaa-smart-grid > div {
  flex: 0 0 clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  width: clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  min-width: clamp(300px, calc((100vw - 98px) / 3.5), 420px) !important;
  max-width: none !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.bekaa-smart-grid .tour-card {
  width: 100% !important;
  contain: paint;
  margin-bottom: 10px !important;
}

@supports selector(.bekaa-rail-host:has(> .bekaa-smart-grid)) {
  @media (min-width: 768px) {
    .bekaa-rail-host:has(> .bekaa-smart-grid) {
      position: relative;
      isolation: isolate;
      overflow: visible !important;
      --bekaa-smart-grid-fade: clamp(40px, 5.2vw, 82px);
    }

    .bekaa-rail-host:has(> .bekaa-smart-grid)::before,
    .bekaa-rail-host:has(> .bekaa-smart-grid)::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--bekaa-smart-grid-fade);
      z-index: 3;
      pointer-events: none;
    }

    .bekaa-rail-host:has(> .bekaa-smart-grid)::before {
      left: calc(50% - 50vw);
      background: linear-gradient(
        to right,
        rgba(250, 249, 247, 1) 0%,
        rgba(250, 249, 247, 0.94) 38%,
        rgba(250, 249, 247, 0) 100%
      );
    }

    .bekaa-rail-host:has(> .bekaa-smart-grid)::after {
      right: calc(50% - 50vw);
      background: linear-gradient(
        to left,
        rgba(250, 249, 247, 1) 0%,
        rgba(250, 249, 247, 0.94) 38%,
        rgba(250, 249, 247, 0) 100%
      );
    }

    .bekaa-smart-grid {
      -webkit-mask-image: none !important;
      mask-image: none !important;
      -webkit-mask-repeat: initial !important;
      mask-repeat: initial !important;
      -webkit-mask-size: auto !important;
      mask-size: auto !important;
    }
  }
}

.bekaa-smart-grid:focus-visible {
  outline: 2px solid #ec1d25;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .bekaa-smart-grid {
    gap: 12px !important;
    padding: 10px max(12px, env(safe-area-inset-right)) 30px max(12px, env(safe-area-inset-left)) !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: max(12px, env(safe-area-inset-left)) !important;
    scroll-padding-right: max(12px, env(safe-area-inset-right)) !important;
    scrollbar-gutter: auto;
    overflow-y: hidden !important;
    overscroll-behavior-x: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    --bekaa-glimpses-rail-fade: 0px;
  }

  .bekaa-smart-grid > div {
    flex: 0 0 min(78vw, 340px) !important;
    width: min(78vw, 340px) !important;
    min-width: min(78vw, 340px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .bekaa-smart-grid .tour-image {
    height: clamp(188px, 50vw, 228px) !important;
  }

  .bekaa-smart-grid .tour-content {
    padding: 18px 18px 16px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .bekaa-home-scenic-strip .tour-card,
  .bekaa-home-scenic-strip .tour-card:hover,
  .bekaa-home-scenic-strip .tour-card:focus,
  .bekaa-home-scenic-strip .tour-card:focus-within,
  .bekaa-home-scenic-strip .tour-card:active,
  .bekaa-home-tours-elevated .tour-card,
  .bekaa-home-tours-elevated .tour-card:hover,
  .bekaa-home-tours-elevated .tour-card:focus,
  .bekaa-home-tours-elevated .tour-card:focus-within,
  .bekaa-home-tours-elevated .tour-card:active,
  .bekaa-smart-grid .tour-card,
  .bekaa-smart-grid .tour-card:hover,
  .bekaa-smart-grid .tour-card:focus,
  .bekaa-smart-grid .tour-card:focus-within,
  .bekaa-smart-grid .tour-card:active,
  .bekaa-smart-grid .tour-card.is-featured-top,
  .bekaa-smart-grid .tour-card.is-featured-top:hover,
  .bekaa-smart-grid .tour-card.is-featured-top:focus,
  .bekaa-smart-grid .tour-card.is-featured-top:focus-within,
  .bekaa-smart-grid .tour-card.is-featured-top:active {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .bekaa-home-scenic-strip .tour-card:hover .tour-image,
  .bekaa-home-scenic-strip .tour-card:focus .tour-image,
  .bekaa-home-scenic-strip .tour-card:focus-within .tour-image,
  .bekaa-home-scenic-strip .tour-card:active .tour-image,
  .bekaa-home-tours-elevated .tour-card:hover .tour-image,
  .bekaa-home-tours-elevated .tour-card:focus .tour-image,
  .bekaa-home-tours-elevated .tour-card:focus-within .tour-image,
  .bekaa-home-tours-elevated .tour-card:active .tour-image,
  .bekaa-smart-grid .tour-card:hover .tour-image,
  .bekaa-smart-grid .tour-card:focus .tour-image,
  .bekaa-smart-grid .tour-card:focus-within .tour-image,
  .bekaa-smart-grid .tour-card:active .tour-image {
    transform: none !important;
    transition: none !important;
  }

  .bekaa-home-scenic-strip .tour-card:hover .tour-image::after,
  .bekaa-home-scenic-strip .tour-card:focus .tour-image::after,
  .bekaa-home-scenic-strip .tour-card:focus-within .tour-image::after,
  .bekaa-home-scenic-strip .tour-card:active .tour-image::after,
  .bekaa-home-tours-elevated .tour-card:hover .tour-image::after,
  .bekaa-home-tours-elevated .tour-card:focus .tour-image::after,
  .bekaa-home-tours-elevated .tour-card:focus-within .tour-image::after,
  .bekaa-home-tours-elevated .tour-card:active .tour-image::after,
  .bekaa-smart-grid .tour-card:hover .tour-image::after,
  .bekaa-smart-grid .tour-card:focus .tour-image::after,
  .bekaa-smart-grid .tour-card:focus-within .tour-image::after,
  .bekaa-smart-grid .tour-card:active .tour-image::after {
    opacity: 0.75 !important;
    transition: none !important;
  }
}

@media (max-width: 991px), (hover: none), (pointer: coarse) {
  .bekaa-rail-controls,
  .bekaa-rail-nav {
    display: none !important;
    pointer-events: none !important;
  }
}

.bekaa-home-scenic-strip .bekaa-scenic-rail,
.bekaa-home-tours-elevated .bekaa-tours-rail,
.bekaa-smart-grid {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail::-webkit-scrollbar,
.bekaa-home-tours-elevated .bekaa-tours-rail::-webkit-scrollbar,
.bekaa-smart-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .mk-page-section.bekaa-home-scenic-strip .mk-grid,
  .mk-page-section.bekaa-home-tours-elevated .mk-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mk-page-section.bekaa-home-scenic-strip .mk-grid::before,
  .mk-page-section.bekaa-home-scenic-strip .mk-grid::after,
  .mk-page-section.bekaa-home-tours-elevated .mk-grid::before,
  .mk-page-section.bekaa-home-tours-elevated .mk-grid::after,
  .bekaa-rail-host:has(> .bekaa-smart-grid)::before,
  .bekaa-rail-host:has(> .bekaa-smart-grid)::after {
    content: none !important;
    display: none !important;
  }

  .bekaa-home-scenic-strip .bekaa-scenic-rail,
  .bekaa-home-tours-elevated .bekaa-tours-rail,
  .bekaa-smart-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .bekaa-rail-host {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
  }

  .bekaa-rail-controls {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: 30;
    pointer-events: none;
  }

  .bekaa-rail-nav {
    pointer-events: auto;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 72px;
    border: 1px solid rgba(126, 111, 94, 0.3);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(248, 245, 240, 0.88) 100%);
    color: #3b332a;
    font-size: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.86;
    box-shadow: 0 10px 22px rgba(16, 14, 12, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.74);
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
  }

  .bekaa-rail-nav::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 1.75px solid currentColor;
    border-right: 1.75px solid currentColor;
    opacity: 0.92;
  }

  .bekaa-rail-nav-prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
  }

  .bekaa-rail-nav-next::before {
    transform: rotate(45deg);
    margin-right: 3px;
  }

  .bekaa-rail-host:hover .bekaa-rail-nav,
  .bekaa-rail-host:focus-within .bekaa-rail-nav {
    opacity: 1;
  }

  .bekaa-rail-nav:hover {
    transform: translateY(-50%) scale(1.04);
    border-color: rgba(126, 111, 94, 0.45);
    box-shadow: 0 14px 30px rgba(16, 14, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .bekaa-rail-nav:active {
    transform: translateY(-50%) scale(0.98);
  }

  .bekaa-rail-nav:focus-visible {
    outline: 2px solid #c59f6a;
    outline-offset: 2px;
  }

  .bekaa-rail-nav[disabled] {
    opacity: 0;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    transform: translateY(-50%) scale(0.96);
  }

  .bekaa-rail-nav-prev {
    left: max(10px, env(safe-area-inset-left));
  }

  .bekaa-rail-nav-next {
    right: max(10px, env(safe-area-inset-right));
  }
}