/* 20260921: SitaB */
/* 16: 4 per row -> 3 per row (col-md-3 -> col-md-4) */
/* previous 20260921: static demo card-grid template (4 per row), pending real data */
.training-card-grid .col-md-4 { margin-bottom: 30px; }
.training-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.1); height: 100%; display: flex; flex-direction: column; }
/* 20260921: SitaB */
/* 17: allow a real cover img inside the placeholder box */
.training-card-img { position: relative; width: 100%; padding-top: 62%; background: #d9d9d9; overflow: hidden; }
.training-card-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.training-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.training-card-title { font-size: 15px; font-weight: 700; color: #222; margin: 0 0 8px; }
.training-card-desc { font-size: 12px; color: #888; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.training-card-meta { display: flex; align-items: center; font-size: 11px; color: #999; margin-bottom: 16px; }
.training-card-meta-icon { width: 16px; height: 16px; border-radius: 50%; background: #ddd; margin-right: 6px; flex: none; }
.training-card-btn.btn { display: block; float: none; text-align: center; margin-top: auto; border-radius: 30px; background: #024771; border-color: #024771; color: #fff; padding: 10px; font-size: 11px; }
@media only screen and (max-width: 991px) { .training-card-grid .col-md-4 { width: 50%; float: left; } }
@media only screen and (max-width: 640px) { .training-card-grid .col-md-4 { width: 100%; float: none; } }