/* ================================
   Utility: Image List (scoped)
   - هاله‌ی پیشرفت فقط روی پیکسل‌های PNG
   - رنگ هاله: قرمز (0%) → سبز (100%)
   - شدت هاله بر اساس درصد
   - برچسب «در حال تکمیل» در مرکز
   - گرید 3/2/1 با فاصله عمودی کافی
   ================================= */

.util-image-list{
  --container: min(1200px, 92vw);
  --ink:#111827; --muted:#6b7280; --accent:#8b5cf6;

  direction: rtl;
  color: var(--ink);
  font-family: "IRANSans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  isolation: isolate;
}

/* ظرف داخلی (عرض کانتینر) */
.util-image-list .uil__container{
  width: var(--container);
  margin-inline: auto;
}

/* کارت والد برای قاب کلی ماژول */
.util-image-list .uil__card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  padding:16px;
  width:100%;
}

/* عنوان/هدینگ */
.util-image-list .uil__head{ margin:6px 0 10px; }
.util-image-list .uil__title{
  margin:0;
  color:var(--accent);
  font-family:"Lalezar","IRANSans",system-ui;
  font-size:clamp(20px,3vw,28px);
}

/* گرید ۳/۲/۱ ستون با فاصله کافی بین ردیف‌ها */
.util-image-list .uil__grid{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1000px){
  .util-image-list .uil__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px){
  .util-image-list .uil__grid{ grid-template-columns: 1fr; }
}

/* آیتم و لینک */
.util-image-list .uil__item{ margin:0; padding:0; }
.util-image-list .uil__link{ display:block; color:inherit; text-decoration:none; }

/* قاب تصویر؛ فقط خود عکس دیده شود */
.util-image-list .uil__thumb{
  position:relative;
  overflow:visible;
  border-radius:12px;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
}

/* خود تصویر: حداکثر 250px */
.util-image-list .uil__thumb img{
  max-height:250px;
  max-width:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}

/* ===== منطق «درصد» برای هاله =====
   --p  : درصد تکمیل (0..100) ← از inline می‌آید
   --veil: پهنای هالهٔ بخش تکمیل‌نشده = 100 - p (٪)
   مشتقات:
   --h  : Hue برای طیف HSL؛ 0=قرمز … 120=سبز
   --a  : Alpha هاله؛ درصد پایین پررنگ‌تر (0.65) و بالا کم‌رنگ‌تر (~0.15)
   --overlay: رنگ/شدت نهایی هاله
*/
.util-image-list .uil__item{
  --h: calc(120 * var(--p) / 100);
  --a: calc(0.15 + (100 - var(--p)) * 0.005);      /* 0.15..0.65 */
  --overlay: hsla(var(--h), 85%, 45%, var(--a));
}

/* هاله: فقط روی پیکسل‌های غیرشفاف PNG و به اندازهٔ --veil از چپ */
.util-image-list .uil__veil{
  position:absolute; inset:0;
  background: var(--overlay);
  pointer-events:none;
  transition: width .25s ease, background-color .25s ease;

  /* استاندارد */
  mask:
    var(--img) center / contain no-repeat,                 /* شکل تصویر */
    linear-gradient(#000 0 0) left / var(--veil,0%) 100% no-repeat; /* پهنا */
  mask-composite: intersect;

  /* وب‌کیت */
  -webkit-mask:
    var(--img) center / contain no-repeat,
    linear-gradient(#000 0 0) left / var(--veil,0%) 100% no-repeat;
  -webkit-mask-composite: source-in;
}

/* اگر بخواهید هاله از راست شروع شود:
.util-image-list .uil__veil{
  mask:
    var(--img) center / contain no-repeat,
    linear-gradient(#000 0 0) right / var(--veil,0%) 100% no-repeat;
  -webkit-mask:
    var(--img) center / contain no-repeat,
    linear-gradient(#000 0 0) right / var(--veil,0%) 100% no-repeat;
}
*/

/* برچسب «در حال تکمیل» در مرکز با پس‌زمینه نیمه‌شفاف و بلور */
.util-image-list .uil__badge{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  padding:8px 14px;
  border-radius:999px;
  color:#1f2937; font-weight:800; font-size:13px;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(130%) blur(6px);
  -webkit-backdrop-filter:saturate(130%) blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  pointer-events:none;
  text-align:center;
}

/* اگر کامل شد (100%) برچسب را مخفی کن */
.util-image-list .uil__item[data-p="100"] .uil__badge{ display:none; }

/* کپشن زیر تصویر */
.util-image-list .uil__caption{
  margin-top:12px;
  text-align:center;
  font-weight:700;
}

/* حالت خالی */
.util-image-list .uil__empty{
  grid-column:1 / -1;
  padding:24px; text-align:center; color:var(--muted);
}

/* دارک مود */