@import url('../../../commons/blocks/services/nav-cards/nav-cards.css');

.nav-cards {
  &:has(.ew-ccp-nav-cards) {
    padding-block: 40px;
    @media (width >= 1024px) {
      padding-bottom: 3.5rem;
      padding-top: 16px;
    }
  }
  .ew-ccp-nav-cards {
    .ew-ccp-nav-cards__list {
      .ew-ccp-nav-cards__item {
        a {
          height: 100%;
          background: none;
          min-height: 100%;
          gap: 16px;
        }

        .ew-ccp-nav-cards__title {
          z-index: 1;

          :is(p, h1, h2, h3, h4, h5, h6) {
            color: var(--neutrals-headings);
            font-feature-settings:
              'liga' off,
              'clig' off;
            font-size: var(--body-font-size-xs);
            font-style: normal;
            font-weight: var(--fw-500);
            line-height: var(--heading-lh-19-mob-display);
            padding-top: 0;

            @media (width >= 768px) {
              color: var(--neutrals-sub-texts-paragraphs);
              font-size: var(--heading-font-size-m);
              line-height: var(--heading-lh-28-des);
            }
          }
        }

        .ew-ccp-nav-cards__action {
          display: flex;
          flex-direction: row-reverse;
          align-self: flex-start;
          color: var(--primary-blue-700);
          font-feature-settings:
            'liga' off,
            'clig' off;
          z-index: 1;
          font-size: var(--body-font-size-xxs);
          font-style: normal;
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-19-mob-display);
          padding-bottom: 16px;

          @media (width >= 768px) {
            padding-bottom: 28px;
            font-size: var(--body-font-size-sm);
            line-height: var(--heading-font-size-m);
          }

          &::before {
            width: 10px;
            height: 10px;
            flex-shrink: 0;
            background-size: cover;
            align-self: center;

            @media (width >= 768px) {
              width: 14px;
              height: 14px;
            }
          }
        }

        .ew-ccp-nav-cards__img {
          z-index: 1;
          width: 100%;
          height: auto;

          .ew-ccp-nav-cards__picture,
          img {
            display: flex;
            width: 100%;
            height: auto;
          }
        }
      }

      .ew-ccp-nav-cards__item:first-child,
      .ew-ccp-nav-cards__item:last-child {
        position: relative;
        border: 1px solid var(--light-grey-shade-5);
        overflow: hidden;

        @media (width >= 768px) {
          border-bottom-width: 4px;
        }

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          transform: scaleY(0);
          transform-origin: bottom;
          transition: transform 0.4s ease;
        }

        &:hover::before {
          transform: scaleY(1);
        }
      }

      .ew-ccp-nav-cards__item:first-child {
        background: linear-gradient(7deg, rgba(252, 190, 98, 0.1) -19.1%, rgba(255, 255, 255, 0.1) 30.27%);
        border-bottom: 2px solid var(--accent-colours-vibrant-sections-1);

        &::before {
          background: var(--accent-colours-vibrant-sections-1);
        }
      }

      .ew-ccp-nav-cards__item:last-child {
        background: linear-gradient(7deg, rgba(225, 95, 103, 0.1) -19.1%, rgba(255, 255, 255, 0.1) 30.27%);
        border-bottom: 2px solid var(--accent-colours-vibrant-sections-4);

        &::before {
          background: var(--accent-colours-vibrant-sections-4);
        }
      }
    }
  }
}