/* 首頁 · 社群追蹤區 (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:1040px; 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(5,1fr); gap:18px; max-width:1040px; margin:0 auto; }
@media(max-width:900px){ .social-follow__grid{ grid-template-columns:repeat(3,1fr); } }
@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; }
.social-card__icon--fb{ background:#1877f2; }
.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:#8590a6; 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:#06C755; font-weight:700; }

/* 影片教學鈕 */
.social-follow__videos{ margin-top:30px; }
.social-video-btn{
    display:inline-flex; align-items:center; gap:10px; background:#fe2c55; color:#fff;
    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:#fff; }

/* 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; }
}