/* ==========================================================================
   成都文化大数据官网 - 业务板块页样式 business.css
   依赖 global.css 的设计变量（--color-* / --space-* / --radius-* / --fs-*）
   布局：PC 端左侧 25% 固定业务列表 + 右侧 75% 业务详情
         移动端（<768px）改为「顶部列表 + 垂直堆叠详情」
   ========================================================================== */

/* ----------------------------------------
   主体布局：25% 列表 + 75% 详情
   （页面标题区 .page-hero 为子页通用样式，已提取至 global.css）
   ---------------------------------------- */
.biz-page__layout {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: var(--space-lg);
  align-items: start; /* 让 sticky 侧栏按内容高度定位，而非被拉伸 */
}

/* 左侧业务列表：sticky 固定，滚动详情时保持可见 */
.biz-page__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.biz-menu {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 单个业务项：整行可点的左对齐按钮 */
.biz-menu__item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition), background-color var(--transition);
}

.biz-menu__item:last-child {
  border-bottom: none;
}

.biz-menu__item:hover {
  background-color: var(--color-bg-soft);
  color: var(--color-primary);
}

/* 选中态：高亮（左侧主色竖条 + 主色文字 + 浅底） */
.biz-menu__item.is-active {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  font-weight: 600;
}

.biz-menu__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-primary);
}

/* 键盘聚焦可见（可访问性） */
.biz-menu__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ----------------------------------------
   右侧业务详情
   ---------------------------------------- */
.biz-page__detail:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* 业务大图：整宽置顶（建议 1200×500 → 比例 12/5）。图片为空时显示占位 */
.biz-detail__media {
  aspect-ratio: 1200 / 500;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
  background-color: var(--color-bg-soft);
}

.biz-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片缺省占位（渐变底 + 居中提示） */
.biz-detail__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  color: var(--color-text-muted);
  background: linear-gradient(120deg, var(--ph-grad-a) 0%, var(--ph-grad-b) 100%);
}

.biz-detail__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.biz-detail__intro {
  color: var(--color-text-secondary);
}

.biz-detail__intro p + p {
  margin-top: var(--space-sm);
}

/* —— 相关案例区域 —— */
.biz-detail__cases {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.biz-detail__cases-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

/* 有案例：3 列卡片网格（图片 + 名称 + 描述 + 分类标签） */
.biz-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.biz-case-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.biz-case-card:hover {
  box-shadow: var(--shadow-md);
}

.biz-case-card__media {
  aspect-ratio: 16 / 10;
  background-color: var(--color-bg-soft);
}

.biz-case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.biz-case-card__body {
  padding: var(--space-sm) var(--space-md);
}

.biz-case-card__name {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 4px;
}

.biz-case-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.biz-case-card__tag {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  padding: 2px 10px;
  border-radius: 999px;
}

/* 暂无案例：占位文案（复用 placeholder-note 视觉） */
.biz-cases__empty {
  text-align: center;
}

/* ==========================================================================
   移动端自适应：<768px 改为「顶部列表 + 垂直堆叠详情」
   ========================================================================== */
@media (max-width: 768px) {
  /* 单列：列表在上、详情在下垂直堆叠 */
  .biz-page__layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* 侧栏移至顶部，取消 sticky，列表横向滚动节省竖向空间 */
  .biz-page__sidebar {
    position: static;
  }

  .biz-menu {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .biz-menu__item {
    flex: 0 0 auto;
    white-space: nowrap;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
  }

  .biz-menu__item:last-child {
    border-right: none;
  }

  /* 顶部横向列表：选中态竖条改为底部横条 */
  .biz-menu__item.is-active::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 3px;
  }

  /* 案例卡片降为 2 列 */
  .biz-cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  /* 案例卡片降为单列 */
  .biz-cases__grid {
    grid-template-columns: 1fr;
  }
}