/* ── /blog/<slug>/ posts — shared styles ────────────────────────────────────
   Loaded after base.css on every blog post. Single source for the article
   body (lead, sections, inline notes, CTA), the "Common questions" FAQ block
   and the "Read next" list — edit here, never re-inline per page. CSS
   variables (:root) and the language-switcher rules stay inline per page.

   Extracted from 29 near-identical inline <style> blocks; the small per-post
   differences they had (link underlines, store-button gap) were drift, not
   design, and are normalised here. A post that genuinely needs to deviate
   keeps a short override in its own <style> after this file. */

/* ── Article content ── */
.article-main {
  padding: 56px 24px 96px;
}

.article-container {
  max-width: 680px;
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}

.article-container h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}

.article-date {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.article-lead {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 40px;
}

.article-section {
  margin-bottom: 36px;
}

.article-section h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--text);
}

.article-section p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 12px;
}

.article-section p:last-child {
  margin-bottom: 0;
}

/* base.css resets `a` to `color: inherit; text-decoration: none`, so in-article
   links need this to be distinguishable from the prose around them. Only 10 of
   the 29 posts carried the rule inline, which left the rest with body-coloured
   links; defining it here covers every post. */
.article-section a {
  color: var(--primary);
}

/* ── Sources block: the citation list that closes an article ── */
/* Carries .article-section for the shared spacing, plus this class so the citation
   links can be weighted here instead of by an inline style on each of the ~100
   anchors (which the build then copies into ten language pages apiece). The class
   also gives the build and the checkers something to recognise the block by. */
.article-refs a {
  font-weight: 500;
}

/* ── Inline note: pointer to a tool or related guide mid-article ── */
.cs-inline-note {
  margin: 28px 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  font-size: 15px;
}

.cs-inline-note a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.cs-inline-note a:hover {
  text-decoration: underline;
}

/* ── End-of-article CTA ── */
.article-cta {
  margin-top: 48px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.article-cta h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.article-cta p {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* ── CTA buttons. Posts use either the store badges or the plain primary
      button, so both live here; the unused one costs nothing. ── */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1e23;
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-appstore:hover {
  background: #2c333b;
}

.btn-appstore svg {
  flex-shrink: 0;
}

.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

@media (max-width: 599px) {
  .article-main {
    padding: 40px 16px 64px;
  }

  .article-container h1 {
    font-size: 24px;
  }

  .article-cta {
    padding: 24px 20px;
  }
}

/* ── "Common questions" FAQ block. The visible copy and the FAQPage JSON-LD
      are wired from the same locales entry — see docs/seo-check.md. ── */
.blog-faq {
  max-width: 640px;
  margin: 48px auto 0;
  padding: 0 24px;
}

.blog-faq > h2,
.read-next > h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}

.blog-faq-item {
  padding: 18px 0;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.blog-faq-item:first-of-type {
  border-top: none;
}

.blog-faq-item h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.blog-faq-item p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ── "Read next" list ── */
.read-next {
  max-width: 640px;
  margin: 48px auto 0;
  padding: 0 24px;
}

.read-next ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.read-next li {
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.read-next li:first-child {
  border-top: none;
}

.read-next li a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  transition: color 0.15s;
}

.read-next li a:hover {
  color: var(--primary);
}

.read-next .all-guides {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}