// @file
// Styles for Cards..

@use '../../01-core' as *;

$card-border-color: var(--gray-3);
$card-accent-border-color: var(--uw-black-primary) !default;
$card-link-color: var(--uw-black-primary) !default;
$card-link-color-hover: var(--gray-5) !default;
$card-meta-color: var(--gray-5) !default;
$card-padding: var(--size-2) !default;

.card {
  width: 100%;

  .views-row & {
    height: 100%;
  }

  .uw-label {
    display: block;
    margin-top: var(--size-2);
  }

  &__catalog-tags {
    padding-bottom: $card-padding;
  }
}

// if card--show-hover class is present then show "
.card--show-hover {
  border: 1px solid $card-border-color;
  box-shadow: var(--shadow-1);
  transition: box-shadow 300ms ease;
  padding: $card-padding;
  &:hover,
  &:focus-within {
    border-bottom: 1px solid $card-accent-border-color;
    box-shadow: var(--shadow-3);
  }
}

.card__image {
  margin-bottom: $card-padding;

  img {
    display: block;
  }

  a {
    display: block;
    img {
      filter: opacity(100%);
      transition: filter 300ms ease;
    }

    &:hover,
    &:focus {
      background: var(--uw-black-primary);
      img {
        filter: opacity(62%);
        transition: filter 300ms ease;
      }
    }
  }
}

.card__featured-image {
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: 45rem;
  justify-items: center;
  min-height: 44rem;
  position: relative;
}

.card__header{
  @include uw-no-breakout();
  margin-bottom: var(--size-3);
  width: 100%;
  .card__node--event & {
    display: grid;
    grid-template-columns: 1fr auto;

    .card__author {
      grid-column: 1 / 2;
    }

    .card__date {
      grid-column: 1 / 2;
    }

    .card__title {
      grid-column: 1 / 2;
    }

    .view-interact {
      background-color: var(--uw-white-1);
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      margin: 0;
      padding: var(--size-2) var(--size-2) 0 0;
      .uw-node__without-media & {
        grid-column: 2 / 3;
        grid-row: inherit;
        margin-bottom: 1rem;
        padding: 0;
      }
    }
  }
}

.card__date {
  font-size: var(--font-size-1);
  margin-bottom: var(--size-2);
  position: relative;
}

.card__title {
  font-family: var(--font-condensedbook);
  line-height: var(--font-lineheight-1);
  margin: 0 0 var(--size-1) 0;
  padding: 0;
  width: 100%;
}

.card__author {
  @include uw-no-breakout();
  font-family: var(--font-systemmedium);
  font-size: var(--font-size-00);
  margin-top: 0;
  padding: 0 0 var(--size-1) 0;
}

// body
.card__body {
  width: 100%;
}

.card__content {
  margin-bottom: var(--size-4);
  width: 100%;
  .card__node--expand-collapse-group &{
    margin-bottom: 0;
  }
  &:empty {
    margin-bottom: 0;
  }
}

.card__position {
  color: var(--uw-black-primary);
  font-size: 1.26562rem;
}

// footer
.card__footer {
  width: 100%;
}

.card__tags {
  margin: 0;
  padding: 0;
  width: 100%;
}

.card__readmore {
  text-align: right;
}

.card__social {
  max-width: 20rem;
  width: 100%;
}

.card__project {

  &-members--content {
    @include uw-flex-grid();

    .card__project-member {
      @include flex(1 1 auto);
      @include flex-grow(1);
      width: 45%;
    }

    @media(min-width: $screen-md) {
      .card__project-member {
        @include flex(1 1 auto);
        @include flex-grow(1);
        width: 20%;
      }
    }
  }
}

// Have not worked on card feature.
.card--feature {
  .card__body {
    padding-top: $card-padding;
  }
  .card__media {
    margin-bottom: 0;
  }
}