/**
 * @file
 * Linked List Card
 *
 * Styles for Linked List Card object.
 */

@use '_helper' as *;

.linked-list-card {
  &__cards {
    display: grid;
    gap: rem(20px);
    margin-top: rem(30px);

    @media screen and (min-width: $break-medium) {
      grid-template-columns: 1fr 1fr;
    }

    @media screen and (min-width: $break-large) {
      margin-top: rem(50px);
      gap: rem(38px) rem(40px);
    }
  }

  &__card {
    @include cardArrowCornerHover;
    position: relative;
    padding: rem(30px) rem(19.5px) rem(34px);
    border-radius: rem(15px);
    overflow: hidden;

    @media screen and (min-width: $break-medium) {
      padding: rem(30px) rem(32.5px) rem(47px);
    }

    @media screen and (min-width: $break-large) {
      padding: rem(40px) rem(30px) rem(60px);
    }

    .background-wrapper {
      background: $color-blue-light;
      transition: background 0.1s ease;
    }

    &:hover {
      .linked-list-card {

        &__title a {
          @include focus-light;
        }

        &__title a,
        &__body {
          color: $color-white;
        }
      }

      .background-wrapper {
        background: $color-blue-dark;
      }
    }
  }

  &__title {
    margin: 0 0 rem(8px);
    line-height: 0;

    @media screen and (min-width: $break-medium) {
      margin: 0 0 rem(6.5px);
    }

    @media screen and (min-width: $break-large) {
      margin: 0 0 rem(10px);
    }

    a {
      @include focus-dark;
      font-family: $font-roboto-slab;
      font-size: rem(24px);
      font-style: normal;
      font-weight: 500;
      line-height: 1.25;
      text-decoration: none;

      @media screen and (min-width: $break-medium) {
        font-size: rem(28px);
        line-height: 0.95;
      }

      @media screen and (min-width: $break-large) {
        font-size: rem(32px);
        line-height: 1.2;
      }

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% + 1px);
        height: calc(100% + 1px);
        z-index: 1;
      }
    }
  }

  &__body {
    font-family: $font-dm-sans;
    font-size: rem(16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.1s ease;

    @media screen and (min-width: $break-large) {
      font-size: rem(18px);
    }
  }
}