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

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

@mixin c-card-sm {
  .c-card--topstory-no-img {
    .c-card__hed {
      @include font-hed(24, 27);
    }
    .c-card__media {
      display: none;
    }
  }

  // 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 {
    .c-card__grid {
      @include grid-template-rows(0, auto);
    }
  }

  // All of the "lede" card types
  .c-card--hero-story,
  .c-card--2package-imgleft-story,
  .c-card--3package-imgmiddle-story,
  .c-card--3package-imgleft-story {
    .c-card__grid {
      // Photo on the left
      @include grid-template-columns(rem(10), auto 1fr);

      .c-card__content {
        @include grid-column(2, 3, true);
        @include grid-row(1, 2);
      }
      .c-card__media {
        @include grid-column(1, 2, true);
        @include grid-row(1, 2);
        width: rem(330);
      }
    }
    .c-card__hed {
      @include font-hed(28, 31);
    }
    .c-card__dek {
      font-size: rem(17);
      line-height: line-height(17, 20);
    }
  }

  .c-card--crea {
    @include grid-template-columns(rem(10), rem(276) 1fr);
    @include grid-template-rows(0, grid-repeat(4, auto));
  }
  .c-card--crea__image {
    @include grid-row(1, 3);
    margin-bottom: 0;
  }
  .c-card--crea__info {
    @include grid-row(1, 2);
    @include grid-column(2, 3, true);
    text-align: left;
  }
  .c-card--crea__more-info {
    @include grid-row(3, 4);
    @include grid-column(1, 3, true);
    .c-card--crea__detail:first-of-type {
      margin-top: rem(10);
    }
  }
  .c-card--crea__actions--show-more {
    @include grid-row(2, 3);
    @include grid-column(2, 3, true);
    @include grid-justify-self(end);
  }
  .c-card--crea__actions--show-less {
    @include grid-row(4, 5);
    @include grid-column(1, 3, true);
  }
}

@mixin c-card-md {
  .c-card--hero-story,
  .c-card--2package-imgleft-story,
  .c-card--3package-imgleft-story {
    .c-card__grid .c-card__media {
      width: rem(370);
    }
    .c-card__hed {
      @include font-hed(32, 35);
    }
  }

  .c-card--3package-imgmiddle-story {
    .c-card__grid .c-card__media {
      width: rem(290);
    }
    .c-card__hed {
      @include font-hed(26, 29);
    }
    .c-card__dek {
      font-size: rem(15);
      line-height: line-height(15, 18);
    }
  }
}

@mixin c-card-lg {
  .c-card--2package-imgleft-story,
  .c-card--3package-imgleft-story {
    .c-card__grid {
      // Photo on the right
      @include grid-template-columns(rem(10), 1fr auto);

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

  .c-card--3package-imgleft-story {
    .c-card__grid .c-card__media {
      width: rem(290);
    }
    .c-card__hed {
      @include font-hed(26, 29);
    }
    .c-card__dek {
      font-size: rem(15);
      line-height: line-height(15, 18);
    }
  }

  .c-card--crea {
    @include grid-template-columns(rem(10), rem(316) 1fr);
  }
}
