/* 1. 卡片容器 (.ambient-card)
------------------------------------------------
[使用说明]:
请确保 HTML 结构中包含以下 3 个关键要素：
1. li 标签添加 class="ambient-card"
2. 包裹图片的 div 添加 class="ambient-img-wrap"
3. img 标签添加 crossorigin="anonymous"

[HTML 示例结构]:
<li class="ambient-card" title="...">
    <div class="ambient-img-wrap">
        <img crossorigin="anonymous" src="..." />
    </div>
</li>
------------------------------------------------
*/

/* 加在 li 标签上 */
.ambient-card {
    /* 初始化变量 */
    --dynamic-color: #e5e5e5;

    /* 核心布局：给背景色留出空间 */
    padding: 12px !important;
    box-sizing: border-box !important;
    background-clip: padding-box;

    /* 外观 */
    border-radius: 16px !important;
    border: none !important;

    /* 动画 */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* 2. 图片包裹层 (.ambient-img-wrap) */
/* 加在包裹 img 的 div 上 */
.ambient-img-wrap {
    /* 强制填满卡片内部 */
    width: 100%;

    /* 这里的圆角要比卡片小一点，形成协调的内嵌感 */
    border-radius: 8px !important;

    /* 裁剪溢出的图片 */
    overflow: hidden;

    /* 消除底部可能的缝隙 */
    display: block;
}

/* 确保包裹层里的图片自适应 */
.ambient-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 3. 交互效果：鼠标悬停在卡片上 */
.ambient-card:hover {
    background-color: var(--dynamic-color) !important;
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    z-index: 10;
}

/* 4. 防止内部图片再次放大 (覆盖原有动画) */
.ambient-card:hover .ambient-img-wrap img {
    transform: none !important;
    -webkit-transform: none !important;
}

/* 5. 细节优化：卡片内的文字排版 */
/* 只影响 ambient-card 内部的标题和段落 */
.ambient-card h1,
.ambient-card p {
    margin-left: 0 !important;
    padding: 0 4px; /* 稍微缩进一点，和图片对齐 */
}