/* ------------------------------------ *\
  #CARDS
\* ------------------------------------ */

.c-card {
  @include clearfix();
  margin-bottom: $spacing-unit;
  width: 100%; //So cards by default always take up 100% of the available width available to it.
  position: relative; //So absolutely positioned elements are positioned based on the card itself.
  background-color: palette(white);
  border-radius: $global-border-radius;
  margin-bottom: spacing(medium);
  padding: spacing(large);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-shadow: 0 0px 3px 0px rgba(0,0,0,.2);
  
  > *:last-child {
    margin-bottom: 0;
  }
}


$cards: (
  card_options: (
    colors: (
      'black': palette(black),
      'gray':  palette(gray, lighter),
      'light-gray':  palette(gray, lightest),
      'white':  palette(white),
      'red':   palette(red),
      'navy': palette(navy)

    ),
    sizes: (
      'small': spacing(medium),
      'medium (default)': spacing(large),
      'large': spacing(xlarge)
    )
  )
);

$card_colors: map-get-deep($cards, "card_options", "colors");
@each $name, $color in $card_colors {
  .c-card--#{$name} {
    background-color: $color;
    color: text-contrast($color);
    
    .c-card__image:before {
      border-bottom-color: $color;
    }
  }
};


$sizes: map-get-deep($cards, "card_options", "sizes");
@each $name, $size in $sizes {
  .c-card--#{$name} {
    padding: $size;
  }
};


$json-cards: $cards;
$json-cards: jsonexport('cards.sass.json', $json-cards);



.c-card__link {
  @include font-size(medium);
  @include font-weight(bold);
  // display: block;
  display: inline-block;
}

.c-card__body {
  // padding: $spacing-unit;
  margin-bottom: auto;
}

.c-card__intro {
  padding-top: $spacing-unit;
}

.c-card__image {
  position: relative;
  border-top-left-radius: $global-border-radius;
  border-top-right-radius: $global-border-radius;
  overflow: hidden; //Needed for border-radius to work
  margin-bottom: spacing(medium);
  
  // .c-card__image--flush {
  //   margin-left: -(spacing(medium));
  //   margin-right: -(spacing(medium));
  //   margin-top: -(spacing(medium));
  // }
  // 
  .c-card--rev & {
    order: 2;
    
    
    
    @supports (display: flex){
      margin-bottom: 0;
      margin-top: spacing(medium);
      
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: $global-border-radius;
      border-bottom-right-radius: $global-border-radius;
    }
  }
}

.c-card__image--flush {
  margin-left: -(spacing(medium));
  margin-right: -(spacing(medium));
  margin-top: -(spacing(medium));
  
  @supports (display: flex){
    .c-card--rev & {
      margin-top: spacing(medium);
      margin-bottom: -(spacing(medium));
    }
  }
}



.c-card__image:before {
  content: '';
  border-bottom: $spacing-unit solid;
  border-bottom-color: palette(white);
  border-left: $spacing-unit solid transparent;
  border-right: $spacing-unit solid transparent;
  content: "";
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  position: absolute;
  opacity: 0;
  z-index: 10;
  
  
  @supports (display: flex){
    .c-card--rev & {
      top: 0;
      bottom: auto;
      transform: translateX(-50%) scaleY(-1);
    }
  }
}

.c-card__image--clipped:before {
  opacity: 1;
}