/* ==================================================================
 * 金牛论坛 · 广场板块卡片背景图样式
 * bbs.jnqj.net
 * ------------------------------------------------------------------
 * 设计目标：8 个子板块卡片，各自一张《奇迹》角色插图作背景，
 *          但美术风格 / 画幅 / 色调 / 定位缩放 / 遮罩 / 安全边距
 *          全部一致，只有人物不同。
 *
 * 单位与设计令牌沿用站点既有的 AURORA / lux-v5 体系，
 * 不引入新的颜色字面量（遮罩色除外，遮罩必须在明暗两套主题下都压得住图）。
 *
 * 依赖：本文件需在 aurora.css 之后加载，保证拥有最终视觉裁定权。
 * ================================================================== */

/* ---------------------------------------------------------------
 * 1. 外层容器 —— 负责画幅、圆角、描边与裁切
 * --------------------------------------------------------------- */
.plaza-card {
    position: relative;
    display: block;
    /* 统一画幅 16:10，与背景图原始比例一致，杜绝不同卡片比例不一 */
    aspect-ratio: var(--plaza-ratio, 16 / 10);
    /* 移动端兜底高度：aspect-ratio 不被支持时也不会塌陷 */
    min-height: var(--plaza-min-h, 150px);
    max-height: var(--plaza-max-h, 260px);
    width: 100%;
    border-radius: var(--r-md, 12px);
    border: 1px solid var(--lx-line);
    background: var(--lx-panel-solid, #141821);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    /* 统一过渡口径，和站点其它卡片保持一致的手感 */
    transition:
        border-color var(--lx-t, .38s) var(--lx-ease, ease),
        box-shadow   var(--lx-t, .38s) var(--lx-ease, ease),
        transform    var(--lx-t, .38s) var(--lx-ease, ease);
}

/* 角色 / 载入失败后统一走占位底色 */
.plaza-card.is-placeholder {
    background: var(--c-surface-2, #1a1f2a);
}

/* ---------------------------------------------------------------
 * 2. 背景图层 —— 统一的位置与缩放规则
 * --------------------------------------------------------------- */
.plaza-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 统一的定位与缩放：居中、等比铺满、禁止拉伸变形 */
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    /* 懒加载淡入，避免逐个卡片硬闪 */
    opacity: 0;
    transform: scale(1.001);
    transition:
        opacity .55s var(--lx-ease, ease),
        transform .85s var(--lx-ease, ease);
    will-change: opacity, transform;
    /* 避免图片被长按拖拽 / 选中 */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* 载入完成（含缓存命中）：淡入并轻微回落到正常缩放 */
.plaza-card__media.is-loaded,
.plaza-card.is-loaded .plaza-card__media {
    opacity: 1;
    transform: scale(1);
}

/* 载入失败的图片：直接隐藏，露出占位底色 + 占位纹样 */
.plaza-card__media.is-error {
    opacity: 0 !important;
}

/* ---------------------------------------------------------------
 * 3. 统一暗色渐变遮罩 —— 保证标题与正文可读
 *    三层叠加：底部纵向渐变 + 左侧横向渐变 + 整体压暗
 *    层次感来自「底重顶轻」，安全区偏向文字一侧
 * --------------------------------------------------------------- */
.plaza-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    /* 整体压暗：把 8 张明暗不同的原图拉到同一亮度基准 */
    background: var(--plaza-ov-full, rgba(6, 8, 14, .16));

    /* 左侧留白区更暗（默认安全边距在左），保证标题对比度 */
    background-image:
        var(--plaza-ov-side, linear-gradient(90deg, rgba(6,8,14,.72) 0%, rgba(6,8,14,.18) 62%, transparent 100%)),
        var(--plaza-ov-linear, linear-gradient(180deg, rgba(6,8,14,.30) 0%, rgba(6,8,14,.58) 46%, rgba(6,8,14,.88) 100%));
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-blend-mode: normal, normal;

    /* 遮罩本身也可以是一层模糊，默认 0 不模糊 */
    backdrop-filter: blur(var(--plaza-ov-blur, 0px));
    -webkit-backdrop-filter: blur(var(--plaza-ov-blur, 0px));
}

/* 安全边距在右侧时的镜像版本（人物在左的图使用） */
.plaza-card[data-safe="right"] .plaza-card__overlay {
    background-image:
        linear-gradient(270deg, rgba(6,8,14,.72) 0%, rgba(6,8,14,.18) 62%, transparent 100%),
        var(--plaza-ov-linear, linear-gradient(180deg, rgba(6,8,14,.30) 0%, rgba(6,8,14,.58) 46%, rgba(6,8,14,.88) 100%));
}

/* 安全边距居中（人物居中构图）时，两侧弱化、底部加重即可 */
.plaza-card[data-safe="center"] .plaza-card__overlay {
    background-image:
        radial-gradient(120% 100% at 50% 100%, rgba(6,8,14,.62) 0%, transparent 72%),
        var(--plaza-ov-linear, linear-gradient(180deg, rgba(6,8,14,.30) 0%, rgba(6,8,14,.58) 46%, rgba(6,8,14,.88) 100%));
}

/* ---------------------------------------------------------------
 * 4. 内容层 —— 统一的内边距（安全边距），文字永不被主体压住
 * --------------------------------------------------------------- */
.plaza-card__body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;      /* 文字统一贴底 */
    gap: 6px;
    padding: var(--plaza-pad, 14px 16px 12px);
    /* 文字整体加一层极淡投影，应付原图局部高光 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* 图标：小尺寸、统一位置（左上角独立行），保持各卡片一致 */
.plaza-card__ico {
    position: absolute;
    top: var(--plaza-pad-y, 12px);
    left: var(--plaza-pad-x, 16px);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm, 8px);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(10, 13, 20, .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #FFF;
    transition: transform .5s var(--lx-bounce, ease), background-color var(--lx-t, .38s) ease;
}
.plaza-card:hover .plaza-card__ico {
    transform: rotate(-8deg) scale(1.1);
    background: rgba(10, 13, 20, .6);
}

/* 角色名：小徽标，明确「这张卡对应哪位《奇迹》角色」 */
.plaza-card__role {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .20);
    background: rgba(10, 13, 20, .40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: var(--fs-xs, 12px);
    line-height: 1.5;
    color: #F3EADA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plaza-card__role::before {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lx-gold, #C9AC77);
    box-shadow: 0 0 0 2px rgba(201, 172, 119, .22);
}

/* 板块名：统一字重 / 字号 / 行数限制，杜绝换行导致高度错位 */
.plaza-card__name {
    font-size: var(--fs-base, 15px);
    font-weight: 600;
    line-height: 1.35;
    color: #FFF;
    letter-spacing: .3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 板块简介：统一两行截断，弱化处理，不与标题抢注意力 */
.plaza-card__desc {
    font-size: var(--fs-xs, 12px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .76);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部元信息：主题数 + 热度点，统一顶边细分隔线 */
.plaza-card__meta {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--fs-xs, 12px);
    color: rgba(255, 255, 255, .80);
}
.plaza-card__count {
    font-weight: 700;
    color: var(--lx-gold, #C9AC77);
}
.plaza-card__count b {
    font-size: var(--fs-md, 17px);
    font-weight: 700;
    margin-right: 3px;
}

/* ---------------------------------------------------------------
 * 5. Hover / 焦点 —— 统一的放大倍率，幅度一致
 * --------------------------------------------------------------- */
.plaza-card:hover {
    border-color: var(--lx-line-hot, rgba(212, 180, 131, .5));
    box-shadow: var(--lx-sh-3, 0 28px 66px -26px rgba(0, 0, 0, .78));
    transform: translateY(-4px);
}
.plaza-card:hover .plaza-card__media {
    transform: scale(var(--plaza-hover-scale, 1.06));
}
.plaza-card:focus-visible {
    outline: 2px solid var(--c-ink, #F2E9D8);
    outline-offset: 2px;
}

/* 支持减弱动效的系统设置 */
@media (prefers-reduced-motion: reduce) {
    .plaza-card,
    .plaza-card__media,
    .plaza-card__ico {
        transition: none !important;
        transform: none !important;
    }
    .plaza-card:hover .plaza-card__media { transform: none !important; }
}

/* ---------------------------------------------------------------
 * 6. 移动端适配
 *    小屏两列 → 卡片变窄，需抬高比例、缩减字号与内边距，
 *    并让遮罩整体加重，保证窄屏下文字依然清晰
 * --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .plaza-card {
        /* 平板：略方一点，避免宽高比过大导致内容拥挤 */
        --plaza-ratio: 4 / 3;
        --plaza-max-h: 220px;
    }
}

@media (max-width: 575.98px) {
    .plaza-card {
        /* 手机两列：接近正方形，文字区域更充裕 */
        --plaza-ratio: 1 / 1;
        --plaza-min-h: 148px;
        --plaza-max-h: 200px;
        --plaza-pad: 10px 11px 9px;
        --plaza-pad-x: 11px;
        --plaza-pad-y: 10px;
    }
    /* 手机端简介占位太多，直接隐藏，只留角色名 + 板块名 + 主题数 */
    .plaza-card__desc { display: none; }
    .plaza-card__name { font-size: var(--fs-sm, 13px); }
    .plaza-card__ico { width: 28px; height: 28px; }
    .plaza-card__role { font-size: 10px; padding: 2px 7px; }
    .plaza-card__meta { margin-top: 5px; padding-top: 5px; font-size: 11px; }
    .plaza-card__count b { font-size: var(--fs-base, 15px); }
    /* 窄屏遮罩整体加重，抵消背景人物细节对文字的干扰 */
    .plaza-card__overlay {
        background-image:
            linear-gradient(180deg, rgba(6,8,14,.42) 0%, rgba(6,8,14,.70) 44%, rgba(6,8,14,.94) 100%);
    }
}

/* 超窄屏（≤360px）：单列观感，进一步压缩 */
@media (max-width: 359.98px) {
    .plaza-card {
        --plaza-ratio: 5 / 4;
        --plaza-pad: 9px 10px 8px;
    }
    .plaza-card__meta { border-top-color: rgba(255, 255, 255, .12); }
}

/* ---------------------------------------------------------------
 * 7. 占位图 / 加载失败态
 *    失败时不显示破图，而是露出统一纹样底 + 角色名照常可读
 * --------------------------------------------------------------- */
.plaza-card__ph {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    place-items: center;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(194, 181, 155, .10) 0%, transparent 62%),
        linear-gradient(160deg, #161b24 0%, #0e1219 58%, #0a0d13 100%);
}
/* 占位态 / 降级态 才显示纹样层 */
.plaza-card.is-placeholder .plaza-card__ph,
.plaza-card.is-error .plaza-card__ph {
    display: grid;
}
.plaza-card__ph svg {
    width: 46px;
    height: 46px;
    opacity: .34;
    color: var(--lx-gold, #C9AC77);
}

/* 降级到占位图时：占位图本身可见（无破图），纹样层作为底衬 */
.plaza-card.is-error .plaza-card__media {
    opacity: 1;
}
/* 连占位图都加载不出来：彻底隐藏 img，只留纹样层 */
.plaza-card.is-error .plaza-card__media.is-hard-error {
    opacity: 0;
}

/* 明暗两套主题下，占位底都必须够暗，才能托住白色文字 */
:root[data-theme="light"] .plaza-card__ph {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(176, 138, 76, .14) 0%, transparent 62%),
        linear-gradient(160deg, #3a4048 0%, #262b33 58%, #1c2027 100%);
}

/* ---------------------------------------------------------------
 * 8. 无 WebP 支持时的回退（由 <picture> 自动处理，这里兜底尺寸）
 * --------------------------------------------------------------- */
.plaza-card picture {
    position: absolute;
    inset: 0;
    display: block;
}
.plaza-card picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ---------------------------------------------------------------
 * 9. 网格容器（可选，替代 Bootstrap row 时使用）
 * --------------------------------------------------------------- */
.plaza-grid {
    display: grid;
    gap: var(--s-3, 16px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.plaza-grid > * { min-width: 0; }
@media (max-width: 991.98px) {
    .plaza-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .plaza-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359.98px) {
    .plaza-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------
 * 10. 站点线性主题覆写兜底
 *     lux-linear.css 会把 .lx-board 之类卡片重置为实色底，
 *     这里显式声明「广场卡片要保持图片背景」，避免被覆盖成纯色块
 * --------------------------------------------------------------- */
.plaza-card,
.plaza-card:hover {
    background-color: transparent;
}
.plaza-card__media { display: block; }