/* v192: same course-card footprint across all Training Hub categories/roles.
   A short category leaves unused columns blank; it never stretches 1–2 cards.
   On narrow screens, every category follows the same responsive column count. */
#stsHubShell .sth-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
/* Frame the ENTIRE course card, not its inner actions / related courses. */
#stsHubShell .sth-grid > .sth-course.sts162-course-card {
  box-sizing:border-box;
  min-width:0;
  width:100%;
  border:1px solid #d3e2ec;
  border-top:4px solid #198ce2;
  border-bottom:4px solid #d8233e;
}
@media (max-width:1199px) {
  #stsHubShell .sth-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:740px) {
  #stsHubShell .sth-grid {grid-template-columns:minmax(0,1fr);}
}
/* The legacy customer Request Training action uses a flex-basis intended for rows;
   reset it in the stacked mobile layout to prevent a giant overflowing button. */
@media (max-width:740px) {
  #stsHubShell .sth-grid .sth-course .sts159-actions {
    flex-direction:column;
    align-items:stretch;
  }
  #stsHubShell .sth-grid .sth-course .sts159-actions .sts159-pending,
  #stsHubShell .sth-grid .sth-course .sts159-actions button.sts159-action {
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    height:auto;
  }
  #stsHubShell .sth-grid .sth-course .sts159-actions button.sts159-action {
    min-height:40px;
    white-space:normal;
  }
}
@media print {
  #stsHubShell .sth-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
  #stsHubShell .sth-grid > .sth-course.sts162-course-card {border-top:4px solid #198ce2;border-bottom:4px solid #d8233e;}
}