/* =========================================================================
   in-seo — «محتوای سئو با متن بازشونده» · طرح 12-seo-content.html
   وابسته به: de-base.css   ·   تعامل: in-seo.js
   بدون جاوااسکریپت: کل متن باز است و دکمه پنهان می‌شود (هیچ محتوایی گم نمی‌شود).
   ========================================================================= */

.inse { position: relative; overflow: hidden; background: var(--inse-bg, var(--zn-bg0)); border-bottom: 2px solid rgba(var(--zn-line), .14); }
.inse-ghost { bottom: -26px; left: -12px; font-size: var(--inse-ghost-fs, 150px); letter-spacing: 4px; --ghost-stroke: 1.5px; }
.inse-wrap { position: relative; z-index: 1; max-width: var(--inse-mw, 960px); margin: 0 auto; }

.inse-h2 {
  margin: 16px 0 24px; font-size: var(--inse-h-fs, 32px); font-weight: 900; line-height: 1.55;
  background: linear-gradient(110deg, var(--inse-h1, var(--zn-t1)) 35%, var(--inse-h2c, var(--zn-accent-head)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* توضیحات زیر عنوان — به‌صورت پیش‌فرض خالی است، ولی اگر پر شود باید استایل بگیرد. */
.inse-lead { margin: 0 0 20px; font-size: 14.5px; line-height: 2.1; color: var(--zn-t5); font-weight: 500; max-width: var(--inse-lead-w, 620px); }
.inse-lead p { margin: 0 0 12px; color: inherit; font: inherit; }
.inse-lead p:last-child { margin-bottom: 0; }

.inse-card {
  position: relative; overflow: hidden;
  background: var(--inse-card-bg, rgba(255, 252, 246, .62));
  border: 2px solid var(--inse-card-bd, rgba(var(--zn-line), .18));
  border-radius: var(--inse-card-r, 24px);
  padding: var(--inse-card-p, 30px 34px 26px);
}

.inse-body { font-size: var(--inse-fs, 14.5px); color: var(--inse-c, var(--zn-t3)); line-height: var(--inse-lh, 2.4); font-weight: 500; }
.inse-body p { margin: 0 0 18px; color: inherit; font: inherit; }
.inse-body p:last-child { margin-bottom: 0; }
.inse-body h2, .inse-body h3, .inse-body h4 { color: var(--zn-t1); line-height: 1.7; margin: 22px 0 10px; }
.inse-body ul, .inse-body ol { margin: 0 0 18px; padding-right: 22px; }
.inse-body li { margin-bottom: 8px; }
.de-scope .inse-body a { font-weight: 700; }

/* بخش بازشونده — تا وقتی JS نیامده باز است؛ کلاسِ باز/بسته روی خودِ کارت است. */
.inse-more { display: block; }
.de-scope.inse-js .inse-more { display: none; }
.de-scope.inse-js .inse-card.is-open .inse-more { display: block; }

/* محوشدگی پایین متن — فقط در حالت بسته و فقط با JS */
.inse-fade {
  display: none; position: absolute; bottom: var(--inse-fade-b, 62px); left: 0; right: 0;
  height: var(--inse-fade-h, 92px); pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 245, 238, 0), var(--inse-fade-c, var(--zn-bg0)));
}
.de-scope.inse-js .inse-fade { display: block; }
.de-scope.inse-js .inse-card.is-open .inse-fade { display: none; }

.inse-actions { display: flex; justify-content: center; margin-top: 22px; }
.inse-btn {
  display: none; align-items: center; gap: 9px; cursor: pointer; font: inherit;
  background: var(--inse-btn-bg, rgba(255, 255, 255, .5));
  border: 2px solid var(--inse-btn-bd, rgba(225, 29, 72, .36));
  color: var(--inse-btn-fg, var(--zn-accent-soft));
  font-size: 13.5px; font-weight: 900;
  padding: var(--inse-btn-p, 13px 28px); border-radius: var(--inse-btn-r, 999px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.de-scope.inse-js .inse-btn { display: inline-flex; }
.inse-btn:hover { transform: translateY(-2px); border-color: var(--inse-btn-bd-h, rgba(225, 29, 72, .55)); }
.inse-btn:focus-visible { outline: 2px solid var(--zn-crim); outline-offset: 2px; }
.inse-btn .arrow { font-size: 15px; transition: transform .2s ease; }
.inse-btn[aria-expanded="true"] .arrow { transform: rotate(180deg); }

@media (max-width: 600px) {
  .inse-card { padding: 22px 20px 20px; }
  .inse-ghost { font-size: 74px; }
}