sparkbox/local-events-project

.event-card {
  box-sizing: border-box;
  margin: 0 ($card-margin / 2) $card-margin;
  padding: $card-padding;
  min-height: 20em;
  overflow: auto;
  background-color: $white;
  color: $gray-50;
  line-height: 1.5em;

  @media (min-width: $break-large) { margin: 0 0 $card-margin; }
  @media (min-width: 62em) { padding: $card-padding * 2; }

  @media (min-width: $break-extra-large) {
    width: 40%;
    flex-grow: 1;
    &:nth-child(odd) { margin-right: 2em; }
    &:last-of-type { margin-right: 0; }
  }
  
  .single-card & { margin: $card-margin; }
}

.card-front {

  .card-button {
    margin-right: $margin;
    margin-left: 0;
    display: inline-block;
  }

  .card-image-container {
    width: 100%;
    margin: 0 auto 2em;
    text-align: center;
  }

  .card-image {
    max-height: 12em;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .left, .right {
    min-height: 100%;
    padding: 2em 0;
    box-sizing: border-box;
    width: calc(100% - 2em);
    overflow-y: auto;
    overflow-x: auto;
    margin: auto;
  }

  .right {
    border-top: $divider;
    margin: 0 1em;
  }

  @media (min-width: 62em) {

    .left, .right {
      width: 50%;
    }

    .left {
      padding: 0 2em 0 0;
      float: left;
      clear: left;
    }

    .right {
      width: 50%;
      padding: 0 0 0 2em;
      float: right;
      clear: right;
      border-left: $divider;
      border-top: none;
      margin: 0;
    }

  }

  @media (min-width: 72em) {
    .left { width: 40%; }
    .right { width: 60%; }
  }


  .event-title {
    font-weight: $font-weight-head;
    color: $gray-50;
    padding: 0;
    font-size: 2em;
    line-height: 1em;
  }

  .card-left-info {
    li { padding-top: 1em; }
  }

  .icon-container {
    width: 1.5em;
    min-height: 100%;
    float: left;
  }

  .time-info, .location-name {
    display: inline-block;
    width: calc(100% - 1.5em);
  }

  .subhead {
    color: $gray-30;
    text-transform: uppercase;
    font-size: .8em;
    font-weight: $font-weight-body;
    margin-top: $margin;
  }

  .info-subhead {
    width: calc(100% - 1.9em);
    padding-left: 1.9em;
    margin: 0;

    li { padding: 0; }
  }

  .card-offsite-links {
    margin-top: 2em;
  }

  .card-shareable-links {
    margin-top: 2em;
    box-sizing: border-box;
    padding: 0;
    width: 90%;
    display: inline-block;
    border-bottom: none;

    @media (min-width: 70.88em){
      border-bottom: 2px solid $highlight;
    }

    .shareable-link{

      input[type=text] {
        border-style: none;
        font: inherit;
        color: inherit;
        box-sizing: border-box;
        overflow: hidden;
        padding-top: .7em;
        white-space: nowrap;
        width: 100%;
        outline: none;
        margin: 0;
        border-bottom: 2px solid $highlight;
        text-overflow: ellipsis;

        &:focus { font-weight: $font-weight-select; }

        @media (min-width: 70.88em){
          border-bottom: none;
          width: calc(100% - 13em);
        }

      }

      .copy-button {
        @include font-family($font-weight-body);
        text-align: center;
        margin-top: 1em;
        max-width: 16em;
        cursor: pointer;

        @media (min-width: 70.88em) {
          position: relative;
          float: right;
          margin: 0;
        }
      }
    }
  }

  .card-report {
    color: $gray-30;
    font-size: .8em;
    margin-top: 2em;

    .report-link {
      border-bottom: 1px solid $gray-30;
      color: $gray-30;

      &:hover, &:active {
        border-bottom: 1px solid $gray-70;
        color: $gray-70;
        font-weight: $font-weight-head;
      }
    }
  }
}

.card-front {
  .right {
    ul {
      margin-top: 1em;
      li {
        display: inline-block;
        margin-right: .5em;
        white-space: nowrap;
      }
    }
    ul.tag-list {
      columns: 1;
      @media (min-width: 50em) {
        columns: 2;
        li { display: block; }
      }
      @media (min-width: 72em) { columns: 3; }
    }

    ul.offsite-links {
      margin: 0;
      li {
        margin-right: 0;
      }
    }
  }
}

.card-back {
  .right {
    ul {
      margin: 0;
      li {
        margin-top: 1em;
        display: inline-block;
      }
    }
  }
}