@import "mixins/grid-helper";
@import "mixins/prefixed-transform";

.gem-c-cards__heading {
  margin: 0 0 govuk-spacing(6) 0;
}

.gem-c-cards__list {
  list-style: none;
  padding: 0;
  // Remove the outermost left and right margin from the internal margin of the list items.
  margin: 0 govuk-spacing(-3);

  display: grid;
  grid-auto-flow: row;
  // Use CSS grid to calculate the number of rows
  grid-template-rows: auto;
  // Use the tallest cell in the grid to set the height for all rows
  grid-auto-rows: fractions(1);
  grid-template-columns: fractions(1);

  @include govuk-media-query($from: "tablet") {
    grid-template-columns: fractions(2);
  }

  @include govuk-media-query($from: "desktop") {
    // Note that browsers that don't support CSS grid display the component as one column on all
    // breakpoints
    grid-template-columns: fractions(3);

    // For browsers that don't support CSS grid, constrain the width to 50% to improve usability
    // especially for screen magnifier users
    width: 50%;

    // Reset the width for browsers that support CSS grid
    @supports (display: grid) {
      width: initial;
    }
  }
}

.gem-c-cards__list--two-column-desktop {
  @include govuk-media-query($from: "desktop") {
    grid-template-columns: fractions(2);
  }
}

.gem-c-cards__list-item {
  border-top: 1px solid $govuk-border-colour;
  // We use grid to split the container into column widths, so manage the horizontal spacing with
  // internal margins.
  margin: 0 govuk-spacing(3);
  padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
}

.gem-c-cards__list-item-wrapper {
  // this wrapper ensures that the clickable area of the card only
  // covers the area of the card containing text so in a grid of cards
  // there is space above and below each link
  padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) 0;
  position: relative;
}

.gem-c-cards__sub-heading {
  margin-bottom: govuk-spacing(2);
}

.gem-c-cards__link {
  // Make the entire list item area clickable
  &:after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &:before {
    $dimension: 7px;
    $width: 3px;

    border-right: $width solid $govuk-brand-colour;
    border-top: $width solid $govuk-brand-colour;
    content: "";
    height: $dimension;
    position: absolute;
    right: govuk-spacing(1);
    top: govuk-spacing(3);
    @include prefixed-transform($rotate: 45deg);
    width: $dimension;
  }

  &:hover {
    &:before {
      border-color: $govuk-link-hover-colour;
    }
  }

  &:focus {
    &:before {
      border-color: $govuk-focus-text-colour;
    }
  }
}

.gem-c-cards__description {
  margin: 0 govuk-spacing(-6) 0 0;
}

@include govuk-media-query($media-type: print) {
  .gem-c-cards__list {
    display: block;
  }

  .gem-c-cards__list-item {
    padding-bottom: 0;
  }

  .gem-c-cards__sub-heading {
    margin-top: govuk-spacing(4);
    margin-bottom: govuk-spacing(1);
  }

  .gem-c-cards__link:before {
    display: none;
  }
}