/* ==========================================================================
   DahuaNet — pages/content.css
   بلاگ (فهرست، مطلب، دیدگاه‌ها)، برگه‌های ثابت، پرسش‌های متداول و تماس با ما.
   ========================================================================== */

/* ---------- سربرگ مجله ---------- */
.mag-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 5vw, 56px) clamp(22px, 3vw, 34px);
  background: var(--grad-night);
  color: var(--on-dark-muted);
}
.mag-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  inset-inline-start: -160px;
  top: -260px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 30px, rgba(121, 166, 235, .09) 30px 31px);
}
.mag-head .crumbs, .mag-head .crumbs a { color: var(--on-dark-muted); }
.mag-head .crumbs .icon { color: var(--slate-300); }
.mag-head h1 { color: #fff; font-size: var(--fs-3xl); }
.mag-head p { max-width: 62ch; }
.mag-head__inner { display: grid; gap: 14px; }
.mag-head .search-pill { max-width: 520px; background: rgba(255, 255, 255, .08); }
.mag-head .search-pill input { color: #fff; }
.mag-head .search-pill input::placeholder { color: var(--slate-300); }
.mag-head .search-pill:focus-within { background: rgba(255, 255, 255, .12); }
.mag-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.mag-cats .chip { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: var(--on-dark); }
.mag-cats .chip:hover { background: rgba(255, 255, 255, .12); }
.mag-cats .chip.is-active { border-color: transparent; background: #fff; color: var(--navy); }

/* ---------- فهرست مطالب ---------- */
.blog { display: grid; gap: 28px; padding-top: 32px; }
.blog__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.blog__count { color: var(--fg-muted); font-size: var(--fs-sm); }
.post-feature {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  transition: box-shadow var(--dur-2);
}
@media (min-width: 861px) { .post-feature { grid-template-columns: 1.25fr 1fr; } }
.post-feature:hover { box-shadow: var(--sh-2); }
.post-feature__media { display: block; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--grad-media); }
.post-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-feature:hover .post-feature__media img { transform: scale(1.04); }
.post-feature__media .post-card__placeholder .icon { width: 96px; height: 96px; }
.post-feature__body { display: grid; align-content: center; gap: 12px; padding: clamp(20px, 3vw, 36px); }
.post-feature__title { font-size: var(--fs-2xl); line-height: 1.6; }
.post-feature__title a::after { content: ""; position: absolute; inset: 0; }
.post-feature__title a:hover { color: var(--primary); }
.post-feature__excerpt { color: var(--fg-muted); line-height: 2; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--fg-subtle); font-size: var(--fs-xs); }
.post-meta span, .post-meta time { display: inline-flex; align-items: center; gap: 6px; }
.post-meta .icon { width: 15px; height: 15px; }

/* ---------- صفحه‌ی مطلب ---------- */
.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(var(--dn-p, 0));
  transform-origin: right;
  pointer-events: none;
}
.article-head { padding-block: clamp(24px, 4vw, 44px) 0; }
.article-head__inner { display: grid; gap: 14px; max-width: 860px; }
.article-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.55; text-wrap: balance; }
.article-head__excerpt { color: var(--fg-muted); font-size: var(--fs-md); line-height: 2; max-width: 70ch; }
.article-hero {
  margin-top: 24px;
  aspect-ratio: 21 / 9;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--grad-media);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .article-hero { aspect-ratio: 16 / 10; } }

.article {
  display: grid;
  gap: 32px;
  align-items: start;
  padding-top: 32px;
}
@media (min-width: 1025px) {
  .article { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .article__aside { position: sticky; top: calc(var(--header-offset, 80px) + 16px); }
}
.article__main { display: grid; gap: 28px; min-width: 0; }
.article__aside { display: grid; gap: 14px; min-width: 0; }
.article .prose { max-width: 72ch; font-size: 1.04rem; }
.prose h2, .prose h3 { scroll-margin-top: calc(var(--header-offset, 80px) + 20px); }
.prose h2 { position: relative; padding-inline-start: 16px; }
.prose h2::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 4px; border-radius: 4px; background: var(--grad-brand); }
.prose blockquote {
  padding: 16px 20px;
  border-inline-start: 4px solid var(--azure);
  border-radius: var(--r);
  background: var(--bg-tint);
  color: var(--fg);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--bg-soft); }
.prose figure { display: grid; gap: 8px; }
.prose figcaption { color: var(--fg-subtle); font-size: var(--fs-xs); text-align: center; }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--bg-soft); font-family: var(--font-code); font-size: .9em; }
.prose hr { border: 0; border-top: 1px dashed var(--line-strong); }

.toc { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); }
.toc__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--fs-sm); font-weight: 800; }
.toc__title .icon { color: var(--primary); }
.toc ol { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; scrollbar-width: thin; }
.toc a {
  display: block;
  padding: 6px 12px;
  border-inline-start: 2px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 1.8;
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.toc a.is-sub { padding-inline-start: 24px; }
.toc a:hover { color: var(--fg); }
.toc a.is-active { border-color: var(--azure); background: var(--bg-tint); color: var(--primary); font-weight: 700; }
@media (max-width: 1024px) { .toc ol { max-height: none; } }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); }
.share__label { margin-inline-end: auto; color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 700; }
.advice {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-xl);
  background: var(--grad-night);
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
}
.advice strong { color: #fff; font-size: var(--fs-md); }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px dashed var(--line); }
.tags__label { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-subtle); font-size: var(--fs-xs); font-weight: 700; }

.author-box { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-xl); background: var(--bg-soft); }
.author-box__avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--grad-brand); color: #fff; font-weight: 900; }
.author-box p { color: var(--fg-muted); font-size: var(--fs-xs); }

/* ---------- دیدگاه‌ها ---------- */
.comments { display: grid; gap: 18px; }
.comments__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.comments__head h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); }
.comments__head h2 .icon { color: var(--primary); }
.comment-list { display: grid; gap: 12px; }
.comment {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
}
.comment.is-new { border-color: var(--azure); animation: dn-flow-in .5s var(--ease) both; }
.comment__avatar {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bg-tint);
  color: var(--primary);
  font-weight: 900;
}
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.comment__name { font-weight: 800; }
.comment__date { color: var(--fg-subtle); font-size: var(--fs-xs); }
.comment__text { color: var(--fg-muted); line-height: 2; white-space: pre-line; overflow-wrap: anywhere; }
.comment-form { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-soft); }
.comment-form__row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.comment-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.comment-form .textarea { min-height: 120px; }
@keyframes dn-flow-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- برگه‌های ثابت ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  inset-inline-end: -140px;
  top: -200px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 32px, rgba(38, 122, 218, .07) 32px 33px);
}
.page-layout { display: grid; gap: 32px; align-items: start; padding-top: 32px; }
@media (min-width: 1025px) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 48px; }
  .page-layout__aside { position: sticky; top: calc(var(--header-offset, 80px) + 16px); }
}
.page-layout__main { display: grid; gap: 28px; min-width: 0; }
.page-layout__aside { display: grid; gap: 14px; min-width: 0; }
.side-nav { padding: 8px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); }
.side-nav__title { padding: 8px 12px; color: var(--fg-subtle); font-size: var(--fs-xs); font-weight: 800; }
.side-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 700; }
.side-nav a:hover { background: var(--bg-soft); color: var(--fg); }
.side-nav a[aria-current] { background: var(--bg-tint); color: var(--primary); }
.page-image { max-width: 100%; border-radius: var(--r-xl); }
.feature-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); }

/* پرسش‌های متداول: content.js هر h3 و متن پس از آن را به یک بخش بازشونده تبدیل می‌کند */
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.faq-item[open] { border-color: var(--sky-200); box-shadow: var(--sh-1); }
.faq-item > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-weight: 800;
  line-height: 1.8;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--primary);
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 18px 18px; color: var(--fg-muted); line-height: 2; }
.faq-item__body > * + * { margin-top: .8em; }

/* ---------- تماس با ما ---------- */
.contact { display: grid; gap: 28px; align-items: start; padding-top: 32px; }
@media (min-width: 961px) { .contact { grid-template-columns: 380px minmax(0, 1fr); gap: 36px; } }
.contact__cards { display: grid; gap: 12px; }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease);
}
a.contact-card:hover { border-color: var(--sky-200); transform: translateY(-2px); }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--bg-tint); color: var(--primary); }
.contact-card__body { display: grid; gap: 2px; min-width: 0; }
.contact-card__label { color: var(--fg-subtle); font-size: var(--fs-xs); font-weight: 700; }
.contact-card__value { font-weight: 800; line-height: 1.9; overflow-wrap: anywhere; }
.contact-card--hot { background: var(--grad-night); border-color: transparent; color: var(--on-dark-muted); }
.contact-card--hot .contact-card__icon { background: rgba(255, 255, 255, .1); color: #fff; }
.contact-card--hot .contact-card__value { color: #fff; font-size: var(--fs-lg); }
.contact-card--hot .contact-card__label { color: var(--slate-300); }
.contact-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); }
.contact-form h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); }
.contact-form h2 .icon { color: var(--primary); }
.contact-form__row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.contact-form__row > .field { align-content: start; }
.subject-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.subject-chips input { position: absolute; opacity: 0; pointer-events: none; }
.subject-chips input:checked + .chip { border-color: transparent; background: var(--grad-brand); color: #fff; }
.subject-chips input:focus-visible + .chip { outline: 2px solid var(--azure); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none; }
}

/* یک فهرست مطالب در هر اندازه: کنار متن در دسکتاپ، بالای متن در موبایل */
@media (min-width: 1025px) { [data-toc-inline] { display: none; } }
@media (max-width: 1024px) { .article__aside [data-toc] { display: none; } }

.blog-empty { display: grid; justify-items: center; gap: 10px; padding: clamp(36px, 6vw, 64px) 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-xl); text-align: center; }
.blog-empty__icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--bg-tint); color: var(--primary); }
.blog-empty__icon .icon { width: 32px; height: 32px; }
.blog-empty p { color: var(--fg-muted); font-size: var(--fs-sm); }

.toc ol, .comment-list { list-style: none; margin: 0; padding: 0; }