/* Blog — article typography and cards. Tokens come from style.css. */

:root {
  /* Vertical rhythm INSIDE a listing band: title -> lead card -> grid -> pager.
     .band already pads the whole section by var(--band-y) (up to 6.25rem), so
     the gaps between its own parts have to stay well under that or the lead
     card and the grid read as two separate sections. They used to: .cards
     carried margin-block: var(--band-y) of its own, which left roughly a
     band's worth of dead space above the grid. */
  --blog-stack: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}

.band__title { margin-bottom: var(--blog-stack); }

.cards {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin-block: 0;
}

.card {
  background: var(--zinc-raised);
  border: 1px solid var(--zinc-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* No fixed aspect-ratio/object-fit: cover here on purpose. These are
   AI-generated infographic-style images with real text baked into the
   pixels (titles, diagrams); cropping to a fixed 16:9 box cut that text
   off. Full width, natural height shows the whole image instead. */
.card__img { display: block; height: auto; width: 100%; }
.card .eyebrow { margin: 1rem 1.125rem 0; }
.card .eyebrow + .card__title { margin-top: 0.35rem; }
.card__title {
  font: 600 var(--t-2) / 1.25 var(--face-display);
  margin: 1rem 1.125rem 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.card__title a { color: var(--steel-900); text-decoration: none; }
.card__title a:hover { color: var(--signal); }
.card__lede {
  color: var(--steel-500);
  margin: 0 1.125rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.card__meta { color: var(--steel-400); font-size: var(--t--1); margin: 0.75rem 1.125rem 1.125rem; }

/* The generic "this is a blog post" pill overlaid on a card's image. The
   per-post category label (blog_category_eyebrow) still sits below the
   image and does the specific labelling; this one just marks the image. */
.card__badge,
.hero-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(22, 25, 29, 0.72);
  color: var(--on-dark);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2rem;
}
.card__badge svg,
.hero-card__badge svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-card { background: var(--zinc-raised); border: 1px solid var(--zinc-line);
             border-radius: var(--radius-lg); display: grid; gap: 0; margin-bottom: var(--blog-stack);
             overflow: hidden; position: relative; }
.hero-card__img { display: block; height: auto; width: 100%; }
.hero-card__body { padding: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); }
.hero-card__title { font: 700 var(--t-4) / 1.12 var(--face-display); margin: 0.5rem 0; max-width: var(--measure); }
.hero-card__title a { color: var(--steel-900); text-decoration: none; }
.hero-card__title a:hover { color: var(--signal); }
.hero-card__body .card__lede,
.hero-card__body .card__meta { margin-left: 0; margin-right: 0; }

.eyebrow { color: var(--signal); font-size: var(--t--1); font-weight: 600;
           letter-spacing: 0.04em; text-transform: uppercase; }
/* The category eyebrow links to that category archive; it should read as the
   label it already was, not as a second link colour next to the card title. */
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.chip { background: var(--zinc-ground); border: 1px solid var(--zinc-line); border-radius: 2rem;
        color: var(--steel-600); font-size: var(--t--1); padding: 0.3rem 0.8rem; text-decoration: none; }
.chip:hover { border-color: var(--signal); color: var(--signal); }

/* --- Article breadcrumb ---------------------------------------------------- */
.crumb { color: var(--steel-400); display: flex; flex-wrap: wrap; font-size: var(--t--1);
         gap: 0.4rem; margin-bottom: 1.5rem; }
.crumb a { color: var(--steel-500); text-decoration: none; }
.crumb a:hover { color: var(--signal); }
.crumb__current { color: var(--steel-600); max-width: 40ch; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }

/* --- Previous/next article -------------------------------------------------- */
.artnav { border-top: 1px solid var(--zinc-line); display: grid; gap: 1rem;
          grid-template-columns: 1fr 1fr; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
          padding-top: clamp(1.5rem, 1rem + 1.5vw, 2rem); }
.artnav__link { border: 1px solid var(--zinc-line); border-radius: var(--radius-lg);
                display: grid; gap: 0.35rem; padding: 1rem 1.25rem; text-decoration: none;
                transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.artnav__link:hover { border-color: var(--signal); box-shadow: var(--shadow-sm); }
.artnav__link--next { text-align: right; }
.artnav__label { color: var(--signal); font-size: var(--t--1); font-weight: 600; }
.artnav__title { color: var(--steel-900); font: 600 var(--t-1) / 1.3 var(--face-display); }
@media (max-width: 640px) {
  .artnav { grid-template-columns: 1fr; }
  .artnav__link--next { text-align: left; }
}

/* --- Related posts: reuses .cards/blog_card() verbatim, no second card
   style to keep in sync with the listing's own. ------------------------- */
.related { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.related__title { font: 700 var(--t-3) / 1.2 var(--face-display); margin-bottom: var(--blog-stack); }

.post .eyebrow { margin-bottom: 0.5rem; }
.post__highlights { background: var(--signal-tint); border-left: 3px solid var(--signal);
                    border-radius: var(--radius); margin-block: 1.5rem; padding: 1rem 1.25rem; }
.post__highlights-title { color: var(--steel-900); font: 600 var(--t-1) / 1.3 var(--face-display); margin: 0 0 0.6rem; }
.post__highlights ul { list-style-type: disc; padding-left: 1.25em; }

.pager { align-items: center; display: flex; gap: 1rem; justify-content: center;
         margin-top: var(--blog-stack); }
.pager__status { color: var(--steel-400); font-size: var(--t--1); }
.pager__link { color: var(--signal); font-weight: 600; text-decoration: none; }
.pager__link:hover { text-decoration: underline; }

.post__title { font: 700 var(--t-5) / 1.08 var(--face-display); max-width: var(--measure); }
.post__meta { color: var(--steel-400); font-size: var(--t--1); }
/* Smaller and floated rather than a full-width band: the highlights box
   and the opening paragraphs wrap in close beside it, and once the reader
   scrolls past its bottom edge the body is free to run full width (see
   .post__body below) instead of staying capped for the rest of the
   article just because of an image near the top. */
.post__hero {
  border-radius: var(--radius-lg);
  float: right;
  margin: 0.5rem 0 1.5rem 1.75rem;
  width: min(24rem, 42%);
}
@media (max-width: 700px) {
  .post__hero { float: none; margin: 1.5rem 0; width: 100%; }
}
.post__body { max-width: none; }
.post__body > * + * { margin-top: 1.25rem; }
.post__body h2 { font: 600 var(--t-3) / 1.2 var(--face-display); margin-top: 2.5rem; }
.post__body h3 { font: 600 var(--t-2) / 1.25 var(--face-display); margin-top: 2rem; }
.post__body h4 { font: 600 var(--t-1) / 1.3 var(--face-display); margin-top: 1.5rem; }
.post__body a { color: var(--signal); }
.post__body img { border-radius: var(--radius); height: auto; max-width: 100%; }

/* style.css resets ul/ol to list-style:none with no margin/padding site-wide
   (buttons, nav, footer links); restore real list markers here so bulleted
   and numbered lists an author makes in the editor still read as lists. */
.post__body ul, .post__body ol { padding-left: 1.5em; }
.post__body ul { list-style-type: disc; }
.post__body ol { list-style-type: decimal; }
.post__body li + li { margin-top: 0.4rem; }
.post__body li > ul, .post__body li > ol { margin-top: 0.4rem; padding-left: 1.25em; }
.post__body li > ul { list-style-type: circle; }
.post__body li > ol { list-style-type: lower-alpha; }
.post__body blockquote {
  border-left: 3px solid var(--signal);
  color: var(--steel-600);
  font-size: var(--t-1);
  padding-left: 1.25rem;
}
.post__body pre {
  background: var(--steel-900); border-radius: var(--radius); color: var(--on-dark);
  font-size: var(--t--1); overflow-x: auto; padding: 1rem;
}
.post__body table { border-collapse: collapse; display: block; overflow-x: auto; width: 100%; }
.post__body th, .post__body td { border-bottom: 1px solid var(--zinc-line); padding: 0.6rem 0.75rem; text-align: left; }