/* ===========================================================================
   blog.css — the public blog (/blog and /blog/<slug>).

   It only styles what is NEW here. The site chrome (header, nav, footer, the
   button family) comes from landing.css, and the design tokens come from
   design.css, both of which the two blog templates link first.

   DIRECTION
   ---------
   Farsi is the default locale, so every rule here is written with LOGICAL
   properties (`margin-inline-start`, `padding-block`, `border-inline-start`).
   A physical `margin-left` would be correct on the English page and wrong on the
   Farsi one — and the Farsi page is the default. `dir` is inherited from <html>,
   so nothing below needs to test for the language.
   =========================================================================== */

.bl-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* ---- nav: mark the current page ---------------------------------------- */
.blog-page .nav-links a.active { color: var(--brand-600); font-weight: 600; }

/* ---- hero --------------------------------------------------------------- */
.bl-hero {
  padding-block: 64px 40px;
  background:
    radial-gradient(1200px 320px at 50% -60%, var(--brand-100), transparent),
    linear-gradient(180deg, #fff, var(--surface));
  border-block-end: 1px solid var(--border);
  text-align: center;
}
.bl-eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.bl-hero h1 {
  margin: 0 auto 14px;
  max-width: 760px;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -.5px;
}
.bl-lede {
  margin: 0 auto;
  max-width: 640px;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
}

.bl-main { padding-block: 48px 72px; }

/* ---- what this blog is for ---------------------------------------------- */
.bl-topics {
  margin-block-end: 40px;
  padding: 28px 30px 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.bl-topics > h2 { margin: 0 0 20px; font-size: 19px; }
.bl-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.bl-topic h3 { margin: 0 0 6px; font-size: 15.5px; }
.bl-topic p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.bl-topic-ico { display: block; font-size: 22px; line-height: 1; margin-block-end: 10px; }

/* ---- the card grid ------------------------------------------------------ */
/* `auto-fill` + a minmax floor (not a fixed 3-column template) so the grid is
   one column on a phone and three on a desktop with no media query — the cards
   are the same width in every language, which keeps the Farsi and English
   indices looking like the same page. */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.bl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bl-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-lg);
}

/* The newest article spans the full row and puts its image BESIDE the copy, so
   the index has one obvious entry point instead of a uniform wall of tiles. */
.bl-card-lead { grid-column: 1 / -1; flex-direction: row; }
.bl-card-lead .bl-card-media { flex: 0 0 44%; max-width: 44%; }
.bl-card-lead .bl-card-body { padding: 30px 32px; }
.bl-card-lead .bl-card-title { font-size: 27px; line-height: 1.25; }
.bl-card-lead .bl-card-ex { -webkit-line-clamp: 4; }

.bl-card-media { display: block; overflow: hidden; background: var(--surface-2); }
.bl-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.bl-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
  min-width: 0;
}
.bl-card-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
}
.bl-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.bl-card-ex {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  /* Two-line clamp on the small cards keeps every tile the same height without
     truncating mid-word: the excerpt is generated per article, not per layout. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-block-start: auto;
  padding-block-start: 10px;
  font-size: 12.5px;
  color: var(--text-3);
}
.bl-card-more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-600);
}
/* The arrow points the way the language reads. Only the ARROW is mirrored —
   `transform: scaleX(-1)` on the whole span would flip the words themselves and
   render "ادامهٔ مطلب" backwards. */
.bl-arrow { display: inline-block; margin-inline-start: 5px; }
[dir="rtl"] .bl-arrow { transform: scaleX(-1); }

/* ---- empty + 404 -------------------------------------------------------- */
.bl-empty {
  padding: 72px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
}
.bl-empty-ico { font-size: 42px; line-height: 1; margin-block-end: 12px; }
.bl-empty h1, .bl-empty h2 { margin: 0 0 8px; font-size: 22px; }
.bl-empty p { margin: 0 auto 18px; max-width: 520px; color: var(--text-2); line-height: 1.7; }
.bl-empty-404 { margin-block-start: 24px; }

/* ---- one article -------------------------------------------------------- */
.bl-crumbs { margin-block-end: 24px; }
.bl-crumbs a {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}
.bl-crumbs a:hover { text-decoration: underline; }

.bl-article {
  padding: 40px 44px 44px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.bl-article-head { text-align: center; margin-block-end: 28px; }
.bl-article-date {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
}
.bl-article-head h1 {
  margin: 0 auto 14px;
  max-width: 780px;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -.4px;
}
.bl-article-lede {
  margin: 0 auto;
  max-width: 680px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.7;
}
.bl-article-byline {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-3);
}
.bl-article-cover {
  margin: 0 0 32px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.bl-article-cover img { display: block; width: 100%; height: auto; }

/* ---- the prose ---------------------------------------------------------- */
/* Sized for READING, not for a dashboard: ~70ch measure, generous leading, and
   a rhythm reset first so the first element does not add a phantom gap under the
   cover image. Everything is logical-property based (see the header note). */
.bl-prose {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
  overflow-wrap: break-word;
}
.bl-prose > :first-child { margin-block-start: 0; }
.bl-prose > :last-child { margin-block-end: 0; }

.bl-prose h2 {
  margin-block: 1.9em .6em;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.3px;
}
.bl-prose h3 {
  margin-block: 1.6em .5em;
  font-size: 20px;
  line-height: 1.35;
}
.bl-prose p { margin-block: 0 1.15em; }
.bl-prose ul, .bl-prose ol { margin-block: 0 1.3em; padding-inline-start: 1.5em; }
.bl-prose li { margin-block-end: .5em; }
.bl-prose li > ul, .bl-prose li > ol { margin-block: .5em 0; }
.bl-prose strong { font-weight: 700; }
.bl-prose a { color: var(--brand-600); text-decoration: underline; }
.bl-prose hr {
  margin-block: 2.2em;
  border: 0;
  border-block-start: 1px solid var(--border);
}
.bl-prose blockquote {
  margin-block: 1.6em;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--brand-300);
  color: var(--text-2);
  font-style: italic;
}
.bl-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: .9em;
  direction: ltr;
  unicode-bidi: embed;
}
/* A pasted/entered code block is LTR even inside the Farsi article — code is
   code, and an RTL block reorders the punctuation of `enc:v1:...`. */
.bl-prose pre {
  margin-block: 0 1.4em;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: #0f172a;
  color: #e2e8f0;
  overflow-x: auto;
  direction: ltr;
  text-align: start;
}
.bl-prose pre code { padding: 0; background: none; color: inherit; font-size: 14px; }
.bl-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
/* Article figures (the "Is It AI?" screenshots). The body sanitiser allows
   `<figure>`/`<figcaption>` but strips `class`, so this is styled by TAG — a
   caption must read as a caption without needing a class the editor cannot save. */
.bl-prose figure { margin: 1.4em 0; }
.bl-prose figure img { display: block; }
.bl-prose figcaption {
  margin-top: .55em; text-align: center; font-size: 13px; line-height: 1.6;
  color: var(--text-3);
}

/* The comparison table shipped with the security article. A table is the honest
   markup for it, and it must stay readable on a phone — hence the horizontal
   scroll rather than a layout that wraps a row into unreadable columns. */
.bl-prose table {
  width: 100%;
  margin-block: 0 1.6em;
  border-collapse: collapse;
  font-size: 15px;
}
.bl-prose th, .bl-prose td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}
.bl-prose thead th { background: var(--surface-2); font-weight: 700; }
@media (max-width: 620px) {
  .bl-prose { display: block; }
  .bl-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

.bl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 72ch;
  margin: 36px auto 0;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border);
}
.bl-tag {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- related ------------------------------------------------------------ */
.bl-related { margin-block-start: 48px; }
.bl-related h2 { margin: 0 0 20px; font-size: 20px; }
.bl-related .bl-card-title { font-size: 16px; }

/* ---- CTA band ----------------------------------------------------------- */
.bl-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-block-start: 52px;
  padding: 32px 36px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.bl-cta h2 { margin: 0 0 6px; font-size: 22px; color: #fff; }
.bl-cta p { margin: 0; color: #e0e7ff; font-size: 15px; line-height: 1.6; }
.bl-cta .btn { background: #fff; color: var(--brand-700); box-shadow: none; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  .blog-page .nav-links { display: none; }
  .bl-hero { padding-block: 44px 32px; }
  .bl-hero h1 { font-size: 29px; }
  .bl-lede { font-size: 15.5px; }
  .bl-card-lead { flex-direction: column; }
  .bl-card-lead .bl-card-media { flex: none; max-width: 100%; }
  .bl-card-lead .bl-card-body { padding: 20px 22px 22px; }
  .bl-card-lead .bl-card-title { font-size: 20px; }
  .bl-article { padding: 26px 20px 30px; }
  .bl-article-head h1 { font-size: 27px; }
  .bl-article-lede { font-size: 16px; }
  .bl-prose { font-size: 16px; line-height: 1.8; }
  .bl-prose h2 { font-size: 22px; }
  .bl-cta { padding: 26px 22px; }
  .bl-cta h2 { font-size: 19px; }
}