/* == Redlimoo Cards Scroll == */
.rl-cards-scroll {
  display: flex;
  gap: var(--rl-gap, 20px);
  height: var(--rl-height, 500px);
  border-radius: 20px;
  padding: 20px; /* Overridden by control 'Container Padding' */
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x var(--rl-snap-type, none);

  /* hide scrollbar by default; toggle via data-attr in JS */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rl-cards-scroll::-webkit-scrollbar { display: none; }

.rl-cards-scroll .rl-card {
  flex: 0 0 calc((100% / var(--rl-cards-per-view, 3)) - var(--rl-gap, 20px));
  position: relative;
  border-radius: var(--rl-radius, 15px);
  overflow: hidden;
  min-height: 100%;
  cursor: pointer;
  scroll-snap-align: start;
  filter: brightness(var(--rl-brightness, 0.75));
  transition:
    flex-basis .4s ease,
    transform .35s ease,
    filter .35s ease,
    opacity .35s ease;
  will-change: flex-basis, transform, filter, opacity;
}

.rl-cards-scroll .rl-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* allow drag on container without grabbing image */
  user-select: none;
}

.rl-cards-scroll .rl-card:hover {
  transform: scale(1.02);
  filter: brightness(var(--rl-hover-brightness, 1));
  z-index: 2;
}

/* لینک اوورلی روی کارت */
.rl-card-link-overlay{
  position:absolute;
  inset:0;
  z-index:6;
  background: transparent;
  text-indent:-9999px;  /* چیزی نمایش نده */
  pointer-events:none;  /* پیش‌فرض: کلیک‌پذیر نباشه */
}

/* فقط وقتی کارت فول‌اسکرین و فعال است، کلیک‌پذیر شود */
.rl-cards-scroll.full .rl-card.is-hovered .rl-card-link-overlay{
  pointer-events:auto;
  cursor:pointer;
}


/* متن همیشه دیده شود + خلاصه‌سازی توضیح در حالت بسته */
.rl-cards-scroll .rl-card-content {
  position: absolute;
  inset-inline: var(--rl-content-padding, 30px);
  bottom: var(--rl-content-padding, 30px);
  color: #fff;
  opacity: 1;              /* مهم */
  transform: none;         /* مهم */
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  z-index: 2;              /* بالاتر از گرادیان */
  direction: rtl;         /* ← متن و چیدمان RTL */
  text-align: right;      /* ← راست‌چین */
}

.rl-cards-scroll .rl-card-content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* تعداد خطوط خلاصه */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* توضیح کوتاه در حالت بسته (دو خط) */
.rl-cards-scroll .rl-card-content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* تعداد خطوط خلاصه */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* وقتی کارت «انتخاب» شد (کلاس‌بیس) Clamp برداشته شود */
.rl-cards-scroll.full .rl-card.is-hovered .rl-card-content p {
  -webkit-line-clamp: unset;
}
/* گرادیان زیر عکس برای خوانایی متن */
.rl-cards-scroll .rl-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%; /* اگر کمتر/بیشتر خواستی این درصد رو تغییر بده */
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity .25s;
}
/* وقتی کارت فول‌عرض شد، گرادیان خاموش شود */
.rl-cards-scroll.full .rl-card.is-hovered::after {
  opacity: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .rl-cards-scroll { height: 400px; }
  .rl-cards-scroll .rl-card { flex: 0 0 var(--rl-mobile-card-width, 80%); }
}

/* Fallback classes for browsers without :has support */
.rl-cards-scroll.full .rl-card {
  flex-basis: 0 !important;
  opacity: .25;
  transform: none !important;
  filter: brightness(calc(var(--rl-brightness, .75) * .73));
  pointer-events: none;
}
.rl-cards-scroll.full .rl-card.is-hovered {
  flex-basis: 100% !important;
  opacity: 1;
  filter: brightness(var(--rl-hover-brightness, 1));
  pointer-events: auto;
  z-index: 3;
}


/* دکمه CTA */
.rl-card-cta {
  display: none;
  position: absolute;
  bottom: var(--rl-content-padding, 30px);
  inset-inline-end: var(--rl-content-padding, 30px);
  z-index: 3;
  padding: 10px 14px;                 /* از پنل قابل override است */
  background: rgba(0,0,0,.55);        /* از پنل override می‌شود */
  border-radius: 10px;                /* از پنل override می‌شود */
  color: #fff;                        /* از پنل override می‌شود */
  text-decoration: none;
  font-size: 14px;                    /* از پنل (Typography) override می‌شود */
  line-height: 1;
  backdrop-filter: saturate(120%) blur(2px);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  transform: translateY(0);
}

.rl-card-cta:hover {
  transform: translateY(calc(-1 * var(--rl-cta-hover-lift, 1px)));
}

/* ناوبری چپ/راست */
.rl-cards-scroll-wrapper { position: relative; }

.rl-cs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 42px; /* width */
  block-size: 42px;  /* height */
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: background-color .2s ease, transform .2s ease;
}
.rl-cs-nav:hover { background: rgba(0,0,0,.6); transform: translateY(-50%) scale(1.05); }
.rl-cs-prev { inset-inline-start: 8px; }
.rl-cs-next { inset-inline-end: 8px; }

/* در موبایل می‌تونی مخفی کنی (اختیاری) */
@media (max-width: 768px) {
  .rl-cs-nav { display: none; }
}


/* Optional: a "dragging" cursor state */
.rl-cards-scroll.dragging { cursor: grabbing; }