/* ============================================================
   pages.css — secondary page layouts (Direction A neumorphism)
   loaded after site.css on 社区活动 / 企业活动 / Demo广场 / 社区发帖
   ============================================================ */

/* ---- page band (secondary hero) ---- */
.pb { position: relative; z-index: 1; padding: 64px 0 14px; }
.pb .eyebrow { margin-bottom: 22px; display: inline-flex; gap: 10px; align-items: center; }
.pb h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px,4.6vw,56px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 18px; color: var(--ink); max-width: 16em; }
.pb h1 .ac { color: var(--accent); }
.pb h1 .und { position: relative; white-space: nowrap; }
.pb h1 .und::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 4px; border-radius: 4px; background: var(--accent); opacity: .9; }
.pb p { font-size: clamp(15px,1.3vw,18px); line-height: 1.7; color: var(--ink-soft); max-width: 40em; margin: 0; }

/* ---- search field (neumorphic inset) ---- */
.ka-search { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 999px; max-width: 540px; }
.ka-search svg { width: 19px; height: 19px; color: var(--ink-faint); flex: 0 0 auto; }
.ka-search input { border: none; background: transparent; outline: none; font-family: var(--font-sans); font-size: 15.5px; color: var(--ink); width: 100%; }
.ka-search input::placeholder { color: var(--ink-faint); }

/* ---- filter chips / segmented ---- */
.flt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flt .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.fchip {
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  padding: 9px 17px; border-radius: 999px; cursor: pointer; background: transparent;
  border: none; font-family: var(--font-sans); transition: color .2s, box-shadow .3s, transform .2s;
}
.fchip:hover { color: var(--ink); }
.fchip.on { color: var(--accent-ink); background: var(--accent);
  box-shadow: calc(3px*var(--soft)) calc(3px*var(--soft)) calc(8px*var(--soft)) var(--accent-glow); }

/* ---- two-column scaffold ---- */
.ka-cols { display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; }
.ka-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
.side-card { border-radius: 22px; padding: 24px; }
.side-card h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 18px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }

/* org / company list rows in sidebar */
.org { display: flex; align-items: center; gap: 13px; padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--hair); }
.org:last-child { border-bottom: none; }
.org .ava { width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--accent); }
.org .meta { flex: 1; min-width: 0; }
.org .meta .n { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org .meta .s { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 2px; }
.org .arrow-dot { width: 30px; height: 30px; }
.org .arrow-dot svg { width: 13px; height: 13px; }
.org:hover .arrow-dot { color: var(--accent); transform: translateX(2px); }

/* ---- event list (community + enterprise rows) ---- */
.elist { display: flex; flex-direction: column; gap: 16px; }
.erow { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 24px; border-radius: 20px; padding: 22px 26px; cursor: pointer; }
.erow .d { font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.erow .d span { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.erow .mid { min-width: 0; }
.erow .mid h3 { font-size: 18px; font-weight: 600; margin: 0 0 9px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.erow .mid .sub { font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.erow .mid .sub .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.erow .end { display: flex; align-items: center; gap: 18px; }
.erow .seats { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.erow .join-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; padding: 10px 18px; border-radius: 999px; transition: box-shadow .25s, transform .25s;
  box-shadow: calc(3px*var(--soft)) calc(3px*var(--soft)) calc(8px*var(--soft)) var(--d-sh), calc(-3px*var(--soft)) calc(-3px*var(--soft)) calc(8px*var(--soft)) var(--l-sh); }
.erow .join-link svg { transition: transform .25s; }
.erow:hover .join-link { transform: translateY(-1px); }
.erow:hover .join-link svg { transform: translateX(3px); }
.erow:hover .arrow-dot { color: var(--accent); transform: translateX(3px); }
.hot-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }

/* type badge */
.tbadge { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; padding: 5px 11px; border-radius: 8px; color: var(--accent); flex: 0 0 auto; }

/* enterprise feature card */
.en-feat { border-radius: 26px; padding: 34px 36px; margin-bottom: 26px; display: flex; align-items: center; gap: 30px; }
.en-feat .lead { flex: 1; }
.en-feat .co { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); margin-bottom: 14px; }
.en-feat h3 { font-family: var(--font-display); font-size: 27px; font-weight: 600; margin: 0 0 14px; color: var(--ink); line-height: 1.25; }
.en-feat .sub { font-size: 14px; color: var(--ink-soft); display: flex; gap: 16px; flex-wrap: wrap; }
.en-feat .when { text-align: center; flex: 0 0 auto; padding-left: 30px; border-left: 1px solid var(--hair); }
.en-feat .when .big { font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }

/* ---- tech-plaza work card (value-first, for non-devs / investors) ---- */
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card { border-radius: 22px; padding: 24px 24px 22px; cursor: pointer; display: flex; flex-direction: column; min-height: 234px; position: relative; overflow: hidden; transition: box-shadow .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1); }
.work-card::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, hsl(var(--wc-hue) 70% 56%), transparent); transform: scaleX(0); transform-origin: left; opacity: .85; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.work-card:hover::after { transform: scaleX(1); }
.work-card:hover { transform: translateY(-3px); }
.wc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.wc-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.wc-ico { width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, hsl(var(--wc-hue) 62% 58%), hsl(calc(var(--wc-hue) + 26) 60% 46%)); }
.wc-trend { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: hsl(var(--wc-hue) 70% 52%); white-space: nowrap; }
.work-card h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 9px; color: var(--ink); }
.wc-blurb { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wc-author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wc-who { display: flex; flex-direction: column; min-width: 0; }
.wc-who b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-who small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.wc-metrics { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.wc-met { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.wc-met svg { width: 14px; height: 14px; }

/* ---- posts feed ---- */
.composer { border-radius: 24px; padding: 24px; margin-bottom: 24px; }
.composer .crow { display: flex; gap: 16px; align-items: flex-start; }
.composer .field { flex: 1; }
.composer .fake-input { border-radius: 14px; padding: 16px 18px; font-size: 15.5px; color: var(--ink-faint); cursor: text; }
.composer .ctools { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.composer .ctools .t { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.composer .ctools .spacer { flex: 1; }

.feed { display: flex; flex-direction: column; gap: 20px; }
.post { display: block; border-radius: 22px; padding: 28px 30px; cursor: pointer; transition: box-shadow .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1); }
.post .phead { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.post .phead .meta { flex: 1; min-width: 0; }
.post .phead .n { font-size: 15px; font-weight: 600; color: var(--ink); }
.post .phead .h { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.post .phead .kind { font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; border-radius: 999px; color: var(--accent); }
.post h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; color: var(--ink); line-height: 1.45; transition: color .2s; }
.post:hover h3 { color: var(--accent); }
.post .body { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 18px; }
.post .ptags { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.post .ptag { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.post .pfoot { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
.post .pfoot .met { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: color .2s, box-shadow .25s; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); padding: 8px 14px; border-radius: 999px; }
.post .pfoot .met:hover { color: var(--accent); box-shadow: inset calc(2px*var(--soft)) calc(2px*var(--soft)) calc(5px*var(--soft)) var(--d-sh), inset calc(-2px*var(--soft)) calc(-2px*var(--soft)) calc(5px*var(--soft)) var(--l-sh); }
.post .pfoot .met.share { margin-left: auto; }
.post .pfoot .met svg { width: 15px; height: 15px; }

/* topics sidebar */
.topic { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hair); cursor: pointer; transition: padding-left .2s; }
.topic:last-child { border-bottom: none; }
.topic:hover { padding-left: 6px; }
.topic .t { font-size: 14.5px; font-weight: 600; color: var(--accent); }
.topic .c { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.ava-c { width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 30px 0 22px; flex-wrap: wrap; }
.count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .ka-cols { grid-template-columns: 1fr; }
  .ka-side { position: static; flex-direction: column; }
  .demo-grid { grid-template-columns: 1fr 1fr; }
  .en-feat { flex-direction: column; align-items: flex-start; gap: 18px; }
  .en-feat .when { border-left: none; padding-left: 0; text-align: left; }
}
@media (max-width: 620px) {
  .demo-grid { grid-template-columns: 1fr; }
  .erow { grid-template-columns: 70px 1fr; }
  .erow .end { grid-column: 1 / -1; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--hair); }
}