/* Desktop alignment refinement for the upcoming course list. */

@media (min-width: 1081px) {
  .course-date-card {
    grid-template-columns:
      minmax(340px, 3.2fr)
      minmax(55px, 0.55fr)
      minmax(80px, 0.75fr)
      minmax(55px, 0.5fr)
      minmax(125px, 1fr)
      minmax(195px, 1.15fr);
    column-gap: clamp(16px, 1.7vw, 26px);
  }

  .course-date-main {
    min-width: 0;
    grid-column: 1;
  }

  .course-date-title {
    max-width: 32ch;
    text-wrap: balance;
  }

  .course-date-card:has(.course-date-action .text-link[href*="kurs=baeume-straeucher-herbst"]) .course-date-title {
    font-size: clamp(1.45rem, 1.65vw, 1.53rem);
  }

  .course-date-facts {
    min-width: 0;
    grid-column: 2 / span 3;
    grid-template-columns: subgrid;
    column-gap: inherit;
  }

  .course-date-facts > div {
    min-width: 0;
  }

  .course-date-facts dd {
    overflow-wrap: break-word;
  }

  .course-date-action {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-column: 5 / -1;
    grid-template-columns: subgrid;
    column-gap: inherit;
    text-align: left;
  }

  .course-date-action .course-status {
    justify-self: start;
    align-items: flex-start;
  }

  .course-date-action .text-link {
    justify-self: end;
    white-space: nowrap;
    text-align: right;
  }
}