.info-card {
  background: $white;
  border-radius: $border-radius-large;
  box-shadow: none;
  color: $black;
  border: none;
  transition: box-shadow 0.25s;

  &.dark-card {
    background: $bodygrey;
  }

  &:hover {
    box-shadow: $boxshadow-small;
    transition: box-shadow 0.25s;
  }

  a {
    text-decoration: none;
  }

  .card-body {
    padding: 0.625rem 1rem 0.5rem;
  }

  .card-title {
    color: $blue;
    font-size: 1.5rem;
    line-height: 1.75rem;
    margin-bottom: 0.25rem;
  }

  .card-text {
    font-weight: 700;
    font-size: $font-size-extrasmall;
    line-height: 1.75rem;
  }

  .card-img {
    @extend %icon-font;

    font-size: 2rem;
    margin-top: 1rem;

    .ic-3d {
      &::after {
        content: '\e942';
      }
    }

    .ic-video {
      &::after {
        content: '\e943';
      }
    }

    .ic-sound {
      &::after {
        content: '\e944';
      }
    }

    .ic-text {
      &::after {
        content: '\e945';
      }
    }

    .ic-image {
      &::after {
        content: '\e946';
      }
    }
  }
}

.header-card {
  border: 0;
  box-shadow: $boxshadow-small;

  h2 {
    font-size: $font-size-medium;
    margin-bottom: 0.375rem;
    font-weight: 600;
    line-height: normal;
  }

  .card-text {
    font-size: $font-size-small;
    color: $mediumgrey;
  }
}

.related-collections-card {
  background: $white;
  border: 0;
  border-radius: $border-radius-small;
  box-shadow: $boxshadow-small;

  h2 {
    margin-right: 1rem;
  }

  .card-body {
    padding-right: 0.25rem;
    padding-bottom: 0.5rem;
  }

  .related-collections {
    padding: 0;

    .badge-pill {
      margin-bottom: 0.75rem;
      margin-right: 1rem;
    }
  }
}

.content-card {
  $card-line-height: 1.1875rem;

  background: $white;
  border: 0;
  border-radius: $border-radius-small;
  box-shadow: $boxshadow-small;
  color: $black;
  font-size: $font-size-small;
  height: auto;
  line-height: $card-line-height;
  transition: box-shadow 0.25s;

  &.card {
    margin-bottom: 1.5rem;
  }

  @media (min-width: $bp-medium) {
    min-height: 20rem;

    &.mosaic-card {
      min-height: 0;
    }
  }

  a {
    text-decoration: none;
  }

  .card-wrapper {
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }

  .card-img {
    border-radius: 4px 4px 0 0;
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    max-height: 13rem;
    min-height: 13rem;
    width: 100%;

    &.placeholder {
      background: $offwhite;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
    }
  }

  .card-body {
    flex: 0;
    padding: 1rem;
    width: 100%;
  }

  .card-title {
    font-size: 1rem;
    font-weight: 600;
    max-height: $card-line-height;
    margin-bottom: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .card-subtitle {
    color: $mediumgrey;
    font-size: $font-size-extrasmall;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
  }

  .card-title:last-child,
  .card-subtitle:last-child {
    margin-bottom: 0;
  }

  .card-text {
    color: $mediumgrey;

    p {
      max-height: 4.75rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }

    &:last-of-type p {
      margin-bottom: 0;
    }
  }

  .card-link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  .is-external-link .card-title {
    display: flex;
    align-items: flex-end;

    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    &::after {
      content: '\e900';

      @extend %icon-font;

      margin-left: 5px;
    }
  }

  &.entity-card {
    .card-img {
      position: relative;

      &::after {
        border-bottom: 88px solid $white;
        border-left: 44px solid transparent;
        bottom: 0;
        content: '';
        display: block;
        height: 0;
        position: absolute;
        right: 0;
        width: 0;
      }
    }

    @media (min-width: $bp-medium) {
      min-height: auto;
    }
  }

  &.explore-card {
    flex: 100%;
    margin-bottom: 1rem;
    min-height: auto;

    &:last-child {
      margin-bottom: 0;
    }

    @media (min-width: $bp-medium) {
      margin-right: $grid-gutter-narrow;
      margin-left: $grid-gutter-narrow !important;

      &:last-child {
        margin-bottom: 1rem;
      }
    }
  }

  &.create-card {
    background: $white;
    cursor: pointer;

    .card-inner {
      min-height: 18rem;
      margin: 1rem;
      background-color: $bodygrey;
      flex-direction: column;
    }

    .card-title {
      display: block;
      max-height: none;
      line-height: 1.5;
    }

    .icon-ic-add {
      color: #4d4d4d;
      font-size: 3.5rem;
    }
  }

  &.mini-card {
    min-height: auto;
    padding: 1rem;

    .card-wrapper {
      flex-direction: row;
      justify-content: space-between;
    }

    .card-img {
      border-radius: 4px;
      display: block;
      flex: 0 0 auto;
      height: 80px;
      min-height: initial;
      order: 2;
      overflow: hidden;
      position: relative;
      width: 80px;

      img {
        height: 80px;
        margin: 0;
        position: absolute;
      }

      &::after {
        content: '';
        display: block;
        padding-bottom: 100%;
        width: 100%;
      }
    }

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: auto;
        width: auto;
      }
    }

    .card-title {
      overflow-wrap: break-word;
      word-break: break-word;
      max-height: 3.5625rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
    }

    .card-body {
      flex-grow: 1;
      margin-right: 1rem;
      order: 1;
      padding: 0;
      width: 55%;
    }

    .card-text {
      color: $blue;
    }
  }

  &.list-card {
    .card-wrapper {
      box-shadow: none;

      &:hover {
        box-shadow: $boxshadow-large;
        transition: box-shadow 0.25s;
      }
    }

    .card-img {
      background-color: $mediumgrey;
      border-radius: $border-radius-small;
      display: inline-flex;
      justify-content: center;

      img {
        border-radius: 0 calc(0.25rem - 1px) calc(0.25rem - 1px) 0;
        object-fit: contain;
        height: auto;
        max-height: 100%;
        width: auto;
      }
    }

    .data-and-buttons-wrapper {
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
      color: $mediumgrey;
      margin: auto auto 0 0;

      >  * {
        margin-right: 1rem;
        margin-top: 0.5rem;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        margin-right: 0.3rem;
        line-height: inherit;
      }

      .btn-light-flat {
        color: $mediumgrey;
        padding: 0;
        margin-right: 1rem;
        line-height: inherit;

        &.pin-button {
          display: inline-flex;
          order: 3;
        }

        &:hover {
          color: $innovationblue;
        }

        &.active {
          &.like-button {
            color: $red;
          }

          &.pin-button {
            color: $darkgreen;
          }
        }
      }
    }

    @media (min-width: $bp-medium) {
      min-height: 0;

      .card-img {
        flex: 0 0 10rem;
        order: 2;
        width: 10rem;
        height: 10rem;
        max-height: none;
        min-height: 0;
        margin: 1.25rem 1.25rem 1.25rem 0;
      }

      .card-wrapper {
        flex-direction: row;
        justify-content: space-between;

        .card-body {
          flex: none;
          padding: 1.25rem;
          width: calc(100% - 12rem);
          display: flex;
          flex-direction: column;
        }

        .card-subtitle {
          font-size: $font-size-small;
          margin-bottom: 1.125rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .title-texts-wrapper {
          max-height: calc(4 * $card-line-height);
          overflow: hidden;
        }

        .card-title {
          margin-bottom: $card-line-height;
          -webkit-line-clamp: 4;
          max-height: none;
        }

        .card-text p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .data-and-buttons-wrapper {
        flex-wrap: nowrap;
        max-width: 100%;

        .license-label {
          min-width: 0;
        }

        .license-label-text {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }

  &:not(.list-card) {
    .user-buttons {
      justify-content: flex-end;
      visibility: hidden;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      top: 1rem;
      right: 0;
      z-index: 3;
      width: 100%;

      .btn {
        visibility: hidden;
      }
    }

    &:hover {
      box-shadow: $boxshadow-large;

      .user-buttons .btn {
        visibility: visible;
        margin-right: 0.5rem;

        &:last-of-type {
          margin-right: 1rem;
        }

        &:first-of-type {
          &.pin-button {
            margin-left: 1rem;

            &.active {
              visibility: visible;
            }

            +.btn {
              margin-left: auto;
            }
          }
        }

        &.recommendation-button {
          &:first-of-type {
            margin-left: auto;
          }
        }
      }
    }
  }

  &.list-card .user-buttons {
    white-space: nowrap;
    display: inline-flex;
  }
}

.card-deck {
  flex-flow: column nowrap;
}

.card-group-list .card,
.card-deck-3-cols .card,
.card-deck-4-cols .card {
  flex: 0 0 100%;
}

.card-group-list .header-card,
.card-group-list .related-collections-card {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: $bp-medium) {
  .card-deck {
    flex-flow: row wrap;
  }

  .card-deck-4-cols.narrow-gutter {
    margin-left: -$grid-gutter-narrow;
    margin-right: -$grid-gutter-narrow;
  }

  .card-deck-3-cols .card {
    flex: 0 0 calc(100% / 3 - #{$grid-gutter * 2});
  }

  .card-deck-4-cols .card {
    flex: 0 0 calc(100% / 2 - #{$grid-gutter * 2});
  }

  .card-deck-4-cols.narrow-gutter .card {
    flex: 0 0 calc(100% / 2 - #{$grid-gutter-narrow * 2});
  }
}

@media (min-width: $bp-large) {
  .card-deck-4-cols .card {
    flex: 0 0 calc(100% / 4 - #{$grid-gutter * 2});
  }

  .card-deck-4-cols.narrow-gutter .card {
    flex: 0 0 calc(100% / 4 - #{$grid-gutter-narrow * 2});
  }
}

.side-filters-enabled {
  @media (min-width: $bp-medium) {
    .card-deck-3-cols,
    .card-deck-4-cols {
      .card {
        flex: 0 0 calc(100% / 2 - #{$grid-gutter * 2});
      }
    }
  }

  @media (min-width: $bp-large) {
    .card-deck-3-cols,
    .card-deck-4-cols {
      .card {
        flex: 0 0 calc(100% / 3 - #{$grid-gutter * 2});
      }
    }
  }

  @media (min-width: $bp-extralarge) {
    .card-deck-3-cols,
    .card-deck-4-cols {
      .card {
        flex: 0 0 calc(100% / 4 - #{$grid-gutter * 2});
      }
    }
  }
}

.masonry-container {
  width: 100%;

  @media (max-width: $bp-medium - 1) {
    &[style] {
      height: auto !important;
    }
  }

  @media (min-width: $bp-medium) {
    margin-left: -0.5 * $masonry-gutter;
    margin-right: -0.5 * $masonry-gutter;
    width: calc(100% + $masonry-gutter);
  }

  // TODO reorder masonry-container and :not(.list-card) selectors
  .related-collections-card:not(.list-card),
  .content-card:not(.list-card) {
    display: inline-block;
    vertical-align: top;
    width: 100%;

    @media (max-width: $bp-medium - 1) {
      &[style] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
      }
    }

    @media (min-width: $bp-medium) {
      margin-left: 0.5 * $masonry-gutter;
      margin-right: 0.5 * $masonry-gutter;
      width: calc(100% / 2 - $masonry-gutter);
    }

    @media (min-width: $bp-extralarge) {
      width: calc(100% / 4 - $masonry-gutter);
    }

    .card-wrapper {
      &::before {
        content: '';
        height: 100%;
        position: absolute;
        transition: box-shadow 0.25s;
        width: 100%;
        z-index: -1;
      }

      &:hover {
        &::before {
          box-shadow: $boxshadow-large;
        }
      }

      .card-img {
        min-height: 12rem;
        max-height: none;
      }

      .card-title {
        display: block;
        -webkit-line-clamp: initial;
        -webkit-box-orient: initial;
        max-height: none;
      }

      .card-text:last-of-type p {
        max-height: none;
        display: block;
        -webkit-line-clamp: initial;
        -webkit-box-orient: initial;
      }
    }
  }

  @at-root .side-filters-enabled & {
    .content-card,
    .related-collections-card {
      @media (min-width: $bp-medium) {
        width: calc(100% / 2 - $masonry-gutter);
      }

      @media (min-width: $bp-large) {
        width: calc(100% / 3 - $masonry-gutter);
      }

      @media (min-width: $bp-extralarge) {
        width: calc(100% / 4 - $masonry-gutter);
      }
    }

    .header-card {
      @media (max-width: $bp-medium) {
        &[style] {
          position: relative !important;
          left: auto !important;
          top: auto !important;
        }
      }

      @media (min-width: $bp-medium) {
        width: calc(100% - $masonry-gutter);
        margin-left: 0.5 * $masonry-gutter;
        margin-right: 0.5 * $masonry-gutter;
      }

      @media (min-width: $bp-large) {
        width: calc(100% / 1.5 - $masonry-gutter);
      }

      @media (min-width: $bp-extralarge) {
        width: calc(100% / 2 - $masonry-gutter);
      }
    }
  }
}

.card.card-group-card .card-body {
  padding-bottom: 0.5rem;
}

.browse-section {
  .content-card:not(.mini-card) a .card-body {
    min-height: 10rem;
  }
}

.info-card-section {
  .card-deck-3-cols {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-right: -$grid-gutter;
    margin-left: -$grid-gutter;

    .card {
      flex: 0 0 calc(100% / 2 - #{$grid-gutter * 2});
      margin: $grid-gutter;

      @media (min-width: $bp-medium) {
        flex: 0 0 calc(100% / 3 - #{$grid-gutter * 2});
      }
    }
  }
}

.card.card-group-card {
  border: 0;

  h2 {
    font-size: $font-size-extrasmall;
    font-weight: 600;
    line-height: 1rem;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    color: $mediumgrey;
  }

  .card-group {
    column-gap: 1rem;

    .list-card {
      box-shadow: none;
      margin-bottom: 1.5rem;
      flex: 100%;
      border-radius: 0;

      @media (min-width: $bp-medium) {
        flex: calc(50% - 1rem);
        margin-bottom: 0.5rem;
        max-width: 50%;
      }

      &:hover {
        background: $bodygrey;
      }

      .card-wrapper {
        flex-direction: row;

        @media (min-width: $bp-medium) {
          padding: 0.5rem;
        }

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

      .card-img {
        width: 88px;
        height: 88px;
        flex: 0 0 88px;
        min-height: 0;
        order: 2;
        margin: 0;
        margin-left: 1rem;

        img {
          object-fit: cover;
        }
      }

      .card-body {
        justify-content: space-between;
        order: 1;
        display: flex;
        flex-direction: column;
        padding: 0;
        flex: 100%;

        .title-texts-wrapper {
          order: 1;

          .card-title {
            line-height: 1.5;
            overflow: initial;
            display: inline;
            -webkit-line-clamp: none;
          }
        }

        .card-subtitle {
          font-size: $font-size-small;
          font-weight: normal;
          line-height: 20px;
          order: 2;
          margin-bottom: 0;
          text-transform: none;
        }
      }
    }
  }
}