/* ===========================================================================
   Long-form editorial (/blog/{slug}).

   Deliberately NOT .doc-prose: that treatment belongs to /terms, /faq and the
   category pages, which are short reference documents meant to be scanned.
   An article is read start to finish, so it needs a narrower measure, a
   larger body size and a real heading scale — the opposite trade-off.

   Design system rules still apply: sizes in multiples of 4, radii 8/12 (pill
   for chips), letter-spacing:0, and no motion on hover — colour only.
   =========================================================================== */

/* A ~68-character Persian line at 16px. Wider than this and the eye loses
   its place on the return sweep; the shared --content-max (760px) is tuned
   for 14px document text, not 16px prose. */
.article{ max-width:680px; margin-inline:auto; }

/* ---------- Header ----------
   No dark hero card here. The site's hero exists to introduce a *section*;
   on an article it would push the first sentence below the fold and, with no
   cover image, render as an empty dark rectangle. */
.article-head{ padding:8px 0 24px; border-bottom:1px solid var(--line); margin-bottom:32px; }
.article-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--muted); margin-bottom:16px;
}
.article-meta .dot{ width:3px; height:3px; border-radius:var(--r-pill); background:var(--muted-2); }
.article-head h1{
  font-size:28px; font-weight:800; line-height:1.45; color:var(--ink);
  margin:0; letter-spacing:0;
}
@media (min-width:768px){ .article-head h1{ font-size:36px; line-height:1.4; } }
.article-head .lead{
  font-size:17px; line-height:1.9; color:var(--muted);
  margin:16px 0 0; font-weight:500;
}

.article-cover{
  aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-2); margin-bottom:32px;
}
.article-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Table of contents ----------
   Only rendered for posts with 3+ sections (see blog-post.blade.php); a box
   listing two links is furniture, not navigation. */
.article-toc{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 24px; margin-bottom:32px;
}
.article-toc h2{
  font-size:12px; font-weight:800; color:var(--muted);
  margin:0 0 12px; letter-spacing:0;
}
.article-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.article-toc li{ counter-increment:toc; margin-bottom:8px; }
.article-toc li:last-child{ margin-bottom:0; }
.article-toc a{
  display:flex; gap:8px; font-size:14px; line-height:1.7;
  color:var(--ink-2); font-weight:500;
}
.article-toc a::before{
  content:counter(toc, persian); color:var(--accent-deep); font-weight:800;
  flex-shrink:0; font-variant-numeric:tabular-nums;
}
.article-toc a:hover{ color:var(--accent-deep); }

/* ---------- Prose ---------- */
.article-prose{ font-size:16px; line-height:2; color:var(--ink-2); }

/* The gap between paragraphs must beat the gap between lines, or paragraphs
   read as one block. Leading here is 16px (32px line-height less the 16px
   glyph), so 24px is the first value that reads as a break. */
.article-prose p{ margin:0 0 24px; }
.article-prose > p:first-child{ font-size:17px; color:var(--ink); }
.article-prose > *:last-child{ margin-bottom:0; }

/* 24/16 = 1.5. The old 18/14 gave a ratio of 1.28, which lost to the bold
   run-in lead-ins inside paragraphs — those sit at the start of a line and
   so read as headings unless the real heading clearly outranks them. */
.article-prose h2{
  font-size:24px; font-weight:800; line-height:1.5; color:var(--ink);
  margin:48px 0 16px; letter-spacing:0; scroll-margin-top:88px;
}
.article-prose h2:first-child{ margin-top:0; }
/* h1 shrinks to 28px on small screens, so h2 has to come down with it or the
   two read as the same level. */
@media (max-width:767px){
  .article-prose h2{ font-size:20px; margin-top:40px; }
  .article-prose h3{ font-size:17px; }
}
.article-prose h3{
  font-size:18px; font-weight:800; line-height:1.6; color:var(--ink);
  margin:32px 0 12px; letter-spacing:0;
}

.article-prose strong{ font-weight:700; color:var(--ink); }
.article-prose em{ font-style:normal; color:var(--ink); font-weight:500; }

.article-prose a{
  color:var(--accent-deep); font-weight:700;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--accent-soft); text-decoration-thickness:2px;
}
.article-prose a:hover{ text-decoration-color:var(--accent); }

/* ---------- Lists ---------- */
.article-prose ul{ list-style:none; padding:0; margin:0 0 24px; }
.article-prose ul li{
  position:relative; padding-inline-start:24px; margin-bottom:12px;
  line-height:1.95;
}
.article-prose ul li::before{
  content:""; position:absolute; inset-inline-start:8px; top:12px;
  width:6px; height:6px; border-radius:var(--r-pill); background:var(--accent);
}
.article-prose ol{ padding-inline-start:24px; margin:0 0 24px; }
.article-prose ol li{ margin-bottom:12px; line-height:1.95; }
.article-prose li:last-child{ margin-bottom:0; }
.article-prose li > strong:first-child{ color:var(--ink); }

.article-prose blockquote{
  margin:32px 0; padding:4px 20px;
  border-inline-start:3px solid var(--accent); color:var(--ink);
}
.article-prose blockquote p:last-child{ margin-bottom:0; }

.article-prose code{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:2px 6px; font-size:14px;
}
.article-prose img{ max-width:100%; height:auto; border-radius:var(--r-md); margin:32px 0; }
.article-prose hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }

/* A link alone on its own line is the author's call to action. Markdown has
   no button syntax, so this pattern is the agreed convention — see
   docs/CONTENT-RULES.md. The .cta class is applied server-side, because CSS
   cannot tell a lone link from one surrounded by text. */
.article-prose p.cta{ margin-top:32px; }
.article-prose p.cta > a{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; text-decoration:none;
  font-size:15px; font-weight:800; padding:12px 24px;
  border-radius:var(--r-pill);
}
.article-prose p.cta > a:hover{ background:var(--accent-deep); }

/* ---------- Related ---------- */
.article-related{ margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.article-related > h2{ font-size:16px; font-weight:800; color:var(--ink); margin:0 0 16px; }

/* ---------- Index: featured card ----------
   The newest post gets the full width. A three-column grid holding a single
   card reads as a layout that failed to load. */
.post-feature{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); margin-bottom:24px; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.post-feature .body{ padding:24px; }
@media (min-width:768px){ .post-feature .body{ padding:32px 40px; } }
.post-feature:hover{ border-color:var(--line-strong); }
.post-feature .cover{ aspect-ratio:16/9; background:var(--surface-2); }
.post-feature .cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Side by side once there is room, so the cover does not push the headline
   below the fold on desktop. */
@media (min-width:768px){
  .post-feature.has-cover{ display:grid; grid-template-columns:5fr 6fr; align-items:center; }
  .post-feature.has-cover .cover{ aspect-ratio:4/3; height:100%; }
}

/* Coverless posts keep the card shape without pretending to have a photo. */
.post-nocover{
  width:100%; height:100%;
  background:
    radial-gradient(circle at 70% 25%, rgba(31,184,122,.22), transparent 60%),
    linear-gradient(135deg, var(--ink), #2E3133);
}
.post-feature .meta{ font-size:12px; color:var(--muted); margin-bottom:12px; }
.post-feature h2{
  font-size:22px; font-weight:800; line-height:1.5; color:var(--ink); margin:0 0 12px;
}
@media (min-width:768px){ .post-feature h2{ font-size:26px; } }
.post-feature p{
  font-size:15px; line-height:1.95; color:var(--muted); margin:0; max-width:620px;
}
.post-feature .more{
  display:inline-block; margin-top:16px;
  font-size:14px; font-weight:800; color:var(--accent-deep);
}