/* 板块引导卡片样式（section-cta.html partial 共用）。抽成单文件避免 2 万+ 文章页各内联一份。
   三态：动态文章卡 .section-cta-card / 轻量细条 .section-cta-bar / 旧版二维码厚卡 .section-cta。 */

/* ── 动态文章预览卡 ── */
.section-cta-card {
  display: flex;
  align-items: stretch;            /* 封面与文字块等高，对齐更整 */
  gap: .85rem;
  margin: 1.25rem 0 1.75rem;
  padding: .75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 5%, var(--entry));
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.section-cta-card:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--entry));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}
.section-cta-card-cover {
  flex-shrink: 0;
  width: 84px;
  align-self: stretch;             /* 高度跟随文字块，裁剪成竖直缩略图 */
  min-height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--border);
}
.section-cta-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
}
.section-cta-card-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: var(--secondary);
}
.section-cta-card-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;             /* 按比例缩放，非方形 icon 也不拉伸变形 */
}
.section-cta-card-date {
  color: var(--secondary);
  opacity: .85;
}
.section-cta-card-date::before {
  content: "·";
  margin: 0 .4em;
  opacity: .6;
}
.section-cta-card-title {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--content);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section-cta-card-summary {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* 摘要按「行数」截断，不限字数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* card / bar 两态箭头共用基底（仅 font-size 与 align 差异在各自选择器） */
.section-cta-card-arrow,
.section-cta-bar-arrow {
  flex-shrink: 0;
  line-height: 1;
  color: var(--secondary);
  opacity: .5;
  transition: transform .2s ease, opacity .2s ease;
}
.section-cta-card-arrow { align-self: center; font-size: 1.1rem; }
.section-cta-card:hover .section-cta-card-arrow,
.section-cta-bar:hover .section-cta-bar-arrow {
  transform: translateX(3px);
  opacity: .85;
}

/* ── 轻量细条（仅配 url、无 feed 时的兜底形态）── */
.section-cta-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 1.75rem;
  padding: .6rem .9rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, var(--entry));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  text-decoration: none;
  color: var(--primary);
  font-size: .85rem;
  line-height: 1.5;
  transition: background .2s ease, border-color .2s ease;
}
.section-cta-bar:hover {
  background: color-mix(in srgb, var(--primary) 11%, var(--entry));
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
}
.section-cta-bar-icon { flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; }
.section-cta-bar-text { flex: 1; min-width: 0; color: var(--secondary); }
.section-cta-bar-text strong { color: var(--content); font-weight: 600; }
.section-cta-bar-arrow { font-size: 1.05rem; }  /* 共用基底见上方 card/bar 箭头分组 */

/* ── 旧版二维码厚卡片（向后兼容）── */
.section-cta {
  position: relative;
  margin: 2.5rem auto 1.5rem;
  padding: 1.25rem 1.5rem;
  max-width: var(--main-width);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-radius: 12px;
  border-left: 3px solid var(--primary);
  background: var(--entry);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
}
.section-cta-qrcode {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #fff;
  padding: 5px;
  box-shadow: 0 0 0 1px var(--border);
}
.section-cta-body { flex: 1; min-width: 0; }
.section-cta-label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--secondary);
  opacity: .65;
  margin-bottom: .35rem;
}
.section-cta-text { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--primary); }
.section-cta-text strong { color: var(--content); font-weight: 600; }
@media (max-width: 480px) {
  .section-cta {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
    border-left: none;
    border-top: 3px solid var(--primary);
  }
  .section-cta-qrcode { width: 88px; height: 88px; }
}