/* ---------------------------------------------------------------------
   Blog navigation & linking chrome — Phase 2 of docs/SEO_STRATEGY.md
   ("Reconnect the graph").

   Shared across blog/templates/blog/list.html, topic.html, releases.html
   (post grid + pagination) and detail.html (topic line, related grid,
   prev/next, breadcrumbs). detail.html is NOT wrapped in `.design-b` and
   still loads Bootstrap 5.0.1 (see CLAUDE.md -> Constraints to respect),
   so every rule here is deliberately UNSCOPED (no `.design-b` prefix) and
   reads the `:root` tokens declared inline in layout.html (~lines 31-51)
   directly -- those are global regardless of which page loads. Do not
   scope new rules to `.design-b`, or they silently no-op on detail.html.

   The .post-grid/.post-card rules were relocated verbatim from
   list.html's inline <style> (previously duplicated the moment topic.html
   needed the same cards) -- only the `.design-b` prefix was dropped.
   ------------------------------------------------------------------- */

/* shared post meta */
.post-date{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mute); }

/* Post grid — list.html, topic.html, releases.html, and the related-posts
   grid on detail.html all use this. */
.post-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.post-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; height:100%; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -28px rgba(0,0,0,.28); border-color:var(--accent); }
.post-media{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); }
.post-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.post-card:hover .post-media img{ transform:scale(1.04); }
.post-card-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card-title{ font-weight:700; font-size:20px; line-height:1.15; letter-spacing:-0.008em; color:var(--navy); margin:0; transition:color .15s; }
.post-card:hover .post-card-title{ color:var(--accent); }
.post-card-desc{
  font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Cover-card variant: image fills the card, brand-tinted gradient overlay,
   light text pinned at the bottom. Built to disguise placeholder/AI-
   generated photos (desaturation + a fairly strong tint, not just a
   caption scrim) and to keep the grid scannable (one shorter box instead
   of a photo box + separate white body box, no description snippet).
   Used on list.html's main grid, topic.html's hub grid, and the
   related-posts grid on detail.html. */
.post-card--cover{ position:relative; aspect-ratio:5/3; background:var(--navy); }
.post-card--cover .cover-img{
  /* Several source images are busy AI-generated graphics/infographics
     with their own baked-in captions and icons -- a mild filter left
     these fully legible and clashing with our overlaid title. Pushed
     stronger deliberately: this needs to read as "muted photo behind
     text", not "photo with a light tint". */
  filter:grayscale(45%) saturate(.6) contrast(1.05) brightness(.9);
  transition:transform .35s ease, filter .35s ease;
}
.post-card--cover:hover .cover-img{ transform:scale(1.05); filter:grayscale(30%) saturate(.7) contrast(1.05) brightness(.95); }
.post-card--cover .cover-scrim{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--navy) 62%, transparent) 0%,
    color-mix(in srgb, var(--navy) 70%, transparent) 40%,
    color-mix(in srgb, var(--navy) 93%, transparent) 100%);
}
.post-card--cover .post-date{ color:rgba(255,255,255,.75); }
.post-card--cover .post-card-title{ color:#fff; font-size:19px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.post-card--cover:hover .post-card-title{ color:#fff; } /* base hover rule tints the title accent-colored; keep it white here */

/* Smaller card variant for the related-posts grid on detail.html — same
   markup, tighter so 3-6 of them don't dominate a single-column article. */
.post-grid--related{ grid-template-columns:repeat(3, 1fr); gap:20px; }
.post-grid--related .post-card-title{ font-size:16px; }
.post-grid--related .post-card-desc{ display:none; }

/* Pagination — shared by list.html/topic.html/releases.html. */
.pagination .page-link{ color:var(--navy); border-color:var(--line); }
.pagination .page-link:hover{ color:var(--accent); border-color:var(--accent); }
.pagination .page-item.disabled .page-link{ color:var(--mute); }

/* Topic chip row — /blog/'s link to every hub, and each hub's link to its
   sibling hubs. Ordered civils-hub chips first in the template; the CSS
   doesn't distinguish destination, the template does. */
.topic-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 40px; }
.topic-chip{
  font-size:13px; font-weight:500; color:var(--navy); background:var(--bg-2);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  transition:background .15s, border-color .15s, color .15s;
}
.topic-chip:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Topic line under a post's H1 — the single highest-value link in this
   phase (the post -> hub edge). */
.post-topic-line{ font-size:14px; color:var(--mute); margin:6px 0 20px; }
.post-topic-line a{ color:var(--accent); font-weight:500; text-decoration:none; }
.post-topic-line a:hover{ text-decoration:underline; }

/* Related-posts section on detail.html */
.related-posts{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.related-posts-heading{ font-weight:700; font-size:22px; color:var(--navy); margin:0 0 20px; }

/* Prev/next strip — the Hamiltonian chain through a topic. */
.post-prevnext{ display:flex; justify-content:space-between; gap:20px; margin:36px 0; flex-wrap:wrap; }
.post-prevnext a{
  flex:1 1 260px; display:flex; flex-direction:column; gap:4px; padding:16px 20px;
  border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--navy);
  transition:border-color .15s, background .15s;
}
.post-prevnext a:hover{ border-color:var(--accent); background:var(--bg-2); }
.post-prevnext .pn-label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mute); }
.post-prevnext .pn-title{ font-size:15px; font-weight:600; line-height:1.3; }
.post-prevnext .pn-next{ text-align:right; margin-left:auto; }

/* Breadcrumbs — moved to the main stylesheet (styles-vNN.css) in Phase 3
   (docs/SEO_STRATEGY.md) so marketing pages (which don't load this file)
   can render breadcrumbs.html too, e.g. the /compare pages. Blog still
   gets the rule via layout.html; this file only owns blog-specific nav. */

/* Hub intro prose (topic.html) */
.topic-intro{ max-width:70ch; color:var(--ink-2); line-height:1.6; margin:0 0 32px; }

/* Responsive */
@media (max-width: 991.98px){
  .post-grid{ grid-template-columns:repeat(2, 1fr); }
  .post-grid--related{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .post-grid{ grid-template-columns:1fr; }
  .post-grid--related{ grid-template-columns:1fr; }
  .post-prevnext .pn-next{ text-align:left; margin-left:0; }
}