/* owned by WP5 — see docs/design-system.md */

/* Page headings stay flush left -- they open a reading column, not a centered section header.
   `balance` keeps the last line of a wrapped heading from hanging alone. */
.blog-title,.article-title{text-align:left;text-wrap:balance}

/* ═══ blog archive ═══ */
.blog-header{padding-top:var(--space-36);padding-bottom:var(--space-4)}
.blog-intro{max-width:var(--measure)}
.blog-intro p{margin-bottom:var(--space-4)}

.blog-filters{display:flex;flex-wrap:wrap;gap:var(--space-2-5);margin-top:var(--space-10);padding-bottom:var(--space-8);border-bottom:var(--border-w) solid var(--line)}

.blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);padding-block:var(--space-12) var(--space-16)}
/* .card--glass already sets the blur/inset-highlight recipe; the archive card wants a slightly
   flatter background and no shadow so the grid reads calmer than the glass stat/testimonial cards */
.blog-card{background:rgba(255,255,255,.03);padding:var(--space-7);border-radius:var(--radius-lg);box-shadow:none}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);font-size:var(--fs-xs);color:var(--fg-faint)}
.blog-card-title a:hover{color:var(--accent)}
.blog-card-link{margin-top:auto;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--accent-fg)}
.blog-card-link:hover{text-decoration:underline}
.blog-empty{color:var(--fg-muted);grid-column:1/-1}

.blog-pagination{display:flex;gap:var(--space-4);justify-content:center;padding-bottom:var(--space-20)}

/* ═══ blog article ═══ */
.article{max-width:var(--container-sm);padding:var(--space-36) var(--space-8) var(--space-14)}
.article-header{padding-bottom:var(--space-10);margin-bottom:var(--space-10);border-bottom:var(--border-w) solid var(--line)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);font-size:var(--fs-xs);color:var(--fg-faint)}
.article-reading-time{color:var(--fg-faint);font-size:var(--fs-sm)}
.article-reading-time::before{content:'·';margin-right:var(--space-3);color:var(--fg-faint)}

/* The body is generated from markdown by app:import-articles, so it is plain h2/h3/p/ul/strong/a —
   `.prose` (components.css 5.4) already covers the typography; nothing else to add here. */

/* The way back to the archive, directly under the body copy: a bordered pill rather than a bare
   text link, so it reads as a control closing the article instead of as one more inline link in the
   copy. It keeps the reading column width, so its hairline lines up with the one under the header.
   `is-last` is set by the template when no "Lees ook" block follows, and then carries the bottom
   padding of the page. */
.article-back-nav{max-width:var(--container-sm);padding:var(--space-10) var(--space-8);border-top:var(--border-w) solid var(--line);margin-top:var(--space-4)}
.article-back-nav.is-last{padding-bottom:var(--space-24)}
.article-back-icon{flex:none;transition:transform var(--dur-base)}
.article-back:hover .article-back-icon{transform:translateX(-3px)}

/* "Lees ook": the three articles to read next, reusing .blog-card (components.css .card--glass) of
   the archive. The block sits outside .article so it can be wider than the reading column on large
   screens. */
.article-related{max-width:var(--container);padding:var(--space-6) var(--space-8) var(--space-24)}
.article-related-title{font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--fw-medium);color:var(--fg-strong);letter-spacing:var(--ls-snug);margin-bottom:var(--space-7)}
.article-related-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
.article-related .blog-card-title{font-size:var(--fs-lg);margin-bottom:var(--space-3)}
.article-related .blog-card-summary{font-size:var(--fs-sm);margin-bottom:var(--space-4)}

/* Subscribe CTA closing an article. A bordered panel on the same measure as the prose, so it
   reads as an offer rather than a final paragraph. It is in the dark-context selector list above,
   which the blog-overview version was NOT -- that is why it rendered light-on-black. */
.article-subscribe{max-width:var(--measure);margin:var(--space-14) auto 0;padding:var(--space-10) var(--space-8);border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);background:var(--bg-panel);text-align:center}
.article-subscribe-title{margin:0;font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--fw-medium);color:var(--fg-strong)}
.article-subscribe-text{margin:var(--space-3) 0 var(--space-6);font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--fg-muted)}

@media(max-width:768px){
  .blog-header{padding-top:var(--space-24)}
  .article{padding:var(--space-24) var(--space-5) var(--space-12)}
  .article-back-nav{padding:var(--space-10) var(--space-5)}
  .article-back-nav.is-last{padding-bottom:var(--space-16)}
  .article-related{padding:var(--space-6) var(--space-5) var(--space-16)}
  .article-related-list{grid-template-columns:1fr}
  .blog-list{grid-template-columns:1fr;padding-top:var(--space-8)}
  .article-subscribe{margin-top:var(--space-10);padding:var(--space-8) var(--space-5)}
}