@import 'grid_layout';

.gem-c-image-card {
  // if this extends grid-row a margin-bottom can't
  // be applied as the extend overrides it
  @extend %contain-floats;
  margin: 0 (-$gutter-half) $gutter (-$gutter-half);
  position: relative;
  @include govuk-text-colour;
}

.gem-c-image-card__image-wrapper {
  @include grid-column( 1 / 3, mobile );
  margin: 0;

  @include media(tablet) {
    margin-bottom: $gutter-one-third;
  }

  + .gem-c-image-card__text-wrapper {
    @include media(mobile) {
      padding-left: 0;
    }
  }
}

.gem-c-image-card__image {
  display: block;
  max-width: 100%;
}

.gem-c-image-card__text-wrapper {
  @include grid-column( 2 / 3, mobile );
}

.gem-c-image-card__title {
  @include bold-19;
  margin: 0;
}

.gem-c-image-card__title-link {
  @extend %govuk-link;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  // the after element extends the link to cover the image, removing the
  // need for a duplicate link. Other elements apart from the image are given
  // position relative and a higher z-index to put them above the after element
  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: $gutter-half;
    right: $gutter-half;
    height: 100%;
    $ie-background: rgba(255, 255, 255, 0);
    background: $ie-background; // because internet explorer
  }
}

.gem-c-image-card__context,
.gem-c-image-card__metadata,
.gem-c-image-card__description {
  position: relative;
  z-index: 2;
}

.gem-c-image-card__context,
.gem-c-image-card__metadata {
  @include core-14;
  margin: 0 0 $gutter-one-quarter;
  color: $grey-1;

  @include media(tablet) {
    margin-bottom: 0;
  }
}

.gem-c-image-card__description {
  @include govuk-font($size: 16, $line-height: 1.5);
  padding-top: $gutter-one-quarter;
  word-wrap: break-word;
}

.gem-c-image-card__list {
  @include govuk-font($size: 16, $line-height: 1.5);
  position: relative;
  z-index: 2;
  padding: $gutter-one-quarter 0 0 0;
  margin: 0;
  list-style: none;

  .gem-c-image-card__list-item-link {
    @extend %govuk-link;
  }

  &.gem-c-image-card__list--indented {
    padding-left: $gutter-half;

    .gem-c-image-card__list-item {
      position: relative;

      &:before {
        content: "-";
        position: absolute;
        left: -$gutter-half;
      }
    }
  }
}

.gem-c-image-card--large.gem-c-image-card {
  margin: 0 0 30px 0;
}

.gem-c-image-card--large {
  .gem-c-image-card__image-wrapper {
    padding: 0 $gutter-one-third 0 0;
    margin: 0;
    float: left;
    max-width: 66.66%;
  }

  .gem-c-image-card__text-wrapper {
    overflow: hidden;
  }

  .gem-c-image-card__image-wrapper {
    @include media(mobile) {
      margin-bottom: $gutter-one-third;
      padding: 0;
    }
  }

  .gem-c-image-card__image-wrapper,
  .gem-c-image-card__text-wrapper {
    @include media(mobile) {
      float: none;
      width: auto;
      max-width: 100%;
    }
  }

  .gem-c-image-card__title {
    @include bold-24;
    padding-bottom: $gutter-one-third;
  }

  .gem-c-image-card__description {
    @include core-19;
  }
}