/* ===== Social Proof (section) ===== */
.social-proof { padding: 40px 0 28px; color: var(--color-white); }
.social-proof__container { width: min(1324px, 92%); margin: 0 auto; }
.social-proof__title { margin: 0 0 18px; font-size: 1.8rem; text-align: right; }

/* ===== Viewport & Track ===== */
.sp-viewport {
  position: relative;
  margin-top: 8px;
  overflow: hidden;                  /* برای پنهان ماندن فیدها */
}
.sp-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 8px 22px;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sp-track::-webkit-scrollbar { display: none; }

/* ===== Item ===== */
.sp-item {
  flex: 0 0 auto;
  width: 381px;
  max-width: 86vw;
  scroll-snap-align: start;
  text-align: right;
}
.sp-item__avatar {
  width: 97px; height: 97px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 12px auto;        /* راست‌چین */
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.sp-item__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp-item__quote {
  margin: 0 0 30px;
  line-height: 1.9;
  text-wrap: pretty;
  font-weight: 700;
  font-size: 24px;
}
.sp-highlight {
  background: transparent;
  color: #fff;
  display: inline-block;
  white-space: nowrap;
  position: relative;
}
.sp-highlight:after{
    content: '';
    background: url(https://nsandbox.kowork.work/site-v2/img/blue-paiting.png);
    background-position: -114px;
    background-size: 233%;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -5;
    right: -8px;
    border-radius: 6px;
    top: -2px;
    transform: rotate(-1.23deg);
    padding: 2px 8px;
}

.sp-item__meta { opacity: .9; }
.sp-item__name { font-weight: 600;margin-bottom: 4px;font-size: 20px;}
.sp-item__role { opacity: 70%; font-weight: 600; font-size: 16px; }

/* ===== Edge Fades (گرادینت دو طرف) ===== */
.sp-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 68px;
  pointer-events: none;
  /* رنگ پس‌زمینه صفحه‌ی شما (متغیر موجود در main.css) */
  --bg: var(--color-bg, #0c0a22);
}
.sp-fade--right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, rgba(12,10,34,0) 70%);
}
.sp-fade--left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, rgba(12,10,34,0) 70%);
}

/* ===== ریسپانسیو سبک ===== */
@media (max-width: 768px) {
  .sp-item { width: 73vw; }
}

/* اندازه‌ی فید و فاصله‌ی داخلی لبه‌ها */
.sp-viewport {
  --sp-fade-w: 68px;   /* همان عرض فیدهای دو طرف */
  --sp-edge-gap: 16px; /* فاصله‌ی اضافی برای دیده‌شدن آیتم کناری فید */
}

/* فیدها از همین متغیر استفاده کنند */
.sp-fade { width: var(--sp-fade-w); }

/* پدینگ افقی = عرض فید + فاصله‌ی اضافی
   و اسکرول‌پدینگ برای اسنپ‌صحیح کنار فیدها */
.sp-track {
  padding: 8px calc(var(--sp-fade-w) + var(--sp-edge-gap)) 22px;
  scroll-padding-inline: calc(var(--sp-fade-w) + var(--sp-edge-gap));
}

/* اسکرول نرم و درگ‌پذیر */
.sp-track{
  scroll-snap-type: x proximity;   /* قبلا mandatory بود؛ حالا کاربر هر جا رها کند همانجا می‌ماند */
  touch-action: pan-y;              /* اجازه‌ی درگ افقی بدون تداخل با اسکرول عمودی صفحه */
  cursor: grab;
}
.sp-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }

/* فلش‌ها */
.sp-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  z-index:3;            /* بالاتر از فیدها */
  transition: opacity .2s ease, transform .2s ease;

  background: none;
  border: none;
}
.sp-arrow img{ pointer-events:none; height: 69px;}
.sp-arrow--right{ right: 0px; }     /* روی فید راست */
.sp-arrow--left { left:  -14px; }   /* روی فید چپ  */
.sp-arrow:is(:hover,:focus){ transform: translateY(-50%) scale(1.05); }

.sp-arrow.is-disabled{ opacity:0; pointer-events:none; display: none;}

/* مطمئن شو فیدها پایینِ فلش‌ها هستند */
.sp-fade{ z-index:2; }

@media (max-width: 768px) {
  /* مخفی کردن فلش‌ها در موبایل */
  .sp-arrow { display: none; }
  .sp-track{
      padding-right: 1rem;
  }
    .sp-fade{
        display: none;
    }
    .sp-item__quote{
        font-size: 20px;
    }
}