/* ── KB Promo Cards — Frontend ── */
.kb-promo-cards {
  display: grid;
  gap: var(--kbpc-gap, 16px);
  margin: 24px 0;
  box-sizing: border-box;
}
/* Column layouts — cards always fill full row width, no empty gaps */
.kb-promo-cards--1col { grid-template-columns: 1fr; }
.kb-promo-cards--2col { grid-template-columns: repeat(2, 1fr); }
.kb-promo-cards--3col { grid-template-columns: repeat(3, 1fr); }
.kb-promo-cards--4col { grid-template-columns: repeat(4, 1fr); }

/* If fewer cards than columns — stretch them to fill full width */
.kb-promo-cards .kbpc-card:only-child { grid-column: 1 / -1; }

.kbpc-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;       /* body stretches to image height */
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-sizing: border-box;
  transition: box-shadow .18s, transform .18s;
}
.kbpc-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09); transform: translateY(-2px); }

.kbpc-card__img { flex-shrink:0; width:80px; min-height:80px; border-radius:8px; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.kbpc-card__img img { width:100%; height:100%; object-fit:cover; display:block; }

/* Body fills remaining space — content is vertically distributed within image height */
.kbpc-card__body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:4px; overflow:hidden; }
.kbpc-card__title { font-size:15px; font-weight:600; color:#111827; line-height:1.35; margin:0; }
.kbpc-card__text  { font-size:13px; color:#6b7280; line-height:1.5; margin:0; flex:1; }


.kbpc-card__link { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; text-decoration:none; margin-top:2px; transition:opacity .15s; }
.kbpc-card__link:hover { opacity:.75; text-decoration:underline; }

.kbpc-arrow { width:18px; height:18px; flex-shrink:0; transition:transform .15s; }
.kbpc-card__link:hover .kbpc-arrow { transform:translateX(3px); }
.kbpc-arrow--play { width:14px; height:14px; }

@media (max-width:1024px) {
  .kb-promo-cards--4col { grid-template-columns:repeat(2,1fr); }
  .kb-promo-cards--3col { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .kb-promo-cards--4col,
  .kb-promo-cards--3col,
  .kb-promo-cards--2col { grid-template-columns:1fr; }
  .kbpc-card__img { width:56px; height:56px; }
}