/* ==========================================================================
   مقالات فنی — چیدمان دوستونه و ستون کناری
   نسخه ۳.۴.۵۳

   فقط در صفحه‌های مقاله بارگذاری می‌شود (functions.php ←
   ikm_is_blog_context). هیچ قاعده‌ای اینجا به صفحه محصول، فروشگاه یا
   سبد خرید نمی‌رسد.

   شکستگی‌ها:
     زیر ۹۰۰      یک ستون — ستون کناری زیر مقاله، فهرست مطالب بالای متن
     ۹۰۰ تا ۱۰۹۹  دو ستون، کناری ۲۶۰ پیکسل
     ۱۱۰۰ به بالا  دو ستون، کناری ۳۰۰ پیکسل، گروه پایینی چسبان

   در RTL ستون اول سمت راست است: متن راست، ستون کناری چپ.
   ========================================================================== */

.ikm-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.ikm-blog-layout__main { min-width: 0; }

/* کارت‌های /blog/ کنار ستون کناری: حداقل ۲۵۰ به‌جای ۲۸۰ تا در تبلت
   دو ستون و در دسکتاپ سه ستون شوند، نه یک ستون پهن. */
.ikm-blog-layout .ikm-blog__grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ستون متن تمام عرض ستون اصلی را بگیرد — سقف ۷۶۰ و وسط‌چین قبلی برای
   حالت تک‌ستونه بود. عرض ستون اصلی خودش حالا حدود ۸۲۰ است. */
.ikm-blog-layout .ikm-post {
  max-width: none;
  margin: 0 0 44px;
}

@media (min-width: 900px) {
  .ikm-blog-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: stretch; /* ستون کناری تمام‌قد باشد تا جعبه چسبان جا داشته باشد */
  }
}

@media (min-width: 1100px) {
  .ikm-blog-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
}


/* ---------- ستون کناری ---------- */

.ikm-blog-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding-bottom: 44px;
}

.ikm-side-box {
  background: var(--ikm-bg-2);
  border: 1px solid var(--ikm-line-c);
  border-radius: var(--ikm-r-box);
  padding: 16px 18px;
}

.ikm-blog-side .ikm-side-box__title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ikm-tx);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ikm-line-c);
  line-height: 1.5;
}

.ikm-blog-side__sticky {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* چسبان فقط در دسکتاپ پهن. ارتفاع هدر چسبان را blog.js در
   --ikm-stick-top می‌گذارد؛ عدد پیش‌فرض برای وقتی است که اسکریپت
   هنوز اجرا نشده. */
@media (min-width: 1100px) {
  .ikm-blog-side__sticky {
    position: sticky;
    top: var(--ikm-stick-top, 170px);
  }
}


/* ---------- دسته‌بندی‌ها ---------- */

.ikm-side-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ikm-blog-side .ikm-side-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ikm-r-card);
  color: var(--ikm-tx);
  font-size: .86rem;
  text-decoration: none;
  transition: .15s;
}
.ikm-blog-side .ikm-side-cats a:hover { background: var(--ikm-bg-3); color: var(--ikm-accent); }

.ikm-side-cats b {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--ikm-bg-3);
  color: var(--ikm-tx-mute);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.ikm-blog-side .ikm-side-cats a.is-on { background: var(--ikm-bg-3); color: var(--ikm-accent); font-weight: 700; }
.ikm-side-cats a.is-on b { background: var(--ikm-accent); color: var(--ikm-accent-ink); }


/* ---------- مقالات اخیر ---------- */

.ikm-side-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ikm-blog-side .ikm-side-post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: var(--ikm-tx);
}

.ikm-side-post__thumb {
  flex: 0 0 88px;
  width: 88px;
  aspect-ratio: 16 / 9;
  border-radius: var(--ikm-r-card);
  border: 1px solid var(--ikm-line-c);
  overflow: hidden;
  background: var(--ikm-bg-3);
}
.ikm-side-post__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ikm-side-post__thumb .ikm-post-art { border-bottom: none; height: 100%; }

.ikm-side-post__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ikm-side-post__txt b {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: .15s;
}
.ikm-blog-side .ikm-side-post:hover b { color: var(--ikm-accent); }
.ikm-side-post__txt time { font-size: .7rem; color: var(--ikm-tx-faint); }


/* ---------- فهرست مطالب ---------- */

.ikm-toc__list {
  list-style: none;
  counter-reset: ikm-toc;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ikm-toc__list li { counter-increment: ikm-toc; margin: 0; }

.ikm-toc .ikm-toc__list a {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--ikm-r-card);
  border-inline-start: 2px solid transparent;
  color: var(--ikm-tx-mute);
  font-size: .82rem;
  line-height: 1.65;
  text-decoration: none;
  transition: .15s;
}
.ikm-toc .ikm-toc__list a::before {
  content: counter(ikm-toc, persian) ".";
  flex: 0 0 auto;
  color: var(--ikm-tx-faint);
  font-weight: 700;
}
.ikm-toc .ikm-toc__list a:hover { background: var(--ikm-bg-3); color: var(--ikm-accent); }
.ikm-toc .ikm-toc__list a.is-on {
  color: var(--ikm-accent);
  border-inline-start-color: var(--ikm-accent);
  background: var(--ikm-bg-3);
  font-weight: 700;
}

/* فهرست کناری اگر مقاله تیتر زیادی داشت، خودش اسکرول بخورد تا جعبه
   تماس زیرش از صفحه بیرون نزند. */
@media (min-width: 1100px) {
  .ikm-toc--side .ikm-toc__list {
    max-height: calc(100vh - var(--ikm-stick-top, 170px) - 330px);
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* نسخه بالای متن — فقط موبایل و تبلت */
.ikm-toc--inline {
  margin: 0 0 24px;
  background: var(--ikm-bg-2);
  border: 1px solid var(--ikm-line-c);
  border-radius: var(--ikm-r-box);
}
.ikm-toc--inline summary {
  padding: 13px 16px;
  font-weight: 800;
  font-size: .92rem;
  color: var(--ikm-tx);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ikm-toc--inline summary::-webkit-details-marker { display: none; }
.ikm-toc--inline summary::after {
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ikm-accent);
}
.ikm-toc--inline[open] summary::after { content: "−"; }
.ikm-toc--inline[open] summary { border-bottom: 1px solid var(--ikm-line-c); }
.ikm-toc--inline .ikm-toc__list { padding: 8px 10px 12px; }

@media (min-width: 900px) {
  .ikm-toc--inline { display: none; }
}
@media (max-width: 899px) {
  .ikm-toc--side { display: none; }
}

/* پرش به تیتر زیر هدر چسبان نرود */
.ikm-post__body h2[id] { scroll-margin-top: var(--ikm-stick-top, 170px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ---------- جعبه «قطعه لازم دارید؟» ---------- */

.ikm-blog-side .ikm-side-cta {
  border-color: var(--ikm-accent-dim);
  border-top: 3px solid var(--ikm-accent);
}
.ikm-side-cta p {
  font-size: .82rem;
  line-height: 1.8;
  color: var(--ikm-tx-mute);
  margin: 0 0 12px;
}

/* ⚠️ رنگ، حاشیه و گردی ورودی و دکمه از woodmart-compat.css می‌آید
   (با !important، برای همه فرم‌های سایت). اینجا فقط اندازه و چیدمان
   تعیین می‌شود تا با جست‌وجوی هدر یکدست بماند و با آن قواعد نجنگد. */
.ikm-side-cta__search {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}
.ikm-blog-side .ikm-side-cta__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  font-size: .82rem;
}
.ikm-blog-side .ikm-side-cta__search button {
  flex: 0 0 auto;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  font-size: .8rem;
  cursor: pointer;
}

.ikm-blog-side .ikm-side-cta .ikm-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  font-size: .85rem;
}
.ikm-blog-side .ikm-side-cta .ikm-btn + .ikm-btn { margin-top: 8px; }


/* ---------- یک‌ستونه: ستون کناری زیر محتوا ---------- */

@media (max-width: 899px) {
  /* جعبه تماس اول بیاید؛ در موبایل مهم‌ترین چیز همین است */
  .ikm-blog-side__sticky { order: -1; }

  /* دو جعبه دسته و مقالات کنار هم، اگر جا بود */
  .ikm-blog-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
  .ikm-blog-side__sticky { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ikm-blog-side { grid-template-columns: minmax(0, 1fr); }
  .ikm-side-box { padding: 14px 15px; }
}