/* ---- Insights / blog cards ---- */
.post-card { display: flex; flex-direction: column; height: 100%; }

.post-card .thumb { aspect-ratio: 16/9; border-radius: var(--radius-sm); margin-bottom: 18px; overflow: hidden; border: 1px solid var(--border); position: relative; }

.post-card .meta { font-size: .8rem; color: var(--text-mute); letter-spacing: .04em; }

.post-card h3 { margin: 8px 0 8px; font-size: 1.2rem; }

.post-card p { color: var(--text-soft); font-size: .95rem; }

/* ---- Insights doc-frame thumbs -----------------------------------------
   Deliberately code-editor-styled (mono glyph + syntax-coloured lines), not
   a loading skeleton - flat grey bars read as "still loading" to visitors,
   which is why the old two-line placeholder rows were removed. --tc (set
   inline per card) drives the tint of the glow, glyph and code lines. */
.docframe { aspect-ratio: 16/9; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tc, var(--accent)) 16%, transparent), transparent 60%), #0c0f17;
  margin-bottom: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden; }

.docframe .df-ghost { position: absolute; top: -.15em; right: 10px; font-family: var(--mono); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: var(--tc, var(--accent)); opacity: .14; letter-spacing: -.02em;
  pointer-events: none; user-select: none; transition: opacity .35s, transform .35s; }

.post-card:hover .df-ghost { opacity: .22; transform: translateY(-3px); }

.docframe .df-tag { position: relative; z-index: 1; align-self: flex-start; margin-bottom: 10px; font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--tc, var(--accent)); opacity: .95; }

.post-card:hover .df-tag { text-shadow: 0 0 14px currentColor; }