/* kb-visual.css — the Knowledge Base card layer.
 *
 * It adds no palette, no font and no button style: every value below is an existing --okc-* token from
 * okno-constitution.css. What it adds is the one state the card system was missing — a card that is
 * deliberately text-led rather than a card whose picture failed to load.
 *
 * The defect this replaces: archive cards showed a legacy cover with the article title burned into the
 * image, so every card printed its headline twice. Where a destination owns no approved media the card
 * now carries no media slot at all, instead of an empty tinted rectangle.
 */

/* --- text-led card ----------------------------------------------------------------------------- */
/* A brand hairline gives the card a deliberate top edge, so a grid of them reads as a designed
   listing rather than as cards missing their thumbnails. */
.okc-card--textled { position: relative; }
.okc-card--textled::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--okc-brand); opacity: .85;
}
.okc-card--textled .okc-card__body { padding-top: 20px; gap: 6px; }
.okc-card--textled .okc-card__title { font-size: 18px; line-height: 1.32; }
.okc-card--textled .okc-card__kicker { color: var(--okc-muted); }

/* --- grid rhythm ---------------------------------------------------------------------------------- */
/* Cards keep equal height inside a row, which is what makes a text-led grid look composed. A module is
   never mixed, so a text card is never stretched to match a neighbouring photo. */
.kbv-grid { align-items: stretch; }
.kbv-grid .okc-card { height: 100%; }

/* The archive's date sits above the title as quiet metadata. */
.okc-card--kb .okc-card__meta { font-size: 12.5px; letter-spacing: .01em; }

@media (max-width: 640px) {
  .okc-card--textled .okc-card__title { font-size: 17px; }
  .okc-card--textled .okc-card__body { padding-top: 18px; }
}