/* بلاگ — فهرست و صفحه‌ی مطلب.
   وسط‌چین و ریسپانسیو: شبکه با auto-fill خودش تعداد ستون را با عرض تنظیم می‌کند و
   کل بخش با max-width و margin auto وسط می‌ماند. */

/* ——— نوار جست‌وجو و تگ ——— */
.bl-filters {
  max-width: 900px;
  margin: 0 auto var(--s5);
  display: grid;
  gap: var(--s3);
  justify-items: center;
}

.bl-search { position: relative; width: 100%; max-width: 620px; }
.bl-search > svg {
  position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; opacity: .45; pointer-events: none;
}
.bl-search input {
  width: 100%; box-sizing: border-box;
  height: 48px; padding: 0 52px 0 46px;
  border: 1px solid rgba(15, 76, 69, .3); border-radius: var(--r-full);
  background: #fff; font-family: inherit; font-size: 16px; color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bl-search input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30,74,59,.08);
}
.bl-clear {
  position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.06); color: inherit; font-size: 17px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.bl-clear:hover { background: rgba(0,0,0,.12); }

/* پیشنهاد عنوان‌ها زیر نوار جست‌وجو */
.bl-suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(0,0,0,.13); overflow: hidden;
}
.bl-suggest-item {
  display: block; width: 100%; text-align: start;
  padding: 12px 18px; border: none; background: transparent;
  font-family: inherit; font-size: 14.5px; color: inherit; cursor: pointer;
}
.bl-suggest-item:hover, .bl-suggest-item.on { background: rgba(30,74,59,.07); color: var(--primary); }

/* ——— شبکه‌ی کارت‌ها ——— */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
  max-width: 1180px;
  margin: 0 auto;
}

.bl-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0,0,0,.10);
  border-color: rgba(30,74,59,.28);
}
.bl-card-link { display: block; color: inherit; text-decoration: none; flex: 1; }

.bl-cover { aspect-ratio: 16 / 9; overflow: hidden; background: rgba(30,74,59,.05); }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-cover-empty { display: grid; place-items: center; }
.bl-cover-empty svg { width: 44px; height: 44px; opacity: .18; }

.bl-card-body { padding: var(--s3); }
.bl-card-body time { font-size: 12.5px; opacity: .6; }
.bl-card-body h2 {
  font-size: 18px; line-height: 1.6; margin: 8px 0 10px; font-weight: 700;
  /* عنوان بلند نباید ارتفاع کارت‌ها را نامیزان کند */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card-body p {
  font-size: 14px; line-height: 1.95; opacity: .78; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.bl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s3); flex-wrap: wrap;
}
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-tags span {
  font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(30,74,59,.07); color: var(--primary);
}
.bl-more-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none;
}
.bl-more-link svg { width: 15px; height: 15px; }
.bl-more-link:hover { opacity: .75; }

.bl-empty { text-align: center; opacity: .65; padding: var(--s5) 0; }
.bl-more-wrap { display: flex; justify-content: center; margin-top: var(--s5); }

/* ——— صفحه‌ی مطلب ——— */
/* عرض خوانایی محدود می‌ماند؛ متن تمام‌عرض روی مانیتور بزرگ خوانده نمی‌شود. */
.bl-post { max-width: 760px; margin: 0 auto; }
.bl-post-head { text-align: center; margin-bottom: var(--s5); }
.bl-post-head h1 { line-height: 1.5; margin: var(--s2) 0; }
.bl-post-meta { display: flex; justify-content: center; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 13.5px; opacity: .7; }
.bl-post-cover { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s5); }
.bl-post-cover img { width: 100%; display: block; }

.bl-body { font-size: 16px; line-height: 2.1; }
.bl-body h2 { font-size: 23px; margin: var(--s5) 0 var(--s2); line-height: 1.6; }
.bl-body h3 { font-size: 19px; margin: var(--s4) 0 var(--s2); line-height: 1.6; }
.bl-body h4 { font-size: 17px; margin: var(--s3) 0 var(--s1); }
.bl-body p { margin: 0 0 var(--s3); }
.bl-body ul, .bl-body ol { margin: 0 0 var(--s3); padding-inline-start: var(--s3); }
/* شماره‌ی لیست هم فارسی باشد تا با متن هم‌خوان بماند */
.bl-body ol { list-style-type: persian; }
.bl-body li { margin-bottom: 8px; }
.bl-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--s3) 0; }
.bl-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.bl-body blockquote {
  margin: var(--s3) 0; padding: var(--s2) var(--s3);
  border-inline-start: 3px solid var(--primary);
  background: rgba(30,74,59,.045); border-radius: var(--r-sm);
}
.bl-body code {
  background: rgba(0,0,0,.06); padding: 2px 7px; border-radius: 5px;
  font-size: .9em; font-family: ui-monospace, monospace; direction: ltr; display: inline-block;
}
.bl-body pre {
  background: #16261f; color: #e7f0ea; padding: var(--s3);
  border-radius: var(--r-md); overflow-x: auto; direction: ltr; text-align: left;
}
.bl-body pre code { background: none; padding: 0; color: inherit; }
.bl-body hr { border: none; border-top: 1px solid var(--border); margin: var(--s5) 0; }

/* ویدیوی امبدشده — نسبت ۱۶:۹ حفظ می‌شود */
.bl-embed { position: relative; aspect-ratio: 16 / 9; margin: var(--s4) 0; border-radius: var(--r-md); overflow: hidden; background: #000; }
.bl-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bl-post-foot { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--border); }
.bl-service-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; padding: var(--s3); border-radius: var(--r-lg);
  background: rgba(30,74,59,.05); border: 1px solid rgba(30,74,59,.14);
}
.bl-service-cta p { margin: 0; font-size: 15px; }

/* نمونه‌ی خروجی خدمت، پایان مطلب */
.bl-sample {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s4); align-items: center;
  margin-top: var(--s6); padding: var(--s4); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--border);
}
.bl-sample-thumb { display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.bl-sample-thumb img { display: block; width: 100%; height: auto; }
.bl-sample-txt h2 { font-size: 21px; margin: 0 0 var(--s1); }
.bl-sample-txt p { margin: 0 0 var(--s2); font-size: 15px; line-height: 1.9; }
.bl-sample-actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.bl-sample-meta { display: block; margin-top: var(--s1); color: var(--muted); font-size: 13px; }

@media (max-width: 700px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-card-foot { flex-direction: column; align-items: flex-start; }
  .bl-body { font-size: 15.5px; }
  .bl-sample { grid-template-columns: 1fr; padding: var(--s3); }
  .bl-sample-thumb { max-width: 240px; }
}