/* ==========================================================================
   1. Typography & Global Scaling (基础字体与跨端缩放)
   ========================================================================== */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ==========================================================================
   2. Layout & Footer Fixes (布局与页脚避让)
   ========================================================================== */
html {
    position: relative;
    min-height: 100%;
}

/* ⚠️ 优化注意：因为你的首页有一个常驻底部的固定音频播放器（#global-mini-player），
   如果 body 只留 60px 的 margin-bottom，滚动到最底部时，内容会被播放器挡住。
   建议将这个高度提高，留出足够、优雅的空白距离。 */
body {
    margin-bottom: 110px; /* 从 60px 提升到 110px，完美避开底部悬浮播放器 */
}

/* ==========================================================================
   3. Focus States & Accessibility (聚焦状态与无障碍访问)
   ========================================================================== */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ==========================================================================
   4. Text Clamping Utilities (文本截断与方框高度对齐神器)
   ========================================================================== */

/* 📸 适用于管理后台列表或某些需要展示 2 行文字的卡片 */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 🛠️ 兼容性优化：加上 word-break 确保长英文单词或连续符号（比如长直链）能正常换行，
       否则纯英文在某些浏览器下不会换行，导致 line-clamp 直接失效。 */
    word-break: break-word;
    min-height: 2.8rem;
    line-height: 1.4rem;
}

/* 🎵 适用于你刚刚升级后的首页（音频行与摄影行完美水平拉齐） */
.text-clamp-home {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    min-height: 1.35rem;
    line-height: 1.35rem;
}