/* ===== 工具集首頁 /tools/ — DRONESHOT.TW =====
 * 2026-10-24 由舊 Bootstrap4＋jQuery 模板遷移到 tokens 設計系統（站長定案：工具 App 風格頁首）。
 * 載入順序：tokens.css → 共用 style.css（.svc-btn、body.bg-tools 背景、h/p/a 基本樣式）→ 本檔。
 * 顏色／間距／圓角一律取自 tokens.css，本檔不定義新 token。 */

/* Bootstrap 拿掉後沒有全域 border-box：width:100% 加 padding 會撐出橫向捲動、卡片互相重疊 */
*, *::before, *::after { box-sizing: border-box; }

/* ---- 背景：獨立固定圖層 ----
 * 共用 style.css 的 body 用 background-attachment:fixed；再疊 10 張 backdrop-filter 卡片，
 * Chrome 捲動後整頁畫不出來（2026-10-24 實測）。背景改由 position:fixed 偽元素承擔（自成合成層），
 * 卡片才能開毛玻璃。iOS 本來就不支援 attachment:fixed，這樣反而兩邊一致。 */
body.bg-tools { background-image: none; }
body.bg-tools::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('../../assets/img/bg-tools.webp') center / cover no-repeat;
}

/* ---- header（同工具頁的 app-header） ---- */
.app-header {
    display: flex;
    align-items: center;            /* 元素間距由 nav.css 的 .app-header { gap } 統一 */
    height: 54px;
    padding: 0 var(--space-2);
    background: var(--bar-glass-bg);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.app-header .header-logo img { height: 22px; opacity: 0.85; }
.app-header h1 { font-size: 1.05em; letter-spacing: 0.5px; margin: 0; }

/* ---- 主內容 ---- */
.tools-wrap {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-2) var(--space-5);
}
.tools-intro {
    color: var(--text-secondary);
    font-size: 0.95em;
    margin-bottom: var(--space-3);
}

/* ---- 工具卡片 ---- */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.tool-card {
    display: block;
    height: 100%;
    padding: var(--space-3);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--blur);      /* 前提是上面的固定背景圖層；別把背景改回 body attachment:fixed */
    -webkit-backdrop-filter: var(--blur);
    transition: border-color 0.2s, transform 0.2s;
}
.tool-card:hover,
.tool-card:focus-visible { border-color: var(--primary); transform: translateY(-2px); }
.tool-card .bx { font-size: 32px; color: var(--accent); }
.tool-card h2 { font-size: 1.15em; margin: var(--space-1) 0; }
.tool-card p { font-size: 0.9em; color: var(--text-secondary); margin: 0; }

/* ---- 資料更新狀態 ---- */
.data-status-panel {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--hairline);
}
.data-status-panel h2 {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
}
.status-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-sm);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    background: var(--hairline);
}
/* 資料新鮮度燈號（狀態色，不是 UI 強調） */
.status-dot.fresh { background: var(--status-ok); }
.status-dot.today { background: var(--status-warn); }
.status-dot.old   { background: var(--text-decorative); }
.status-dot.error { background: var(--status-danger); }
.status-label { font-size: 0.75rem; font-weight: 700; color: var(--accent); line-height: 1.2; margin-bottom: 3px; }
.status-time { font-size: 0.82rem; font-weight: 500; color: var(--text-white-80); }
.status-time.loading { color: var(--text-secondary); font-weight: 400; }
.changelog-link { text-align: center; margin-top: var(--space-3); }

/* ---- 頁尾：主網站連結＋聯絡（取代舊版三欄 Bootstrap 頁尾） ---- */
.site-footer {
    border-top: 1px solid var(--hairline);
    background: var(--bar-glass-bg);
    padding: var(--space-3) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    font-size: 0.85em;
}
.site-footer .inner { max-width: 1080px; margin: 0 auto; display: grid; gap: var(--space-2); }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.site-footer a { color: var(--text-white-80); }
.site-footer a:hover { color: var(--primary); }
.site-footer .contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--text-secondary); }
.site-footer .contact .bx { vertical-align: -2px; }
.site-footer .copyright { color: var(--text-secondary); font-size: 0.9em; margin: 0; }

@media (max-width: 991px) {
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .tools-wrap { padding-top: var(--space-3); }
    .status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .tool-grid { grid-template-columns: 1fr; }
    .tool-card { padding: var(--space-2); display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-2); align-items: center; }
    .tool-card .bx { grid-row: span 2; font-size: 28px; }
    .tool-card h2 { margin: 0 0 2px; }
}
@media (max-width: 400px) {
    .status-grid { grid-template-columns: 1fr; }
}