/* The blog - articles written by the content engine (admin-panel/seo/)
   and rendered as static pages under /blog/. Everything structural
   comes from style.css: the article reuses .legal for its measure and
   headings, the questions reuse .faq. This file is only what those two
   do not already cover. */

/* The header is fixed and transparent until main.js marks it stuck on
   scroll. Blog pages do not load main.js, so it is stuck from the
   start - and the page has to leave room under it. */
.blog { padding-top: 132px; }
.blog__menu { gap: 18px; }

.blog .legal__head .eyebrow a { color: inherit; }
.blog .legal__head .eyebrow a:hover { color: var(--gold-lit); }
.blog__langs { font-size: 0.86rem; color: var(--text-dim); margin-top: 18px; }
.blog__langs a { color: var(--gold); white-space: nowrap; }

/* The article body. The model writes p, h2, h3, ul, ol, li, strong, em,
   a - and nothing else survives render.js's sanitiser. */
.blog__body { font-size: 1.04rem; line-height: 1.75; }
.blog__body p { color: var(--text); margin-bottom: 18px; }
.blog__body h2 { margin-top: 44px; }
.blog__body h3 { margin-top: 28px; margin-bottom: 8px; }
.blog__body ul, .blog__body ol { margin: 0 0 18px 1.4em; color: var(--text); }
.blog__body li { margin-bottom: 8px; }
.blog__body strong { color: var(--cream); }
.blog__body a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(201, 138, 59, 0.4); text-underline-offset: 3px; }
.blog__body a:hover { color: var(--gold-lit); text-decoration-color: currentColor; }
.blog__body img { display: none; }

.blog__faq { margin-top: 56px; }
.blog__faq h2 { margin-bottom: 20px; }

.blog__cta { margin: 48px 0 12px; }
/* .legal a paints every link gold, and the call to action is a link.
   Two classes outrank one class plus an element, so the button keeps
   its dark text on the gold gradient rather than gold on gold. */
.blog .btn--gold { color: #1A120C; }
.blog .btn--gold:hover { color: #1A120C; }
.blog__back { font-size: 0.9rem; }
.blog__back a { color: var(--text-dim); }
.blog__back a:hover { color: var(--gold); }

/* The index. */
.blog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.blog__card a {
  display: block; padding: 22px 24px;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.blog__card a:hover { transform: translateY(-3px); border-color: rgba(201, 138, 59, 0.45); }
.blog__card h2 { font-size: 1.3rem; margin: 0 0 8px; }
.blog__card p { color: var(--text-dim); margin: 0 0 10px; font-size: 0.97rem; }
.blog__meta { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.04em; }
.blog__card--empty p { text-align: center; }

.blog__foot { padding: 40px 0 28px; }

[dir="rtl"] .blog__body ul, [dir="rtl"] .blog__body ol { margin: 0 1.4em 18px 0; }
[dir="rtl"] .blog__back a::before { content: none; }

@media (max-width: 760px) {
  .blog { padding-top: 110px; }
  .blog__body { font-size: 1rem; }
}