/* ==========================================================================
   Behab Slider — full-screen, scroll-pinned slider (Elementor)
   Prefix: behab-slider
   ========================================================================== */

/* ---------- 1) Main container (scroll runway) ---------- */
.behab-slider {
  /* tokens (from Figma) */
  --behab-secondary-900: #eee;
  --behab-secondary-000: #59595b;
  --behab-white: #fff;
  --behab-card-bg: rgba(12, 71, 135, 0.8);
  --behab-dot: rgba(12, 71, 135, 0.3);
  --behab-dot-active: #0c4787;

  /* behaviour */
  --behab-count: 5;          /* set by JS */
  --behab-step: 0.8;         /* scroll distance per slide (x screen height) */
  --behab-duration: 0.9s;
  --behab-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --behab-card-right: clamp(64px, 12.5vw, 240px);

  position: relative;
  display: block !important;
  width: 100%;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl;
  font-family: "Yekan Bakh FaNum", "Yekan Bakh", Vazirmatn, Tahoma, sans-serif;
  /* runway height = 1 screen + (slides-1) steps */
  height: calc(100vh * (1 + (var(--behab-count) - 1) * var(--behab-step))) !important;
  height: calc(100svh * (1 + (var(--behab-count) - 1) * var(--behab-step))) !important;
  flex: none !important;
  align-self: stretch;
}

/* ---------- 2) Stage (created by JS, pinned while scrolling) ---------- */
.behab-slider-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--behab-secondary-900);
}

/* Fallback pinning (JS enables it automatically only if `sticky` is blocked
   by the theme / a parent element) */
.behab-slider.behab-fallback .behab-slider-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.behab-slider.behab-fallback .behab-slider-stage.is-fixed {
  position: fixed;
}
.behab-slider.behab-fallback .behab-slider-stage.is-end {
  top: auto;
  bottom: 0;
}

/* ---------- 3) Slide ---------- */
.behab-slider-slide {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden;
  isolation: isolate;
  background: var(--behab-secondary-900);
  transform: translate3d(0, 100%, 0);   /* waiting below */
  will-change: transform;
  backface-visibility: hidden;
}
.behab-slider-slide.is-active,
.behab-slider-slide.is-before {
  transform: translate3d(0, 0, 0);
}
.behab-slider.is-ready .behab-slider-slide {
  transition: transform var(--behab-duration) var(--behab-ease);
}
/* slides hidden behind others: not painted (lighter on mobile) */
.behab-slider-slide.is-covered {
  visibility: hidden;
}
.behab-slider.is-ready .behab-slider-slide.is-covered {
  transition: transform var(--behab-duration) var(--behab-ease),
              visibility 0s linear var(--behab-duration);
}

/* ---------- 4) Image (Elementor Image widget) ---------- */
.behab-slider-image {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  z-index: 0;
  overflow: hidden;
}
.behab-slider-image .elementor-widget-container {
  height: 100%;
}
.behab-slider-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  filter: grayscale(1);               /* = saturation overlay in Figma */
  transform: scale(1.08);
}
.behab-slider.is-ready .behab-slider-image img {
  transition: transform 1.6s var(--behab-ease);
}
.behab-slider-slide.is-active .behab-slider-image img {
  transform: scale(1);
}

/* ---------- 5) Card ---------- */
.behab-slider-card {
  position: absolute !important;
  z-index: 2;
  top: 50%;
  right: var(--behab-card-right);
  left: auto;
  width: min(581px, calc(100% - var(--behab-card-right) - 32px)) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  direction: rtl;
  background: var(--behab-card-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-sizing: border-box;
  transform: translateY(-50%);
}
.behab-slider-card > .elementor-widget,
.behab-slider-card .elementor-widget:not(:last-child) {
  margin-block: 0 !important;
}
/* entrance animation of card (uses `translate`, so it doesn't clash with transform) */
.behab-slider.is-init .behab-slider-card {
  opacity: 0;
  translate: 0 40px;
}
.behab-slider.is-ready .behab-slider-card {
  transition: opacity 0.5s ease, translate 0.8s var(--behab-ease);
}
.behab-slider.is-init .behab-slider-slide.is-active .behab-slider-card {
  opacity: 1;
  translate: 0 0;
}
.behab-slider.is-ready .behab-slider-slide.is-active .behab-slider-card {
  transition-delay: 0.45s;
}

/* ---------- 6) Card content ---------- */

/* Badge (Heading widget) — "پروژه‌های شاخص" */
.behab-slider-badge {
  align-self: flex-start !important;      /* right side in RTL */
  width: auto !important;
  margin-bottom: 24px !important;
}
.behab-slider-badge .elementor-heading-title {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  background: var(--behab-secondary-900);
  color: var(--behab-secondary-000);
  border-radius: 50px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

/* Title (Heading widget) */
.behab-slider-title {
  margin-bottom: 16px !important;
}
.behab-slider-title .elementor-heading-title {
  margin: 0;
  color: var(--behab-white);
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
  line-height: 44px;
  text-align: right;
}

/* Description (Text Editor widget) */
.behab-slider-desc {
  margin-bottom: 16px !important;
}
.behab-slider-desc p,
.behab-slider-desc .elementor-widget-container {
  margin: 0;
  color: var(--behab-secondary-900);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  text-align: justify;
}

/* Bullet list (Text Editor widget containing a <ul>) */
.behab-slider-list ul {
  margin: 0;
  padding: 0;
  padding-inline-start: 24px;
  list-style: disc;
}
.behab-slider-list li {
  color: var(--behab-secondary-900);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  text-align: justify;
}

/* Button (Button widget) — "مشاهده پروژه" */
.behab-slider-btn {
  align-self: flex-end !important;        /* left side in RTL */
  width: auto !important;
  margin-top: 64px !important;
}
.behab-slider-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--behab-white);
  border-radius: 30px;
  color: var(--behab-white);
  fill: var(--behab-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.behab-slider-btn .elementor-button-content-wrapper {
  gap: 8px;
  align-items: center;
}
.behab-slider-btn .elementor-button-icon svg,
.behab-slider-btn .elementor-button-icon i {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.behab-slider-btn .elementor-button:hover,
.behab-slider-btn .elementor-button:focus {
  background: var(--behab-white);
  color: #0c4787;
  fill: #0c4787;
}

/* ---------- 7) Dots (created by JS) ---------- */
.behab-slider-dots {
  position: absolute !important;
  z-index: 10 !important;
  top: 50% !important;
  right: calc(var(--behab-card-right) - 48px) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 16px !important;
}
.behab-slider-dot {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--behab-dot) !important;
  cursor: pointer !important;
  transition: height 0.4s var(--behab-ease), background-color 0.4s ease !important;
}
.behab-slider-dot.is-active {
  height: 28px !important;
  background: var(--behab-dot-active) !important;
}

/* ---------- 8) Tablet ---------- */
@media (max-width: 1024px) {
  .behab-slider {
    --behab-card-right: 64px;
  }
  .behab-slider-card {
    padding: 28px !important;
  }
  .behab-slider-title .elementor-heading-title {
    font-size: 24px;
    line-height: 40px;
  }
  .behab-slider-btn {
    margin-top: 40px !important;
  }
}

/* ---------- 9) Mobile ---------- */
@media (max-width: 767px) {
  .behab-slider-card {
    top: auto;
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto !important;
    max-height: calc(100svh - 96px);
    padding: 20px !important;
    transform: none;
  }
  .behab-slider-badge {
    margin-bottom: 16px !important;
  }
  .behab-slider-title {
    margin-bottom: 8px !important;
  }
  .behab-slider-title .elementor-heading-title {
    font-size: 20px;
    line-height: 34px;
  }
  .behab-slider-desc {
    margin-bottom: 8px !important;
  }
  .behab-slider-desc p,
  .behab-slider-desc .elementor-widget-container,
  .behab-slider-list li {
    font-size: 14px;
    line-height: 26px;
  }
  .behab-slider-list li {
    font-size: 13px;
    line-height: 24px;
  }
  .behab-slider-btn {
    margin-top: 20px !important;
  }

  /* dots go to the top as a small pill */
  .behab-slider-dots {
    top: 16px;
    right: 16px;
    transform: none;
    flex-direction: row;
    width: auto;
    padding: 8px 12px;
    background: rgba(12, 71, 135, 0.6);
    border-radius: 20px;
    gap: 8px;
  }
  .behab-slider-dot {
    background: rgba(255, 255, 255, 0.5);
  }
  .behab-slider-dot.is-active {
    width: 24px;
    height: 8px;
    background: #fff;
  }
}

/* short landscape phones: list in two columns so the card fits */
@media (max-height: 560px) and (max-width: 1024px) {
  .behab-slider-list ul {
    columns: 2;
    column-gap: 24px;
  }
  .behab-slider-btn {
    margin-top: 16px !important;
  }
}

/* ---------- 10) Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .behab-slider {
    --behab-duration: 0.01s;
  }
  .behab-slider-image img,
  .behab-slider-card {
    transition: none !important;
  }
}

/* ---------- 11) Elementor editor: stack slides so you can edit them ---------- */
.elementor-editor-active .behab-slider {
  height: auto !important;
}
.elementor-editor-active .behab-slider-slide {
  position: relative !important;
  height: 100vh !important;
  min-height: 600px !important;
  margin-bottom: 16px !important;
  transform: none !important;
  visibility: visible !important;
}
.elementor-editor-active .behab-slider-card {
  opacity: 1 !important;
  translate: 0 0 !important;
}
.elementor-editor-active .behab-slider-image img {
  transform: none !important;
}