@charset "UTF-8";
/**
* FlintHub — 首页精选区块插件 样式
*
* 内容分三段：
* A. 前台精选区块（.hs-*）：左轮播 + 右 Tab 帖子列表，纯 CSS radio tab（零 JS 切换）
* B. 前台上墙页（.hs-wall-*）
* C. 后台设置页（.hs-adm-*）：仅补充核心 admin.css 未覆盖的局部
*
* ⚠️ 颜色**只用既有 `--mn-*`（前台）与 `--c-*`（后台）变量**：
* `--mn-danger` 虽存在但语义是错误色，本插件不需要；`--mn-spectrum-*` 从未定义。
* ⚠️ 本文件在 `layout_head_end` 注入 → **加载早于核心 modern.css / admin.css**
* → 与核心**同特异性**的冲突一律由核心后胜 ⇒ 覆盖核心属性必须**提高特异性**
* （例：`.mn-section.hs-section` 而非 `.hs-section`），不要靠 `!important` 打补丁。
* ⚠️ 轮播图上的标题是**图片上的浮层**，与主题无关 → 固定白字 + 深色渐变（不取 --mn-*）。
* ⚠️ 改动本文件后 URL 上的 `?v=filemtime` 会自动变化 → 浏览器缓存失效，无需手动 bump。
*
* @file plugins/home_spotlight/assets/style.css
* @package Plugin\HomeSpotlight
* @version 1.0.0
*/
/* ==========================================================================
A. 前台精选区块
========================================================================== */
/* 外层：复用核心 .mn-section 的卡片底（背景/边框/圆角/阴影），这里只改成两栏 */
.mn-section.hs-section {
display: flex;
align-items: flex-start;
}
/* ---------- A.1 左：轮播 ---------- */
.hs-left {
flex: 0 0 300px;
max-width: 300px;
padding: 12px 0 12px 12px;
}
.hs-rotator {
position: relative;
width: 100%;
/* 3:2（与参考图一致）；老浏览器不支持 aspect-ratio 时由 min-height 兜底 */
aspect-ratio: 3 / 2;
min-height: 180px;
/* ★ 1px 细边框（主题边框色 --mn-border）：白底图在白色卡片上不再"糊"成一片，
图片边界清晰。用主题变量而非硬编码色值 → 换配色变体时自动跟随。
配合 overflow:hidden：图片被裁在 border 内侧，边框不会被图盖住。 */
border: 1px solid var(--mn-border);
border-radius: 8px;
overflow: hidden;
background: var(--mn-tag-bg);
}
.hs-track {
position: absolute;
inset: 0;
}
.hs-slide {
position: absolute;
inset: 0;
display: none;
text-decoration: none;
color: inherit;
}
.hs-slide.is-active {
display: block;
}
.hs-slide img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hs-slide-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 20px 10px 8px;
font-size: 13px;
line-height: 1.4;
font-weight: 500;
color: #fff;
background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hs-nav {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
align-items: center;
gap: 2px;
}
.hs-nav-btn {
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 6px;
background: rgba(0, 0, 0, .38);
color: #fff;
font-size: 11px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.hs-nav-btn:hover {
background: rgba(0, 0, 0, .6);
}
.hs-dots {
position: absolute;
left: 10px;
bottom: 12px;
display: flex;
align-items: center;
gap: 5px;
}
.hs-dot {
width: 7px;
height: 7px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
cursor: pointer;
transition: background-color .12s, width .12s;
}
.hs-dot.is-active {
width: 16px;
border-radius: 4px;
background: #fff;
}
/* ---------- A.2 右：Tab + 帖子列表 ---------- */
.hs-right {
flex: 1 1 auto;
min-width: 0;
padding: 10px 12px 12px;
}
/* 视觉隐藏但仍可聚焦：键盘 Tab 聚焦 + 方向键切换 → :checked 联动（不能 display:none） */
.hs-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.hs-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0 0 10px;
border-bottom: 1px solid var(--mn-border-light);
}
.hs-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
line-height: 1.4;
color: var(--mn-text-secondary);
cursor: pointer;
transition: color .12s, background-color .12s;
}
.hs-tab:hover {
color: var(--mn-primary);
background: var(--mn-bg-row-hover);
}
.hs-panes {
padding-top: 6px;
}
.hs-pane {
display: none;
}
/* 纯 CSS 切换：radio 是 .hs-tabs / .hs-panes 的前置兄弟节点
（:nth-of-type 只数 input —— 本面板内**零