/* ============================================================
   「合作展示」横向卡片样式补丁 —— collaboration.css
   ------------------------------------------------------------
   为什么需要这个文件：
   打包产物 assets/index-DWPb8W9u.css 里缺了这一版 JS 用到的
   collaboration-row-* 系列样式，导致「合作展示」三行卡片按浏览器
   默认样式渲染：36 张巨图竖着堆、轮播逻辑失效（scrollLeft 恒为 0）。

   本文件只补这些缺失的类，不覆盖任何已有规则，不改动打包产物：
     .collaboration-project-rows / .collaboration-project-row
     .collaboration-row-heading
     .collaboration-row-loop / .collaboration-row-track / .collaboration-loop-set
     .collaboration-row-project / .collaboration-row-cover (+ .is-placeholder)
     .collaboration-row-caption / .collaboration-row-source

   想调卡片大小 / 间距，只改下面 .collaboration-project-rows 里的
   两个变量 --collab-card 和 --collab-gap 即可（各断点各有一处）。
   ============================================================ */

/* ── 行容器 ── */
.collaboration-project-rows {
  --collab-card: clamp(268px, 25vw, 372px); /* 单张卡片宽度 */
  --collab-gap: 24px;                       /* 卡片横向间距 */
}

.collaboration-project-row {
  border-top: 1px solid var(--line);
}

.collaboration-project-row + .collaboration-project-row {
  margin-top: 88px;
}

/* ── 行标题：左「01 / ARCHITECTURAL DESIGN + 建筑设计」，右描述 ── */
.collaboration-row-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 34px 0 28px;
  border-bottom: 1px solid var(--line);
}

.collaboration-row-heading > div > span {
  color: #6e6e73;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
}

.collaboration-row-heading h3 {
  margin: 12px 0 0;
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.15;
}

.collaboration-row-heading p {
  max-width: 430px;
  margin: 0 0 6px;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.85;
}

/* ── 横向循环轨道（JS 依赖：track 必须是 flex + column-gap；
      loop 必须产生横向滚动，否则 scrollLeft 恒为 0、轮播失效） ── */
.collaboration-row-loop {
  padding: 34px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.collaboration-row-loop::-webkit-scrollbar {
  display: none;
}

.collaboration-row-loop:active {
  cursor: grabbing;
}

.collaboration-row-track {
  display: flex;
  column-gap: var(--collab-gap);
  width: max-content;
}

.collaboration-loop-set {
  display: flex;
  flex: none;
  column-gap: var(--collab-gap);
}

.collaboration-row-project {
  flex: none;
  width: var(--collab-card);
}

/* ── 封面 ── */
.collaboration-row-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #30322d;
  color: #fff;
  font: inherit;
  text-align: left;
}

.collaboration-row-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) saturate(0.7);
  transition: transform 0.8s, filter 0.5s;
}

.collaboration-row-project:hover .collaboration-row-cover img {
  filter: grayscale(0) saturate(0.9);
  transform: scale(1.02);
}

/* 「查看项目 →」悬浮胶囊，沿用作品区的 .project-open-cue 规格 */
.collaboration-row-cover > span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  color: #1d1d1f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  background: #f5f5f7b8;
  border: 1px solid #ffffff75;
  border-radius: 999px;
  box-shadow: 0 6px 22px #00000017;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s, transform 0.32s;
}

.collaboration-row-cover:hover > span,
.collaboration-row-cover:focus-visible > span {
  opacity: 1;
  transform: translateY(0);
}

.collaboration-row-cover:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 4px;
}

/* ── 占位卡（还没有真实内容的位置） ── */
.collaboration-row-cover.is-placeholder {
  background: #f2f2f4;
}

.collaboration-row-cover.is-placeholder img {
  opacity: 0.72;
  filter: grayscale(0.6) saturate(0.35);
}

.collaboration-row-cover.is-placeholder > span {
  right: 16px;
  bottom: 16px;
  padding: 7px 12px;
  color: #f5f5f7;
  font-size: 10px;
  background: #1d1d1fb8;
  border-color: #ffffff3d;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* ── 卡片文字 ── */
.collaboration-row-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-top: 16px;
}

.collaboration-row-caption > span {
  color: #888a80;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-variant-numeric: tabular-nums;
}

.collaboration-row-caption > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: inherit;
  font-family: "Noto Serif SC", serif;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.4;
}

/* 占位卡挂的「临时示意图 · gooood」外链 */
.collaboration-row-source {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 2px;
  color: #a1a1a6;
  font-size: 10px;
  letter-spacing: 0.4px;
  border-bottom: 1px solid #1d1d1f24;
  transition: color 0.25s, border-color 0.25s;
}

.collaboration-row-source:hover {
  color: #0071e3;
  border-bottom-color: #0071e3;
}

/* ── 深色主题 ── */
html[data-theme="dark"] .collaboration-row-cover {
  background: #1b1e1f;
}

html[data-theme="dark"] .collaboration-row-cover.is-placeholder {
  background: #1b1e1f;
}

html[data-theme="dark"] .collaboration-row-heading > div > span,
html[data-theme="dark"] .collaboration-row-caption > span,
html[data-theme="dark"] .collaboration-row-source {
  color: #aaa9a4;
}

html[data-theme="dark"] .collaboration-row-source {
  border-bottom-color: #ffffff2e;
}

html[data-theme="dark"] .collaboration-row-source:hover {
  color: #2997ff;
  border-bottom-color: #2997ff;
}

/* ── 窄屏 ── */
@media (width <= 1000px) {
  .collaboration-project-rows {
    --collab-card: clamp(230px, 34vw, 300px);
    --collab-gap: 20px;
  }

  .collaboration-project-row + .collaboration-project-row {
    margin-top: 68px;
  }

  .collaboration-row-heading {
    display: block;
    padding: 28px 0 22px;
  }

  .collaboration-row-heading p {
    max-width: none;
    margin-top: 14px;
  }
}

@media (width <= 680px) {
  .collaboration-project-rows {
    --collab-card: min(66vw, 260px);
    --collab-gap: 16px;
  }

  .collaboration-project-row + .collaboration-project-row {
    margin-top: 54px;
  }

  .collaboration-row-loop {
    padding-top: 24px;
  }

  .collaboration-row-heading h3 {
    font-size: 24px;
    letter-spacing: -0.9px;
  }
}

@media (width <= 560px) {
  .collaboration-project-rows {
    --collab-card: min(74vw, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collaboration-row-cover img,
  .collaboration-row-cover > span,
  .collaboration-row-source {
    transition: none;
  }

  .collaboration-row-project:hover .collaboration-row-cover img {
    transform: none;
  }
}

/* ============================================================
   建筑设计行（第一行）的封面裁切位置
   ------------------------------------------------------------
   这一行是「其他设计」的两张图 + 两张 PDF 长图。两个 PDF 是超长竖版展板
   （1551x3551、2305x3950，比例 0.44 和 0.58），在 4:3 卡位里用
   object-fit: cover 会被裁掉一大半，这里明确按【居中】裁切，取展板中段。

   只作用于第一行，小设计 / 作品分享两行不受影响。
   ============================================================ */
.collaboration-project-row:first-child .collaboration-row-cover img {
  object-position: center center;
}