/* ==========================================================================
   news-jishu.css —— 技术分享栏目页私有样式
   首屏压图 + 两列错位瀑布卡 + 侧栏编号榜 + 信条条 + 墨黑 CTA
   ========================================================================== */

.js-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.js-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js-hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(35,36,31,.74), rgba(35,36,31,.30));
}
.js-hero-inner { position: relative; padding: 76px 24px; color: var(--rice); }
.js-hero-inner .eyebrow { color: var(--bamboo-light); }
.js-hero-inner h1 { color: #fff; margin-bottom: 12px; }
.js-hero-sub { color: rgba(246,242,233,.9); max-width: 540px; }

/* 主区 + 侧栏 */
.js-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: start;
}

/* 两列错位瀑布 */
.js-masonry {
  columns: 2;
  column-gap: 26px;
}
.js-card {
  break-inside: avoid;
  margin-bottom: 26px;
  padding: 22px;
}
.js-card:nth-child(even) { transform: translateY(28px); }
.js-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.js-card .tag { margin-bottom: 10px; }
.js-card h3 { font-size: 1.12rem; line-height: 1.5; margin-bottom: 8px; }
.js-card h3 a { color: var(--ink); }
.js-card h3 a:hover { color: var(--bamboo); }
.js-card p { font-size: .88rem; }
.js-card time { display: block; margin-top: 10px; font-size: .78rem; color: var(--bamboo); }

/* 侧栏 */
.js-side { position: sticky; top: 96px; display: grid; gap: 24px; }
.js-side-card h3 { margin-bottom: 8px; }
.js-side-card p { font-size: .9rem; margin-bottom: 16px; }
.js-side-title {
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 4px solid var(--bamboo);
}
.js-side-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.js-num { font-family: var(--font-title); color: var(--bamboo); font-weight: 700; }
.js-side-item a { color: var(--ink-soft); font-size: .9rem; }
.js-side-item a:hover { color: var(--bamboo); }

/* 信条条 */
.js-credo { background: var(--paper); padding: 48px 0; border-top: 1px solid var(--line); }
.js-credo-inner { text-align: center; }
.js-credo-line {
  font-family: var(--font-title);
  font-size: 1.18rem;
  line-height: 2.1;
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}
.js-credo-line::before, .js-credo-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--bamboo);
}
.js-credo-line::before { left: -30px; }
.js-credo-line::after { right: -30px; }

/* CTA：墨黑底反白 */
.js-cta {
  background: var(--ink);
  color: var(--rice);
  padding: 80px 0;
  text-align: center;
}
.js-cta-code {
  font-family: Consolas, monospace;
  color: var(--bamboo-light);
  font-size: .85rem;
  margin-bottom: 14px;
}
.js-cta h2 { color: #fff; margin-bottom: 10px; }
.js-cta p { color: rgba(246,242,233,.75); margin-bottom: 22px; }

@media (max-width: 992px) {
  .js-layout { grid-template-columns: 1fr; }
  .js-side { position: static; }
  .js-card:nth-child(even) { transform: none; }
}
@media (max-width: 640px) {
  .js-masonry { columns: 1; }
}