/*
 * FlintHub — 链接预览插件 · 卡片样式
 *
 * ⚠️⚠️ 三条必须遵守的约束：
 *
 *   ① **只用既有的 `--mn-*` 变量**，不新增颜色。
 *      本站的「暗黑模式」不是 `data-theme` / `prefers-color-scheme`，而是整套主题 CSS
 *      覆盖 `:root` 上的 `--mn-*`（`assets/css/themes/modern-{night,azure,...}.css`，
 *      由 `main.php` 按 Theme::getCurrent() 输出）→ 只要用变量就自动适配所有主题，
 *      **不要**在这里写任何暗色媒体查询。
 *
 *   ② **本文件早于核心 `modern.css` 加载**（`layout_head_end` 在 main.php:49，
 *      核心样式在 :53 之后）→ 同权重必输。所有选择器都带 `.lp-` 前缀 + 至少两级，
 *      需要压核心类的地方进一步提权（见 §2 的 `.lp-card-thumb.lp-card-thumb`）。
 *
 *   ③ **不能依赖 `data-*`**：核心净化白名单只留 `data-fullurl`，其余 `data-*` 提交后
 *      会被剥掉（`editor.js` SANITIZE_ALLOW_ATTRS / `Content.php` $allowedAttrs）。
 *      所以样式钩子只能用 `class`。
 *
 * @file plugins/link_preview/assets/link_preview.css
 * @package Plugin\LinkPreview
 * @version 1.0.0
 */

/* ====================================================================
 * 1. 卡片主体
 * ==================================================================== */

.lp-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    max-width: 560px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--mn-border);
    border-radius: 10px;
    background: var(--mn-bg-card);
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-card:hover {
    border-color: var(--mn-primary);
    box-shadow: var(--mn-shadow-sm);
}

/* 编辑器里粘贴后立即出现的卡片：给一个淡入，避免「突然跳出一块」 */
.lp-card {
    animation: lp-fade-in .18s ease-out;
}

@keyframes lp-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-card { animation: none; }
}

/* ====================================================================
 * 2. 缩略图
 *
 * ⚠️⚠️ 这一段是全文最脏的地方，改动前必读：
 *
 *   卡片里的 <img> 是**外链图**。服务端净化（Content.php:159 的 $isExternal 分支）
 *   会给它补上 `data-fullurl`，随后 `groupPostImages()` 就把它当「正文图」处理 →
 *   给最近的 div/p 祖先（也就是 .lp-card-thumb）加上 `post-img-grid post-img-grid--single`，
 *   并把 img 包进 `<span class="post-img-cell">`。
 *
 *   后果：.lp-card-thumb 变成 `display:grid` + `max-width:480px` + `margin:12px 0`，
 *   img 变成 `width:auto;height:auto;object-fit:contain` —— 卡片直接散架。
 *
 *   所以这里必须**提权压掉核心类**：
 *     `.lp-card .lp-card-thumb.lp-card-thumb`            → (0,3,0) 压 `.post-img-grid` (0,1,0)
 *     `.lp-card .lp-card-thumb.lp-card-thumb ... img`    → (0,4,1) 压
 *                                                          `.post-img-grid--single .post-img-cell img` (0,3,1)
 *   两个都**不用 !important**：核心那两条没有 !important，提权即可，保留可维护性。
 * ==================================================================== */

.lp-card .lp-card-thumb,
.lp-card .lp-card-thumb.lp-card-thumb {
    display: block;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--mn-bg-row-hover);
}

.lp-card .lp-card-thumb.lp-card-thumb .post-img-cell {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    /*
     * ★ 刻意保留核心的 `cursor: zoom-in`（这里显式写出来，而不是让它继承）：
     *   核心净化会给外链图补 `data-fullurl`，灯箱脚本据此把卡片图也纳入了「可点开看原图」序列。
     *   既然点了真会弹灯箱，光标就必须诚实地说「能点」—— 写成 default 会让人以为点不动。
     */
    cursor: zoom-in;
}

.lp-card .lp-card-thumb.lp-card-thumb img,
.lp-card .lp-card-thumb.lp-card-thumb .post-img-cell img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 6px;
}

/* ====================================================================
 * 3. 文字区
 * ==================================================================== */

.lp-card .lp-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;              /* ★ 没有它，长标题会把 flex 撑破、右侧溢出 */
    flex: 1 1 auto;
}

.lp-card .lp-card-title {
    /* 最多两行，超出省略（长标题是卡片最常见的破版来源） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mn-text);
    text-decoration: none;
}

.lp-card:hover .lp-card-title {
    color: var(--mn-text-link);
}

.lp-card .lp-card-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--mn-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.lp-card .lp-card-site {
    font-size: 11px;
    line-height: 1.4;
    color: var(--mn-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====================================================================
 * 4. 窄屏
 * ==================================================================== */

@media (max-width: 560px) {
    .lp-card {
        gap: 10px;
        padding: 10px;
    }
    .lp-card .lp-card-thumb,
    .lp-card .lp-card-thumb.lp-card-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }
    .lp-card .lp-card-title {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
    .lp-card .lp-card-desc {
        display: none;          /* 手机上一行摘要挤不下，直接不显示（留标题 + 域名） */
    }
}

/* ====================================================================
 * 5. 后台管理页
 *
 * ⚠️ 同样早于核心样式加载 → 凡是要覆盖 `.mn-input` / `.mn-btn` / `.admin-table`
 *    的地方都写成**双类**选择器（`.mn-input.lp-form-input` = 0,2,0 > 0,1,0）。
 * ==================================================================== */

.lp-admin-note {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mn-text-secondary);
}

.lp-form-row {
    margin-bottom: 18px;
}

.lp-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
}

/* 复选框那种 label 不需要额外下边距 */
.lp-form-label input[type="checkbox"] {
    margin-right: 6px;
    vertical-align: -1px;
}

.mn-input.lp-form-input {
    width: 100%;
    max-width: 420px;
}

.mn-input.lp-form-input.lp-form-num {
    max-width: 140px;
}

.lp-form-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--mn-text-muted);
}

.lp-form-actions {
    margin: 4px 0 20px;
}

.lp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.lp-stat {
    flex: 1 1 120px;
    padding: 12px 14px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-row-hover);
}

.lp-stat-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mn-text);
}

.lp-stat-label {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mn-text-muted);
}

.lp-subhead {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
}

.lp-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.lp-form-hint.lp-form-hint-inline {
    margin: 0;
}

.mn-btn.lp-btn-danger {
    background: var(--mn-error);
    border-color: var(--mn-error);
    color: var(--mn-text-inverse);
}

.mn-btn.lp-btn-danger:hover {
    filter: brightness(0.94);
}