/* ==========================================================================
   1. توکن‌ها
   ========================================================================== */
.dgp-slider{
  /* --- تایپوگرافی: از فونت قالب پیروی می‌کند --- */
  --dgp-font: inherit;
  --dgp-fs-title: 1.0625rem;        /* 17px */
  --dgp-fs-meta: .8125rem;          /* 13px */
  --dgp-lh-title: 1.85;
  --dgp-title-lines: 2;             /* سقف خطوط عنوان */

  /* --- رنگ: دقیقاً همان توکن‌های افزونه‌ی دسته‌بندی افقی --- */
  --dgp-bg: transparent;
  --dgp-primary: var(--drm-primary, #6c1410);      /* = --cat-primary افزونه */
  --dgp-ink: var(--drm-text-strong, #1e1e1e);      /* = --cat-text افزونه */
  --dgp-muted: var(--drm-text-muted, #7b7b7b);
  --dgp-accent: var(--dgp-primary);                /* خط سربرگ، لینک، نشانگر نویسنده */
  --dgp-accent-media: var(--dgp-accent);           /* همان لهجه روی تصویر تیره */
  --dgp-chip-bg: var(--dgp-primary);               /* پس‌زمینه چیپ دسته */
  --dgp-chip-ink: #ffffff;                         /* متن چیپ دسته */
  --dgp-card-fallback: #1b1d26;
  --dgp-surface: #ffffff;
  --dgp-hairline: rgba(23,24,28,.10);

  /* --- فرم و فاصله --- */
  --dgp-radius: 20px;
  --dgp-gap: 16px;
  --dgp-pad: 16px;
  --dgp-ratio: 3 / 4;
  --dgp-per-view: 4;
  --dgp-container: var(--drm-container, 1200px);   /* = --cat-container افزونه */

  /* --- محاسبه‌ی ارتفاع یک خط (مبنای کلمپ و ماسک محو) --- */
  --dgp-line: calc(var(--dgp-fs-title) * var(--dgp-lh-title));

  /* --- سایه --- */
  --dgp-shadow: 0 2px 10px rgba(16,18,28,.06), 0 12px 28px -14px rgba(16,18,28,.22);

  /* --- انیمیشن --- */
  --dgp-ease: cubic-bezier(.22,.61,.36,1);
  --dgp-dur: .28s;
}

/* ==========================================================================
   2. اسکلت بخش
   ========================================================================== */
.dgp-slider{
  font-family: var(--dgp-font);
  background: var(--dgp-bg);
  direction: rtl;
  position: relative;
  isolation: isolate;
  padding: 18px 0 14px;            /* = ریتم عمودی افزونه‌ی دسته‌بندی */
  color: var(--dgp-ink);
}
.dgp-slider *,
.dgp-slider *::before,
.dgp-slider *::after{ box-sizing: border-box; }

.dgp-slider__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;                        /* = drm-horizontal-cats__head */
  width:100%; max-width: var(--dgp-container);
  margin:0 auto 13px;
  padding-inline:0;                /* هم‌تراز با ریل و با ماژول دسته‌بندی */
}
.dgp-slider__titlewrap{ display:flex; align-items:center; gap:9px; min-width:0; }
/* خط عمودی کنار تیتر — بخشی از افزونه‌ی دسته‌بندی نیست.
   برای حذف کامل: این قانون و <span class="dgp-slider__bar"> را بردارید. */
.dgp-slider__bar{
  inline-size:4px; block-size:18px; border-radius:99px;
  background: var(--dgp-primary); flex:0 0 auto;
}
/* تیتر — عیناً drm-horizontal-cats__title */
.dgp-slider__title{
  margin:0;
  color: var(--dgp-ink);
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight:800;
  line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dgp-slider__title strong{ color: var(--dgp-primary); }
/* «مشاهده همه» — عیناً drm-horizontal-cats__all */
.dgp-slider__more{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  color: var(--dgp-primary);
  font-size:12px; font-weight:600; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition: opacity var(--drm-fast, .2s) var(--drm-ease, ease);
}
.dgp-slider__more:hover{ opacity:.72; }
.dgp-slider__more:focus-visible{ outline:2px solid var(--dgp-primary); outline-offset:3px; border-radius:4px; }
.dgp-slider__more svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* ==========================================================================
   3. ریل اسکرول (بدون JS هم کار می‌کند)
   ========================================================================== */
.dgp-slider__viewport{
  /* بدون margin منفی افقی تا لبه‌ی اولین کارت دقیقاً زیر تیتر بنشیند
     (همان الگوی drm-horizontal-cats__track) */
  width:100%; max-width: var(--dgp-container); margin-inline:auto;
  padding-inline:0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 2px 8px;          /* = drm-horizontal-cats__track */
}
.dgp-slider__viewport::-webkit-scrollbar{ display:none; }

.dgp-slider__track{
.dgp-slider__empty{
  margin:0; padding:18px; border-radius:var(--dgp-radius);
  background:#f9f8f6; color:var(--drm-text-muted,#7b7b7b);
  font-size:13px; line-height:1.9; text-align:center;
}
  list-style:none; margin:0; padding:0;
  display:flex; gap: var(--dgp-gap);
}
.dgp-slide{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 calc(
    (100% - (var(--dgp-per-view) - 1) * var(--dgp-gap)) / var(--dgp-per-view)
  );
  min-inline-size: 0;
}

/* ==========================================================================
   4. کارت
   ========================================================================== */
.dgp-card{
  position: relative;
  block-size: 100%;
  border-radius: var(--dgp-radius);
  overflow: hidden;
  background: transparent;
  box-shadow: var(--dgp-shadow);
  isolation: isolate;
  transition: transform var(--dgp-dur) var(--dgp-ease),
              box-shadow var(--dgp-dur) var(--dgp-ease);
  aspect-ratio: var(--dgp-ratio);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.dgp-card__media{
  /* Behind the card box so the stretched title link can cover the whole
     card instead of only the text block. */
  position:absolute; inset:0; margin:0; z-index:-1; overflow:hidden;
  background: var(--dgp-card-fallback);
}
.dgp-card__img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
/* Image fill guard. Optimizer/lazy-load plugins rewrite <img> tags and can drop
   our class or force height:auto, which breaks the crop. Targeting the child
   image keeps the card cropping correct whatever the tag ends up looking like. */
.dgp-card__media > img{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover; object-position:center; display:block;
}
.dgp-card__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(8,9,14,.92) 0%,
      rgba(8,9,14,.80) 24%,
      rgba(8,9,14,.44) 52%,
      rgba(8,9,14,.10) 76%,
      rgba(8,9,14,.26) 100%);
}

/* --- بدنه --- */
.dgp-card__body{
  /* Deliberately unpositioned: the stretched link inside it must anchor to the
     card, not to this block, so the image area is clickable too. */
  padding: var(--dgp-pad);
  display:flex; flex-direction:column;
  gap:10px;
}

/* --- چیپ دسته: حالا بالای عنوان، هم‌تراز با ابتدای متن (راست در RTL) --- */
.dgp-card__cat{
  position:relative; z-index:3;
  align-self:flex-start;            /* برای انتقال به سمت مقابل: flex-end */
  margin-block-end:2px;             /* فاصله‌ی اختصاصی تا عنوان: 10px + 2px */
  font-size:.6875rem; font-weight:800; line-height:1;
  color: var(--dgp-chip-ink); text-decoration:none;
  background: var(--dgp-chip-bg);
  padding:7px 11px; border-radius:8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  transition: filter var(--dgp-dur) var(--dgp-ease);
}
.dgp-card__cat:hover{ color: var(--dgp-chip-ink); }
.dgp-card__cat:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* --- عنوان: سقف ۲ خط + محو تدریجی انتهای خط آخر --- */
.dgp-card__title{
  margin:0;
  font-size: var(--dgp-fs-title);
  font-weight:800;
  line-height: var(--dgp-lh-title);
  color:#fff;
  letter-spacing:-.005em;
  display:-webkit-box;
  -webkit-line-clamp: var(--dgp-title-lines);
  -webkit-box-orient: vertical;
  overflow:hidden;
  /* گارد ارتفاع: حتی اگر line-clamp پشتیبانی نشود، بیش از ۲ خط رشد نمی‌کند */
  max-block-size: calc(var(--dgp-line) * var(--dgp-title-lines));
}

/*
  محو انتهای خط آخر (به‌جای سه‌نقطه‌ی خشک).
  دو لایه ماسک: لایه‌ی اول همه‌ی خطوط جز خط آخر را کاملاً مات نگه می‌دارد،
  لایه‌ی دوم فقط روی خط آخر است و به سمت انتهای خط (چپ در RTL) شفاف می‌شود.
  کلاس is-clamped را جاوااسکریپت فقط وقتی می‌گذارد که متن واقعاً بریده شده باشد،
  تا عنوان‌های کوتاه بی‌دلیل محو نشوند.
*/
.dgp-card__title.is-clamped{
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to left, #000 46%, rgba(0,0,0,0) 94%);
          mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to left, #000 46%, rgba(0,0,0,0) 94%);
  -webkit-mask-size: 100% calc(100% - var(--dgp-line)), 100% var(--dgp-line);
          mask-size: 100% calc(100% - var(--dgp-line)), 100% var(--dgp-line);
  -webkit-mask-position: top right, bottom right;
          mask-position: top right, bottom right;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
}
/* همان رفتار در حالت چپ‌چین، اگر ماژول روی نسخه‌ی LTR سایت استفاده شد */
[dir="ltr"] .dgp-card__title.is-clamped{
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to right, #000 46%, rgba(0,0,0,0) 94%);
          mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to right, #000 46%, rgba(0,0,0,0) 94%);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
}

.dgp-card__link{
  color:inherit; text-decoration:none;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
/* stretched link: کل کارت کلیک‌پذیر، بدون افزودن لینک تکراری به یک URL */
.dgp-card__link::after{ content:""; position:absolute; inset:0; z-index:2; }
.dgp-card__link:focus-visible{ outline:none; }
.dgp-card__link:focus-visible::after{
  outline:3px solid #fff; outline-offset:-5px; border-radius: var(--dgp-radius);
}

/* --- متادیتا --- */
.dgp-card__meta{
  display:flex; align-items:center; gap:8px;
  font-size: var(--dgp-fs-meta); font-weight:600;
  color: rgba(255,255,255,.86);
  min-block-size:20px;
}
.dgp-card__author{
  color:#fff; text-decoration:none; position:relative; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
}
.dgp-card__author::before{
  content:""; inline-size:6px; block-size:6px; border-radius:2px;
  background: var(--dgp-accent-media); flex:0 0 auto;
}
.dgp-card__author:hover{ color:#fff; }
.dgp-card__sep{ opacity:.45; }
.dgp-card__date{ color: rgba(255,255,255,.78); font-weight:500; }
.dgp-card__comments{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; gap:5px;
  color: rgba(255,255,255,.78); font-weight:600;
}
.dgp-card__comments svg{ inline-size:15px; block-size:15px; opacity:.85; }

/* ==========================================================================
   5. ریسپانسیو
   ========================================================================== */
@media (max-width: 1180px){ .dgp-slider{ --dgp-per-view: 3; } }
@media (max-width: 900px){  .dgp-slider{ --dgp-per-view: 2.4; --dgp-gap:14px; } }
@media (max-width: 767px){
  .dgp-slider{ padding:15px 0 12px; }
  .dgp-slider__head{ width:100%; max-width:none; margin-bottom:11px; padding-inline:0; }
  .dgp-slider__title{ font-size:15px; font-weight:800; }
  .dgp-slider__more{ font-size:12px; font-weight:600; }
  .dgp-slider__viewport{ width:100%; max-width:none; margin:0; padding-block:2px 6px; }
}
@media (max-width: 680px){
  .dgp-slider{ --dgp-per-view: 1.6; --dgp-radius:18px; --dgp-pad:14px; }
}
@media (max-width: 430px){
  .dgp-slider{ --dgp-per-view: 1.18; --dgp-fs-title:1rem; }
}
/* حرکت‌های افزونه در حالت کاهش انیمیشن — همان قانون افزونه */
@media (prefers-reduced-motion: reduce){
  .dgp-slider *, .dgp-slider *::before, .dgp-slider *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* ==========================================================================
   6. دسترسی‌پذیری و حالت‌های سیستمی
   ========================================================================== */
.dgp-slider__viewport:focus-visible{
  outline:2px solid var(--dgp-accent); outline-offset:2px; border-radius:14px;
}
@media (prefers-reduced-motion: reduce){
  .dgp-slider__viewport{ scroll-behavior:auto; }
  .dgp-card, .dgp-card__img{ transition:none !important; }
}
/*
  توجه: --dgp-ink عمداً با prefers-color-scheme عوض نمی‌شود.
  عنوان بخش روی پس‌زمینه‌ی صفحه‌ی قالب می‌نشیند، نه روی پس‌زمینه‌ی سیستم؛
  اگر خودکار سفید شود، روی قالب روشن ناخوانا می‌گردد.
  اگر قالب حالت تیره‌ی اختصاصی دارد، همان‌جا این متغیر را بازنویسی کنید:
    body.dark-theme .dgp-slider{ --dgp-ink:#f2f3f5; }
*/
@media (prefers-color-scheme: dark){
  .dgp-slider{
    --dgp-surface:#1c1e24; --dgp-hairline:rgba(255,255,255,.12);
  }
}
@media (forced-colors: active){
  .dgp-card{ border:1px solid CanvasText; }
  .dgp-card__scrim{ background: rgba(0,0,0,.75); }
  .dgp-card__title.is-clamped{ -webkit-mask-image:none; mask-image:none; }
}
.dgp-slider.is-dragging{ cursor:grabbing; user-select:none; }
.dgp-slider.is-dragging .dgp-card__link::after{ pointer-events:none; }

.dgp-sr-only{
  position:absolute !important; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* The global a:hover recolours every link. Cards keep their own colours so a
   finger resting on a card never turns the title or the chip red. */
.dgp-card__link:hover{ color:inherit; }
.dgp-card__title a:hover{ color:inherit; }