.lbcamden-card {
  position: relative;
  border-top: 1px solid $lbcamden-border-colour;
  @include govuk-responsive-padding(4, "top");

  * {
    &:last-child:not(.lbcamden-list--dash) {
      margin-bottom: 0;
    }
  }

  > h2,
  > h3,
  > h4,
  > h5 {
    @include govuk-responsive-margin(2, "bottom");
    @include govuk-font(24, bold);

    a {
      @extend .govuk-link--no-underline;
    }
  }

  p,
  &__description {
    @include govuk-font(16);
  }

  &__content {
    @include govuk-typography-responsive(16);

    * {
      @include govuk-typography-responsive(16);
    }
  }

  .lbcamden-list--dash {
    a:not(:hover) {
      text-decoration: none;
    }
  }

  &--clickable {
    > h2,
    > h3,
    > h4,
    > h5 {
      a {
        // CSS approach to making entire card clickable
        &:after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
    }

    .lbcamden-card__content_wrapper {
      > h2,
      > h3,
      > h4,
      > h5 {
        a {
          // CSS approach to making entire card clickable
          &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }

  &--alt-1,
  &--alt-2,
  &--alt-3 {
    @include govuk-responsive-padding(3, "all");
    border: none;
    //box-shadow: 0 1px 4px rgba(lbcamden-colour("light-grey"), .5);
  }

  &--alt-1 {
    background: lbcamden-colour("govuk-bg-bright1-colour");
  }

  &--alt-2 {
    background: lbcamden-colour("white");
    box-shadow: 0 1px 4px rgba(lbcamden-colour("light-grey"), .5);
  }

  &--alt-3 {
    background: lbcamden-colour("govuk-brand1-1-colour");

    * {
      color: lbcamden-colour("white");
    }

    a {
      color: lbcamden-colour("white");

      &:focus {
        color: lbcamden-colour("black");
      }
    }
  }

  &--image {
    padding: 0;

    img {
      max-width: 100%;
    }

    .lbcamden-card__content_wrapper {
      @include govuk-responsive-padding(3, "all");

      > h2,
      > h3,
      > h4,
      > h5 {
        //@extend .govuk-heading-s;
        @include govuk-responsive-margin(2, "bottom");

        a {
          @extend .govuk-link--no-underline;
        }
      }
    }
  }

  &--promo-link,
  &--promo-link--alt {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    font-weight: 500;

    .lbcamden-card--naked & {
      @include govuk-responsive-margin(2, "bottom");
    }

    &:hover {
      text-decoration: none;
    }
  }

  &--promo-link {
    @extend .lbcamden-link--promo !optional;

    > h2,
    > h3,
    > h4,
    > h5 {
      a {
        @extend .govuk-link--no-underline;
        color: lbcamden-colour("white");

        &:focus {
          color: lbcamden-colour("black");
        }
      }
    }
  }

  &--promo-link--alt {
    @extend .lbcamden-link--promo !optional;
    @extend .lbcamden-link--promo-alt !optional;

    > h2,
    > h3,
    > h4,
    > h5 {
      @extend .govuk-heading-s;
      font-weight: $govuk-font-weight-semibold;
    }
  }

  &--naked {
    padding: 0;
    border: none;
    background: initial;

    &.lbcamden-card--image .lbcamden-card__content_wrapper {
      padding-right: 0;
      padding-left: 0;
    }
  }

  &--top-border {
    border-top: 10px solid lbcamden-colour("govuk-brand1-1-colour");
  }

  &--popular {
    @include govuk-font(16);
  }

  &--related {
    @extend .lbcamden-card--top-border;
    @extend .lbcamden-card--alt-1;

    &.lbcamden-card {
      > h2,
      > h3 {
        @extend .govuk-heading-l;
        @include govuk-responsive-margin(3, "bottom");
      }
    }
  }

  &--image-3x2 img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 3 / 2;
  }
}

// Based on the .homepage-services-and-info__list on GOV.UK
.lbcamden-card-grid {
  display: grid;
  // Remove the outermost left and right margin from the internal margin of the list items.
  //margin: 0 govuk-spacing(-3); // Use this if used with a grid-row
  margin: 0; // Use this if NOT used with a grid-row
  padding: 0;
  list-style: none;

  grid-auto-flow: row;
  // Use CSS grid to calculate the number of rows
  //grid-template-rows: auto;
  // Use the tallest cell in the row to set the height for each row
  @include govuk-media-query($from: tablet) {
    grid-auto-rows: flex;
  }
  //grid-auto-rows: fractions(1);
  //grid-auto-rows: auto;
  grid-template-columns: fractions(1);

  // Grid padding should follow the page gutters
  gap: govuk-spacing(5);

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

    &--link-description {
      margin-bottom: 0;
      @include govuk-responsive-margin(2, "top");
      @include govuk-font(16);
    }
  }

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

    column-gap: govuk-spacing($lbc-default-spacing);
    row-gap: govuk-spacing($lbc-default-spacing);
  }

  &-two-columns {
    grid-template-columns: fractions(2);
  }

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

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

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

  &-four-columns-from-desktop {
    @include govuk-media-query($from: "desktop") {
      grid-template-columns: fractions(4);
    }
  }

  &-four-columns-from-wide {
    @include govuk-media-query($from: "tablet") {
      grid-template-columns: fractions(3);
    }
    @include govuk-media-query($from: "wide") {
      grid-template-columns: fractions(4);
    }
  }

  // Helpers for displaying lbcamden-card elements in a `<ul>`
  //
  // If there are intermediate elements between a `.lbcamden-card-grid` and a `.lbcamden-card--clickable`, apply the
  // card styles to the `.lbcamden-card--clickable` and this to the intermediate element.
  > * {
    position: relative;
  }

  > li > .lbcamden-card,
  > li > .lbcamden-link,
  > li > .lbcamden-link--promo {
    width: 100%;
    height: 100%;
  }

  &--popular {
    > * {
      min-height: 50px;

      @include govuk-media-query(tablet) {
        min-height: 66px;
      }

      .lbcamden-link--promo {
        @include govuk-media-query(tablet) {
          padding-top: govuk-spacing(1);
          padding-bottom: govuk-spacing(1);
        }
      }
    }
  }
}

// When cards are used in a ul, they shouldn't pick up the li's default spacing
ul {
  > .lbcamden-card,
  > .lbcamden-card-grid__link-wrapper {
    margin-bottom: 0;
  }
}

@media print {
  .lbcamden-card,
  .lbcamden-card-grid {
    border: none;
  }
}