/* ==========================================================================
   Blog — listing cards and article pages (generated by scripts/build-blog.mjs).
   Loaded after styles.css and theme.css on /blog pages only.
   ========================================================================== */

/* ---- listing ---- */

/* the hero provides its own breathing room, so the card section starts sooner */
.blog-listing { padding-block-start: var(--space-m); }
.blog-listing .blog-grid { margin-top: 0; }

.blog-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: var(--space-m);
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--slate);
  color: var(--white);
  text-decoration: none;
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}
.blog-card:hover h2 { color: var(--lime); }

.blog-card img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-card-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }

.blog-card h2 {
  color: var(--white);
  font-size: var(--step-1);
  margin-bottom: 0.35em;
}
.blog-card p { color: var(--white); margin: 0 0 0.9em; }

.blog-meta {
  display: block;
  color: var(--lime);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}

/* ---- article page ---- */

.page-hero .blog-byline {
  color: var(--lime);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.8em;
}

.article-hero {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--space-m);
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}

/* Stock-photo attribution, present only when the feed supplies a credit.
   The figure wrapper carries the hero's bottom margin so the caption sits
   tight under the image without the gap below the pair changing. */
.article-figure {
  margin: 0 0 var(--space-m);
}
.article-figure .article-hero {
  margin-bottom: 0.6em;
}
.hero-credit {
  margin: 0;
  /* Deliberately quiet: an attribution, not a caption anyone needs to read.
     --stone is 4.9:1 on --paper, so it still clears AA at this size. */
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--stone);
}
.hero-credit a {
  color: inherit;
  text-decoration: none;
}
.hero-credit a:hover {
  color: var(--aqua-dark);
  text-decoration: underline;
}

/* body text runs the full width of the hero image above it */
.article-body { max-width: none; }
.article-body p { max-width: none; }

.article-body h2 {
  font-size: var(--step-2);
  margin: 1.6em 0 0.5em;
}
.article-body h3 {
  font-size: var(--step-1);
  margin: 1.4em 0 0.4em;
}
.article-body p,
.article-body li { color: var(--slate-soft); }
.article-body li { margin-bottom: 0.4em; }

.article-body blockquote {
  margin: 1.4em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 4px solid var(--teal);
  color: var(--slate);
  font-weight: 500;
}
.article-body blockquote p { color: inherit; }

.article-body pre {
  background: var(--slate);
  color: var(--white);
  padding: 1.1em 1.3em;
  overflow-x: auto;
  font-size: 0.9rem;
  clip-path: polygon(
    var(--bevel) 0, 100% 0,
    100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%,
    0 100%, 0 var(--bevel)
  );
}
.article-body code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}
.article-body :not(pre) > code {
  background: var(--stone-050);
  padding: 0.1em 0.35em;
}

/* ---- tables ----
   marked emits GFM tables as a plain <table><thead>…, and nothing styled them,
   so they fell back to the browser's default stylesheet: no borders, no cell
   padding, centred <th> (which is why a short header floated away from its
   column) and cells inheriting the base colour instead of --slate-soft like
   every paragraph beside them. */

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95rem;
}

.article-body th,
.article-body td {
  padding: 0.7em 0.9em;
  border: 1px solid var(--stone-100);
  text-align: left;          /* the UA default centres th */
  vertical-align: top;
}

.article-body thead th {
  background: var(--slate);
  color: var(--white);
  font-weight: 700;
}

/* matches the paragraph and list colour directly above and below the table */
.article-body td { color: var(--slate-soft); }

.article-body tbody tr:nth-child(even) { background: var(--stone-050); }

.article-footer { margin-top: var(--space-m); }

/* ---- related articles (from the feed's `related`, plus back-links) ---- */

.related-articles {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--stone-100);
}
.related-articles h2 {
  font-size: var(--step-1);
  margin: 0 0 0.6em;
}
.related-articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5em;
}
.related-articles a {
  color: var(--aqua-dark);
  font-weight: 700;
}