/* =====================================================
qing-cta-contact — 联系号召条（对应源码 .cta）
前缀: qcc-
结构四层：
.qcc-wrap 深蓝底 + 定位 + overflow:hidden
.qcc-bg absolute 铺满的 ![]()
（object-position: center right）
.qcc-bg::after 左浓右淡的横向渐变，让左侧文字压在深色实块上
.qcc-inner 限宽居中 + 上下内边距
与「CTA 号召版块」(.qcb-*) 的区别：那个是左文案右按钮的横排卡片，
这个是背景大图 + 左对齐标题 + 标题下方描边按钮，两者版式不同。
背景图用 ![]()
而不是 background-image —— 与源码一致，
好处是能吃到 loading="lazy" 和响应式 srcset。
===================================================== */
.qcc-wrap {
--qcc-bg: #10294f;
/* 左侧内容块宽度上限；按钮在块内的水平对齐 */
--qcc-content-w: 560px;
--qcc-btn-align: center;
position: relative;
overflow: hidden;
background: var(--qcc-bg);
font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
/* ---------- 背景图层 ---------- */
.qcc-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.qcc-bg img {
width: 100%;
height: 100%;
object-fit: cover;
/* 靠右取景：左侧留给文字，人物/设备主体落在右边 */
object-position: center right;
display: block;
}
/* 左侧深色实块 + 向右渐隐到车间图。
渐变色跟随 --qcc-bg，改底色时不会与实块脱节。 */
.qcc-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
var(--qcc-bg) 0%,
var(--qcc-bg) 38%,
color-mix(in srgb, var(--qcc-bg) 85%, transparent) 52%,
color-mix(in srgb, var(--qcc-bg) 45%, transparent) 72%,
color-mix(in srgb, var(--qcc-bg) 15%, transparent) 100%
);
}
/* color-mix 不支持时的兜底：源码原样的固定色值 */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.qcc-bg::after {
background: linear-gradient(
90deg,
#10294f 0%,
#10294f 38%,
rgba(16, 41, 79, 0.85) 52%,
rgba(16, 41, 79, 0.45) 72%,
rgba(16, 41, 79, 0.15) 100%
);
}
}
.qcc-wrap.qcc-no-overlay .qcc-bg::after {
display: none;
}
/* ---------- 内容层 ---------- */
.qcc-inner {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
padding: 60px 50px;
box-sizing: border-box;
}
/* ---------- 左侧内容块 ----------
标题和按钮的共同容器。限宽后标题不会在大屏上拉成一长条，
也保证文字始终落在背景渐变的深色区域内。
宽度用 min() 兜底：--qcc-content-w 再大也不会超过内容区可用宽度，
窄屏自然退化成 100%，不需要额外断点。
用 inline-block 而不是 block：这样内容块本身会跟随
.qcc-inner 的 text-align（即「内容对齐」控件）左/中/右就位，
不必为三种对齐各写一套 margin。 */
.qcc-content {
display: inline-block;
vertical-align: top;
width: min(100%, var(--qcc-content-w));
}
/* 按钮所在行。按钮是 inline-flex，靠 text-align 居中即可。
单独包一层而不是给 .qcc-content 设 flex —— 那样会把标题也一起居中，
而标题的对齐要交给「内容对齐」控件。 */
.qcc-actions {
text-align: var(--qcc-btn-align);
}
.qcc-title {
font-size: 32px;
font-weight: 800;
color: #fff;
line-height: 1.3;
text-align: left;
margin: 0 0 26px;
}
/* 源码里 .cta-title::after { display:none } 用来压掉全局 .section-title
的居中下划线。这里显式保留，防主题全局样式命中。 */
.qcc-title::after {
display: none;
}
/* ---------- 按钮 ----------
源码 .cta-btn 是白色半透明描边 + 悬停反白（白底深蓝字），
不是渐变实心按钮。
这个类既可能落在 （跳转链接）也可能落在