/* 首页 · 社区追踪区 (home-social-follow)
   从 home/index.blade.php 内联 style + onmouseover/onmouseout 抽离（结构/样式/行为分离）。
   数值与原版逐一对应、外观一致；hover 由 14 个 JS handler 改为纯 CSS :hover。 */

.social-follow{ padding:36px 20px; background:linear-gradient(135deg,#f8f9fb 0%,#eef2f7 100%); text-align:center; }
.social-follow__inner{ max-width:1240px; margin:0 auto; }
.social-follow__title{ font-size:clamp(24px,4vw,34px); color:#1a2238; margin:0 0 8px; font-weight:700; }
.social-follow__subtitle{ color:#5a6478; font-size:16px; margin:0 0 36px; }
/* 桌机：5 张一排(调整自原本的 auto-fit 4+1);平板/手机自动降栏 */
.social-follow__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px; max-width:1240px; margin:0 auto; }
/* 7 张等宽（--home-max 1120px 下每张约 146px）：桌机缩左右内距与帐号字级，@luckyconveyances 才放得下 */
@media(min-width:901px){ .social-follow__grid .social-card{ padding-left:8px; padding-right:8px; } .social-follow__grid .social-card__handle{ font-size:12px; } }
.social-card__handle{ overflow-wrap:anywhere; }
@media(max-width:900px){ .social-follow__grid{ grid-template-columns:repeat(3,1fr); } .social-follow__grid .social-card--threads{ grid-column:1 / -1; } }
@media(max-width:560px){ .social-follow__grid{ grid-template-columns:repeat(2,1fr); } }

/* 卡片：预设 = TikTok/FB/YT/IG 的中性白卡 */
.social-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 16px; background:#fff; border-radius:16px; color:#1a2238;
    box-shadow:0 4px 14px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.05);
    transition:.25s;
}
.social-card:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,0.12); }
/* LINE 卡：绿框 + 绿影 */
.social-card--line{ box-shadow:0 4px 16px rgba(6,199,85,0.18); border:1.5px solid rgba(6,199,85,0.4); }
.social-card--line:hover{ box-shadow:0 14px 30px rgba(6,199,85,0.30); }

.social-card__icon{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.social-card__icon i{ font-size:26px; color:#fff; }
.social-card--line .social-card__icon i{ font-size:30px; }
.social-card__icon--line{ background:#06C755; box-shadow:0 4px 12px rgba(6,199,85,0.35); }
.social-card__icon--tiktok{ background:#000; }
/* Threads（2026-10-23）：首页 FA 6.4.0 没有 fa-threads，只对这颗借用 6.5.0 brands 字体 */
@font-face{ font-family:"FA65Brands"; font-style:normal; font-weight:400; font-display:block; src:url("/build/css/font-awesome-6.5.0/webfonts/fa-brands-400.woff2") format("woff2"); }
.social-card__icon--threads{ background:#000; }
.social-card__icon--threads .fa-threads{ font-family:"FA65Brands"; font-weight:400; }
.social-card__icon--threads .fa-threads:before{ content:"\e618"; }
.social-card__icon--fb{ background:#1877f2; }
.social-card--messenger{ box-shadow:0 4px 16px rgba(8,102,255,0.16); border:1.5px solid rgba(8,102,255,0.35); }
.social-card--messenger:hover{ box-shadow:0 14px 30px rgba(8,102,255,0.28); }
.social-card__icon--messenger{ background:#0866FF; box-shadow:0 4px 12px rgba(8,102,255,0.32); }
.social-card--messenger .social-card__icon i{ font-size:28px; }
.social-card__stat--messenger{ color:#0656d6; font-weight:700; }
.social-card__icon--yt{ background:#ff0000; }
.social-card__icon--ig{ background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }

.social-card__name{ font-weight:600; font-size:15px; }
.social-card__handle{ color:#68758f; font-size:13px; margin-top:2px; }
.social-card__stat{ color:#1a2238; font-size:13px; margin-top:6px; font-weight:600; }
.social-card__stat--line{ color:#04873a; font-weight:700; }

/* 视频教学钮 */
.social-follow__videos{ margin-top:30px; }
.social-video-btn{
    display:inline-flex; align-items:center; gap:10px; background:#fe2c55; color:#111827;
    font-weight:700; font-size:16px; padding:14px 34px; border-radius:50px;
    box-shadow:0 8px 22px rgba(254,44,85,.32); transition:.25s;
}
.social-video-btn:hover{ transform:translateY(-3px); }
.social-video-btn i{ font-size:20px; }

/* 链接卡片：所有状态都不要底线 + 钉住文字色
   （压过站台 adoptedStyleSheets / 插件 insertCSS 注入、document.styleSheets 看不到的 a:hover 底线）*/
.social-card, .social-card:link, .social-card:visited, .social-card:hover, .social-card:focus, .social-card:active,
.social-video-btn, .social-video-btn:link, .social-video-btn:visited, .social-video-btn:hover, .social-video-btn:focus, .social-video-btn:active{
    text-decoration: none !important;
}
.social-card:hover, .social-card:focus{ color:#1a2238; }
.social-video-btn:hover, .social-video-btn:focus{ color:#111827; }

/* a11y：键盘焦点环 + 尊重「减少动态」偏好（对一般用户无感）*/
.social-card:focus-visible, .social-video-btn:focus-visible{ outline:3px solid #1877f2; outline-offset:3px; }
@media(prefers-reduced-motion:reduce){
    .social-card, .social-video-btn{ transition:none; }
    .social-card:hover, .social-video-btn:hover{ transform:none; }
}

/* ── LINE 蓝盾认证徽章（2026-08-15）────────────────────────────────────
   好运器集运官方帐号（专属 ID @0523tw）已通过 LINE 认证审核，说明页 /line-official-account。
   徽章图标走 inline SVG data URI，不依赖 FontAwesome（少一个外部字体相依）。
   🔴 这张卡片的实际渲染者是 public/home-app/assets/app.js，改样式记得 bump index.blade.php 的 ?v=。 */
.social-card__verified{
    display:inline-flex; align-items:center; gap:5px;
    margin-top:6px; padding:3px 10px;
    background:rgba(30,136,229,.10);
    border:1px solid rgba(30,136,229,.35);
    border-radius:999px;
    color:#1565c0; font-size:11.5px; font-weight:700; line-height:1.5;
}
.social-card__verified::before{
    content:""; width:13px; height:13px; flex:0 0 13px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 20 5.4v6.1c0 4.9-3.4 9.1-8 10.3-4.6-1.2-8-5.4-8-10.3V5.4L12 2.2Z' fill='%231E88E5'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 浮动按钮碰到社区卡时隐藏（首页 index.blade.php 的小段程序切换 class） */
.fab-over-social{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }