/**
 * Name         : Card
 * Description  : Cards are the main media object. Lay these out ASAP.
 * State        : green
 */

.c-card {
   //list all possible  elements  of card
  @include grid-template(image, title, badge, tags, summary, datetime, action);
   
  // layout  
  display: grid;
  grid-gap: $b/2;
  height: 100%; //stretch to row height because our cards don't know they are in a parent grid
  grid-template-rows: min-content min-content 1fr 1fr;
  grid-template-columns: 1fr min-content;
  grid-template-areas:
      "image     image"
      "title     title"
      "datetime  datetime"
      "tags      action";
  
  
  // styles per element
  &__image { overflow: hidden }
  &__title {
    transition: color 0.4s;

    @include on-event(false, ".c-card") {
      color: color(brand, _500);
      text-decoration: underline;
    }
  }
  &__datetime { @include text--page-date }
  &__tags { margin: auto auto 0 0 }
  &__badge { grid-area: image;}
  &__action {
    margin: auto 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
    @include on-event(false, ".c-card") {
      background: color(black, _500);
      color: color(white, _500);
      border-color: color(black, _500);
    }
  }
}

/**
 * Variants
 * Types of cards: here only event and class
 *
 */

// 1. event
.c-card {
  &--event, &--class {
    padding-bottom: $b/2;
    border-bottom: 5px solid;
  }
  // 2. classes is same as event but the colors are only class colour (green)
  &--class {
    border-color: color(brand-classes, _500);
  }
}

// colours like panels
@each $color, $color-map in $colors {
  .c-card--#{$color} {
    // color : color(white, _500);
    border-color: map-get($color-map, _500) !important;
  }
}