@import "settings.breakpoints";
@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

///////////////////////////
// Card Wrapper Styles
///////////////////////////

.c-card {
  border: 1px solid $color-stone-200;
  padding: rem(10);
  background-color: $color-white;
}

.c-card--adv {
  background-color: $color-blue-steel;
  position: relative;
}

///////////////////////////
// Card content styles
///////////////////////////

.c-card__grid {
  @include display-grid;
  @include grid-columns(rem(10), 1fr max-content);
  @include grid-rows(0, auto);

  // The first card in each of the top package types
  .c-card--first &,
  .c-card--hero-lede &,
  .c-card--g2-lede &,
  .c-card--g3-centre-lede &,
  .c-card--g3-left-lede & {
    @include grid-columns(0, auto);
    @include grid-rows(rem(10), grid-repeat(2, auto));

    .c-card__content {
      @include grid-column-area(1, 2);
      @include grid-row-area(2, 3);
    }
    .c-card__media {
      @include grid-column-area(1, 2);
      @include grid-row-area(1, 2);
      width: 100%;
    }
  }
}

.c-card__content {
  @include grid-column-area(1, 2);
}

.c-card__media {
  @include grid-column-area(2, 3);
  width: rem(70);
}

///////////////////////////
// Card Link
///////////////////////////

.c-card__link {
  text-decoration: none;

  &:visited {
    .c-card__hed-text {
      color: $color-grey-660;
      text-decoration: underline;
    }
    .c-video-time {
      text-decoration: none;
    }
  }
  &:hover,
  &:focus {
    // Prevent underline from appearing below icon
    text-decoration: none;
    .c-card__hed-text {
      text-decoration: underline;
    }
    .c-video-time {
      text-decoration: none;
    }
  }
  &:active {
    .c-card__hed-text {
      color: $color-grey-500;
      text-decoration: underline;
    }
    .c-video-time {
      text-decoration: none;
    }
  }
}

///////////////////////////
// Card Labels
///////////////////////////

.c-card__label {
  @include font-gm-sans-bold;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: line-height(12, 12);
  background-color: $color-red-700;
  color: $color-white;
  padding: rem(4) rem(7);
  display: inline-block;
  margin-bottom: rem(10);
}

// Label colours
.c-card__label--gold900 {
  background-color: $color-gold-900;
}
.c-card__label--red500 {
  background-color: $color-red-500;
}
.c-card__label--red700 {
  background-color: $color-red-700;
}
.c-card__label--rust900 {
  background-color: $color-rust-900;
}
.c-card__label--stone999 {
  background-color: $color-stone-999;
}

.c-card__label--muted {
  @include font-gm-sans;
  background-color: transparent;
  color: $color-grey-660;
  padding: 0;

  .c-card--adv & {
    font-family: $font-sans-stack;
    font-weight: bold;
  }
}

///////////////////////////
// Card Hed (Title)
///////////////////////////

.c-card__hed {
  @include font-hed(17, 20);
  letter-spacing: rem(0.3);
  color: $color-grey-900;
  margin: 0;
  .c-card--first &,
  .c-card--hero-lede &,
  .c-card--g2-lede &,
  .c-card--g3-centre-lede &,
  .c-card--g3-left-lede & {
    @include font-hed(19, 22);
  }
}

.c-card__hed-text {
  display: inline;
}

.c-card__video-time {
  white-space: nowrap;
  display: inline-block;
}
.c-card__video-duration {
  @include font-gm-sans;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: line-height(12, 13);
  color: $color-grey-600;
}

///////////////////////////
// Card Dek (Description)
///////////////////////////

.c-card__dek {
  @include font-pratt;
  font-size: rem(17);
  line-height: line-height(17, 20);
  letter-spacing: rem(0.4);
  color: $color-grey-900;
  display: none;
  padding-top: rem(10);
  margin: 0;
  .c-card--first &,
  .c-card--hero-lede &,
  .c-card--g2-lede &,
  .c-card--g3-centre-lede &,
  .c-card--g3-left-lede & {
    font-size: rem(15);
    line-height: line-height(15, 18);
    display: block;
  }
  .c-card--adv & {
    font-family: $font-sans-stack;
    font-weight: normal;
  }
}

///////////////////////////
// Card Meta (authors, timestamp, video duration, etc)
///////////////////////////

.c-card__meta {
  margin-top: rem(10);
  .c-timestamp {
    display: inline-block;
  }
  .c-card__meta__authors {
    margin-right: rem(15);
    display: inline-block;
  }
}

.c-card__author {
  @include font-gm-sans;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: line-height(12, 15);
  color: $color-grey-600;
}
