/*
 * 来源：从原页面内联 <style> 迁出，并按用途拆分为独立 CSS。
 * 原始哈希：6175390a1c05，用于追溯迁出前的样式内容。
 * 原始位置：index.html。
 * 维护说明：该文件依赖 HTML 中的 <link> 加载顺序，调整后请做页面回归检查。
 */
#st-applications {
  padding: 80px 20px;
  background-color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
}

.st-app-container {
  max-width: 1200px;
  margin: 0 auto;
}

.st-app-header {
  text-align: center;
  margin-bottom: 50px;
}

.st-app-header h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.st-app-header h2 span {
  color: #FF5B00;
}

.st-app-header p {
  color: #64748b;
  font-size: 1.1rem;
}

/* 网格布局：控制卡片列数、间距和响应式收缩。 */
.st-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.st-app-item {
  position: relative;
  /* 使用 aspect-ratio 固定卡片比例，避免图片加载前后高度跳动。 */
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f1f5f9;
}

.st-app-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

/* 默认遮罩：用轻渐变保证文字可读，同时保留图片细节。 */
.st-app-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: all 0.4s ease;
  z-index: 2;
}

.st-app-overlay h3 {
  color: #ffffff;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  transform: translateY(5px);
  transition: transform 0.4s ease;
}

.st-app-overlay p {
  color: #FF5B00;
  margin: 5px 0 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

/* 悬停遮罩：降低遮罩强度，避免遮挡应用场景图片。 */
.st-app-item:hover img {
  transform: scale(1.08);
}

.st-app-item:hover .st-app-overlay {
  /* 使用较浅橙色遮罩，保证悬停反馈明显但不压暗图片。 */
  background: rgba(255, 91, 0, 0.65);
}

.st-app-item:hover .st-app-overlay h3 {
  transform: translateY(0);
}

.st-app-item:hover .st-app-overlay p {
  color: #ffffff;
}

/* 响应式调整：在窄屏下保持内容层级和可读性。 */
@media (max-width: 1024px) {
  .st-app-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #st-applications {
    padding: 50px 15px;
  }

  .st-app-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 手机端保留两列，减少列表长度并维持浏览效率。 */
    gap: 12px;
  }

  .st-app-overlay {
    padding: 15px;
  }

  .st-app-overlay h3 {
    font-size: 0.95rem;
  }

  .st-app-overlay p {
    font-size: 0.7rem;
  }

  .st-app-header h2 {
    font-size: 1.6rem;
  }
}