.front-page-events, .event-program, .events {
  background: $color-background-events;
  color: $color-white;
}

.events {
  padding: 2rem 0 0;
}

.event-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem 1rem;
  .event-types {
    display: none;
  }
  @media (max-width: $media-s) {
    padding: 0 .6rem .6rem;
  }
}

.event-grouped-by-month {
  width: 100%;
  margin: 0;
  padding: 0 1rem 1rem;
  @media (max-width: $media-s) {
    padding: 0 0 1rem;
  }

  .event-group-header {
    text-align: left;
    border-bottom: 2px solid $color-yellow;
    color: $color-yellow;
    margin: 0 1.5rem 1rem;
    padding: 0.4rem 2rem 0.4rem 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.2;
    letter-spacing: 0.05em;

    @media (max-width: $media-s) {
      margin: 0 .6rem 0.5rem;
    }
  }

  .event-meta, .event-date-weekday, .event-date-day-month {
    transition: none;
  }

  .event-types {
    display: none;
  }
}

.event {
  width: calc(25% - 1rem);
  margin: 0 0.5rem 1rem;
  position: relative;
  text-decoration: none;
  color: $color-black;
  background: $color-white;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;

  &:nth-child(9),
  &:nth-child(10) {
    display: none;
  }

  &-image {
    display: block;
    position: relative;
    width: 100%;
    height: 8rem;
    margin: 0;
    overflow: hidden;
    background: $color-black;

    .gatsby-image-wrapper {
      height: 100%;
    }
  }

  &-header {
    width: 100%;
    line-height: 1.1;
    padding-bottom: 0.5rem;
  }
  
  &-title {
    display: block;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 1rem 0.6rem 0.8rem;
  }

  .event-date {
    background: $color-yellow;
    padding: 0.3rem 0.6rem;
  }

  .event-date, .event-meta {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
  }

  .event-start {
    text-transform: none;
    padding: 0.666rem;
  }

  transition: box-shadow .1s ease-in-out;
  &:hover {
    color: $color-black;
    box-shadow: 0 0 0 4px $color-black, 0 0 0 6px $color-orange;
  }

  @media (min-width: $media-xl) {
    width: calc(20% - 1rem);
    &:nth-child(9),
    &:nth-child(10) {
      display: block;
    }
  }
  @media (max-width: $media-l) {
    width: calc(33.333333% - 1rem);
    &:nth-child(9) {
      display: block;
    }
  }
  @media (max-width: $media-m) {
    width: calc(50% - 1rem);
    &:nth-child(9),
    &:nth-child(10) {
      display: none;
    }
  }
  @media (max-width: $media-s) {
    width: 100%;
    margin: 0 0 .8rem;
    flex-direction: row;
    align-items: flex-start;

    &:nth-child(7),
    &:nth-child(8) {
      display: none;
    }

    &-image {
      width: 36%;
      height: 100%;
    }
  
    &-header {
      width: 64%;
    }

    &:hover {
      box-shadow: none;
    }
  }

  &-content {
    margin: 0 auto;

    @media (max-width: $media-s) {
      margin: 0 1rem;
    }

    img, div {
      max-width: 100%;
    }

    ul {
      max-width: $width-m;
      margin: 0 auto 1rem;
    }

    ul, p, span {
      margin: 0 auto 1.6rem;

      /* overwrite styles from wordpress */
      text-align: left !important;
      color: inherit !important;
      font-family: inherit !important;
    }

    h1, h2, h3, h4, h5, h6 {
      max-width: $width-m;
      margin-top: 3.6rem;
    }
  }
}

.event-types {
  ul {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
  }
  li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    margin-right: 0.2rem;
    &:last-child {
      margin-right: 0;
    }

    color: $color-black;
    background: $color-white;
    opacity: 0.6;
    padding: 0.2rem 0.3rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: $font-s;
    
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}

.event-page {
  background: $color-white;
  color: $color-black;
  padding: 0 0 4rem;
}

.event-hero {
  background: $color-black;
  color: $color-white;
  overflow: hidden;
  padding: 0 1rem;
  .event-meta {
    color: $color-white;
  }
  &-inner {
    max-width: $width-l;
    margin: 2rem auto 0;
    padding: 2rem 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  &_text, &_image {
    width: 50%;
  }

  &_image {
    .gatsby-image-wrapper {
      margin-left: -25%;
    }
  }

  &_image {
    position: relative;
    &:after {
      content: " ";
      display: block;
      position: absolute;
      top: -1rem; right: -1rem; bottom: -1rem; left: -25%;
      background: linear-gradient(90deg, $color-black, transparent, transparent)
    }
  }

  &_text {
    padding: 1.6rem 0 2rem 0;
    z-index: 8;
  }

  h1 {
    font-size: 3.6rem;
    line-height: 1;
    margin-right: -3.6rem;
    text-shadow: -0.06rem 0.1rem 0.26rem rgba(0, 0, 0, 0.9);
    margin-bottom: 0;
  }

  a {
    color: $color-bloodorange;
  }

  .event-meta-venue {
    margin-bottom: 1rem;
    font-size: 2rem;
    font-style: italic;
  }

  .event-date {
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .event-types {
    a {
      color: $color-black;
    }
  }

  @media (max-width: $media-s) {
    h1 {
      font-size: 2rem;
      margin: 0 auto;
      line-height: 1.2;
    }
  }

  @media (max-width: $media-m) {
    padding: 0 1rem;
    text-align: center;
    &_text, &_image {
      width: 100%;
    }
    &_image {
      .gatsby-image-wrapper {
        width: calc(100% + 2rem);
        margin: 0 -1rem;
      }
    }
    &_text {
      padding: 0;
    }
    h1 {
      margin: 0 auto;
    }
    .event-meta-venue {
      font-size: 1rem;
    }
    .event-types ul {
      text-align: center;
      margin: 1rem auto;
    }
  }

  .event-organizers {
    margin-bottom: 1rem;
  }
}

.event-links {
  max-width: $width-l;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -2.5rem auto 3rem;
  padding: 1rem 0;

  .event-link {
    display: block;
    width: calc(50% - 0.5rem);
    margin: 0;
    padding: 2px;
    position: relative;
    z-index: 9001;

    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;

    color: $color-black;
    transition: all .1s ease-in-out;
    &:hover {
      transition: all .16s ease-in-out;
    }
    span {
      display: block;
      width: 100%;
      padding: 0.5rem 1rem;
    }
  }

  .ticket-url {
    background: $color-orange;
    border: 2px solid $color-orange;
    span {
      background: $color-orange;
    }
    &:hover {
      background: transparent;
    }
  }

  .facebook-url {
    background: $color-yellow;
    border: 2px solid $color-yellow;
    span {
      background: $color-yellow;
    }
    &:hover {
      background: transparent;
    }
  }

  @media (max-width: $media-m) {
    padding: 1rem;
  }
  @media (max-width: $media-s) {
    display: block;
    margin-bottom: 1rem;
    .event-link {
      width: 100%;
      margin-bottom: 0.5rem;
      span {
        padding: 0.5rem;
      }
    }
  }
}

.event-organizer {
  &-info {
    max-width: $width-m;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
  }
  &-read-more {
    a {
      display: block;
      margin-top: .5rem;
      width: 100%;
      color: $color-orange;
      text-decoration: underline;
      font-size: 1rem;
      text-align: center;
      &:hover {
        color: $color-white;
      }
    }
  }
}

.event-list-filter {
  color: $color-white;
  width: 100%;
  max-width: $width-s;
  margin: 2rem auto;
  padding: 0 1rem;
  font-size: $font-s;

  &-heading {
    color: $color-orange;
  }

  @media (max-width: $media-s) {
    max-width: none;
  }
}

.Dropdown-root {
  position: relative;
  font-weight: 700;
}

.Dropdown-control {
  position: relative;
  overflow: hidden;
  background: $color-black;
  border: 2px solid $color-orange;
  color: $color-white;
  outline: none;
  padding: .2rem .6rem .3rem;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

.Dropdown-arrow {
  border-color: $color-orange transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  content: ' ';
  display: block;
  height: 0;
  margin-top: -2.5px;
  position: absolute;
  right: .8rem;
  top: calc(50%);
  width: 0;
}

.is-open .Dropdown-arrow {
  border-color: transparent transparent $color-orange;
  border-width: 0 5px 5px;
}

.Dropdown-menu {
  background: $color-black;
  border: 2px solid $color-orange;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  margin-top: -2px;
  padding: .3rem 0;
  max-height: 300px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}

.Dropdown-option {
  cursor: pointer;
  display: block;
  padding: .4rem .6rem;
  line-height: 1.1;
  color: $color-orange;

  &:hover {
    color: $color-white;
  }

  &.is-selected {
    color: darken($color-orange, 30%);
    cursor: default;
  }
}

.event-list-tumbleweed {
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  text-align: center;
}