@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;
  width: 100%;
}

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

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

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

  // The first card in each of the top package types
  .c-card--topstory-no-img &,
  .c-card--hero-story &,
  .c-card--2package-imgleft-story &,
  .c-card--3package-imgmiddle-story &,
  .c-card--3package-imgleft-story & {
    @include grid-template-columns(0, auto);
    @include grid-template-rows(rem(10), grid-repeat(2, auto));

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

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

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

  > .c-image {
    display: none;
  }

  .c-image-container {
    display: block;
  }
}

.c-card--opinion .c-card__media,
.c-card--column .c-card__media {
  > .c-image {
    display: block;
  }
  .c-image-container {
    display: none;
  }
}

///////////////////////////
// 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: 0;
  color: $color-grey-900;
  margin: 0;
  .c-card--topstory-no-img &,
  .c-card--hero-story &,
  .c-card--2package-imgleft-story &,
  .c-card--3package-imgmiddle-story &,
  .c-card--3package-imgleft-story & {
    @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: 0;
  color: $color-grey-900;
  display: none;
  padding-top: rem(10);
  margin: 0;
  .c-card--topstory-no-img &,
  .c-card--hero-story &,
  .c-card--2package-imgleft-story &,
  .c-card--3package-imgmiddle-story &,
  .c-card--3package-imgleft-story & {
    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,
  .c-card__meta__authors {
    display: inline-block;
    margin-right: rem(15);
  }
}

.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;
}

///////////////////////////
// Inverted cards
///////////////////////////

.c-card--inverted {
  border-color: $color-stone-500;
  background-color: transparent;

  // Label colours
  .c-card__label {
    background-color: $color-white;
    color: $color-grey-660;
  }
  .c-card__label--muted {
    background-color: transparent;
    color: $color-white;
  }

  // Text colours
  .c-card__hed,
  .c-card__dek,
  .c-card__video-duration,
  .c-card__author,
  .c-timestamp {
    color: $color-white;
  }
  .c-card__link {
    &:visited {
      .c-card__hed-text {
        color: $color-stone-200;
      }
    }
    &:active {
      .c-card__hed-text {
        color: $color-stone-500;
      }
    }
  }

  // Icon colours
  .c-indicator-icon__art {
    fill: $color-white;
  }
  .c-indicator-icon__art--canpro {
    fill: $color-canpro-300;
  }
  .c-indicator-icon__art--ga {
    fill: $color-blue-200;
  }
}

// Key icon changes opacity when subscribed user, cannabis pro user, globe advisor user
// is logged in and key is on a dark background
.u-user-role--subscribed {
  .c-card--inverted {
    .c-indicator-icon__art--key {
      fill: $color-stone-300;
      opacity: 0.5;
    }
  }
}
.u-user-entitlement--cannabis-pro {
  .c-card--inverted {
    .c-indicator-icon__art--canpro {
      fill: $color-canpro-300;
      opacity: 0.6;
    }
  }
}
.u-user-entitlement--advisor {
  .c-card--inverted {
    .c-indicator-icon__art--ga {
      fill: $color-blue-200;
      opacity: .6;
    }
  }
}

// CREA Card Styles
.c-card--crea {
  @include display-grid;
  @include grid-template-columns(0, 1fr);
  @include grid-template-rows(0, grid-repeat(3, auto) 1fr);
  border: rem(3) solid $color-gold-crea;
}

.c-card--crea--hidden {
  visibility: hidden;
  height: 0;
  padding: 0;
}

.c-card--crea__image {
  @include grid-row(1, 2);
  @include grid-column(1, 2);
  @include display-grid;
  @include grid-template-rows(0, 1fr);
  @include grid-template-columns(0, 1fr);
  background-color: $color-stone-200;
  position: relative;
  margin-bottom: rem(15);
  .c-image-container {
    @include grid-row(1, 2);
    @include grid-column(1, 2);
    @include grid-align-self(center);
    @include grid-justify-self(center);
  }
}

.c-card--crea__gallery-open {
  position: absolute;
  bottom: rem(10);
  right: rem(10);
}

.c-card--crea__gallery-open__icon {
  width: rem(28);
  height: rem(28);
  fill: $color-red-300;
  &:visited {
    fill: $color-grey-300;
  }

  &:hover, &:focus {
    fill: $color-red-700;
  }

  &:active {
    fill: $color-red-800;
  }
}

.c-card--crea__info {
  @include grid-row(2, 3);
  text-align: center;
  color: $color-grey-900;
}

.c-card--crea__info__price {
  @include font-pratt;
  font-size: rem(34);
  line-height: 1;
  letter-spacing: 0;
  display: block;
  margin-bottom: rem(10);
}

.c-card--crea__info__address {
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 15);
  letter-spacing: rem(.8);
  display: block;
  border-bottom: rem(2) solid $color-gold-crea;
  margin-bottom: rem(10);
  padding-bottom: rem(10);
}

.c-card--crea__detail {
  @include flex-display;
  position: relative;
  padding: 0 0 rem(15);
  margin: 0;
  z-index: 1;
  color: $color-grey-900;
  @include font-gm-sans;
  font-size: rem(14);

  &::before {
    content: "";
    background: $color-stone-200;
    position: absolute;
    height: rem(2);
    width: 100%;
    bottom: rem(17);
    left: 0;
    z-index: -1;
  }
}

.c-card--crea__detail__name {
  @include grid-justify-self(start);
  text-transform: uppercase;
  letter-spacing: rem(.8);
  background: $color-white;
  padding-right: rem(5);
}

.c-card--crea__detail__value {
  @include grid-justify-self(end);
  letter-spacing: rem(.3);
  background: $color-white;
  padding-left: rem(5);
  margin-left: auto;
}

.c-card--crea__more-info {
  @include grid-row(3, 4);
}

.c-card--crea__desc {
  @include font-gm-sans;
  display: block;
  font-size: rem(15);
  line-height: line-height(15, 20);
  letter-spacing: rem(.3);
  color: $color-grey-700;
  margin-top: rem(20);
  word-break: break-word;
}

.c-card--crea__mls {
  background-color: $color-stone-150;
  color: $color-grey-900;
  width: 100%;
  display: block;
  margin-top: rem(35);
  padding: rem(10);
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 15);
  letter-spacing: rem(.3);
}

.c-card--crea__mls__detail {
  display: block;
  margin-bottom: rem(15);
  &:last-child {
    margin-bottom: 0;
  }
}

.c-card--crea__actions--show-more {
  @include grid-row(4, 5);
  @include grid-column(1, 2);
  text-align: center;
}

.c-card--crea__actions--show-less {
  padding: rem(15) 0 0;
  @include grid-row(4, 5);
  @include grid-column(1, 2);
  @include display-grid;
  @include grid-template-columns(0, 1fr 1fr);
  &.c-card--crea--hidden {
    padding: 0;
  }

  .c-button {
    @include grid-column(2, 3);
    @include grid-align-self(center);
    @include grid-justify-self(end);
  }
  .c-button__icon {
    transform: rotate(45deg);
  }
}

.c-card--crea__actions-link-wrapper {
  @include grid-column(1, 2);
  @include grid-align-self(center);
  @include grid-justify-self(start);
}
.c-card--crea__actions-link {
  @include font-gm-sans-bold;
  text-transform: uppercase;
  color: $color-grey-660;
  font-size: rem(12);
  line-height: line-height(12, 16);
  letter-spacing: rem(1);
  &:visited {
    color: $color-grey-660;
  }

  &:hover, &:focus {
    color: $color-red-500;
  }

  &:active {
    color: $color-red-800;
  }
}

.c-card--crea__actions-button {
  font-size: rem(12);
  letter-spacing: rem(1);
  color: $color-red-500;
  &:visited {
    color: $color-red-500;
    .c-button__icon {
      fill: $color-red-500;
    }
  }

  &:hover, &:focus {
    color: $color-red-700;
    text-decoration: underline;
    background: none;
    .c-button__icon {
      fill: $color-red-700;
    }
  }

  &:active {
    color: $color-red-900;
    .c-button__icon {
      fill: $color-red-900;
    }
  }

  .c-button__icon {
    width: rem(13);
    height: rem(13);
    fill: $color-red-500;
    margin-right: rem(5);
  }
}
