/* ============================================================
   博远智能 - 产品频道页公共样式 channel.css
   （原 style.css 尾部嵌入的 channel 块，独立成文件，仅产品
   列表页 / 需要产品卡片与CTA的页面引入）
   配色：主蓝 #127be5 / 深底 #053a73 / 橙 #ff7800
   ============================================================ */

/* ===== 子分类 Tabs ===== */
.subtabs {
background: #fff;
border-bottom: 1px solid #e8edf3;
padding: 16px 0;
position: sticky;
top: 75px;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.subtabs .container { display: flex; flex-wrap: wrap; gap: 10px; }
.subtab {
display: inline-block;
padding: 8px 20px;
border-radius: 100px;
font-size: 14px;
cursor: pointer;
border: 1.5px solid #d0d7e3;
background: #fff;
color: #555;
transition: var(--transition);
user-select: none;
}
.subtab:hover { border-color: var(--orange); color: var(--orange); background: #fff8f0; }
.subtab.active {
background: var(--orange);
color: #fff;
border-color: var(--orange);
font-weight: 600;
box-shadow: 0 2px 8px rgba(255,120,0,.25);
}

/* ===== 产品网格 ===== */
.p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.p-card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
border: 1px solid transparent;
text-decoration: none;
color: inherit;
}
.p-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(10,75,156,.16); border-color: #d0dff2; }
.p-card-img {
position: relative;
display: block;
width: 100%;
height:252px;
background: #e8f0fa;
overflow: hidden;
}
.p-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.p-card:hover .p-card-img img { transform: scale(1.05); }
.p-model {
position: absolute;
top: 14px;
left: 14px;
background: var(--orange);
color: #fff;
padding: 5px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: .5px;
box-shadow: 0 2px 8px rgba(255,120,0,.35);
}
.p-card-body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.p-card-body h3 { font-size: 18px; color: #333333; margin-bottom: 10px; font-weight: 600; }
.p-desc {
font-size: 14px;
color: #666;
line-height: 1.75;
margin-bottom: 14px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.p-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.p-tags span { font-size: 12px; background: #f0f5fb; color: var(--main-blue); padding: 4px 10px; border-radius: 4px; }
.p-actions { display: flex; gap: 12px; align-items: center; }
.p-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 24px; transition: var(--transition); }
.p-btn.primary { background: var(--orange); color: #fff; }
.p-btn.primary:hover { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,120,0,.3); }
.p-btn.more { color: var(--main-blue); padding: 9px 6px; margin-left: auto; }
.p-btn.more:hover { color: var(--orange); gap: 10px; }
.p-btn.more i { font-size: 12px; transition: var(--transition); }

/* ===== CTA 咨询条 ===== */
.cta-band {
background: linear-gradient(135deg, #053a73 0%, #127be5 100%);
color: #fff;
padding: 40px 0;
}
.cta-band .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.cta-text h2 { font-size: 24px; margin-bottom: 6px; }
.cta-text p { font-size: 14px; opacity: .85; }
.cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 30px; font-size: 15px; font-weight: 600; transition: var(--transition); }
.cta-btn.primary { background: var(--orange); color: #fff; }
.cta-btn.primary:hover { background: var(--orange-deep); transform: translateY(-2px); }
.cta-btn.ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
.cta-btn.ghost:hover { background: #fff; color: var(--main-blue); border-color: #fff; }

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
.p-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
.p-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.p-card-img { height: 200px; }
.cta-band .container { flex-direction: column; text-align: center; }
.subtabs { top: 60px; }
}
@media (max-width: 480px) {
.p-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* v5：CTA 深蓝底上标题保持白色 */
.cta-text h2 { color: #ffffff; }