/* blog-index.css — owned by the design-loop piece for this surface.
   Tokens live in blog.css and are inherited; never redeclare them here.

   Composition: a quiet, mostly-empty masthead over a three-column grid of
   unboxed, image-first cards. The card container has no border, no fill and no
   radius — only the 16:9 figure is a surface. Everything below it sits directly
   on the page background. Colour is rationed to zero on this surface: the
   figures and all type are monochrome. */

/* ===== MASTHEAD =====

   The masthead itself — H1, tab row, description — moved to blog.css when the
   blog became a tabbed hub, because /changelog/ carries the identical one and
   the two surfaces load different composition sheets. What is left here is the
   surface's own vertical rhythm. */

.blog-index {
  padding: 112px 0 128px;
}

/* ===== GRID ===== */

.bx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 72px;
}

/* The card is not a box. No background, no border, no shadow, no radius —
   those belong to the figure alone. */
.bx-card {
  padding: 0;
  margin: 0;
}

.bx-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ===== FIGURE ===== */

.bx-fig {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--edge);
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow 0.16s var(--ease);
}

.bx-fig svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.82;
  transition: opacity 0.16s var(--ease);
}

/* Generative line art, drawn by layouts/partials/post-figure.html. Monochrome —
   stroked with the body-copy grey so no accent hue enters the grid, and never
   the severity hues, which mean CRITICAL and HIGH everywhere else on the site.
   Four weights: fig-s primary structure, fig-w secondary, fig-d nodes,
   fig-g the safe-area registration marks shared by every figure. Kept in sync
   with the same block in post.css — the two surface sheets never load together. */
.fig-s {
  fill: none;
  stroke: var(--secondary-text);
  stroke-opacity: 0.58;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig-w {
  fill: none;
  stroke: var(--secondary-text);
  stroke-opacity: 0.3;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig-d {
  fill: var(--secondary-text);
  fill-opacity: 0.6;
  stroke: none;
}

.fig-g {
  fill: none;
  stroke: var(--secondary-text);
  stroke-opacity: 0.26;
  stroke-width: 1;
  stroke-linecap: butt;
}

/* ===== CARD TEXT ===== */

.bx-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--light-text);
  margin: 0 0 10px;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s var(--ease);
}

.bx-dek {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--secondary-text);
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.bx-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--secondary-text);
  opacity: 0.72;
  margin: 0;
}

.bx-sep {
  display: inline-block;
  margin: 0 7px;
}

/* ===== HOVER — edges and opacity only, nothing moves ===== */

.bx-link:hover .bx-fig { box-shadow: inset 0 0 0 1px var(--border-hover); }
.bx-link:hover .bx-fig svg { opacity: 1; }
.bx-link:hover .bx-card-title { text-decoration-color: var(--secondary-text); }

.bx-link:focus-visible .bx-fig { box-shadow: inset 0 0 0 1px var(--border-hover); }
.bx-link:focus-visible .bx-card-title { text-decoration-color: var(--secondary-text); }

/* ===== RESPONSIVE — the system's two breakpoints ===== */

@media (max-width: 1000px) {
  .blog-index { padding: 88px 0 104px; }
  .bx-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
    row-gap: 56px;
  }
}

@media (max-width: 900px) {
  .blog-index { padding: 72px 0 88px; }
  .bx-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}