// ==========================================================================
// infoscreen.scss - Styles for Info Screen
// ==========================================================================

.info-screen {
  background: $gray-lightest;

  &-gallery {
    position: relative;

    &:not(:last-child) .swiper-container {
      margin-bottom: 1rem;
    }

    .swiper-container {
      padding-bottom: 0;

      .swiper-pagination {
        bottom: .625rem;

        &-bullet {
          border-color: mix($black, $white, 25%);
          height: 1rem;
          width: 1rem;
          opacity: 1;

          &-active,
          &:hover {
            border-color: $brand-primary;
          }
        }
      }

      .swiper-slide {
        height: auto;
        min-height: calc(50vh - 1.75rem);

        &-full-size {
          min-height: 100vh;

          .info-screen-gallery-box-content-title {
            font-size: 5rem;
          }

          .info-screen-gallery-box-content-date,
          .info-screen-gallery-box-content-place {
            font-size: 2.5rem;
          }
        }
      }
    }

    &-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &-box {
      height: 100%;

      &-content {
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1.5rem;
        height: 100%;

        &-inner {
          display: flex;
          flex-direction: column;
          padding: 3rem 0;
        }

        &--1,
        &--2,
        &--3 {
          .info-screen-gallery-box-content {
            &-date,
            &-place {
              font-size: 1.5rem;
              text-align: center;
            }
          }
        }

        &--1 {
          align-items: flex-start;

          .info-screen-gallery-box-content {
            &-date {
              text-align: center;
              margin-left: 15rem;
            }

            &-place {
              margin-left: 2rem;
            }
          }
        }

        &--2 {
          align-items: center;

          .info-screen-gallery-box-content {
            &-date {
              margin-right: 5rem;
            }

            &-place {
              margin-left: 6rem;
            }
          }
        }

        &--3 {
          align-items: flex-end;

          .info-screen-gallery-box-content {
            &-date {
              text-align: center;
              margin-right: 15rem;
            }

            &-place {
              margin-left: 12rem;
            }
          }
        }

        &-date,
        &-place,
        &-title {
          margin-bottom: 0;

          mark {
            padding: .125rem .25rem;
            color: $white;
            background-color: $brand-primary;
          }
        }

        &-date {
          font-size: 1.5rem;
        }

        &-title {
          font-size: 3rem;
          text-align: center;
          letter-spacing: 0.05rem;
        }
      }
    }
  }

  &-image {
    margin-top: -3.125rem;
  }

  &-teaser {
    letter-spacing: .1em;

    &-headline {
      display: block;
      font-family: $headings-font-family;
      font-size: $font-size-h6;
      font-weight: bold;
      margin-bottom: 1.75rem;
      text-transform: uppercase;
    }

    &-text {
      font-family: $headings-font-family;
      font-weight: bold;
      line-height: 1.66666667;
      text-transform: uppercase;
    }

    p {
      margin-bottom: .25rem;
    }
  }

  h1 {
    font-size: 2.8125rem;
    line-height: 1;
  }

  &-calendar {
    padding-bottom: 2.8125rem;

    .calendar-list {
      &-item {
        box-sizing: border-box;
        padding: .5rem 0.5rem .5rem (($grid-gutter-width-base / 2) + 1.5rem);
        margin-bottom: .4375rem;

        &-title {
          /* was .875rem (~14px) */
          font-size: 1.25rem; // ~20px
        }

        &-subtitle {
          /* was .75rem (~12px) */
          font-size: 1rem; // ~16px
        }

        &-place {
          /* was .6875rem (~11px) */
          font-size: .9375rem; // ~15px
        }

        &-time {
          font-weight: 700;
          /* was .8125rem (~13px) */
          font-size: 1.125rem; // ~18px
        }


        &:after {
          display: none;
        }
      }
    }

    .swiper-container {
      padding-bottom: 2.8125rem;
      margin-bottom: -2.8125rem;

      .swiper-pagination {
        bottom: .4375rem;
      }
    }
  }
}