/* ========================================
   cards.css — 可复用卡片组件
   作用：定义三种卡片样式，供不同区块复用
   1. service-card — 服务/行业卡片（图片 + 文字内容）
   2. case-card — 案例卡片（图片 + 深色遮罩覆盖层）
   3. testimonial — 客户评价卡片（引用文字 + 头像信息）
   ======================================== */

/* ===== 服务/行业卡片（service-card）=====
   白底圆角卡片，图片在上、文字在下
   hover 时上浮 + 阴影加深，营造悬浮感
   用于首页的 Industries 区块 */
.service-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;           /* 确保图片圆角生效 */
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-6px);  /* 上浮 6px */
  box-shadow: var(--shadow-lg);
}

/* 卡片图片 — 固定 4:3 宽高比，object-fit: cover 裁剪填充 */
.service-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 卡片文字区 — 标准内边距 */
.service-card__body {
  padding: var(--space-lg);
}

/* 卡片标题 — 衬线字体 */
.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-block-end: var(--space-sm);
}

/* 卡片描述 — 灰色文字 */
.service-card__text {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-block-end: 0;
}

/* ===== 案例/项目卡片（case-card）=====
   无白底，图片直接铺满，底部深色渐变遮罩上显示项目名和行业标签
   hover 时图片轻微放大，遮罩保持不变
   用于首页的 Featured Projects 区块 */
.case-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* 图片 — 3:4 竖版比例，hover 时慢速放大（0.5s） */
.case-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.case-card:hover .case-card__image {
  transform: scale(1.05);  /* 放大 5%，营造"看仔细"的交互感 */
}

/* 底部渐变遮罩 — 从底部黑色渐变到顶部透明
   项目名称和标签在底部展示，确保在任何图片上都可读 */
.case-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* 内容对齐底部 */
  padding: var(--space-lg);
  transition: opacity var(--transition-base);
}

/* 项目名称 — 白色衬线字体 */
.case-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #fff;
  margin-block-end: var(--space-xs);
}

/* 行业标签 — 金色小号大写字母 */
.case-card__tag {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== 客户评价卡片（testimonial）=====
   白底圆角，左侧（RTL 时右侧）4px 绿色竖线作为品牌标识
   引用文字斜体 + 头像姓名区
   用于首页的 Testimonials 区块 */
.testimonial {
  background-color: var(--color-bg);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-inline-start: 4px solid var(--color-primary);  /* 逻辑属性：LTR 左边，RTL 右边 */
}

/* 引用文字 — 稍大字号，斜体，宽松行高提升可读性 */
.testimonial__text {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
  font-style: italic;
  margin-block-end: var(--space-lg);
}

/* 作者信息 — 头像 + 姓名/职位，水平排列 */
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* 头像 — 圆形裁剪 */
.testimonial__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

/* 姓名 — 粗体 */
.testimonial__name {
  font-weight: 700;
  font-size: 0.9375rem;
}

/* 职位 — 灰色小字 */
.testimonial__role {
  color: var(--color-text-light);
  font-size: 0.8125rem;
}