/*
 * 项目（Project / case）列表页 —— 1:1 对应设计稿 Astra 6月 / 935:5772
 *
 *   首屏 935:5779   整幅 1920×676，左对齐白字（走 page-banner 左对齐款）
 *   筛选 942:2034   上 96，两行页签中间一条 1440×1px #DEDFE0，行距 40
 *     第一行 系统类型：左右圆形箭头按钮 36 + 页签条（可横向滚），间距 68
 *     第二行 应用市场：1440 宽、左右各留 64，页签间距 12
 *     页签 18/25 Bold(-0.36)：常态 #333，当前项主题色 + 底边 2px 主题色
 *   卡片 942:2143   1440 容器左右各留 64，两列 638、行列间距都是 36
 *     图 398 → 信息区内边距 32、栈间距 24
 *     地点行：图标 28 + 地点 18/25 Bold 主题色，图标 28 + 时间 18/25 Bold #333，间距 10
 *     标题 32/38(-0.64) #333，上下各 12
 *     参数条：上下 1px #DEDFE0、内边距 12，三等分列各 px10、标签 18/25 #333 + 值 16/20 #808080，中间 1px×44 竖线
 *     View Case Study 16/24 Bold #333 + 26 红箭头
 *
 * 尺寸/字号走 CSS 变量，由组件的响应式控制项按断点写入。
 */

.astra-prj {
  --prj-primary: #e60012;
  --prj-text: #333333;
  --prj-muted: #808080;
  --prj-subtle: #999999;
  --prj-border: #dedfe0;

  font-family: inherit;
  color: var(--prj-text);
}

.astra-prj-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--prj-list-gap, 48px);
  padding: var(--prj-padding-top, 96px) 0 var(--prj-padding-bottom, 96px);
}

/* ==================================================== 筛选 942:2034 */
.astra-prj__filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.astra-prj__row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 第一行：两侧圆按钮 + 中间可横滚的页签条，三者间距 68 */
.astra-prj__row--scroll {
  justify-content: center;
  gap: var(--prj-row1-gap, 68px);
}

.astra-prj__row--plain {
  justify-content: flex-start;
  padding: 0 var(--prj-row2-inset, 64px);
}

.astra-prj__nav {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--prj-subtle);
  border-radius: 999px;
  background: var(--prj-border);
  color: var(--prj-subtle);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, opacity 0.3s;
}

.astra-prj__nav:hover:not([disabled]) {
  border-color: var(--prj-primary);
  color: var(--prj-primary);
}

.astra-prj__nav[disabled] {
  opacity: 0.4;
  cursor: default;
}

.astra-prj__nav svg {
  width: 16px;
  height: 16px;
  display: block;
}

.astra-prj__nav svg path {
  stroke: currentColor;
}

/* 页签条：超出时可横向滚，滚动条藏起来 */
.astra-prj__scroller {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.astra-prj__scroller::-webkit-scrollbar {
  display: none;
}

.astra-prj__tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin: 0 auto;
}

.astra-prj__row--plain .astra-prj__tabs {
  flex-wrap: wrap;
  width: auto;
  margin: 0;
}

.astra-prj__tab {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  /* 设计稿页签整块 45 高，红线算在内 */
  padding: 10px 20px 8px;
  font-family: inherit;
  font-size: var(--prj-tab-size, 18px);
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--prj-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.astra-prj__tab:hover {
  color: var(--prj-primary);
}

.astra-prj__tab.is-active {
  color: var(--prj-primary);
  border-bottom-color: var(--prj-primary);
}

.astra-prj__divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--prj-border);
}

/* ==================================================== 卡片 942:2143 */
.astra-prj__grid {
  display: grid;
  grid-template-columns: repeat(var(--prj-columns, 2), minmax(0, 1fr));
  gap: 36px;
  width: 100%;
  padding: 0 var(--prj-grid-inset, 64px);
}

.astra-prj__card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  transition: box-shadow 0.3s;
}

.astra-prj__card[hidden] {
  display: none;
}

.astra-prj__card:hover {
  box-shadow: 12px 12px 6px rgba(0, 0, 0, 0.05);
}

.astra-prj__media {
  position: relative;
  display: block;
  width: 100%;
  height: var(--prj-media-height, 398px);
  overflow: hidden;
  background: #ebebeb;
}

.astra-prj__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.astra-prj__card:hover .astra-prj__media img {
  transform: scale(1.04);
}

.astra-prj__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background: #ffffff;
}

.astra-prj__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.astra-prj__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: var(--prj-meta-size, 18px);
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
}

.astra-prj__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.astra-prj__meta-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: block;
}

.astra-prj__place {
  color: var(--prj-primary);
}

.astra-prj__date {
  color: var(--prj-text);
}

.astra-prj__title {
  margin: 0;
  width: 100%;
  padding: 12px 0;
  font-size: var(--prj-title-size, 32px);
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: var(--prj-text);
}

.astra-prj__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.astra-prj__title a:hover,
.astra-prj__title a:focus-visible {
  color: var(--prj-primary);
}

.astra-prj__specs {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 12px;
  border-top: 1px solid var(--prj-border);
  border-bottom: 1px solid var(--prj-border);
}

.astra-prj__spec {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px;
}

/* 列之间那条 44 高的竖线（设计稿 Line 339/340） */
.astra-prj__spec + .astra-prj__spec {
  border-left: 1px solid var(--prj-border);
}

.astra-prj__spec-label {
  margin: 0;
  font-size: var(--prj-spec-label-size, 18px);
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--prj-text);
}

.astra-prj__spec-value {
  margin: 0;
  font-size: var(--prj-spec-value-size, 16px);
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: var(--prj-muted);
  overflow-wrap: break-word;
}

/* 「应用」那列是多行小字（设计稿 942:2119） */
.astra-prj__spec--wrap .astra-prj__spec-value {
  font-size: var(--prj-spec-alt-size, 14px);
  font-weight: 600;
  letter-spacing: 0;
}

.astra-prj__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--prj-text);
  text-decoration: none;
  transition: color 0.3s;
}

.astra-prj__more-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: block;
  color: var(--prj-primary);
  transition: transform 0.3s;
}

.astra-prj__more-icon path {
  stroke: currentColor;
}

.astra-prj__more:hover {
  color: var(--prj-primary);
}

.astra-prj__more:hover .astra-prj__more-icon {
  transform: translateX(4px);
}

.astra-prj__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 18px;
  color: var(--prj-subtle);
  text-align: center;
}

.astra-prj__empty[hidden] {
  display: none;
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只有 1920 桌面稿。字号、分栏数、留白由控制项按断点输出，
 * 本段只处理控制项没覆盖的排布。 */
@media (max-width: 1400px) {
  .astra-prj__row--scroll {
    --prj-row1-gap: 32px;
  }
}

@media (max-width: 1200px) {
  .astra-prj__row--plain {
    --prj-row2-inset: 24px;
  }

  .astra-prj__grid {
    --prj-grid-inset: 24px;
  }

  .astra-prj__body {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .astra-prj-list {
    gap: 32px;
  }

  .astra-prj__filters {
    gap: 24px;
  }

  .astra-prj__row--scroll {
    --prj-row1-gap: 12px;
  }

  .astra-prj__row--plain,
  .astra-prj__grid {
    --prj-row2-inset: 0px;
    --prj-grid-inset: 0px;
  }

  .astra-prj__tab {
    padding: 8px 12px 6px;
  }

  .astra-prj__body {
    padding: 20px;
    gap: 16px;
  }

  .astra-prj__stack {
    gap: 14px;
  }

  .astra-prj__title {
    padding: 6px 0;
  }

  /* 参数三列窄屏改成竖排，竖线换成横线 */
  .astra-prj__specs {
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
  }

  .astra-prj__spec + .astra-prj__spec {
    border-left: 0;
    border-top: 1px solid var(--prj-border);
    padding-top: 12px;
  }
}