/* Aklan List Storys Styles - 瀑布流布局（参考btxia_list_storys.css样式） */

/* =========================================================
   Aklan瀑布流故事卡片样式 - JavaScript控制布局
   ========================================================= */

/* 基础重置 */
a { 
    text-decoration: none; 
    color: #000; 
}
a:hover { 
    text-decoration: none; 
}

/* 瀑布流容器 - 使用position: relative为绝对定位项目提供参考 */
.aklan-masonry-grid {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 移除grid布局 */
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
    /* gap: 10px; */
}

/* 瀑布流项目 - 使用绝对定位，由JavaScript控制位置 */
.aklan-masonry-item {
    position: absolute;
    /* 宽度由JavaScript动态计算，这里不设置固定宽度 */
    box-sizing: border-box;
    /* padding: 5px; */
    background: linear-gradient(to left top,
        rgba(240, 240, 240, 0.1) 0%,
        rgba(226, 226, 226, 0.3) 50%,
        rgba(199, 199, 199, 0.6) 100%
    );
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    
    /* 关键：项目高度完全由内容决定 */
    height: auto;
    
    /* 使用flex布局确保内容区域正确扩展 */
    display: flex;
    flex-direction: column;
    
    margin: 0;
    line-height: 1;
    
    /* 初始状态隐藏，等布局完成后显示 */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 鼠标悬停时增强阴影效果并改变背景渐变 - 更深一些 */
.aklan-masonry-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    background: linear-gradient(to left top,
        rgba(220, 220, 220, 0.2) 0%,
        rgba(180, 180, 180, 0.4) 50%,
        rgba(130, 130, 130, 0.8) 100%
    );
}

/* 布局完成后显示项目 */
.aklan-masonry-item.masonry-positioned {
    opacity: 1;
}

/* =========================================================
   图片区域 - 核心修改：移除固定宽高比，让图片自然高度
   ========================================================= */

/* 图片容器 - 不设固定高度，不设宽高比 */
.aklan-image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    
    /* 关键：高度由图片决定，不设固定值 */
    height: auto;
    /* min-height: 150px;  */
    /* 最小高度确保加载时有占位 */
    
    /* 关键：移除所有固定宽高比设置 */
    /* 不要设置：aspect-ratio: 4 / 3; */
    /* 不要设置：padding-top: 75%; */
    
    flex-shrink: 0;
    line-height: 0;
    margin: 0;
    border-radius: 0;
    
    /* 确保容器能正确包裹图片 */
    display: block;
}

/* 图片 - 关键：宽度100%，高度按比例自适应，添加高度限制 */
.aklan-masonry-image {
    border-radius: 5px 5px 0 0;
    /* border: 1px solid #888888; */
    width: 100%;
    height: auto; /* 关键：高度自适应，按图片原始比例 */
    display: block;
    /* border-radius: 5px; */
    transition: opacity 0.3s ease;
    
    /* 关键：使用cover填充整个容器，可能裁剪图片边缘 */
    object-fit: cover;
    
    /* 图片在容器内居中裁剪，确保重要内容可见 */
    object-position: center;
    
    /* 优化图片加载和显示 */
    background-color: #f8f9fa;
    
    /* 默认最大高度 */
    max-height: 800px;
}

/* 渐变遮罩类 - 已弃用，使用包装器截断方案替代 */
/* .aklan-image-wrapper.has-gradient-mask {
    mask-image: linear-gradient(to bottom, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 1) 90%, 
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(to bottom, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 1) 90%, 
        rgba(0, 0, 0, 0) 100%
    );
} */

/* 图片遮罩效果 - 已弃用，使用包装器截断方案替代 */
/* .aklan-masonry-image.tall-image-mask {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.aklan-masonry-image.tall-image-mask.expanded {
    -webkit-mask-image: none;
    mask-image: none;
} */

/* =========================================================
   超长图片截断效果 - 父容器控制方案（统一方案）
   ========================================================= */

/* 长图模式的容器样式 - 截断并添加渐变遮罩 */
.aklan-image-wrapper.is-truncated {
    /* 最大高度由JS动态设置，通过CSS变量传递 */
    max-height: var(--truncate-height, 400px); /* 默认值，实际由JS设置 */
    overflow: hidden;  /* 必须隐藏超出部分 */
    position: relative;
}

/* 长图模式的遮罩 (使用伪元素，比 mask-image 兼容性更好，且方便放按钮) */
.aklan-image-wrapper.is-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* 渐变区域高度，根据方案A建议调整 */
    background: linear-gradient(to bottom, transparent, #f5f5f5); /* 颜色需匹配背景色 #f5f5f5 */
    pointer-events: none; /* 让点击穿透，如果需要点击展开，可以把 pointer-events 去掉并在上面放按钮 */
    z-index: 2;
}

/* 注意：已移除expand-btn按钮，仿知乎样式，只做截断不添加展开按钮 */
/* 展开状态已移除，不再支持展开/收起功能 */

/* 鼠标悬停时图片效果 - 移除图片变化，只保留item背景变化 */
/* .aklan-masonry-item:hover .aklan-masonry-image {
    opacity: 0.9;
} */

/* 图片计数指示器 - 放在图片右下角 */
.aklan-image-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}

.aklan-image-count:hover {
    transform: scale(1.1);
}

/* 收藏按钮 - 放在右上角 */
.aklan-favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    transition: all 0.2s ease;
}

.aklan-favorite-btn:hover {
    transform: scale(1.2);
}

.aklan-favorite-btn.active svg path {
    fill: #d81e06;
}

/* 卡片内容区域 */
.aklan-masonry-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    line-height: 1;
}

/* 标题区域 */
.aklan-masonry-title {
    margin: 0;
    padding: 0;
    color: #1a1a1a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    margin-bottom: 4px;
}

.aklan-masonry-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.aklan-masonry-title a:hover {
    color: #3498db;
}

/* 作者信息 */
.aklan-author-info-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.aklan-author-avatar-small {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.aklan-author-name {
    /* font-size: 12px; */
    color: #666;
}

/* 描述 */
.aklan-masonry-description {
    font-size: 10px;
    color: #595959;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

/* 热门评论区域 */
.aklan-hot-comments {
    margin-top: 8px;
    border-top: 0.5px solid #eee;
    padding-top: 8px;
}

.aklan-hot-comment-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 0.5px dashed #f0f0f0;
}

.aklan-hot-comment-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 评论内容 */
.aklan-comment-text {
    font-size: 8px;
    color: #118fd8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

/* 评论者信息靠右显示 */
.aklan-comment-author-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    color: #888;
    margin-bottom: 0;
    line-height: 1;
    padding: 0;
}

.aklan-comment-author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.aklan-comment-author-name {
    font-size: 11px;
    color: #666;
}

/* 加载动画 */
.aklan-loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* 空状态 */
.aklan-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.aklan-empty-message {
    font-size: 16px;
    margin-top: 10px;
}

/* =========================================================
   响应式设计 - 通过JavaScript动态调整列宽和列数
   ========================================================= */

/* 响应式调整完全由JavaScript实现，CSS不设置固定宽度 */
/* 列宽和列数由JavaScript根据屏幕宽度动态计算：
   - 大屏幕（≥1024px）：3栏
   - 中屏幕（≥768px）：2栏  
   - 小屏幕（<768px）：1栏
*/

/* =========================================================
   超长图片特殊处理（可选）- 已统一使用包装器截断方案
   ========================================================= */

/* 对于特别高的图片，可以限制最大高度 */
.aklan-masonry-image.extra-tall-image {
    /* 设置更合理的最大高度 */
    max-height: 600px !important;
}

/* 注意：已弃用 .has-tall-image 方案，统一使用 .is-truncated 方案 */

/* =========================================================
   新方案：长图渐隐 + 展开按钮（独立控制，避免与现有代码耦合）
   ========================================================= */

/* 长图容器的样式：限制高度 + 溢出隐藏 + 相对定位 */
.aklan-image-wrapper.long-image {
    max-height: var(--long-image-max-height, 400px); /* 默认值，实际由JS动态设置 */
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease; /* 可选，平滑展开 */
}

/* 长图容器的渐隐遮罩（伪元素） */
.aklan-image-wrapper.long-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* 渐变区域高度，可根据喜好调整 */
    background: linear-gradient(to bottom, transparent, #f5f5f5); /* 背景色需与卡片背景一致 */
    pointer-events: none; /* 让点击穿透，按钮不在此区域时需保留 */
    z-index: 2;
}

/* 展开按钮（由JS动态创建或显示） */
.aklan-image-wrapper.long-image .long-image-expand-btn {
    display: block; /* 默认显示 */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.aklan-image-wrapper.long-image .long-image-expand-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%) scale(1.05);
}

/* 展开状态：移除高度限制、移除遮罩、隐藏按钮 */
.aklan-image-wrapper.long-image.expanded {
    max-height: none !important;
}

.aklan-image-wrapper.long-image.expanded::after {
    display: none;
}

.aklan-image-wrapper.long-image.expanded .long-image-expand-btn {
    display: none;
}

/* =========================================================
   Viewer.js 相关样式
   ========================================================= */

/* 隐藏的图片，仅用于Viewer.js */
.viewer-image-hidden {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 图片容器 */
.aklan-image-viewer-container {
    position: relative;
    width: 100%;
    height: auto;
}

/* 可点击放大的图片 */
.viewer-image {
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}

.viewer-image:hover {
    opacity: 0.95;
}

/* 图片链接覆盖层 */
.aklan-card-image-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: block;
    background: transparent;
}

/* 确保收藏按钮在链接之上 */
.aklan-favorite-btn {
    z-index: 10;
}

/* =========================================================
   响应式图片高度限制
   ========================================================= */

/* 大屏幕：最大宽度1024px时，图片最大高度600px */
@media (max-width: 1024px) {
    .aklan-masonry-image {
        max-height: 600px;
    }
}

/* 中屏幕：最大宽度768px时，图片最大高度500px */
@media (max-width: 768px) {
    .aklan-masonry-image {
        max-height: 500px;
    }
}

/* 小屏幕：最大宽度480px时，图片最大高度400px */
@media (max-width: 480px) {
    .aklan-masonry-image {
        max-height: 400px;
    }
}