/**
* Mixins to cards grids and cards.
*/

@mixin masonry-grid {
  display: flex;
  flex-direction: column;

  @include media-up(md) {
    flex-flow: row wrap;
    column-gap: $column-gutter-desktop;
    align-items: flex-start;
  }
}

@mixin card-base {
  position: inherit;
  position: relative;
  text-align: left;

  .work-card-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;

    + .card__wrapper {
      position: relative;
      z-index: 0;

      .info,
      .title {
        @include link-underline;
      }
    }

    &:hover + .card__wrapper {
      .text-underline-hover {
        @include link-underline-active;
      }
    }
  }

  .card__wrapper {
    display: flex;
    flex-direction: column;
    row-gap: $spacing-16;
  }

  .card__texts {
    position: relative;
    padding: 0 $spacing-24;

    .title {
      margin-bottom: $spacing-8;
    }

    .content {
      margin-bottom: $spacing-24;
    }

    .event-date {
      @include text-x-small;

      margin-bottom: $spacing-20;
      font-weight: $font-weight-semibold;

      @include media-up(md) {
        @include text;

        font-weight: $font-weight-semibold;
      }
    }

    .info {
      @include text-small;

      @include media-up(md) {
        font-size: 24px;
        line-height: 1.4;
      }
    }

    .work-start-date,
    .event-location {
      &::before {
        display: inline;
        content: '\002C\0020';
      }

      &.noComma {
        &::before {
          content: none;
        }
      }
    }

    .work-end-date {
      &::before {
        display: inline;
        content: '\0020\2012\0020';
      }
    }

    .link {
      @include link-underline-full;
    }
  }
}

@mixin image-card-default {
  @include card-base;

  margin-bottom: $spacing-64;

  @include media-up(md) {
    margin-bottom: $spacing-120;
  }

  .card__texts {
    width: max-content;

    .title {
      margin: 0;
    }
  }

  &:nth-child(4n + 1),
  &:nth-child(4n + 2),
  &:nth-child(4n + 3),
  &:nth-child(4n + 4) {
    width: 100%;

    @include media-up(md) {
      @include grid-column(4);

      .card__wrapper {
        padding: 0 calc(calc(calc(100% - #{$column-gutter-desktop * 5}) / 6));
      }
    }

    @include media-up(lg) {
      @include grid-column(6);
    }
  }

  &:nth-child(4n + 1),
  &:nth-child(4n + 2) {
    @include media-up(md) {
      .card__wrapper {
        padding-right: 0;
      }
    }
  }

  &:nth-child(4n + 3),
  &:nth-child(4n + 4) {
    @include media-up(md) {
      .card__wrapper {
        padding-left: 0;
      }
    }
  }

  &:nth-child(2) {
    @include media-up(md) {
      margin-top: $spacing-120;
    }

    @include media-up(lg) {
      margin-top: multiple(78);
    }
  }

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

    @include media-up(md) {
      margin-bottom: 0;
    }
  }
}

@mixin event-card-default {
  @include card-base;
}

@mixin event-card-big {
  @include card-base;

  width: 100%;
  max-width: 888px;
  margin: 0 auto;
  margin-bottom: $spacing-80;
  text-align: center;

  .card__wrapper {
    flex-direction: column-reverse;
    row-gap: $spacing-24;

    @include media-up(md) {
      row-gap: $spacing-40;
    }
  }

  .card__texts {
    padding: 0;

    .title,
    .content {
      max-width: 590px;
      margin-right: auto;
      margin-left: auto;
    }

    .content {
      @include media-down(md) {
        display: none;
      }
    }

    .event-date {
      margin-bottom: $spacing-24;

      @include media-up(md) {
        margin-bottom: $spacing-8;
      }
    }
  }
}

@mixin work-card-default {
  @include card-base;

  .card__image {
    .image-responsive {
      img {
        object-fit: contain;
        object-position: top center;
      }
    }
  }

  .card__texts {
    display: flex;
    flex-direction: column-reverse;

    .title {
      @include heading-3-mobile;

      margin-bottom: 0;

      @include media-up(md) {
        @include heading-3;
      }
    }

    .info {
      @include text-small;

      margin-bottom: $spacing-8;

      @include media-up(md) {
        @include text;
      }
    }
  }
}

@mixin work-card-big {
  @include card-base;

  margin: 0 auto;

  @include media-up(md) {
    max-width: 534px;
  }

  .card__wrapper {
    row-gap: $spacing-16;
  }

  .card__texts {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;

    @include media-down(md) {
      padding: 0;
    }

    .work-name-container {
      display: inline;

      span {
        font-size: 14px;
        font-weight: 500;
      }

      span + span::before {
        font-size: 10px;
        content: ' • ';
        position: relative;
        top: -2px;
        padding: 0 8px;
      }
    }

    .title {
      @include text-small;

      margin-bottom: 0;

      @include media-up(md) {
        @include text;
      }

      &.contain-link {
        text-align: center;
      }
    }

    .info {
      @include heading-4;

      margin-bottom: $spacing-4;
      text-align: center;
    }
  }
}

@mixin work-card-small {
  @include card-base;

  .card__image {
    @include image-aspect-ratio(100%, 100%);

    img {
      object-fit: contain;
      object-position: bottom left;
    }
  }

  .card__texts {
    padding: 0;
    display: flex;
    flex-direction: column-reverse;

    .title {
      @include heading-4;

      margin-bottom: 0;

      &.contain-link {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%;
      }
    }

    .info {
      @include text-x-small;

      margin-bottom: $spacing-4;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 120%;
      letter-spacing: 0.32px;
    }
  }
}

@mixin author-card-default {
  @include card-base;

  .card__image {
    .image-responsive {
      img {
        object-fit: contain;
        object-position: top center;
        max-height: 650px;
      }
    }
  }

  .card__texts {
    display: flex;
    flex-direction: column-reverse;

    .title {
      margin-bottom: 0;
    }

    .info {
      @include text-small;

      margin-bottom: $spacing-8;

      @include media-up(md) {
        @include text;
      }
    }
  }
}

@mixin card-masonry-left-right {
  margin-bottom: $spacing-64;

  @include media-up(md) {
    margin-bottom: $spacing-120;
  }

  &:nth-child(4n + 1),
  &:nth-child(4n + 2),
  &:nth-child(4n + 3),
  &:nth-child(4n + 4) {
    width: 100%;

    @include media-up(md) {
      @include grid-column(4);

      .card__wrapper {
        padding: 0 calc(calc(calc(100% - #{$column-gutter-desktop * 5}) / 6));
      }
    }

    @include media-up(lg) {
      @include grid-column(6);
    }
  }

  &:nth-child(4n + 1),
  &:nth-child(4n + 2) {
    @include media-up(md) {
      .card__wrapper {
        padding-right: 0;
      }
    }
  }

  &:nth-child(4n + 3),
  &:nth-child(4n + 4) {
    @include media-up(md) {
      .card__wrapper {
        padding-left: 0;
      }
    }
  }

  &:nth-child(2) {
    @include media-up(md) {
      margin-top: $spacing-120;
    }
  }

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

    @include media-up(md) {
      margin-bottom: 0;
    }
  }
}

@mixin card-masonry-right-left {
  margin-bottom: $spacing-64;

  @include media-up(md) {
    margin-bottom: $spacing-120;
  }

  &:nth-child(4n + 1),
  &:nth-child(4n + 2),
  &:nth-child(4n + 3),
  &:nth-child(4n + 4) {
    width: 100%;

    @include media-up(md) {
      @include grid-column(4);

      .card__wrapper {
        padding: 0 calc(calc(calc(100% - #{$column-gutter-desktop * 5}) / 6));
      }
    }

    @include media-up(lg) {
      @include grid-column(6);
    }
  }

  &:nth-child(4n + 1),
  &:nth-child(4n + 2) {
    @include media-up(md) {
      .card__wrapper {
        padding-left: 0;
      }
    }
  }

  &:nth-child(4n + 3),
  &:nth-child(4n + 4) {
    @include media-up(md) {
      .card__wrapper {
        padding-right: 0;
      }
    }
  }

  &:nth-child(2) {
    @include media-up(md) {
      margin-top: $spacing-120;
    }
  }

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

    @include media-up(md) {
      margin-bottom: 0;
    }
  }
}