/* Insights (blog) listing — filter-bar layout.
   Loaded AFTER the captured Tailwind sheet (see insights.head.html) so it wins
   the cascade. Hand-written because the captured sheet has no JIT and is missing
   the responsive flex utilities this one-line row needs (md:items-center,
   md:justify-between, md:flex-1, and every sm:* variant). Colours, type, borders
   and the dropdown menu positioning stay as utilities / inline styles that DO
   exist in the capture — only the layout skeleton lives here. */

/* Filter bar: stacked on mobile, a single row (search+count left · dropdowns right) on desktop. */
.ins-filterbar { display: flex; flex-direction: column; gap: 0.75rem; }
.ins-filter-left { display: flex; flex-direction: column; gap: 0.75rem; }
.ins-filter-search { width: 100%; }

@media (min-width: 768px) {
  .ins-filterbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .ins-filter-left { flex-direction: row; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; }
  .ins-filter-search { width: auto; flex: 1 1 auto; max-width: 28rem; }
}

/* Card media: brand blue tint.
   The founder supplies each post's hero art, so the source images clash wildly
   (teal gradients, white backgrounds, stock photos, dark scenes). We DON'T edit
   the images — instead each card's <img> is desaturated and multiplied under a
   brand-blue gradient so the grid reads as one cohesive family, matching the
   case-study heroes; hovering a card lifts the tint to reveal the true image.
   NOTE: no `isolation: isolate` here — pairing it with the multiply layer made
   Chrome paint the grid as flat blue blocks on first load (it composited the
   isolated group before the filtered <img> was ready, self-healing only on a
   repaint). The <img> is opaque and covers the whole area, so the multiply
   blends only with it regardless. */

/* Step 1 — desaturate the clashing source palettes so nothing but tone remains;
   a little contrast keeps the grayscale punchy. `filter` transitions so hover
   can lift it back to full colour. */
.ins-card-media img {
  filter: grayscale(1) contrast(1.15);
  transition: transform .6s ease, filter .5s ease;
}

/* Step 2 — a SINGLE brand-blue gradient multiplied over the grayscale image.
   multiply darkens each pixel toward blue: white/light source art becomes a
   clear blue (a luminance-preserving tint can't — blue is darker than white, so
   whites must be darkened to read blue), while the image's own light/dark
   structure survives because multiply is per-pixel. One blend layer (not two)
   avoids the isolation + stacked-blend compositing glitch that flattened the
   grid to a solid block. The gradient (lighter blue → deeper navy-blue) gives
   the grounded top-to-bottom depth the case-study heroes have. */
.ins-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  background: linear-gradient(160deg, #4f92e6 0%, #23539f 100%);
  mix-blend-mode: multiply;
}

/* Hover — reveal the real image: the blue overlay fades out and the grayscale
   filter lifts, so the founder's original art shows in full colour, with a
   gentle zoom. At rest the grid is a uniform brand blue; on hover it's true. */
.group\/news:hover .ins-card-media img { filter: none; transform: scale(1.05); }
.group\/news:hover .ins-card-media::after { opacity: 0; }