/* ============================================================
   jiancai.css · 建材装饰行业网站建设
   视觉语言：杂志大图 + 竖向时间线 + 功能四宫格
   点缀色：青绿 #0D9488
   ============================================================ */

.banner-jiancai{background-image:url('../images/banner-case.jpg')}

/* ---------- 痛点：图文对照 ---------- */
.jc-painwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.jc-painmedia{position:relative}
.jc-painmedia img{border-radius:6px;box-shadow:var(--shadow-lg)}
.jc-pain-quote{
  margin:22px 14px 0;padding:18px 24px;background:var(--c-ice-2);
  border-left:4px solid #0D9488;
}
.jc-pain-quote p{font-size:15px;color:var(--c-primary);font-weight:600;line-height:1.7}
.jc-pain-quote span{display:block;margin-top:8px;font-size:13px;color:var(--c-muted)}
.jc-paintext h2{font-size:clamp(24px,2.8vw,33px);margin:10px 0 26px;line-height:1.35}
.jc-painitem{padding:18px 0;border-top:1px solid var(--c-line)}
.jc-painitem:first-of-type{border-top:none;padding-top:0}
.jc-painitem h3{font-size:17.5px;margin-bottom:8px;color:var(--c-primary)}
.jc-painitem p{color:var(--c-text-2);font-size:14.5px;line-height:1.75}

/* ---------- 竖向时间线 ---------- */
.jc-timeline-sec{background:var(--c-ice-2)}
.jc-timeline{
  max-width:780px;margin:0 auto;position:relative;padding-left:34px;
}
.jc-timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(#0D9488,#5EEAD4);
}
.jc-tl-item{position:relative;padding-bottom:34px}
.jc-tl-item:last-child{padding-bottom:0}
.jc-tl-dot{
  position:absolute;left:-34px;top:4px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:4px solid #0D9488;box-shadow:0 0 0 5px rgba(13,148,136,.12);
}
.jc-tl-card{
  background:#fff;border-radius:14px;padding:24px 28px;box-shadow:var(--shadow);
  transition:transform var(--trans);
}
.jc-tl-card:hover{transform:translateX(6px)}
.jc-tl-step{
  display:inline-block;font-size:12.5px;font-weight:700;color:#0D9488;
  background:#CCFBF1;padding:3px 12px;border-radius:6px;margin-bottom:10px;letter-spacing:1px;
}
.jc-tl-card h3{font-size:18.5px;margin-bottom:8px}
.jc-tl-card p{color:var(--c-text-2);font-size:14.5px;line-height:1.75}

/* ---------- 功能四宫格 ---------- */
.jc-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.jc-feat{
  background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:30px 26px;
  transition:all var(--trans);text-align:left;
}
.jc-feat:hover{border-color:#5EEAD4;box-shadow:0 14px 34px rgba(13,148,136,.14);transform:translateY(-5px)}
.jc-feat svg{width:36px;height:36px;fill:#0D9488;margin-bottom:16px}
.jc-feat h3{font-size:17.5px;margin-bottom:10px}
.jc-feat p{color:var(--c-text-2);font-size:14px;line-height:1.7}

/* ---------- 案例：横图+信息 ---------- */
.jc-cases{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.jc-case{
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:block;
  background:#fff;transition:all var(--trans);
}
.jc-case:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.jc-case img{width:100%;transition:transform .6s ease}
.jc-case:hover img{transform:scale(1.04)}
.jc-case-info{padding:22px 26px 26px;border-top:3px solid #0D9488}
.jc-case-info span{font-size:12.5px;font-weight:700;color:#0D9488;letter-spacing:1px}
.jc-case-info h3{font-size:19px;margin:6px 0 8px}
.jc-case-info p{color:var(--c-text-2);font-size:14px;line-height:1.7}

/* ---------- FAQ ---------- */
.jc-faqsec{background:var(--c-ice-2)}
.jc-faqlist{max-width:840px;margin:0 auto;display:grid;gap:14px}
.jc-faq-item{background:#fff;border-radius:12px;padding:20px 26px;border-left:4px solid #0D9488}
.jc-faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;color:var(--c-primary);font-size:16px;cursor:pointer;list-style:none;
}
.jc-faq-item summary::-webkit-details-marker{display:none}
.jc-faq-item summary i{
  width:10px;height:10px;border-right:2px solid #0D9488;border-bottom:2px solid #0D9488;
  transform:rotate(45deg);transition:transform var(--trans);flex-shrink:0;margin-top:-4px;
}
.jc-faq-item[open] summary i{transform:rotate(-135deg)}
.jc-faq-item p{margin-top:12px;color:var(--c-text-2);font-size:15px;line-height:1.8}
.jc-faq-item p a{color:#0D9488;text-decoration:underline}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .jc-painwrap{grid-template-columns:1fr;gap:40px}
  .jc-feats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .jc-feats{grid-template-columns:1fr}
  .jc-cases{grid-template-columns:1fr}
  .jc-timeline{padding-left:26px}
  .jc-tl-dot{left:-26px}
}