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

@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";
@import "mixins/objects.card";

@mixin o-card--promo-constrain-promob-image-size() {
  max-width: rem(60);
  @media (min-width: rem(700)) {
    max-width: rem(120);
  }
  @media (min-width: rem(940)) {
    max-width: rem(160);
  }
}

.o-card--promo__content {
  width: 100%;
  display: flex;
}

// This rule corrects the cards from being messed up in IE11
// but does not force newsletter buttons to the _bottom_ of the card in case of
// height variation in modern browsers.
.o-card--promo,
.o-card--promo__col {
  flex: 100%;
}

// This rule forces newsletter buttons to the _bottom_ of the card in case of
// height variation in modern browsers.
@include modern-browsers {
  .o-card--promo,
  .o-card--promo__col {
    display: flex;
  }
}

.o-card--promo__col {
  flex-direction: column;
}

.o-card--promo__hed {
  margin-top: 0;
  margin-bottom: 0;
  color: $color-red-500;
  letter-spacing: 0;
  font-size: rem(26);
  @include font-pratt;
  line-height: line-height(26, 28);
  .o-card--promob & {
    letter-spacing: 0;
    @include mq($from: 700px) {
      font-size: rem(36);
      line-height: line-height(38, 36);
    }
  }
  > a {
    color: $color-red-500;
    text-decoration: none;
    // &:visited {
    //   color: $color-stone-500;
    // }
    &:hover {
      text-decoration: underline;
    }
    &:active {
      color: $color-red-800;
      text-decoration: underline;
    }
  }
}

.o-card--promo__subhed {
  margin-top: rem(10);
  margin-bottom: 0;
  color: $color-grey-660;
  letter-spacing: rem(1);
  font-size: rem(12);
  @include font-gm-sans;
  line-height: line-height(12, 15);
  text-transform: uppercase;
}

.o-card--promo__dek {
  margin-top: rem(15);
  margin-bottom: rem(15);
  .o-card--promob & {
    font-size: rem(17);
    margin-top: rem(10);
    letter-spacing: 0;
    line-height: line-height(17, 20);
  }
}

.o-card--promo:not(.o-card--promob) .o-card--promo__cta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  .c-button {
    padding-left: 0;
    padding-right: 0;
    flex: 1;
    + .c-button {
      margin-left: rem(10);
    }
  }
}

// <img> tag container
.o-card--promo__img {
  display: flex;
}

// wrap's the <img> tag for _scalable_ images, either at top or right
.o-card--promo__img-scale {
  flex: 100%;
  img {
    width: 100%;
    height: auto;
  }
}

// image at top
.o-card--promo-img-t {
  // <img> tag container
  .o-card--promo__img {
    margin: rem(-10) rem(-10) rem(15) rem(-10);
  }
}

// image at left
.o-card--promo-img-l {
  // promob -- second col will be 2/3s when image is left
  .o-card--promo__col:first-of-type {
    flex: 1;
    @include o-card--promo-constrain-promob-image-size;
  }
  .o-card--promo__col:nth-of-type(2) {
    flex: 2;
    padding-left: rem(10);
  }
}

// image at right
.o-card--promo-img-r {
  // promob -- first col will be 2/3s when image is right
  .o-card--promo__col:first-of-type {
    flex: 2;
    padding-right: rem(10);
  }
  .o-card--promo__col:nth-of-type(2) {
    flex: 1;
    @include o-card--promo-constrain-promob-image-size;
  }
}

// Promo card, type C
.o-card--promoc {
  margin-top: 0;
  margin-bottom: 0;
  .o-card--promo__hed {
    font-size: rem(19);
    line-height: line-height(19, 21);
  }
  .o-card--promo__link {
    flex: 100%;
    text-decoration: none;
    &:hover {
      text-decoration: none;
      .o-card--promo__hed-text {
        text-decoration: underline;
      }
    }
    &:active {
      text-decoration: none;
      .o-card--promo__hed-text {
        color: $color-red-800;
        text-decoration: underline;
      }
    }
  }
  .c-indicator-icon {
    vertical-align: baseline;
  }
}

// Promo card, type D
.o-card--promod {
  .o-card--promo__col {
    @include display-grid;
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(0, auto 1fr auto);
  }
  .o-card--promo__hed {
    @include grid-row(1, 2);
  }
  .o-card--promo__dek {
    @include grid-row(2, 3);
  }
  .o-card--promo__col__buttons {
    @include grid-row(3, 4);
  }
  .c-button {
    width: 100%;
    @include mq($from: tablet) {
      width: auto;
    }
  }
}
