/* ============================================================
   成长故事（cat_id 12）· 暖橙叙事 / 阅读体验风
   ============================================================ */
.cz-detail { --cz: #E0913B; --cz-d: #B9691F; --cz-l: #F2B66B; }

.cz-hero { margin: 0 0 26px; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 44px rgba(224,145,59,.18); }
.cz-hero--real { border: 4px solid #fff; outline: 1px solid #f3e4d0; }
.cz-hero--real img { width: 100%; display: block; max-height: 420px; object-fit: cover; }
.cz-hero--fallback { background: linear-gradient(135deg, #fff4e8, #ffe8cf); border: 1px solid #f6dbb8; padding: 26px; }
.cz-hero--fallback img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 12px; }

.cz-head { text-align: center; padding: 6px 0 24px; }
.cz-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--cz-d); margin-bottom: 14px; }
.cz-kicker-emoji { font-size: 18px; }
.cz-kicker-badge { background: #FFF3E0; color: var(--cz-d); padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.cz-title { font-size: 32px; line-height: 1.4; font-weight: 800; color: #3a2a16; margin: 0 0 16px; letter-spacing: -.01em; }
.cz-meta { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: #a98e6e; flex-wrap: wrap; }
.cz-author { color: var(--cz-d); font-weight: 600; }
.cz-dot { color: #e2c9a6; }

.cz-lead { display: flex; gap: 14px; background: linear-gradient(135deg, #fff6ea, #ffefdc); border: 1px solid #f6dcbb; border-radius: 14px; padding: 18px 20px; margin: 0 0 28px; }
.cz-lead-label { flex-shrink: 0; background: var(--cz); color: #fff; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 20px; height: fit-content; }
.cz-lead p { margin: 0; font-size: 15.5px; line-height: 1.8; color: #5a4326; }

/* 首段首字下沉，增强阅读仪式感 */
.cz-body.read-body.md-content > p:first-of-type::first-letter {
  font-size: 3.2em;
  font-weight: 800;
  float: left;
  line-height: .9;
  margin: 6px 10px 0 0;
  color: var(--cz);
}

.cz-pullquote { margin: 30px 0; padding: 20px 24px; background: #fff8ee; border-left: 4px solid var(--cz-l); border-radius: 0 12px 12px 0; font-size: 18px; line-height: 1.7; color: #6b4f2c; font-style: italic; text-align: center; }

.cz-cta { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #C9742A, var(--cz)); border-radius: 16px; padding: 22px 24px; margin: 30px 0 6px; color: #fff; box-shadow: 0 12px 30px rgba(224,145,59,.25); }
.cz-cta-text h3 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.cz-cta-text p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.9); }
.cz-cta-btn { flex-shrink: 0; background: #fff; color: var(--cz-d); font-weight: 800; text-decoration: none; padding: 11px 20px; border-radius: 24px; font-size: 14px; white-space: nowrap; transition: transform .18s ease; }
.cz-cta-btn:hover { transform: translateY(-2px); }

@media (max-width: 600px) {
  .cz-title { font-size: 23px; }
  .cz-hero--real img { max-height: 240px; }
  .cz-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cz-cta-btn { align-self: stretch; text-align: center; }
  .cz-pullquote { font-size: 16px; }
}