@charset "UTF-8";

/* ===== SERVICES ===== */
.services {
  .service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap;
    gap: 32px;
    margin: 90px 0 100px;

    .service-item {
      position: relative;
      width: 100%;
      background: #fff;
      border-radius: 24px;
      box-shadow: var(--shadow-card);

      .service-item__link {
        height: 100%;
        display: block;
        padding: 10px 15px 15px;
        border-radius: 24px;

        .service-item__header {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 11px;

          .service-item__hero {
            display: grid;
            place-items: center;
            width: 64px;
            height: auto;

            img {
              width: 100%;
            }
          }

          .service-item__title {
            margin: 0;
            text-align: center;
            font-weight: 600;
            font-size: clamp(16px, 1.35vw, 22px);
            line-height: 1.2;
            letter-spacing: -1px;
            color: var(--color-secondary);
          }
        }

        .service-item__tags {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            line-height: 1.2;
            font-size: var(--text-tags);
            color: var(--color-base-black);

            &.service-item__tags-bg {
              padding: 5px 12px;
              background: var(--color-gray-60);
              border-radius: 30px;
            }
          }
        }

        .service-item__arrow {
          position: absolute;
          right: 15px;
          bottom: 15px;
          width: 32px;
          height: 32px;
          transform: rotate(90deg);
          display: block;
          margin: auto;
        }
      }
    }
  }
}

@media (max-width: 790px) {
  .services {
    .service-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 4%;
      margin: 70px 0;

      .service-item {
        min-height: 130px;
        max-height: max-content;
        border-radius: 10.45px;

        .service-item__link {
          padding: 4px 6px 22px;
          border-radius: 10.45px;

          .service-item__header {
            display: grid;
            gap: 4px;
            margin-bottom: 5px;

            .service-item__hero {
              width: 32px;
              margin: 0 auto;
            }

            .service-item__title {
              letter-spacing: 0px;
              font-size: clamp(12px, 3.5vw, 16px);
            }
          }

          .service-item__tags {
            gap: 3px 1.7px;
            justify-content: center;

            li {
              &.service-item__tags-bg {
                font-size: var(--text-tags);
                padding: 3px 6px;
                font-size: clamp(8px, 2.4vw, 10px);
              }
            }
          }
          .service-item__arrow {
            right: 6px;
            bottom: 4px;
            width: 18px;
            height: 18px;
          }
        }
      }
    }
  }
}

/* ===== SERVICES-LIST ===== */
.services-list {
  .services-list__inner {
    display: grid;
    gap: 130px;

    .services-list__item {
      display: flex;
      justify-content: space-between;

      .services-list__item-text {
        width: 55%;

        .section-title {
          margin: 0;

          .section-title__lead {
            margin: 20px 0 0 0;
            line-height: 1.6;
          }
        }

        .service-detail {
          .service-detail__group {
            margin-top: 35px;

            .service-detail__meta {
              display: flex;
              align-items: center;
              gap: 12px;
              margin: 0 0 15px;
              color: var(--color-gray);
              font-weight: bold;
              font-size: var(--text-l-pc);
              line-height: 1.6;

              &::after {
                content: "";
                height: 1px;
                background: var(--color-gray);
                flex: 1;
              }

              span {
                white-space: nowrap;
                letter-spacing: 1.8px;
              }
            }

            .service-detail__list {
              display: grid;
              gap: clamp(12px, 1.1vw, 16px);
              margin: 0;
              padding: 0;
              list-style: none;

              li {
                &.icon {
                  display: flex;
                  align-items: start;
                  gap: 10px;

                  &::before {
                    content: "";
                    display: inline-block;
                    width: clamp(20px, 1.65vw, 24px);
                    height: clamp(20px, 1.65vw, 24px);
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    flex-shrink: 0;
                    margin-top: 0.5%;
                  }

                  &.icon-lights::before {
                    background-image: url("/assets/img/icon_lights.svg");
                  }
                  &.icon-on-mark::before {
                    background-image: url("/assets/img/icon_on-mark.svg");
                  }
                }
              }

              p {
                margin: 0;
                line-height: 1.4;
                letter-spacing: 1.7px;
                font-size: var(--text-xl-pc);
                font-weight: 700;
                color: var(--color-base-black);
              }
            }

            .service-detail__cases {
              display: grid;
              gap: 13px;
              list-style: none;
              padding: 0;
              margin: 0;

              li {
                display: flex;
                align-items: start;
                gap: 8px;
              }

              a {
                margin-top: 1px;
                transition: opacity 0.3s ease;

                &:hover {
                  opacity: 0.7;
                }
              }

              .case-badge {
                display: inline-block;
                padding: 8px 12px;
                line-height: 1;
                letter-spacing: 0.7px;
                font-weight: 800;
                font-size: 14px;
                white-space: nowrap;
                color: #fff;
                background: var(--color-secondary);
                border-radius: 50px;
              }

              p {
                margin: 0;
                text-decoration: none;
                font-size: var(--text-m-pc);
                color: var(--color-accent);
                font-weight: 500;
                letter-spacing: 1.5px;
              }
            }
          }
        }
      }

      .services-list__item-img {
        width: 40%;

        img {
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 790px) {
  .services-list {
    .services-list__inner {
      gap: 70px;

      .services-list__item {
        display: grid;
        gap: 24px;

        .services-list__item-text {
          width: 100%;
          order: 2;

          .service-detail {
            .service-detail__group {
              margin-top: 24px;

              .service-detail__meta {
                font-size: var(--text-l-sp);
              }

              .service-detail__list {
                gap: clamp(12px, 1.1vw, 16px);

                li {
                  &.icon {
                    &::before {
                      width: clamp(20px, 1.65vw, 24px);
                      height: clamp(20px, 1.65vw, 24px);
                    }
                  }
                }

                p {
                  font-size: 19px;
                }
              }

              .service-detail__cases {
                .case-badge {
                  font-size: 12px;
                }

                p {
                  line-height: 1.4;
                  font-size: var(--text-m-sp);
                }
              }
            }
          }
        }

        .services-list__item-img {
          width: 90%;
          margin: 0 auto;
          order: 1;
        }
      }
    }
  }
}