/* ==========================================================================
   Blog pages built by the Worker from the BLOG KV store (src/blogTemplate.js):
   the index at /{lang}/blog/ and each post at /{lang}/blog/<slug>/.

   Until 2026-10-14 these pages carried their own inline stylesheet on a white
   ground with a different header and footer. They now load the site's own
   site.css, components.css and header-hero.css, so the header, footer, type,
   colours, kicker, headline rule, Insights post cards and the closing call to
   action are the home page's, unchanged. This file only sets what those do
   not have: the solid header without a hero, the page top, the card list and
   the article reading column.
   ========================================================================== */

/* No hero under the fixed header here, so it takes its solid ground from the
   start, as on the legal pages. */
.blog header,
.blog header.is-stuck {
  background: rgba(8, 20, 15, 0.93);
  border-bottom-color: color-mix(in srgb, var(--gold) 18%, transparent);
}

.blog-main {
  padding: 168px 0 var(--section-y);
}

/* --- Index ---------------------------------------------------------------- */

.blog-intro { text-align: center; }
.blog-intro h1 { margin: 0; }

.blog-grid {
  list-style: none;
  margin-top: 56px;
}

.blog-grid > li { display: flex; }
.blog-grid .post { flex: 1; }

/* The Insights cards carry a photo; blog posts have none, so the body takes
   the card's full height and the tag reads as the date line. */
.blog-grid .post-body { padding: 30px 28px 28px; }
.blog-grid .post h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3333;
  letter-spacing: -0.015em;
  margin: 12px 0 20px;
  color: #f5f7f5;
  overflow-wrap: anywhere;
}
.blog-grid .post h2::after {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 12px;
  background: var(--gold);
}

/* --- Post ----------------------------------------------------------------- */

.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-back { margin-bottom: 32px; }
.article-back svg { transform: rotate(180deg); }

.article-head .kicker { margin-bottom: 18px; }

.article-head h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}

.article-meta {
  font-size: 14px;
  color: var(--text-dim);
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.article-meta .dot { color: var(--gold); margin: 0 8px; }

.article-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-body);
  overflow-wrap: break-word;
}

.article-body > :first-child { margin-top: 0; }

.article-body p { margin: 0 0 20px; }

.article-body h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--text);
  margin: 48px 0 16px;
}

.article-body h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  color: var(--text-soft);
  margin: 36px 0 12px;
}

.article-body h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-soft);
  margin: 28px 0 10px;
}

.article-body ul,
.article-body ol { margin: 0 0 20px 22px; padding: 0; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--gold); }

.article-body strong { color: var(--text); font-weight: 600; }

.article-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--gold-hover); }

.article-body blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  color: var(--text-soft);
  font-style: italic;
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 40px 0;
}

.article-body pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  overflow-x: auto;
  margin: 0 0 20px;
  font-size: 14px;
}

.article-body code { font-size: 0.9em; }

/* A wide table scrolls inside the column rather than widening the page. */
.article-body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15px;
}
.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.article-body th { color: var(--text); background: var(--surface-2); font-weight: 600; }

@media (max-width: 767px) {
  .blog-main { padding-top: 120px; }
  .blog-grid { margin-top: 40px; }
  .article-body { font-size: 16px; }
}