/* =============================================================================
 * 用户主页插件样式（v1.2.0 起改为「增量」定位）
 *
 * 卡片 / 阴影 / 圆角 / 页头全部交给核心 `.mn-section` 体系，本文件**只补**：
 *   ① 内容区内边距 `.up-wrap`（`.mn-section` 自身没有 padding，见规范 §6.4-2 / §11.23）
 *   ② 资料区（头像 + 名字 + 徽章）的排布
 *   ③ 统计格（自动换行，窄屏不溢出）
 *   ④ 内容列表 / 用户卡片网格
 *
 * ⚠️⚠️ 三条硬约束：
 *   ① **只用既有 `--mn-*` 变量**（`--text-light` 这类不存在的名字会静默走 fallback，
 *      主题切换时颜色不跟随 —— v1.2.0 已全部替换为 `--mn-text-muted`）；
 *   ② 本文件由 `hook/layout_head_end.php` 注入。⚠️ 实测该钩子触发点（`layouts/main.php:49`）
 *      **早于 `modern.css`（`:60`）** —— 虽然比在视图里直接写 `<link>` 更靠后、也能统一带 `?v=`，
 *      但**仍早于核心样式表** → 若要覆盖 `.mn-btn` / `.mn-input` 这类核心类，**必须提权**
 *      （写 `a.up-xxx` / `button.up-xxx`）。当前本文件只定义 `.up-*` 自有类，故未撞名；
 *   ③ 类名一律 `up-` 前缀，避免与核心 / 其它插件撞名。
 *
 * @file plugins/user_profile/assets/style.css
 * @package Plugin\UserProfile
 * @version 1.3.0
 * ========================================================================== */

/* ===== 内容区内边距（页头留在卡片顶边，它自带 12px 20px） ===== */
.up-wrap {
    padding: 16px 20px 24px;
}

/* 页头副标题（@用户名） */
.up-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--mn-text-muted);
}

.up-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.up-follow-form {
    margin: 0;
}

/* ===== 资料区 ===== */
.up-profile {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.up-avatar {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mn-primary-subtle);
}

.up-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.up-avatar-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 600;
    color: var(--mn-text-muted);
    background: var(--mn-primary-subtle);
}

.up-info {
    flex: 1;
    min-width: 0;
}

.up-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.up-username {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mn-text);
    word-break: break-word;
}

/* 管理员徽章：用主题变量，不硬编码黄色（暗色主题下硬编码会刺眼） */
.up-badge-admin {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--mn-primary);
    background: var(--mn-primary-subtle);
    border: 1px solid var(--mn-border);
}

.up-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--mn-text-muted);
}

.up-signature {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mn-text-secondary);
    word-break: break-word;
}

/* ===== 统计格 =====
 * ★ 用 grid + auto-fit 而不是 flex + space-around：
 *   原实现 7 项一行、子项 `min-width:60px` 且**没有 flex-wrap**
 *   → 375px 手机需要 436px，直接横向溢出。grid 会自动换行。
 */
.up-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 4px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mn-border);
}

.up-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

a.up-stat:hover {
    background: var(--mn-primary-subtle);
}

.up-stat-v {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mn-primary);
}

.up-stat-k {
    font-size: 12px;
    color: var(--mn-text-muted);
    white-space: nowrap;
}

/* ===== 内容列表 ===== */
.up-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.up-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mn-border);
}

.up-list-item:first-child {
    padding-top: 0;
}

.up-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.up-list-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mn-primary);
    text-decoration: none;
    word-break: break-word;
}

.up-list-title:hover {
    text-decoration: underline;
}

.up-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--mn-text-muted);
}

.up-list-cat {
    display: inline-block;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--mn-text-secondary);
    background: var(--mn-primary-subtle);
}

/* ===== 粉丝 / 关注：用户卡片网格 ===== */
.up-ugrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.up-ucard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
}

.up-ucard:hover {
    border-color: var(--mn-primary);
    background: var(--mn-primary-subtle);
}

.up-uavatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mn-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-uavatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.up-uavatar .up-avatar-ph {
    font-size: 20px;
}

.up-uname {
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.up-ulevel {
    line-height: 1;
}

/* ===== 响应式：窄屏「收窄」而不是「归零」（规范把 padding-left:0 列为反模式） ===== */
@media (max-width: 860px) {
    .up-wrap {
        padding: 14px 14px 18px;
    }
}

@media (max-width: 640px) {
    .up-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .up-avatar {
        width: 64px;
        height: 64px;
    }

    .up-avatar-ph {
        font-size: 22px;
    }

    .up-name-row {
        justify-content: center;
    }

    .up-username {
        font-size: 18px;
    }

    .up-stats {
        grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    }

    .up-stat-v {
        font-size: 15px;
    }

    .up-ugrid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}