@charset "utf-8";
/* ============================================================================
 * layout.css — 全站统一的「样式 / 布局方式」
 * ----------------------------------------------------------------------------
 * 后台「样式 / 布局方式」下拉（新闻 / 资讯文章 / 典型案例 / 产品 /
 * 资质证书 / 联系人 / 板块管理）共用同一套取值，此处统一定义其前台表现。
 *
 * 约定：
 *   .qd-lt     详情页图文区容器，子元素 .qd-lt-img（图） / .qd-lt-txt（文）
 *   .qd-clt    列表卡片容器，    子元素 .qd-c-img（图）  / .qd-c-txt（文）
 *
 * 重要：**不设置 layout 时不会输出任何 class，因此不会改变任何存量内容的
 * 展示效果**。只有后台显式选择了某个布局，对应样式才会生效。
 * ========================================================================== */

/* ---------------- 一、详情页图文区（.qd-lt） ---------------- */
.qd-lt{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap}
/* 一旦启用布局控制，间距统一由 gap 负责，清掉元素自带的 margin，避免叠加 */
.qd-lt > .qd-lt-img{flex:1 1 320px;min-width:0;margin:0}
.qd-lt > .qd-lt-txt{flex:1 1 320px;min-width:0;margin:0}
.qd-lt > .qd-lt-img img{width:100%;border-radius:12px;display:block}

/* 图左文右（DOM 顺序为图在前，order:-1 显式锁定，语义清晰） */
.qd-lt-image_left > .qd-lt-img{order:-1}
/* 图右文左 */
.qd-lt-image_right > .qd-lt-img{order:1}
.qd-lt-image_right > .qd-lt-txt{order:0}

/* 图上文下 */
.qd-lt-image_top{flex-direction:column;align-items:stretch;gap:28px}
.qd-lt-image_top > .qd-lt-img{flex:0 0 auto;order:-1}

/* 通栏大图：图片横贯全宽，文字居中收窄 */
.qd-lt-image_top_full{flex-direction:column;align-items:stretch;gap:28px}
.qd-lt-image_top_full > .qd-lt-img{flex:0 0 auto;order:-1;width:100%}
.qd-lt-image_top_full > .qd-lt-img img{width:100%;height:auto;display:block;border-radius:0}
.qd-lt-image_top_full > .qd-lt-txt{max-width:880px;margin:0 auto;text-align:center}

/* 圆形图片（图左文右） */
.qd-lt-image_circle{align-items:center;gap:44px}
.qd-lt-image_circle > .qd-lt-img{flex:0 0 240px;order:-1}
.qd-lt-image_circle > .qd-lt-img img{width:240px;height:240px;border-radius:50%;object-fit:contain;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.12)}

/* 图片做背景：文字叠加在图上（无需改动 DOM，图铺满容器 + 深色蒙版） */
.qd-lt-image_bg{position:relative;display:block;gap:0;padding:56px 48px;border-radius:16px;overflow:hidden;background:var(--dark,#0d1b2a)}
.qd-lt-image_bg > .qd-lt-img{position:absolute;inset:0;flex:none;margin:0;z-index:0}
.qd-lt-image_bg > .qd-lt-img img{width:100%;height:100%;object-fit:contain;border-radius:0}
.qd-lt-image_bg > .qd-lt-img::after{content:"";position:absolute;inset:0;background:rgba(8,28,48,.72)}
.qd-lt-image_bg > .qd-lt-txt{position:relative;z-index:1;flex:1 1 auto;color:#fff}
.qd-lt-image_bg > .qd-lt-txt h1,
.qd-lt-image_bg > .qd-lt-txt h2,
.qd-lt-image_bg > .qd-lt-txt h3,
.qd-lt-image_bg > .qd-lt-txt h4{color:#fff}
.qd-lt-image_bg > .qd-lt-txt p,
.qd-lt-image_bg > .qd-lt-txt li,
.qd-lt-image_bg > .qd-lt-txt .article-meta,
.qd-lt-image_bg > .qd-lt-txt .case-desc{color:rgba(255,255,255,.9)}

/* 深色底现代卡片（图左文右 / 图右文左） */
.qd-lt-dark_card,
.qd-lt-dark_card_right{align-items:center;gap:44px;padding:44px;border-radius:16px;background:var(--dark,#0d1b2a);color:#fff}
.qd-lt-dark_card > .qd-lt-img{order:-1}
.qd-lt-dark_card_right > .qd-lt-img{order:1}
.qd-lt-dark_card_right > .qd-lt-txt{order:0}
.qd-lt-dark_card > .qd-lt-img img,
.qd-lt-dark_card_right > .qd-lt-img img{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.qd-lt-dark_card > .qd-lt-txt h1,
.qd-lt-dark_card > .qd-lt-txt h2,
.qd-lt-dark_card > .qd-lt-txt h3,
.qd-lt-dark_card > .qd-lt-txt h4,
.qd-lt-dark_card_right > .qd-lt-txt h1,
.qd-lt-dark_card_right > .qd-lt-txt h2,
.qd-lt-dark_card_right > .qd-lt-txt h3,
.qd-lt-dark_card_right > .qd-lt-txt h4{color:#fff}
.qd-lt-dark_card > .qd-lt-txt p,
.qd-lt-dark_card > .qd-lt-txt li,
.qd-lt-dark_card_right > .qd-lt-txt p,
.qd-lt-dark_card_right > .qd-lt-txt li{color:rgba(255,255,255,.86)}

/* ---------------- 二、列表卡片（.qd-clt） ---------------- */
/* 说明：卡片默认即「图上文下」，故 image_top / image_top_full 与默认一致 */

/* 图左文右：卡片内横向排列 */
.qd-clt-image_left{display:flex;align-items:center;gap:16px}
.qd-clt-image_left > .qd-c-img{flex:0 0 38%;order:-1;min-width:0}
.qd-clt-image_left > .qd-c-txt{flex:1 1 auto;min-width:0}
.qd-clt-image_left > .qd-c-img img{width:100%;height:auto;border-radius:8px;display:block}

/* 图右文左 */
.qd-clt-image_right{display:flex;align-items:center;gap:16px}
.qd-clt-image_right > .qd-c-img{flex:0 0 38%;order:1;min-width:0}
.qd-clt-image_right > .qd-c-txt{flex:1 1 auto;order:0;min-width:0}
.qd-clt-image_right > .qd-c-img img{width:100%;height:auto;border-radius:8px;display:block}

/* 图上文下（显式声明，等同卡片默认） */
.qd-clt-image_top,
.qd-clt-image_top_full{display:block}
.qd-clt-image_top > .qd-c-img,
.qd-clt-image_top_full > .qd-c-img{width:100%}
.qd-clt-image_top > .qd-c-img img,
.qd-clt-image_top_full > .qd-c-img img{width:100%;display:block}

/* 圆形图片 */
.qd-clt-image_circle{display:flex;align-items:center;gap:18px}
.qd-clt-image_circle > .qd-c-img{flex:0 0 96px;order:-1}
.qd-clt-image_circle > .qd-c-img img{width:96px;height:96px;border-radius:50%;object-fit:contain;display:block;margin:0 auto}
.qd-clt-image_circle > .qd-c-txt{flex:1 1 auto;min-width:0}

/* 图片做背景 */
.qd-clt-image_bg{position:relative;display:block;overflow:hidden;border-radius:12px;background:var(--dark,#0d1b2a);min-height:180px}
.qd-clt-image_bg > .qd-c-img{position:absolute;inset:0;margin:0;padding:0}
.qd-clt-image_bg > .qd-c-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0}
.qd-clt-image_bg > .qd-c-img::after{content:"";position:absolute;inset:0;background:rgba(8,28,48,.7)}
.qd-clt-image_bg > .qd-c-txt{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:180px;padding:20px;color:#fff}
.qd-clt-image_bg > .qd-c-txt h3,
.qd-clt-image_bg > .qd-c-txt h4{color:#fff}
.qd-clt-image_bg > .qd-c-txt p{color:rgba(255,255,255,.88)}

/* 深色底现代卡片 */
.qd-clt-dark_card,
.qd-clt-dark_card_right{background:var(--dark,#0d1b2a);color:#fff;border-radius:12px}
.qd-clt-dark_card{display:flex;align-items:center;gap:18px;padding:18px}
.qd-clt-dark_card > .qd-c-img{flex:0 0 38%;order:-1;min-width:0}
.qd-clt-dark_card > .qd-c-txt{flex:1 1 auto;min-width:0}
.qd-clt-dark_card_right{display:flex;align-items:center;gap:18px;padding:18px}
.qd-clt-dark_card_right > .qd-c-img{flex:0 0 38%;order:1;min-width:0}
.qd-clt-dark_card_right > .qd-c-txt{flex:1 1 auto;order:0;min-width:0}
.qd-clt-dark_card > .qd-c-img img,
.qd-clt-dark_card_right > .qd-c-img img{width:100%;border-radius:8px;display:block}
.qd-clt-dark_card > .qd-c-txt h3,
.qd-clt-dark_card > .qd-c-txt h4,
.qd-clt-dark_card_right > .qd-c-txt h3,
.qd-clt-dark_card_right > .qd-c-txt h4{color:#fff}
.qd-clt-dark_card > .qd-c-txt p,
.qd-clt-dark_card > .qd-c-txt span,
.qd-clt-dark_card_right > .qd-c-txt p,
.qd-clt-dark_card_right > .qd-c-txt span{color:rgba(255,255,255,.86)}

/* ---------------- 四、既有详情页卡片适配 ---------------- */
/* 产品详情页：图区默认是「白底卡片」，切到背景 / 深色底布局时去掉白底，
   否则会出现「白块压在深色背景上」的割裂感 */
.qd-lt-image_bg > .product-detail-gallery,
.qd-lt-dark_card > .product-detail-gallery,
.qd-lt-dark_card_right > .product-detail-gallery{background:transparent;border-color:transparent;box-shadow:none;padding:0}
.qd-lt-image_bg > .product-detail-gallery .product-detail-img{min-height:0;height:100%;background:transparent}
.qd-lt-dark_card > .product-detail-gallery .product-detail-img,
.qd-lt-dark_card_right > .product-detail-gallery .product-detail-img{background:rgba(255,255,255,.06)}
.qd-lt-image_bg > .product-detail-gallery .product-detail-img img,
.qd-lt-dark_card > .product-detail-gallery .product-detail-img img,
.qd-lt-dark_card_right > .product-detail-gallery .product-detail-img img{max-height:none}
.qd-lt-image_bg > .qd-lt-txt .product-detail-category,
.qd-lt-dark_card > .qd-lt-txt .product-detail-category,
.qd-lt-dark_card_right > .qd-lt-txt .product-detail-category{background:rgba(255,255,255,.16);color:#fff}
.qd-lt-image_bg > .qd-lt-txt .product-detail-features li i,
.qd-lt-dark_card > .qd-lt-txt .product-detail-features li i,
.qd-lt-dark_card_right > .qd-lt-txt .product-detail-features li i{color:#7fd8c8}

/* ---------------- 三、响应式：窄屏一律纵向堆叠 ---------------- */
@media (max-width:768px){
  .qd-lt,
  .qd-lt-image_circle,
  .qd-lt-dark_card,
  .qd-lt-dark_card_right{flex-direction:column;align-items:stretch;gap:24px;padding-left:0;padding-right:0}
  .qd-lt > .qd-lt-img,
  .qd-lt > .qd-lt-txt{flex:1 1 auto;order:0!important;width:100%}
  .qd-lt-image_circle > .qd-lt-img{flex:0 0 auto;text-align:center}
  .qd-lt-image_bg{padding:32px 20px}

  .qd-clt-image_left,
  .qd-clt-image_right,
  .qd-clt-image_circle,
  .qd-clt-dark_card,
  .qd-clt-dark_card_right{flex-direction:column;align-items:stretch}
  .qd-clt-image_left > .qd-c-img,
  .qd-clt-image_right > .qd-c-img,
  .qd-clt-image_circle > .qd-c-img,
  .qd-clt-dark_card > .qd-c-img,
  .qd-clt-dark_card_right > .qd-c-img{flex:0 0 auto;order:0!important;width:100%}
  .qd-clt-dark_card,
  .qd-clt-dark_card_right{padding:16px}
}

/* ============================================================
   首页「产品与服务」板块（qd-home-services）
   数据来源：导航「产品与服务」下拉子项，自动同步。
   ============================================================ */
.qd-home-services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.qd-home-svc{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:32px 24px 28px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  color:inherit;
  text-decoration:none;
  transition:var(--transition);
  overflow:hidden;
}
.qd-home-svc::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0);transition:var(--transition);transform-origin:left;
}
.qd-home-svc:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
  border-color:var(--primary-light);
  color:inherit;
}
.qd-home-svc:hover::before{transform:scaleX(1)}
.qd-home-svc-num{
  position:absolute;top:14px;right:18px;
  font-size:2.2rem;font-weight:800;line-height:1;
  color:rgba(12,95,168,.08);letter-spacing:-1px;
  transition:var(--transition);
}
.qd-home-svc:hover .qd-home-svc-num{color:rgba(12,95,168,.18)}
.qd-home-svc-icon{
  width:64px;height:64px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(12,95,168,.1),rgba(0,180,216,.1));
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;color:var(--primary);margin-bottom:20px;
}
.qd-home-svc h3{
  font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:10px;
}
.qd-home-svc-desc{
  font-size:.88rem;color:var(--text-light);line-height:1.7;margin-bottom:18px;flex:1;
}
.qd-home-svc-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:500;color:var(--primary);
  transition:var(--transition);
}
.qd-home-svc:hover .qd-home-svc-more{color:var(--accent)}
.qd-home-svc:hover .qd-home-svc-more i{transform:translateX(4px)}
.qd-home-svc-more i{transition:var(--transition)}
/* 产品中心高亮 */
.qd-home-svc[data-key="service_products"]::before,
.qd-home-svc[data-key="service_products"]:hover::before{transform:scaleX(1)}
.qd-home-svc[data-key="service_products"]{border-top:4px solid var(--accent)}
.qd-home-svc[data-key="service_products"] .qd-home-svc-icon{
  background:linear-gradient(135deg,rgba(0,180,216,.15),rgba(12,95,168,.15));
}
@media(max-width:1100px){
  .qd-home-services{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .qd-home-services{grid-template-columns:repeat(2,1fr);gap:18px}
  .qd-home-svc{padding:26px 18px 22px}
}
@media(max-width:480px){
  .qd-home-services{grid-template-columns:1fr}
}