/* dates-badge-wrap.v1.css : every dates-and-fees table (.training-table), see
 * lib/enhance/transforms/dates-badge-wrap.ts.
 *
 * The date cell (.table-row > div:first-child) holds the date text followed by zero, one or two
 * .badge spans (Early Bird Discount, Next Batch) as plain inline content. With no rule forcing a
 * break point, the browser wraps the badges onto their own line or keeps them inline purely based on
 * how that date string happens to fit the column's pixel width, so the same markup renders
 * differently row to row (owner 2026-10-25: "the early bird discount is not aligned properly").
 *
 * Fix: the cell becomes a wrapping flex row, and the first badge in it always starts a new line
 * (flex-basis: 100%), so the date is always on its own line and the badge(s) are always together on
 * the line under it, on every row, on every page that uses this table.
 *
 * Scoped to `@media (min-width: 1280px)`: below that, cro-dates-cta.v2.css already turns each row
 * into its own stacked card (training-table-wrapper ... max-width: 1279px) with its own badge margin
 * rule; this transform only touches the plain grid table at the width where that card layout is not
 * in effect, so the two stylesheets never compete over the same rendered row. */

@media (min-width: 1280px) {
  .training-table .table-row > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
  }

  .training-table .table-row > div:first-child .badge:first-of-type {
    flex: 0 0 100%;
    margin-left: 0;
  }
}