.index {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);

  .index-book {
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    padding: 40px 0;

    .index_book_left {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .left_title {
        font-size: 40px;
        font-weight: 800;
        color: #1a1a2e;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 2px;
      }

      .left_subtitle {
        font-size: 26px;
        color: #8c8c8c;
        margin-top: 16px;
        text-align: center;
        letter-spacing: 1px;
      }

      .card {
        margin-top: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;

        .cardItem {
          width: 100%;
          max-width: 600px;
          padding: 28px 34px;
          display: flex;
          flex-direction: row;
          align-items: center;
          background: #fff;
          border-radius: 16px;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
          transition: transform 0.2s ease, box-shadow 0.2s ease;

          &:active {
            transform: scale(0.98);
          }

          .cardItem_left {
            margin-right: 30px;
            flex-shrink: 0;

            .cardItem_left_img {
              width: 80px;
              height: 80px;
              border-radius: 12px;
            }
          }

          .cardItem_right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .cardItem_rightUp {
              font-weight: 700;
              font-size: 34px;
              color: #1a1a2e;
              line-height: 1.4;
            }

            .cardItem_rightDown {
              font-size: 28px;
              color: #8c8c8c;
              margin-top: 6px;
            }
          }
        }
      }

      .left_btn {
        margin-top: 60px;
        margin-bottom: 60px;
        width: 100%;
        display: flex;
        justify-content: center;

        .startRead {
          width: 100%;
          max-width: 600px;
          height: 96px;
          font-size: 34px;
          font-weight: 600;
          border-radius: 48px;
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          border: none;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
        }
      }
    }

    .index_book_img {
      width: 240px;
      height: 240px;
      margin-bottom: 40px;
      flex-shrink: 0;

      .book_img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 20px;
      }
    }
  }

  .svgItems {
    display: none;
  }
}

// ===== Tablet: 768px+ =====
@media (min-width: 768PX) {
  .index {
    padding: 0 40PX;

    .index-book {
      padding: 40PX 0;

      .index_book_left {
        .left_title {
          font-size: 32PX;
        }

        .left_subtitle {
          font-size: 16PX;
        }

        .card {
          margin-top: 28PX;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: 16PX;

          .cardItem {
            width: calc(50% - 8PX);
            max-width: 320PX;
            padding: 16PX 20PX;

            .cardItem_left {
              margin-right: 16PX;
              .cardItem_left_img {
                width: 48PX;
                height: 48PX;
                border-radius: 8PX;
              }
            }

            .cardItem_right {
              .cardItem_rightUp {
                font-size: 17PX;
              }
              .cardItem_rightDown {
                font-size: 14PX;
                margin-top: 2PX;
              }
            }
          }
        }

        .left_btn {
          margin-top: 28PX;
          margin-bottom: 28PX;

          .startRead {
            max-width: 280PX;
            height: 44PX;
            font-size: 16PX;
            border-radius: 22PX;
            line-height: 44PX;
          }
        }
      }

      .index_book_img {
        width: 200PX;
        height: 200PX;
        margin-bottom: 20PX;

        .book_img {
          border-radius: 14PX;
        }
      }
    }
  }
}

/* stylelint-disable */
// ===== Desktop: 1024px+ =====
// 使用 PX (大写) 防止 Taro postcss-pxtransform 转换
@media (min-width: 1024PX) {
  .index {
    justify-content: center;
    padding: 30PX 80PX 0;

    .index-book {
      flex-direction: row;
      max-width: 1200PX;
      padding: 60PX 50PX;
      background: #f0f5ff;
      border-radius: 24PX;
      gap: 60PX;

      .index_book_left {
        flex: 1;
        align-items: flex-start;

        .left_title {
          font-size: 36PX;
          text-align: left;
          line-height: 1.4;
          letter-spacing: 1PX;
        }

        .left_subtitle {
          font-size: 16PX;
          text-align: left;
          margin-top: 12PX;
        }

        .card {
          display: none;
        }

        .left_btn {
          margin-top: 36PX;
          margin-bottom: 0;
          max-width: 500PX;
          justify-content: center;

          .startRead {
            width: 200PX;
            max-width: 200PX;
            height: 48PX;
            font-size: 16PX;
            font-weight: 600;
            border-radius: 24PX;
            line-height: 48PX;
          }
        }
      }

      .index_book_img {
        width: 260PX;
        height: 260PX;
        margin-bottom: 0;

        .book_img {
          border-radius: 16PX;
        }
      }
    }

    .svgItems {
      display: flex;
      width: 100%;
      max-width: 1200PX;
      margin-top: 60PX;
      margin-bottom: 60PX;
      justify-content: center;

      .svgItem {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 40PX;

        .bookImg {
          width: 240PX;
          min-height: 240PX;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 36PX 24PX;
          background: #fff;
          border-radius: 16PX;
          box-shadow: 0 4PX 20PX rgba(0, 0, 0, 0.06);
          transition: transform 0.3s ease, box-shadow 0.3s ease;

          &:hover {
            transform: translateY(-4PX);
            box-shadow: 0 8PX 30PX rgba(0, 0, 0, 0.1);
          }

          .bookImg_text {
            margin-top: 16PX;
            font-size: 16PX;
            font-weight: 600;
            color: #1a1a2e;
            text-align: center;
          }
        }
      }
    }
  }
}

// ===== Large Desktop: 1536px+ =====
@media (min-width: 1536PX) {
  .index {
    padding-top: 40PX;

    .index-book {
      max-width: 1400PX;
      padding: 80PX 60PX;

      .index_book_left {
        .left_title {
          font-size: 42PX;
        }

        .left_subtitle {
          font-size: 18PX;
        }

        .left_btn {
          max-width: 580PX;

          .startRead {
            width: 220PX;
            max-width: 220PX;
            height: 52PX;
            font-size: 17PX;
            border-radius: 26PX;
            line-height: 52PX;
          }
        }
      }

      .index_book_img {
        width: 300PX;
        height: 300PX;
      }
    }

    .svgItems {
      max-width: 1400PX;
      margin-top: 80PX;

      .svgItem {
        gap: 50PX;

        .bookImg {
          width: 300PX;
          min-height: 300PX;
          padding: 40PX 30PX;

          .bookImg_text {
            font-size: 18PX;
            margin-top: 20PX;
          }
        }
      }
    }
  }
}
/* stylelint-enable */
