/**
 * GSE Theme – Events
 * Upcoming-events list (`.event-container`/`.event`). Used on the
 * homepage, on list pages (byte-identical in list.css), and at least
 * one document page (the Vertretungsplan page shows one at the
 * bottom) — universal enough to be its own file rather than living in
 * articles.css alongside the homepage-only article variants.
 */
@import url("variables.css");

.event-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  min-width: 250px;
  flex: 1 1 0;

  .title {
    font-family: var(--font-serif);
    color: var(--color-muted);
    font-size: var(--fs-lg);
    padding: 10px;

    @media screen and (max-width: 500px) {
      font-size: var(--fs-sm);
    }
  }

  .events {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (max-width: 500px) {
      overscroll-behavior-x: contain;
      display: block;
      width: 100vw;
      white-space: nowrap;
      overflow-x: auto;
    }

.event {
  flex-grow: 1;
  margin: 5px;
  background-color: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-grey-light);
  border-radius: 3px;
  padding: 10px;
  overflow: hidden;
  min-width: 150px;
  min-height: 200px;
  max-width: 200px;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: center;


  @media screen and (max-width: 500px) {
    padding: 5px;
    font-size: var(--fs-sm);
    min-width: 125px;
    display: inline-flex;
  }

  .date {
    display: flex;
    flex-direction: row;


    .part {
      display: flex;
      flex-direction: column;
      align-items: center;

      &.dash {
        align-self: center;
        padding: 5px;
      }

      .day {
        font-size: var(--fs-2xl);
        font-weight: var(--fw-semibold);
      }

      .month,
      .weekday {
        font-size: var(--fs-sm);
      }
    }
  }

  .divider {
    width: 100%;
    height: 1px;
    padding: none;
    background-color: var(--color-teal);
    margin: 5px 0;
  }

  .time {
    font-size: var(--fs-sm);
  }

  .title {
    color: var(--color-dark);
    margin-top: 10px;
    font-family: var(--font-serif);
    word-break: break-word;
  }

  &:hover .title {
    text-decoration: underline;
  }
}
}
}