@import "govuk_publishing_components/individual_component_support";

.gem-c-image-card {
  @include govuk-clearfix;
  @include govuk-text-colour;
  position: relative;
  margin-bottom: govuk-spacing(6);
  display: flex;
  display: -ms-flexbox;
  flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;

  @include govuk-media-query($from: mobile, $until: tablet) {
    display: block;

    .gem-c-image-card__text-wrapper {
      float: right;
      padding-left: 0;
    }
  }
}

.gem-c-image-card__header-and-context-wrapper {
  display: flex;
  flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
}

.gem-c-image-card__image-wrapper {
  margin: 0;

  @include govuk-media-query($from: tablet) {
    margin-bottom: govuk-spacing(2);
    height: 100%;
  }

  + .gem-c-image-card__text-wrapper {
    @include govuk-media-query($until: tablet) {
      padding-left: 0;
    }
  }
}

@include govuk-media-query($from: mobile, $until: tablet) {
  .gem-c-image-card {
    margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
  }

  .gem-c-image-card__image-wrapper {
    @include govuk-grid-column($width: one-half, $at: mobile);
  }

  .gem-c-image-card__text-wrapper {
    @include govuk-grid-column($width: one-half, $at: mobile);
  }

  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
    @include govuk-grid-column($width: one-third, $float: right, $at: mobile);
  }

  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
    @include govuk-grid-column($width: two-thirds, $float: right, $at: mobile);
  }
}

@include govuk-media-query($from: tablet) {
  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
    @include govuk-grid-column($width: one-third, $float: right, $at: tablet);
  }

  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
    @include govuk-grid-column($width: two-thirds, $float: right, $at: tablet);
  }
}

.gem-c-image-card__image {
  display: block;
  height: auto;
  width: 100%;
  border-top: 1px solid $govuk-border-colour;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.gem-c-image-card.gem-c-image-card--two-thirds {
  // Change default flex-direction from column-reverse
  // so that the image and text appear in the same row,
  // with the image to the left
  flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  // Wrap flex items onto a new line and ensure
  // that items are aligned correctly
  flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  justify-content: flex-end;
  align-items: flex-end;
}

.gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
  // The first two values set flex-grow and flex-basis to 0
  // This ensures that the flex item does not grow or shrink
  // The the last value, sets flex-basis to 95px
  // padding-left is set to 15px and the image used is 80px wide
  flex: 0 0 95px;
  padding-right: 0;
}

.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
  // The first two values set flex-grow and flex-basis to 1
  // This allows the flex item contain the image card text to grow or shrink
  // The last value, sets flex-basis to 70%
  // If the width of the flex-item shrinks below 70%, it will wrap onto a new line
  flex: 1 1 70%;
}

.gem-c-image-card__title {
  margin: 0;
}

.gem-c-image-card__title-link {
  &:focus {
    text-decoration: none;
  }

  // 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: 0;
    right: 0;
    height: 100%;
    $ie-background: rgba(255, 255, 255, 0);
    background: $ie-background; // because internet explorer
    -ms-high-contrast-adjust: none;
  }

  @include govuk-media-query($from: mobile, $until: tablet) {
    &::after {
      left: govuk-spacing(3);
      right: govuk-spacing(3);
    }
  }
}

.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 govuk-font($size: false);
  font-size: 16px;
  font-size: govuk-px-to-rem(16px);
  margin: 0 0 (govuk-spacing(3) / 2);
  color: govuk-colour("dark-grey", $legacy: "grey-1");

  @include govuk-media-query($from: tablet) {
    margin-bottom: 0;
  }
}

.gem-c-image-card__description {
  @include govuk-font($size: 19);
  padding-top: (govuk-spacing(3) / 2);
  word-wrap: break-word;
}

.gem-c-image-card__list {
  @include govuk-font($size: 19);
  position: relative;
  z-index: 2;
  padding: (govuk-spacing(3) / 2) 0 0 0;
  margin: 0;
  list-style: none;

  .gem-c-image-card__list-item {
    margin-bottom: govuk-spacing(2);
  }

  .gem-c-image-card__list-item--text {
    color: govuk-colour("dark-grey", $legacy: "grey-1");
  }

  .gem-c-image-card__list-item-link {
    line-height: 1.35em;
  }

  &.gem-c-image-card__list--indented {
    padding-left: govuk-spacing(3);

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

      &::before { // stylelint-disable-line max-nesting-depth
        content: "-";
        position: absolute;
        left: (- govuk-spacing(3));
      }
    }
  }
}

.gem-c-image-card--large.gem-c-image-card {
  display: flex;
  margin: 0 0 govuk-spacing(6) 0;
  @include govuk-media-query($from: tablet) {
    display: block;
  }
}

.gem-c-image-card--large {
  .gem-c-image-card__image-wrapper {
    @include govuk-grid-column($width: one-half, $at: tablet);

    margin-bottom: govuk-spacing(2);
    float: none;
    width: auto;
    max-width: 100%;
    padding: 0;

    @include govuk-media-query($from: tablet) {
      padding: 0 govuk-spacing(2) 0 0;
      margin-bottom: 0;
    }
  }

  .gem-c-image-card__text-wrapper {
    @include govuk-grid-column($width: one-half, $at: tablet);

    padding: 0;
    overflow: hidden;

    @include govuk-media-query($from: tablet) {
      float: right;
      padding: 0 govuk-spacing(3);
      margin-bottom: 0;
    }
  }

  .gem-c-image-card__title {
    padding-bottom: govuk-spacing(2);
  }

  .gem-c-image-card__title-link::after {
    left: 0;
    right: 0;
  }

  .gem-c-image-card__description {
    @include govuk-font(19);
  }
}

// The following two rules are used to 'trick' the
// Youtube embed into using the desktop styles. Without
// this, the Youtube embed will use mobile styles in
// desktop viewports. The Youtube mobile styles are more
// challenging to use with a keyboard as they are designed
// for a touch screen interface. There is seemingly no way
// to make an iframe request the desktop version of a site
// and there is no parameter in the Youtube embed that would
// force the desktop styles. Hence this workaround.

// In the first rule, we are adding an arbitrarly large
// enough px to the width of the Youtube iframe so that
// it will use the desktop styling. Unfortunately, this width
// would result in the Youtube embed overlapping into the
// text content. To stop this happening, we scale the size of
// the embed down.

.gem-c-image-card__youtube-video-embed iframe {
  @include govuk-media-query($from: tablet) {
    transform: scale(.7);
    width: calc(100% + 45px);
  }
  z-index: 1;
}

// In the second rule, we scale the container of the embed
// up by the amount that we scaled the Youtube embed down.
// This results in the embed being the correct size and the
// desktop styles being used.

.gem-c-image-card__youtube-video-embed {
  @include govuk-media-query($from: tablet) {
    transform: scale(1.3);
  }
  margin: 0;
  padding-bottom: 68%;
}

// This rule is to reposition the embed to the correct
// place in the image card. As the embed has been scaled
// down and then scaled up again, it is misaligned and
// here we correct that misalignment.

.gem-c-image-card__youtube-video-embed.gem-c-govspeak__youtube-video iframe {
  @include govuk-media-query($from: tablet) {
    left: -22px;
    top: -10px;
  }
}

.gem-c-image-card__youtube-thumbnail-image-container {
  position: relative;

  &::before {
    background: url("govuk_publishing_components/youtube-play-icon.png");
    background: url("govuk_publishing_components/youtube-play-icon.svg"), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 75px auto;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}

.gem-c-image-card__youtube-thumbnail-image {
  filter: brightness(.9);
}

.gem-c-image-card__youtube-thumbnail-container-text {
  margin-top: 10px;
}

.gem-c-image-card__youtube-thumbnail-container:focus .gem-c-image-card__youtube-thumbnail-container-text {
  @include govuk-focused-text;
}

.gem-c-image-card--no-image {
  .gem-c-image-card__text-wrapper {
    @include govuk-media-query($from: mobile, $until: tablet) {
      float: left;
      padding: 0 govuk-spacing(3);
    }
  }
}