/* The public course listing (/kurzy-pro-verejnost and its topic and city pages): one row per course. */
@layer components {
  .listing-intro {
    max-inline-size: 65ch;
    margin-block-end: calc(var(--space-block) * 1.5);
    font-size: 1.1em;
    color: var(--color-text);

    a {
      color: var(--color-ink);
    }
  }

  .course-row__description {
    display: grid;
    gap: 8px;
    margin-block: 12px;
  }

  .course-row__detail {
    color: var(--color-ink);
  }

  .course-row__dates {
    display: grid;
    gap: 8px;
  }

  .course-row__dates-title {
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-subtle);
  }

  .course-row__no-dates {
    color: var(--color-subtle);
  }

  .course-row__all-dates {
    justify-self: start;
    color: var(--color-ink);
  }

  /* One date: when and where, the price, and sign-up. */
  .listing-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "when price action";
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-surface);

    @media (max-width: 1000px) {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "when when"
        "price action";
    }
  }

  .listing-date__when {
    grid-area: when;
    min-width: 0;

    strong {
      font-weight: 500;
      color: var(--color-ink);
    }

    span {
      display: block;
      font-size: 0.85em;
      color: var(--color-subtle);
    }
  }

  .listing-date__price {
    grid-area: price;
    font-weight: 500;
    font-variant-numeric: tabular-nums;

    small,
    s {
      font-weight: 300;
      color: var(--color-subtle);
    }
  }

  .listing-date__sign-up,
  .listing-date__sold-out {
    grid-area: action;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.9em;
    white-space: nowrap;
  }

  .listing-date__sign-up {
    background: var(--color-accent);
    color: #000;
    text-decoration: none;
  }

  .listing-date__sold-out {
    color: var(--color-subtle);

    /* On two lines it takes the price's place, under the date. */
    @media (max-width: 1000px) {
      grid-area: price;
      padding-inline: 0;
    }
  }
}

/* The row reuses the legacy course card (.workshops .item in home.css) for its picture classes.
   Those rules are unlayered and beat any layer, so the row's own layout is unlayered too. */
.workshops .items.items--rows {
  flex-direction: column;
}

.workshops .items .item.course-row {
  width: 100%;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: start;
  cursor: default;
}

.workshops .items .item.course-row:hover {
  box-shadow: none;
}

/* The picture runs the full height of the row, however many dates sit beside it. */
.workshops .items .item.course-row .image {
  align-self: stretch;
  height: auto;
  min-height: 180px;
  background-size: cover;
}

.workshops .items .item.course-row .type:empty {
  display: none;
}

.workshops .items .item.course-row .title {
  padding-top: 8px;
}

.workshops .items .item.course-row .title a {
  color: inherit;
}

@media (max-width: 1000px) {
  .workshops .items .item.course-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}