/* ==========================================================================
   奕链 YiLink · 项目档案子页（/portfolio/）
   复用主站设计令牌与侧栏骨架，只补子页专属的少量规则。
   ========================================================================== */

.pf-archive .side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 0;
}

/* 两个分组标题只作分组用，不参与折叠（子页没有折叠脚本） */
.pf-archive .ws-head {
  cursor: default;
  user-select: none;
}

/* 档案正文偏阅读：限制行宽，避免超宽屏一行过长 */
.pf-archive .content > .panel { max-width: 1180px; }

/* 窄屏：侧栏改为顶部横向导航。
   主站的移动端抽屉依赖 #nav-toggle 与 com 逻辑，子页不复制这套，直接平铺。 */
@media (max-width: 900px) {
  .pf-archive .app { display: block; }
  .pf-archive .sidebar {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    z-index: auto;
    /* app.css 在窄屏把侧栏改成 translateX(-100%) 的抽屉，并靠 #nav-toggle 打开。
       子页没有那套抽屉控件，这里必须显式清掉位移，否则整块被移出视口、
       还会以 static 参与布局留下一条空白带。 */
    transform: none;
    transition: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 14px 10px;
  }
  /* 主站侧栏默认是纵向 flex；窄屏平铺时必须显式转成横向，
     否则 .ws 的 flex-basis 会变成 260px 高度，撑出一条空白带。 */
  .pf-archive .side-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
  }
  .pf-archive .ws { flex: 1 1 260px; }
  .pf-archive .ws-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pf-archive .main { margin-left: 0; }
  .pf-archive .side-foot { flex-direction: row; }
}
