/**
 * بلوک‌های محتوایی — مشترکِ سایت و ادیتور پنل مدیریت.
 * چون همین فایل در هر دو جا لود می‌شود، پیش‌نمایش داخل ادیتور
 * دقیقاً همان چیزی است که بازدیدکننده روی سایت می‌بیند.
 */

/* ============ بلوک‌های محتوایی (کروسل، گالری، …) ============
   کروسل با scroll-snap کار می‌کند: کشیدن با انگشت و اسکرول بدون هیچ
   جاوااسکریپتی درست است؛ JS فقط فلش‌ها و نقطه‌ها را اضافه می‌کند. */
.blk-carousel { position: relative; margin: 22px 0; border-radius: 16px; overflow: hidden; background: var(--c-soft); }
.blk-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blk-track::-webkit-scrollbar { display: none; }
.blk-slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
.blk-slide img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

.blk-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  color: var(--c-text); font-size: 22px; line-height: 1; display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .15s;
}
.blk-arrow.prev { inset-inline-start: 10px; }
.blk-arrow.next { inset-inline-end: 10px; }
.blk-arrow:hover { border-color: var(--c-primary); color: var(--c-primary); }
.blk-arrow[disabled] { opacity: .35; cursor: default; }

.blk-dots { position: absolute; bottom: 10px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.blk-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: color-mix(in srgb, var(--c-surface) 70%, transparent); transition: .18s;
}
.blk-dot.on { background: var(--c-primary); width: 22px; border-radius: 999px; }

/* گالری + لایت‌باکس */
.blk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 22px 0; }
.blk-cell { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 13px; overflow: hidden; }
.blk-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s ease; }
.blk-cell:hover img { transform: scale(1.05); }
.blk-lightbox {
  position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px;
  background: rgba(10, 10, 14, .88); cursor: zoom-out;
}
.blk-lightbox[hidden] { display: none; }
.blk-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 12px; display: block; }
.blk-lb-x {
  position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; cursor: pointer; line-height: 1;
}

/* باکس توجه */
.blk-callout {
  display: flex; gap: 11px; align-items: flex-start; margin: 20px 0;
  border-radius: 14px; padding: 14px 16px; font-size: 14.5px; line-height: 2;
  border: 1px solid var(--c-border); background: var(--c-soft);
}
.blk-callout .blk-ci { flex: 0 0 auto; margin-top: 3px; }
.blk-callout > div > :first-child { margin-top: 0; }
.blk-callout > div > :last-child { margin-bottom: 0; }
.blk-callout.is-info    { background: #eef4ff; border-color: #cfdfff; color: #24406e; }
.blk-callout.is-info    .blk-ci { color: #2f5aa8; }
.blk-callout.is-warn    { background: #fff8e6; border-color: #e8cf95; color: #7a5c14; }
.blk-callout.is-warn    .blk-ci { color: #b3891f; }
.blk-callout.is-success { background: #eaf7f1; border-color: #b9e2d0; color: #235e47; }
.blk-callout.is-success .blk-ci { color: #2c7a5c; }

/* پرسش‌های متداول */
.blk-faq { display: grid; gap: 8px; margin: 22px 0; }
.blk-faq-i { border: 1px solid var(--c-border); border-radius: 13px; background: var(--c-surface); overflow: hidden; }
.blk-faq-i > summary {
  cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 14.5px; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.blk-faq-i > summary::-webkit-details-marker { display: none; }
.blk-faq-i > summary::before { content: '+'; color: var(--c-primary); font-weight: 800; font-size: 18px; }
.blk-faq-i[open] > summary::before { content: '−'; }
.blk-faq-i > summary:hover { background: var(--c-soft); }
.blk-faq-i > div { padding: 0 16px 14px 40px; color: var(--c-muted); font-size: 14px; line-height: 2.1; }

.blk-btn-wrap { margin: 20px 0; }

@media (max-width: 560px) {
  .blk-slide img { aspect-ratio: 4 / 3; }
  .blk-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .blk-arrow { width: 32px; height: 32px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .blk-track { scroll-behavior: auto; }
  .blk-cell img { transition: none; }
}

/* ---------- دکمه: چینش و رنگ دلخواه ---------- */
.blk-btn-wrap.is-center { text-align: center; }
.blk-btn-wrap.is-end    { text-align: end; }

/* ---------- مراحل کار ---------- */
.blk-steps { list-style: none; counter-reset: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.blk-steps li { display: flex; gap: 12px; align-items: flex-start; }
.blk-step-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-primary); color: #fff; font-weight: 800; font-size: 14px;
}
.blk-steps strong { display: block; font-size: 15px; margin-bottom: 3px; }
.blk-steps p { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 2; }

/* ---------- جدول مقایسه ---------- */
.blk-compare { margin: 22px 0; overflow-x: auto; border: 1px solid var(--c-border); border-radius: 14px; }
.blk-compare table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 340px; }
.blk-compare th, .blk-compare td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--c-border); }
.blk-compare thead th { background: var(--c-soft); font-weight: 800; font-size: 13.5px; }
.blk-compare tbody tr:last-child td { border-bottom: 0; }
.blk-compare tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-soft) 45%, transparent); }

/* ---------- نقل‌قول ---------- */
.blk-quote {
  margin: 22px 0; padding: 16px 18px; border-radius: 14px;
  background: var(--c-soft); border-inline-start: 4px solid var(--c-primary);
}
.blk-quote p { margin: 0; font-size: 15.5px; line-height: 2.1; font-weight: 500; }
.blk-quote cite { display: block; margin-top: 8px; font-size: 13px; color: var(--c-muted); font-style: normal; }
.blk-quote cite::before { content: '— '; }

/* ---------- ویدیوی توکار ---------- */
.blk-video { margin: 22px 0; }
.blk-video-fr { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: var(--c-soft); }
.blk-video-fr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk-video figcaption { margin-top: 8px; font-size: 13px; color: var(--c-muted); text-align: center; }