/* ==========================================================
   DR Home 客户支持卡片（qing-support / qsup）
   对应静态站 .support 板块：四列描边卡片网格
   卡片：图标 + 标题 + 描述 + 箭头链接；悬停整卡变米灰底、箭头右移
   ========================================================== */
.qsup-root{
  /* ---------- 版面 ---------- */
  --qsup-bg:#f7f4ef;
  --qsup-maxw:1200px;
  --qsup-gutter:24px;
  --qsup-body-pad-t:56px;
  --qsup-body-pad-b:64px;
  /* ---------- 网格 / 卡片 ---------- */
  /* 列数按设备分成三个变量：电脑 / 平板(≤1024) / 手机(≤767)。
     这样各断点各读各自的变量，Elementor 输出的电脑值不会「漏」到手机端，
     也就不需要再用 !important 硬压（旧写法用 !important 反而让分设备列数失效）。 */
  --qsup-cols:4;
  --qsup-cols-t:2;
  --qsup-cols-m:1;
  --qsup-line:rgba(0,0,0,.10);
  --qsup-card-pad:34px 32px 30px;
  --qsup-card-hbg:#e7e1d8;
  --qsup-ico-color:#c4873a;
  --qsup-ico-size:32px;
  --qsup-ico-mb:16px;
  --qsup-ctitle-color:#1c1a18;
  --qsup-ctitle-mb:12px;
  --qsup-text-color:#6f6a64;
  --qsup-text-mb:20px;
  --qsup-link-color:#c8a06a;
  --qsup-link-gap:8px;
  --qsup-link-gap-h:12px;
  --qsup-arrow-size:12px;
  /* ---------- 字体 ---------- */
  --qsup-serif:'Cormorant Garamond',Georgia,serif;
  --qsup-sans:'DM Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --qsup-ease:cubic-bezier(.22,.61,.36,1);

  background:var(--qsup-bg);
}

.qsup-container{
  width:100%;
  max-width:calc(var(--qsup-maxw) + var(--qsup-gutter) * 2);
  margin:0 auto;
  padding:0 var(--qsup-gutter);
}

/* ---------- 卡片区 ---------- */
.qsup-body{padding:var(--qsup-body-pad-t) 0 var(--qsup-body-pad-b);}

/* ---------- 描边网格 ----------
   .qsup-frame 负责外框；.qsup-grid 用 -1px 负边距把「首行的上描边 / 首列的左描边」
   顶到框外，再由 overflow:hidden 裁掉。这样每张卡片只需统一 border-top + border-left，
   不必再用 nth-child 猜列数——列数换成 1/2/3/4、末行不满、卡片数量为奇数时都不会缺线或重线。
   （旧写法在手机端 1 列 / 2 列切换时容易出现描边缺失、双线。） */
.qsup-frame{
  border:1px solid var(--qsup-line);
  overflow:hidden;
}

.qsup-grid{
  display:grid;
  grid-template-columns:repeat(var(--qsup-cols),minmax(0,1fr));
  margin:-1px 0 0 -1px;
}

.qsup-card{
  min-width:0;
  padding:var(--qsup-card-pad);
  border-top:1px solid var(--qsup-line);
  border-left:1px solid var(--qsup-line);
  background:transparent;
  transition:background .3s var(--qsup-ease);
}

/* 悬停仅在真有指针的设备生效，避免手机点完卡片底色「粘住」不还原 */
@media (hover:hover) and (pointer:fine){
  .qsup-card:hover{background:var(--qsup-card-hbg);}
  .qsup-card:hover .qsup-card__link{gap:var(--qsup-link-gap-h);}
  .qsup-card:hover .qsup-card__arrow{transform:translateX(3px);}
}
@media (hover:none){
  .qsup-card:active{background:var(--qsup-card-hbg);}
}

.qsup-card__ico{
  display:block;
  width:var(--qsup-ico-size);
  height:var(--qsup-ico-size);
  margin-bottom:var(--qsup-ico-mb);
  color:var(--qsup-ico-color);
}
.qsup-card__ico svg{display:block;width:var(--qsup-ico-size);height:var(--qsup-ico-size);}
.qsup-card__ico i{font-size:var(--qsup-ico-size);line-height:1;color:inherit;}

.qsup-card__title{
  margin:0 0 var(--qsup-ctitle-mb);
  font-family:var(--qsup-serif);
  font-size:21px;
  font-weight:500;
  line-height:1.2;
  color:var(--qsup-ctitle-color);
}

.qsup-card__text{
  margin:0 0 var(--qsup-text-mb);
  font-family:var(--qsup-sans);
  font-size:13.5px;
  line-height:1.7;
  color:var(--qsup-text-color);
}

.qsup-card__link{
  display:inline-flex;
  align-items:center;
  gap:var(--qsup-link-gap);
  font-family:var(--qsup-sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-decoration:none;
  color:var(--qsup-link-color);
  -webkit-tap-highlight-color:transparent;
  transition:gap .25s var(--qsup-ease);
}
.qsup-card__arrow{
  flex:0 0 auto;
  width:var(--qsup-arrow-size);
  height:var(--qsup-arrow-size);
  transition:transform .25s var(--qsup-ease);
}

/* 去掉小部件默认内边距干扰 */
.elementor-widget-qing-support .elementor-widget-container{padding:0;}

/* ---------- 响应式 ----------
   断点对齐 Elementor 默认设备宽度（平板 ≤1024、手机 ≤767）。
   注意：Elementor 为小部件生成的 CSS 选择器优先级高于本文件，
   所以这里的变量只是「无 Elementor / 变量未输出」时的兜底，
   真正生效的手机端数值来自小部件里 tablet_default / mobile_default，两边保持一致。 */
@media (max-width:1024px){
  .qsup-grid{grid-template-columns:repeat(var(--qsup-cols-t),minmax(0,1fr));}
  .qsup-root{
    --qsup-body-pad-t:44px;
    --qsup-body-pad-b:52px;
    --qsup-card-pad:28px 26px 26px;
  }
}

@media (max-width:767px){
  .qsup-grid{grid-template-columns:repeat(var(--qsup-cols-m),minmax(0,1fr));}
  .qsup-root{
    --qsup-gutter:16px;
    --qsup-body-pad-t:36px;
    --qsup-body-pad-b:44px;
    --qsup-card-pad:22px 20px 24px;
    --qsup-ico-size:24px;
    --qsup-ico-mb:12px;
    --qsup-ctitle-mb:8px;
    --qsup-text-mb:14px;
  }
  .qsup-card__title{font-size:19px;}
  .qsup-card__text{font-size:13px;line-height:1.65;}
  /* 链接加大触摸区域，卡片下半部分不再显得空/挤 */
  .qsup-card__link{min-height:32px;font-size:10px;}

  /* 手机端图标与标题同行：一列布局下更紧凑、阅读节奏更自然 */
  .qsup-root--mico .qsup-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;
    align-items:start;
  }
  .qsup-root--mico .qsup-card--noico{display:block;}
  .qsup-root--mico .qsup-card:not(.qsup-card--noico) .qsup-card__ico{
    grid-column:1;grid-row:1;margin-bottom:0;
  }
  .qsup-root--mico .qsup-card:not(.qsup-card--noico) .qsup-card__title{
    grid-column:2;grid-row:1;margin-bottom:0;
  }
  .qsup-root--mico .qsup-card:not(.qsup-card--noico) .qsup-card__text{
    grid-column:2;grid-row:2;margin:10px 0 0;
  }
  .qsup-root--mico .qsup-card:not(.qsup-card--noico) .qsup-card__link{
    grid-column:2;grid-row:3;margin-top:14px;
  }
}

@media (max-width:400px){
  .qsup-root{--qsup-card-pad:20px 16px 22px;}
}

/* ---------- 滚动逐显 ---------- */
.qsup-root--reveal [data-reveal]{opacity:0;transform:translateY(22px);will-change:opacity,transform}
.qsup-root--reveal [data-reveal].is-visible{opacity:1;transform:none;transition:opacity .7s var(--qsup-ease),transform .7s var(--qsup-ease);transition-delay:calc(var(--r-i,0) * 90ms);will-change:auto}
@media (prefers-reduced-motion:reduce){
  .qsup-root--reveal [data-reveal]{opacity:1;transform:none;will-change:auto}
  .qsup-root--reveal [data-reveal].is-visible{transition:none;transition-delay:0s}
}
.elementor-editor-active .qsup-root--reveal [data-reveal]{opacity:1;transform:none}