/* land-case-study – scoped RTL + fixes */

.ms-case{
  direction: rtl;
  isolation: isolate;
  color:#111827;
  font-family:"IRANSans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* محتوا از نیمهٔ تصویر شروع شود + 15px فاصله از ماژول بالایی */
  padding-top: calc(15px + var(--content-top, 0px));
  /* جلوگیری از نشت به سکشن بعدی */
  overflow: clip;
}

/* بک‌گراند split داخل همین سکشن */
.ms-case[data-bg]{ position:relative; }
.ms-case[data-bg]::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  width: calc(100vw - (100vw - 100%));
  height: var(--bg-h, 560px);
  top: var(--bg-gap-top, 0px);
  background: var(--bg-img, none) center / cover no-repeat;
  z-index:0; pointer-events:none;
}

/* ظرف داخلی */
.mscase__container{
  position:relative; z-index:1;
  width:min(1200px, 92vw); margin-inline:auto;
  display:grid; gap:12px;
}

/* کارت پایه */
.ms-case .card{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.98));
  border:1px solid rgba(17,24,39,.06);
  border-radius:20px; padding:16px;
  box-shadow:0 10px 30px rgba(17,24,39,.08), 0 2px 10px rgba(17,24,39,.04);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
}

/* هدر */
.mscase__head{ display:grid; gap:12px }
.mscase__badge{display:inline-flex;align-items:center;gap:8px;background:#fdf2f8;color:#be185d;border-radius:999px;padding:6px 10px;font-size:12px}
.mscase__top{ display:grid; gap:16px; grid-template-columns:1.2fr 1fr; align-items:center }
@media (max-width:900px){ .mscase__top{ grid-template-columns:1fr } }

.mscase__video-inline .vthumb{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0f1115 }
.mscase__video-inline .vthumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.95 }
.mscase__video-inline .vthumb::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.08), rgba(0,0,0,.4)) }
.mscase__video-inline .play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border:none; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(90deg,#ec4899,#f472b6); box-shadow:0 10px 22px rgba(236,72,153,.35); z-index:2
}
.mscase__video-inline .play i{ font-size:22px; margin-right:2px }
.mscase__video-inline figcaption{ margin-top:6px; color:#6b7280; font-size:13px }

/* معرفی */
.mscase__intro .title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.mscase__intro .title-logo{ width:clamp(36px,7vw,56px); height:clamp(36px,7vw,56px); border-radius:10px; background:#fff; padding:6px; box-shadow:0 4px 12px rgba(17,24,39,.12); object-fit:contain }
.mscase__title{ color:#8b5cf6; font-family:"Lalezar","IRANSans"; font-size:clamp(22px,2.6vw,28px); margin:0 }
.mscase__subtitle{ margin:0; color:#6b7280 }
.mscase__meta{ list-style:none; padding:0; margin:10px 0 0; display:flex; gap:14px; flex-wrap:wrap; color:#374151 }
.mscase__meta i{ color:#ec4899 }

/* KPI کوچک */
.mscase__kpis{ margin-top:10px; display:grid; gap:10px; grid-template-columns: repeat(2, 1fr) }
.kpi{ display:grid; justify-items:center; text-align:center; gap:2px; padding:10px; border:1px solid rgba(17,24,39,.06); border-radius:12px; background:#fff }
.kpi__val{ font-family: 'IRANSans'; font-size:clamp(20px,3.5vw,28px); color:#ec4899 }
.kpi__unit{ font-size:12px; color:#9ca3af }
.kpi__label{ font-size:13px; color:#374151 }

/* ===== ردیف دوم سه باکس ===== */
.mscase__row{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;  /* کارت اول کمی عریض‌تر */
  gap:12px;
  align-items:stretch;        /* هم‌ارتفاع شدن کارت‌ها */
  margin-bottom:24px;         /* فاصلهٔ امن از ماژول بعدی */
}
.mscase__row > .card{
  height:100%;
  margin:0 !important;        /* جلوگیری از margin منفی احتمالی */
  overflow:hidden;            /* بیرون‌زدگی‌ها کنترل شود */
}

/* کارت ۱: دو ستونه داخل خودش */
.mscase__box--dual{ display:grid; grid-template-rows:auto 1fr; }
.mscase__box--dual .dual{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mscase__box--dual h3{ margin:0 0 8px; font-size:16px; color:#374151; }

/* لیست‌ها */
.mscase__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; color:#374151; }
.mscase__list li{ display:flex; align-items:flex-start; gap:8px; }
.mscase__list i{ margin-top:3px; color:#9ca3af; }    /* مسائل */
.mscase__list.is-ok i{ color:#10b981; }             /* راه‌حل */

/* کارت ۲: نظر */
.mscase__box--quote{ display:flex; flex-direction:column; }
.mscase__box--quote blockquote{ margin:0 0 12px; font-size:15px; line-height:1.9; color:#111827; }
.mscase__person{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.mscase__person .avatar{ width:44px; height:44px; border-radius:999px; object-fit:cover; box-shadow:0 2px 8px rgba(17,24,39,.18); }
.mscase__person .name{ font-weight:700; }
.mscase__stars{ color:#f59e0b; font-size:16px; }

/* کارت ۳: CTA – وسط‌چین و اندازهٔ متن */
.mscase__box--cta{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.mscase__box--cta h3{ margin:0 0 8px; }
.mscase__box--cta .lead{ color:#6b7280; }
.mscase__box--cta .btn{ margin-top:auto; align-self:center; } /* وسطِ کارت و به اندازهٔ متن */

/* دکمه CTA جذاب */
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;border:0;cursor:pointer;text-decoration:none!important}
.btn-cta{ background:linear-gradient(90deg,#06b6d4,#3b82f6,#8b5cf6); color:#fff; box-shadow:0 10px 22px rgba(59,130,246,.22) }
.btn-cta:hover{ filter:saturate(110%) }

/* ریسپانسیو */
@media (max-width:1200px){
  .mscase__row{ grid-template-columns: 1.3fr 1fr 1fr; }
}
@media (max-width:980px){
  .mscase__row{ grid-template-columns:1fr; }
  .mscase__box--dual .dual{ grid-template-columns:1fr; }
}

/* مودال ویدئو (z-index لایه‌بندی‌شده؛ کلوز بالاتر از ویدئو) */
/* ===== Modal (always above sticky header, close at top-right of video) ===== */
.mscase__modal[hidden]{ display:none }
.mscase__modal{
  position:fixed; inset:0;
  z-index:2147483000;              /* بالاتر از هر هدر استیکی */
}
.mscase__modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
}
.mscase__modal__dlg{
  position:absolute; inset:0;
  display:grid; place-items:center; padding:20px;
}
.mscase__modal__body{
  position:relative;               /* مرجع جایگذاری دکمه‌ی بستن */
  width:min(1120px,92vw);
  aspect-ratio:16/9;
  background:#000; border-radius:12px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
  z-index:1;                       /* زیرِ دکمه بستن */
}
.mscase__modal__body iframe,
.mscase__modal__body video{ width:100%; height:100%; display:block }

/* دکمه بستن که داخل خودِ body تزریق می‌شود */
.mscase__modal__body > .mscase__modal__close{
  position:absolute; top:12px; right:12px; /* بالا-راستِ ویدئو */
  width:42px; height:42px; border:none; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#111827;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  z-index:3; cursor:pointer;
}

/* در صورتی که نسخه‌ی قدیمیِ دکمه هنوز در DOM باشد، پنهانش کن */
.mscase__modal__dlg > .mscase__modal__close{ display:none }


/* دارک‌مود */
/* فاصلهٔ مطمئن بعد از کل ماژول (از ماژول بعدی جدا شود) */
.ms-case{
  /* قبلی‌ها را نگه دار */
  margin-bottom: 28px;          /* ← فاصلهٔ خارجی بعد از ماژول */
}

/* ردیف سه‌کارتی: گپ عمودی/افقی و فاصلهٔ پایین در دسکتاپ */
.mscase__row{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr; /* کارت اول عریض‌تر */
  column-gap:12px;                      /* گپ افقی */
  row-gap:12px;                         /* گپ عمودی (اگر ارتفاع‌ها متفاوت شد) */
  align-items:stretch;                  
  margin-bottom:40px;                   /* ← فاصلهٔ مطمئن تا ماژول بعدی در دسکتاپ */
}
.mscase__row > .card{
  height:100%;
  margin:0 !important;
  overflow:hidden;
}

/* موبایل: کارت‌ها زیر هم + گپ بیشتر بین‌شان */
@media (max-width:980px){
  .mscase__row{
    grid-template-columns:1fr;  /* زیر هم */
    row-gap:16px;               /* ← گپ بین کارت‌ها در موبایل */
    margin-bottom:32px;         /* کمی فاصلهٔ پایین هم در موبایل */
  }
  .mscase__row > .card{ height:auto; }
  .mscase__box--dual .dual{ grid-template-columns:1fr; } /* ستون‌های داخل کارت اول زیر هم */
}