@import "settings.colors";

@import "mixins/tools.mixins";

.c-package--within-group {
  margin-bottom: rem(20);
  background-color: $color-white;
  border-width: 1px;
  @include flex-display;
  flex: 100%;
  align-content: flex-start;
  justify-content: flex-start;
  .c-package__label {
    font-size: rem(12);
    line-height: line-height(12, 12);
    color: $color-grey-660;
    border-width: 0;
  }
  .c-package__label,
  .c-package__col,
  .u-wrapper {
    flex: 100%;
  }

  // All cards
  .c-card__dek {
    display: none;
  }
  // Lead card
  .c-package__stories > .u-wrapper:first-of-type .c-card,
  .c-package__col:first-of-type .c-card:first-of-type {
    .c-card__grid {
      @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);
      padding: 0 rem(10) rem(10);
    }
    .c-card__media {
      @include grid-column(1, 2);
      @include grid-row(1, 2, true);
      width: 100%;
      display: block;
    }

    .c-card__dek {
      display: block;
    }
  }

  .u-wrapper {
    border-style: solid;
    border-color: $color-stone-200;
    border-width:  0 0 1px 0;

    &:last-of-type {
      border-bottom: 0;
    }
    .c-card__media {
      display: none;
    }

    &:nth-of-type(n+2) {
      .c-card--opinion,
      .c-card--column {
        .c-card__media {
          display: block;
        }
      }
    }
  }
  .c-card {
    margin-bottom: 0;
    margin-top: 0;
    border: none;
    background-color: transparent;
  }

  .c-card__content {
    display: block;
  }

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

  &.c-package--within-group--display {
    .u-wrapper:first-of-type {
      .c-card__media,
      .c-card__media .c-image-container {
        display: block;
      }
      .c-card__media > .c-image {
        display: none;
      }
    }
  }

  // Lead card
  .c-package__stories > .u-wrapper:first-of-type .c-card,
  .c-package__col:first-of-type .c-card:first-of-type {
    padding: 0;

    .c-card__content {
      margin-right: 0;
      padding: 0 rem(10) rem(10);
    }
    .c-card__hed {
      @include font-hed(19, 22);
    }
    .c-card__dek {
      @include font-hed(15, 18, normal);
    }
  }
}

.c-package--within-group--g1 {
  .c-package__col {
    &:first-of-type {
      .u-wrapper:last-of-type {
        border-bottom: 1px solid $color-stone-200;
      }
    }
    &:last-of-type {
      .u-wrapper .c-card__dek {
        display: none;
      }
    }
  }
}
