@import "govuk_publishing_components/individual_component_support";

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

  @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--two-thirds {
  .gem-c-image-card__image {
    border-top: none;
  }

  // TODO: Temporary fixes to ensure the layout
  // renders correctly on screen sizes less than 320px wide
  @include govuk-media-query($until: "mobile") {
    padding: 0 govuk-spacing(3);
  }

  .gem-c-image-card__image-wrapper {
    @include govuk-media-query($until: "mobile") {
      margin-bottom: govuk-spacing(2);
    }
  }

  // Ensures the font-size is 19px on all screen sizes
  .gem-c-image-card__title-link--large-font-size-mobile,
  .gem-c-image-card__description--large-font-size-mobile {
    @include govuk-media-query($until: "tablet") {
      font-size: 19px;
      font-size: govuk-px-to-rem(19);
    }
  }
}

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

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

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

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

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

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

  .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 {
    margin-bottom: govuk-spacing(2);
    float: none;
    width: auto;
    max-width: 100%;
    @include govuk-grid-column($width: one-half, $at: tablet);

    & { // stylelint-disable-line no-duplicate-selectors
      // overriding the padding from govuk-grid-column mixin
      padding: 0;
    }

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

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

    & { // stylelint-disable-line no-duplicate-selectors
      // overriding the padding from govuk-grid-column mixin
      padding: 0;
    }

    @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);
  }
}

// Ensure the YouTube video has a fluid width
// https://alistapart.com/article/creating-intrinsic-ratios-for-video/
.gem-c-image-card__youtube-video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.gem-c-image-card__youtube-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.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);
    }
  }
}

// stylelint-disable declaration-no-important
@include govuk-media-query($media-type: print) {
  .gem-c-image-card__title[class*="govuk-heading-"] {
    font-size: 16pt;
  }

  .gem-c-image-card__title-link {
    &::after {
      position: static;
    }
  }
}
// stylelint-enable declaration-no-important
