/* ──────────────────────────────────────────────
 * Horizontal card — feed / "Keep reading" style
 * ────────────────────────────────────────────── */

.bc-card-h {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255 255 255 / 0.08));
  text-decoration: none;
  color: inherit;
  transition: opacity var(--duration-fast, 150ms);
}
.bc-card-h:first-child {
  border-top: 1px solid var(--border-subtle, rgba(255 255 255 / 0.08));
}
.bc-card-h:hover {
  opacity: 0.85;
}
.bc-card-h:hover .bc-card-h__title {
  color: var(--accent-primary, #fcd34d);
}

/* Thumbnail */
.bc-card-h__img {
  flex-shrink: 0;
  width: clamp(120px, 18vw, 200px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--bg-surface-2, #1a1a2e);
}
.bc-card-h__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
.bc-card-h__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.bc-card-h__cat {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--accent-primary, #fcd34d);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.bc-card-h__title {
  font-size: var(--text-base, 1rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
  transition: color var(--duration-fast, 150ms);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bc-card-h__excerpt {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bc-card-h__meta {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}

/* Feed ad slot between cards */
.bc-feed-ad {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255 255 255 / 0.08));
  text-align: center;
}

@media (max-width: 480px) {
  .bc-card-h__excerpt {
    display: none;
  }
  .bc-card-h__img {
    width: 100px;
  }
}