/* 全局样式 */
ion-app {
  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
  /* 添加背景图片 */
  background-size: cover;
  /* 背景图片覆盖整个内容区域 */
  background-position: center;
  /* 背景图片居中 */
  height: 100vh;
  /* 确保背景覆盖整个视口高度 */
  margin: 0;
  /* 移除默认的外边距 */
  padding: 0;
  /* 移除默认的内边距 */
}

ion-content {
  --background: transparent;
  /* 设置为透明，以便背景从 ion-app 继承 */
  padding: 16px;
}

/* 卡片样式 */
ion-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 默认阴影 */
  background-size: cover;
  /* 背景图片覆盖整个卡片 */
  background-position: center;
  /* 背景图片居中 */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  /* 添加过渡效果 */
}

ion-content ion-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
  /* 调整阴影强度和模糊半径 */
  transform: translateY(-12px);
  /* 增加提升高度 */
}

/* 卡片标题样式 */
ion-card-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
}

/* 卡片内容样式 */
ion-card-content {
  padding: 16px;
}

/* 按钮样式 */
ion-button {
  --background: rgba(255, 255, 255, 0.5);
  /* 半透明白色背景 */
  --color: black;
  /* 按钮文字颜色 */
  --border-radius: 8px;
  /* 按钮圆角 */
  --padding-top: 12px;
  /* 按钮内边距 */
  --padding-bottom: 12px;
  /* 按钮内边距 */
  --padding-start: 24px;
  /* 按钮内边距 */
  --padding-end: 24px;
  /* 按钮内边距 */
  font-size: 1rem;
  font-weight: 500;
}

ion-button:hover {
  --background: rgba(255, 255, 255, 0.7);
  /* 鼠标悬停时稍微不那么透明 */
}

/* 工具栏样式 */
ion-toolbar {
  --background: transparent;
  /* 设置为透明，以便背景从 ion-app 继承 */
  --color: #333;
  border-bottom: 1px solid #e0e0e0;
}

/* 返回按钮样式 */
ion-back-button {
  --color: #007bff;
}

/* 为每个卡片添加背景图片和不同的渐变背景 */
ion-card:nth-child(1) {
  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
  /* 渐变背景和图片背景 */
  background-blend-mode: multiply;
  /* 混合模式 */
  background-size: cover;
  /* 背景图片覆盖整个卡片 */
  background-position: center;
  /* 背景图片居中 */
}

ion-card:nth-child(2) {
  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
  /* 渐变背景和图片背景 */
  background-blend-mode: multiply;
  /* 混合模式 */
  background-size: cover;
  /* 背景图片覆盖整个卡片 */
  background-position: center;
  /* 背景图片居中 */
}

ion-card:nth-child(3) {
  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
  /* 渐变背景和图片背景 */
  background-blend-mode: multiply;
  /* 混合模式 */
  background-size: cover;
  /* 背景图片覆盖整个卡片 */
  background-position: center;
  /* 背景图片居中 */
}
ion-card:nth-child(4) {
  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
  /* 渐变背景和图片背景 */
  background-blend-mode: multiply;
  /* 混合模式 */
  background-size: cover;
  /* 背景图片覆盖整个卡片 */
  background-position: center;
  /* 背景图片居中 */
}