/* /blog and /blog/<slug>. These pages ship without the panel script, so everything here has to
   hold up as plain CSS on plain server-rendered markup — same rule as legal.css. The layout
   borrows landing.css for the shell, the CTA band and the FAQ list, and only adds what an
   article and a card grid actually need. */

.blog-index,
.blog-article { width: min(1040px, 100%); margin: 0 auto; }
.blog-article { width: min(880px, 100%); }

/* The «you are here» link style moved to landing.css, which every public page loads — /rules and
   /privacy mark their own link too and never load this file. */

/* Index hero */
.blog-hero { padding: 52px 0 42px; }
.blog-hero h1 { margin: 8px 0 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.42; font-weight: 800; letter-spacing: -.4px; }
.blog-hero .landing-lead { max-width: 660px; font-size: 14px; }
.blog-hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.blog-empty { color: var(--muted); padding: 40px 0; }

/* Cards */
.blog-chip {
  display: inline-block; padding: 5px 12px; border: 1px solid #4b3f85; border-radius: 999px;
  background: #7c5cff14; color: #c3b6ff; font-size: 11.5px; font-weight: 600;
}
/* The card body is a flex column, whose default stretch would pull this pill across the whole
   card. inline-block only shrink-wraps outside a flex container. */
.blog-card .blog-chip { align-self: flex-start; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 22px; margin-top: 26px; }

.blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, #1b1734, #141127); transition: .2s;
}
.blog-card:hover { border-color: #453b78; transform: translateY(-2px); }
.blog-card-media { display: block; aspect-ratio: 3 / 2; background: #100e1f; }
.blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-fallback {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #4a4270; font-size: 42px; font-weight: 800;
}
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.blog-card h2,
.blog-card h3 { margin: 0; font-size: 17px; line-height: 1.7; }
.blog-card h3 { font-size: 15.5px; }
.blog-card a { color: #fff; }
.blog-card a:hover { color: #c3b6ff; }
.blog-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 2.05; }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 4px; color: #6f6a8a; font-size: 12px; }

/* The newest article gets the wide treatment: image beside the copy instead of above it. */
.blog-card.is-featured { flex-direction: row; align-items: stretch; margin-top: 6px; }
.blog-card.is-featured .blog-card-media { flex: 0 0 46%; aspect-ratio: auto; }
.blog-card.is-featured .blog-card-body { justify-content: center; gap: 13px; padding: 34px 34px 36px; }
.blog-card.is-featured h2 { font-size: clamp(20px, 2.7vw, 27px); line-height: 1.55; }
.blog-card.is-featured p { font-size: 13.5px; }

.blog-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; color: #6f6a8a; font-size: 12.5px; }
.blog-band { margin-top: 64px; }
.blog-footer { margin-top: 20px; }

/* Article */
.blog-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 30px 0 0; color: #6f6a8a; font-size: 12px; }
.blog-crumbs a { color: #9f8dff; }
.blog-crumbs a:hover { color: #c0b3ff; }

.article-head { padding: 26px 0 0; }
.article-head h1 { margin: 14px 0 0; font-size: clamp(27px, 4vw, 41px); line-height: 1.45; font-weight: 800; letter-spacing: -.4px; }
.article-head .landing-lead { max-width: none; font-size: 15px; line-height: 2.1; color: #b7b2ce; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; color: #6f6a8a; font-size: 12.5px; }

.article-banner { margin: 32px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #100e1f; }
.article-banner img { display: block; width: 100%; height: auto; }

.article-toc {
  margin: 36px 0 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(135deg, #1e1938, #151229); padding: 22px 26px 24px;
}
.article-toc p { margin: 0 0 12px; color: #6f6a8a; font-size: 12px; }
.article-toc ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 9px; }
.article-toc li { font-size: 13.5px; line-height: 1.9; }
.article-toc li::marker { color: var(--purple); }
.article-toc a { color: #cfc9ea; }
.article-toc a:hover { color: #fff; }

/* Long-form Persian: same leading and measure the legal documents use, because that pairing was
   tuned for exactly this — a wall of Persian text read top to bottom. */
.article-body { margin-top: 38px; color: #cdc8e4; font-size: 15.5px; line-height: 2.2; }
.article-body h2 {
  margin: 52px 0 0; padding-top: 28px; border-top: 1px solid var(--line);
  color: #fff; font-size: clamp(20px, 2.6vw, 25px); line-height: 1.6; scroll-margin-top: 96px;
}
.article-body > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 { margin: 36px 0 0; color: #fff; font-size: 18px; line-height: 1.7; }
.article-body h4 { margin: 28px 0 0; color: #ddd8f2; font-size: 16px; line-height: 1.7; }
.article-body p { margin: 15px 0 0; }
.article-body ul,
.article-body ol { margin: 16px 0 0; padding-inline-start: 22px; }
.article-body li { margin-top: 10px; }
.article-body li::marker { color: var(--purple); }
.article-body strong { color: #fff; font-weight: 700; }
.article-body em { color: #ded9f5; font-style: normal; border-bottom: 1px dashed #4b3f85; }
.article-body a { color: #a897ff; border-bottom: 1px solid #a897ff4d; }
.article-body a:hover { color: #cfc4ff; border-bottom-color: #cfc4ff; }
.article-body code {
  background: #ffffff12; border-radius: 6px; padding: 2px 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; direction: ltr; unicode-bidi: isolate;
}
.article-body blockquote {
  margin: 26px 0 0; border: 1px solid #4b3f85; border-inline-start: 3px solid var(--purple);
  border-radius: 14px; background: #7c5cff12; padding: 18px 22px;
}
.article-body blockquote p { margin: 10px 0 0; color: #ded9f5; }
.article-body blockquote > :first-child { margin-top: 0; }

/* A comparison table is the whole point of half these articles, so it gets to scroll inside its
   own box rather than widening the document on a phone. */
.article-table { margin: 26px 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.article-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.article-table th,
.article-table td { padding: 13px 16px; text-align: start; line-height: 1.95; border-bottom: 1px solid var(--line); }
.article-table thead th { background: #ffffff09; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.article-table tbody th { color: #fff; font-weight: 600; }
.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td { border-bottom: 0; }

.article-faq { padding: 58px 0 0; }
.article-faq h2 { margin: 0 0 22px; color: #fff; font-size: clamp(20px, 2.6vw, 25px); }
.blog-related { padding: 62px 0 0; }
.blog-related h2 { color: #fff; }

@media (max-width: 860px) {
  .blog-card.is-featured { flex-direction: column; }
  .blog-card.is-featured .blog-card-media { flex: none; aspect-ratio: 3 / 2; }
  .blog-card.is-featured .blog-card-body { padding: 22px 22px 24px; }
}

@media (max-width: 700px) {
  .blog-hero { padding: 34px 0 28px; }
  .article-body { font-size: 15px; line-height: 2.15; }
  .article-toc { padding: 18px 20px 20px; }
  .blog-grid { grid-template-columns: 1fr; }
}