/* ==========================================================================
   مطالعات موردی  —  /case-studies/
   شورت‌کد: [hug_case_studies]
   همهٔ قاعده‌ها زیر .hug-scope.hug-case-studies اسکوپ شده‌اند؛ با استایل آسترا تداخل ندارند.
   font-family عمداً تعریف نشده تا فونت از سفارشی‌سازی آسترا ارث برسد.
   ========================================================================== */

/* ┌───────────────────────────────────────────────────────────────────┐
   │ تصاویر — بعد از آپلود در وردپرس، فقط همین آدرس‌ها را عوض کنید.    │
   │ مثال: url("https://hugco.ir/wp-content/uploads/2026/09/x.webp")   │
   └───────────────────────────────────────────────────────────────────┘ */
.hug-scope.hug-case-studies{
  --img-thumb: url("images/thumb.webp");
}

/* ── تنظیمات محلی ───────────────────────────────────────────────────── */
.hug-scope.hug-case-studies{
  /* آفست اسکرول برای هدر چسبانِ وردپرس — با ارتفاع هدر خودتان تنظیم کنید */
  --hug-anchor-offset: 110px;
  /* علامتِ جهت: جابه‌جایی‌های افقی در چپ‌چین آینه می‌شوند */
  --hug-dx: 1;
}
.hug-scope.hug-case-studies.hug-ltr{ --hug-dx: -1; }
.hug-scope.hug-case-studies [id]{scroll-margin-top:var(--hug-anchor-offset)}

/* اگر برگه را «تمام‌عرض / Stretched» نکردید و نوارهای رنگی بریده می‌شوند،
   کامنت سه خط زیر را بردارید. (اول تنظیم آسترا را امتحان کنید؛ بهتر است.)
.hug-scope.hug-case-studies{
  margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw;
} */

.hug-scope.hug-case-studies{--accent:#F59E1B; --accent-hi:#FFB84D; --accent-soft:#FEF6E9; --accent-ink:#B45309;
  --ink:#2E3D5C; --ink-soft:#41527A; --ink-deep:#22304A; --ink-2:#3A4A6B; --ink-3:#243150;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EEF1F5; --line:#E2E6EC; --line-2:#D6DCE5;
  --text:#22304A; --muted:#6B7280; --muted-2:#5F6672;
  --on-dark:#F3F6FA; --on-dark-2:#C2C9D2; --on-dark-3:#A8B1BC;
  --success-bg:#EAF6EC; --success-ink:#15803D;
  --warning-bg:#FDF3E6; --warning-ink:#92400E;
  --danger-bg:#FDECEC; --danger-ink:#991B1B;
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --focus:0 0 0 3px rgba(245,158,11,.45);
  --dur-fast:160ms; --dur-base:220ms; --dur-mod:360ms;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --maxw:1280px; --pad-x:80px; --measure:64ch;}
@media (max-width:768px){
.hug-scope.hug-case-studies{--pad-x:20px;}
}
.hug-scope.hug-case-studies, .hug-scope.hug-case-studies *{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
.hug-scope.hug-case-studies{background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased}
.hug-scope.hug-case-studies .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.hug-scope.hug-case-studies section{padding-block:70px}
@media (max-width:768px){
.hug-scope.hug-case-studies section{padding-block:48px}
}
.hug-scope.hug-case-studies h1, .hug-scope.hug-case-studies h2, .hug-scope.hug-case-studies h3{line-height:1.15; color:var(--ink); font-weight:700}
.hug-scope.hug-case-studies h2{font-size:clamp(23px,2.8vw,30px); font-weight:600}
.hug-scope.hug-case-studies h3{font-size:18px; font-weight:600}
.hug-scope.hug-case-studies a{color:inherit; text-decoration:none}
.hug-scope.hug-case-studies .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding-inline:22px; border-radius:var(--r-btn);
  font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast)}
.hug-scope.hug-case-studies .btn:focus-visible{outline:none; box-shadow:var(--focus)}
.hug-scope.hug-case-studies .btn-accent{background:var(--accent); color:var(--ink-deep); font-weight:600}
.hug-scope.hug-case-studies .btn-accent:hover{transform:translateY(-1px); background:var(--accent-hi)}
.hug-scope.hug-case-studies .btn-ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
.hug-scope.hug-case-studies .btn-ghost:hover{background:var(--surface-2)}
.hug-scope.hug-case-studies .rv{opacity:0; transform:translateY(12px); transition:opacity var(--dur-mod) var(--ease-out), transform var(--dur-mod) var(--ease-out)}
.hug-scope.hug-case-studies .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
.hug-scope.hug-case-studies .rv{opacity:1; transform:none; transition:none}
html{scroll-behavior:auto}
}
.hug-scope.hug-case-studies :where(a,button,input,select,[tabindex]):focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-btn)}
.hug-scope.hug-case-studies[id], .hug-scope.hug-case-studies [id]{scroll-margin-top:96px}
.hug-scope.hug-case-studies .crumb{font-size:13px; color:var(--muted-2); padding-top:18px}
.hug-scope.hug-case-studies .crumb span{margin-inline:6px; color:var(--line-2)}
.hug-scope.hug-case-studies .bnote{font-size:13px; color:var(--accent-ink); background:var(--accent-soft); border:1px solid #F3DFBE;
  border-radius:var(--r-btn); padding:13px 17px; line-height:1.85; margin-top:26px}
.hug-scope.hug-case-studies .cs-top{background:var(--surface); border-bottom:1px solid var(--line); padding-bottom:36px}
.hug-scope.hug-case-studies .cs-top h1{font-size:clamp(26px,3.4vw,40px); line-height:1.2; margin-bottom:14px}
.hug-scope.hug-case-studies .cs-top .lede{color:var(--ink-soft); font-size:17px; line-height:1.9; max-width:52ch}
.hug-scope.hug-case-studies .endband{background:var(--ink); color:var(--on-dark); padding-block:66px}
.hug-scope.hug-case-studies .endband h2{color:#fff}
.hug-scope.hug-case-studies .endband p{color:var(--on-dark-2); font-size:16px; line-height:1.9; max-width:58ch; margin-top:12px}
.hug-scope.hug-case-studies .endband .row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hug-scope.hug-case-studies .btn-onDark{background:transparent; border-color:rgba(255,255,255,.3); color:#fff}
.hug-scope.hug-case-studies .btn-onDark:hover{background:rgba(255,255,255,.09)}
.hug-scope.hug-case-studies .bnote{font-size:13px; color:var(--accent-ink); background:var(--accent-soft); border:1px solid #F3DFBE;
  border-radius:var(--r-btn); padding:13px 17px; line-height:1.85; margin-top:26px}
.hug-scope.hug-case-studies .cs-list{display:grid; gap:18px; margin-top:26px}
.hug-scope.hug-case-studies .cs-item{display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:22px 24px;
  transition:border-color .16s, transform .16s var(--ease-out)}
.hug-scope.hug-case-studies .cs-item:hover{border-color:var(--accent); transform:translateY(-2px)}
@media (max-width:640px){
.hug-scope.hug-case-studies .cs-item{grid-template-columns:minmax(0,1fr); gap:14px}
}
.hug-scope.hug-case-studies .cs-item .thumb{aspect-ratio:4/3; border-radius:var(--r-btn); background:var(--surface-2); border:1px solid var(--line);
  background-size:74%; background-repeat:no-repeat; background-position:center}
.hug-scope.hug-case-studies .cs-item h3{font-size:19px; margin-bottom:7px}
.hug-scope.hug-case-studies .cs-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.85; max-width:62ch}
.hug-scope.hug-case-studies .cs-item .mini{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px}
.hug-scope.hug-case-studies .cs-item .mini span{font-size:13px; color:var(--muted-2)}
.hug-scope.hug-case-studies .cs-item .mini b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.hug-scope.hug-case-studies .cs-soon{border:1px dashed var(--line-2); border-radius:var(--r-card); background:var(--surface); padding:30px 28px; text-align:center; margin-top:18px}
.hug-scope.hug-case-studies .cs-soon b{display:block; font-size:18px; color:var(--ink); font-weight:600; margin-bottom:8px}
.hug-scope.hug-case-studies .cs-soon p{font-size:15px; color:var(--ink-soft); line-height:1.9; max-width:56ch; margin:0 auto 18px}