/* ============================================================
   二维码组件（公众号 / 小程序 / 个人微信）
   用法：
     <%- include('partials/qr-follow', { variant: 'card' }) %>
     <%- include('partials/qr-personal-wechat', { size: 'sm' }) %>
   ============================================================ */

/* ===== 公众号 + 小程序 并列组件 ===== */
.qr-follow{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.qr-follow__item{display:flex;align-items:center;gap:10px}
.qr-follow__img{
  flex:0 0 auto;width:84px;height:84px;border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid var(--border-light);
}
.qr-follow__img img{width:100%;height:100%;object-fit:cover;display:block}
.qr-follow__cap{font-size:12px;line-height:1.55;color:var(--text-3)}
.qr-follow__cap b{display:block;font-size:13px;font-weight:600;color:var(--text-1)}

/* 变体：页脚（深色底；两张二维码横向并排，二维码在上、文字在下，避免列宽不足折行） */
.qr-follow--footer{
  margin-top:12px;gap:30px;  /* 两码之间留足间距，避免挨太近 */
  flex-wrap:nowrap;          /* 强制横向不折行 */
  align-items:flex-start;    /* 顶部对齐 */
}
.qr-follow--footer .qr-follow__item{
  flex-direction:column;     /* 二维码在上，文字在下 */
  align-items:center;
  text-align:center;
  gap:5px;
  flex:0 0 74px;            /* 每个占 74px，两码 + gap ≈ 162px */
}
.qr-follow--footer .qr-follow__img{width:74px;height:74px;flex:0 0 74px}
.qr-follow--footer .qr-follow__cap{color:#cfe3e6;font-size:11px;line-height:1.35}
.qr-follow--footer .qr-follow__cap b{color:#fff;font-size:11px}
.qr-follow--footer .qr-follow__cap span{font-size:10px;display:block}

/* 页脚「快速导航」列内：二维码居中展示（列宽足够，两码并排不折行） */
.footer-col-qr{
  display:flex;
  justify-content:center;
  padding:16px 0 0;
}
.footer-col-qr .qr-follow--footer{margin-top:0}

/* 变体：侧栏（竖排，尺寸贴合原 .pa-qr-box 的 132px） */
.qr-follow--aside{flex-direction:column;gap:16px}
.qr-follow--aside .qr-follow__item{flex-direction:column;text-align:center;gap:8px}
.qr-follow--aside .qr-follow__img{width:132px;height:132px;border-radius:14px}

/* 变体：频道页 / 内容页（浅底卡片，居中横排） */
.qr-follow--card{
  justify-content:center;gap:28px;padding:18px;
  background:linear-gradient(135deg,#F3FBFC 0%,#EAF6F8 100%);
  border:1px solid #BFE3E8;border-radius:12px;
}
.qr-follow--card .qr-follow__item{flex-direction:column;text-align:center;gap:8px}
.qr-follow--card .qr-follow__img{width:108px;height:108px;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.10)}

/* 频道页 / 内容页：二维码区块的外层间距 */
.qr-section{margin:26px 0}

/* 变体：频道页 / 内容页侧栏（紧凑横排，两张二维码并排） */
.qr-follow--sidebar{justify-content:center;gap:20px}
.qr-follow--sidebar .qr-follow__item{flex-direction:column;text-align:center;gap:5px}
.qr-follow--sidebar .qr-follow__img{width:78px;height:78px}
.qr-follow--sidebar .qr-follow__cap{font-size:11px;line-height:1.4}
.qr-follow--sidebar .qr-follow__cap b{font-size:12px}

/* ===== 个人微信二维码（展示在微信号旁） ===== */
.qr-pw{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto}
.qr-pw img{
  width:100%;height:auto;display:block;border-radius:6px;
  background:#fff;border:1px solid var(--border-light);
}
.qr-pw__cap{font-size:11px;color:var(--text-3);white-space:nowrap}
.qr-pw--sm{width:54px}
.qr-pw--md{width:80px}

/* 在「联系我们」行内靠右显示，与微信号同一行 */
.pa-line--wechat .qr-pw{margin-left:auto}
/* 页脚联系区：与微信号同一行紧凑横排，避免撑高联系列表 */
.footer-touch .qr-pw{flex-direction:row;align-items:center;gap:6px;width:auto;margin-left:8px}
.footer-touch .qr-pw img{width:64px}
/* 页脚深色底：二维码说明文字提亮 */
.footer-touch .qr-pw__cap,.footer-col .qr-pw__cap{color:#cfe3e6}

/* ===== 窄屏适配 ===== */
@media(max-width:480px){
  .qr-follow--card{gap:16px;padding:14px}
  .qr-follow--card .qr-follow__img{width:92px;height:92px}
  .qr-follow--footer{gap:20px}
  .qr-follow--footer .qr-follow__item{flex:0 0 64px}
  .qr-follow--footer .qr-follow__img{width:64px;height:64px;flex:0 0 64px}
  .qr-follow--footer .qr-follow__cap{font-size:10px}
}