/* 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);
    }
  }

  /* The filters a listing is narrowed to: "Claude ×", each a link that drops it. */
  .listing-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-block-end: calc(var(--space-block) * 1.5);
  }

  .listing-filters__label {
    font-weight: 500;
  }

  .listing-filters__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 16px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    color: var(--color-ink);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover { background: var(--color-surface); }
    }
  }

  .listing-filters__remove {
    font-size: 1.25em;
    line-height: 1;
    color: var(--color-subtle);
  }

  .listing-filters__reset {
    padding-block: 6px;
    color: var(--color-ink);
  }

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

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

  /* A container, so each date lays itself out by the column's width, not the window's. */
  .course-row__dates {
    display: grid;
    gap: 8px;
    container-type: inline-size;
  }

  .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 above, the price and sign-up below. Where the dates column
     has the room (a full-width row on a tablet), all on one line. */
  .listing-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "when when"
      "price action";
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-surface);

    @container (min-width: 540px) {
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-areas: "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;
  }

  /* On two lines it takes the price's place, under the date; on one, the sign-up's. */
  .listing-date__sold-out {
    grid-area: price;
    padding-inline: 0;
    color: var(--color-subtle);

    @container (min-width: 540px) {
      grid-area: action;
      padding-inline: 14px;
    }
  }
}

/* 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%;
  max-width: none; /* the legacy card stops at 500px on narrow screens; a row takes the full width */
  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;
  }
}