/* ==========================================================================
   insights.css — /insights listing: category filter + article card grid.
   --------------------------------------------------------------------------
   NET-NEW SECTION. The Oberon template has no blog; this page's hero reuses
   the /work `her` header (css/pages/projects.css) verbatim, and everything
   below it is modeled structurally on twistag.com/thinking (category filter
   with per-category counts, cards of meta-row + image + title) but styled in
   the site's own idiom: Geist Mono uppercase labels, hairline borders,
   orange accent, dune-texture imagery. Documented in KNOWN-DIFFERENCES.md.

   The card block (.ins__card…) is also used by the "more insights" section
   on article pages (css/pages/insight-article.css loads this file first).
   ========================================================================== */

.ins {
  /* position + z-index matter: the her hero's dune marquee (.her__bgwrap,
     an absolutely positioned z-0 layer sized to the 450px hero block)
     overflows past the section's hr at phone and paints OVER any static
     in-flow sibling. .pg solves it with position:relative + z-index:1 and
     an opaque background — same recipe here. */
  position: relative;
  z-index: 1;
  background: var(--c-white);
  padding: 64px var(--page-pad-desktop) 110px;
}
.ins__inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

/* ---- filter row -------------------------------------------------------- */
.ins__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 42px;
}
.ins__filter-label {
  margin-right: 8px;
}
.ins__pill {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid var(--c-stone);
  border-radius: 100px;
  padding: 7px 16px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ins__pill .t-mono { line-height: 100%; transition: color .2s ease; }
.ins__pill:hover { border-color: var(--c-orange); }
.ins__pill:hover .t-mono { color: var(--c-orange); }
.ins__pill.is-active { background: var(--c-orange); border-color: var(--c-orange); }
.ins__pill.is-active .t-mono, .ins__pill.is-active .ins__count { color: var(--c-white); }
.ins__count {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs-size);
  color: var(--c-grey);
  transition: color .2s ease;
}

/* ---- card grid --------------------------------------------------------- */
.ins__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 64px;
}
.ins__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  min-width: 0;
}
.ins__card[hidden] { display: none; }
.ins__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
}
.ins__card-cat { color: var(--c-orange); }
.ins__card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-stone);
}
.ins__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-spring0);
}
.ins__card:hover .ins__card-img img { transform: scale(1.04); }
.ins__card-title {
  padding-top: 16px;
  max-width: 560px;
  transition: color .2s ease;
}
.ins__card:hover .ins__card-title { color: var(--c-orange); }

/* ---- breakpoints ------------------------------------------------------- */
@media (max-width: 809.98px) {
  .ins { padding: 48px var(--page-pad-phone) 80px; }
  .ins__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .ins__filter { padding-bottom: 34px; }
}