/**
 * 写真模式文章列表样式
 * 创享子主题 - 写真瀑布流设计
 */

/* 写真瀑布流容器 */
.photo-gallery {
    margin: 0 -12px;
    background: transparent !important;
    /* 默认CSS变量值，可被行内样式覆盖 */
    --g-cols: 4;
    --g-ratio: 75%;
}

.photo-gallery .posts-row {
    display: grid !important;
    grid-template-columns: repeat(var(--g-cols, 4), 1fr);
    gap: 24px;
}

/* 自动高度设置 */
.photo-gallery.auto-height .posts-row {
    display: block !important;
    margin: 0; /* 取消负margin，水平不再留白 */
}

/* 自动高度模式下的项目样式 - 移到后面确保优先级 */

/* 自定义卡片样式 - 覆盖父主题样式 */
.photo-gallery .gallery-item {
    margin: 0 !important; /* 覆盖父主题外边距 */
    border-radius: var(--main-radius, 8px);
    overflow: hidden;
    transition: all .3s ease;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
    position: relative;
}

/* 非自动高度模式的宽度设置 */
.photo-gallery:not(.auto-height) .gallery-item {
    width: 100% !important; /* 只对非自动高度模式设置100%宽度 */
}

/* 悬停时添加阴影效果和上移动画 */
.photo-gallery .gallery-item:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    transform: translateY(-5px);
    z-index: 2;
}

/* 缩略图样式优化 */
.photo-gallery .gallery-item .item-thumbnail {
    width: 100% !important;
    position: relative;
    overflow: hidden;
}

/* 非自动高度模式下使用CSS变量 */
.photo-gallery:not(.auto-height) .gallery-item .item-thumbnail {
    padding-bottom: var(--item-ratio, var(--g-ratio, 75%)) !important;
}

/* 自动高度模式下不设置默认padding-bottom，由JS根据图片实际比例直接设置 */

/* 缩略图悬停效果 */
.photo-gallery .gallery-item .item-thumbnail img {
    transition: all .5s ease !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* 支持父主题懒加载 */
.photo-gallery .gallery-item .item-thumbnail .lazyload {
    opacity: 0;
    transition: opacity .5s ease;
}

.photo-gallery .gallery-item .item-thumbnail .lazyloaded {
    opacity: 1;
}

.photo-gallery .gallery-item:hover .item-thumbnail img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* 照片覆盖层样式 */
.photo-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* 移除 top: 0，只覆盖底部区域，不遮挡整个图片 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0) 100%);
    padding: 6px;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
    pointer-events: none; /* 默认不接收鼠标事件 */
}

.photo-gallery .gallery-item:hover .photo-overlay {
    opacity: 1;
}

/* 新增内层容器，包裹标题与元信息 */
.photo-overlay .overlay-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 调整标题字号与阴影（使用CSS变量） */
.photo-overlay .item-title {
    font-size: var(--title-size, 13px);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* 调整元信息字号 */
.photo-overlay .item-meta {
    font-size: 11px;
}

/* 移动端隐藏元信息并缩小标题字号 */
@media(max-width:768px){
    .photo-overlay .item-meta{display:none;}
}
@media(max-width:480px){
    .photo-overlay .item-title{font-size:calc(var(--title-size, 13px) - 1px);}
}

/* 覆盖全局链接色，确保写真模式标题纯白 */
.photo-gallery .gallery-item .photo-overlay .item-title a,
.photo-gallery .gallery-item .photo-overlay .item-title a:hover{
    color:#fff !important;
    text-shadow:0 1px 3px rgba(0,0,0,0.6);
}

/* 标题样式优化 */
.photo-overlay .item-title {
    margin: 0 0 2px 0;
    /* font-size: 18px;  移除固定字号，交由CSS变量控制 */
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 元数据样式优化 */
.photo-overlay .item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
}

.photo-overlay .meta-left {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
}

.photo-overlay .meta-right {
    display: flex;
    align-items: center;
}

.photo-overlay .meta-right .meta-item {
    margin-left: 12px;
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.9);
}

/* SVG图标和Font Awesome图标样式 */
.photo-overlay .meta-right .meta-item .icon,
.photo-overlay .meta-right .meta-item i {
    margin-right: 3px;
    font-size: 14px;
    opacity: 0.8;
}

/* ABC底部按钮条样式优化 */
.photo-overlay .abc {
    display: flex;
    font-size: 13px;
    width: 100%;
}

.photo-overlay .abc .xo_left,
.photo-overlay .abc .xo_right {
    flex: 1;
    text-align: center;
    color: #fff;
    padding: 8px 0;
    transition: all .2s;
    text-decoration: none;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 4px;
    background-color: rgba(255,255,255,0.1);
    margin: 0 5px;
}

.photo-overlay .abc .xo_left:hover,
.photo-overlay .abc .xo_right:hover {
    background-color: rgba(255,255,255,0.25);
}

/* 分类角标样式优化 - 写真模式现代化设计 */
.photo-gallery .gallery-item .independent-div {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    opacity: 0.95;
}

.photo-gallery .gallery-item .independent_div_tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    color: #333;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.photo-gallery .gallery-item .independent_div_tag:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.95));
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

/* 写真模式分类角标颜色主题 */
.photo-gallery .gallery-item .independent_div_tag.c-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.85));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.photo-gallery .gallery-item .independent_div_tag.c-blue:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(37, 99, 235, 0.95));
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.photo-gallery .gallery-item .independent_div_tag.c-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.85));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.photo-gallery .gallery-item .independent_div_tag.c-green:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 0.95));
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.photo-gallery .gallery-item .independent_div_tag.c-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.85));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.photo-gallery .gallery-item .independent_div_tag.c-red:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 0.95));
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.photo-gallery .gallery-item .independent_div_tag.c-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(147, 51, 234, 0.85));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.photo-gallery .gallery-item .independent_div_tag.c-purple:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 1), rgba(147, 51, 234, 0.95));
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.photo-gallery .gallery-item .independent_div_tag.c-orange {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(249, 115, 22, 0.85));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.photo-gallery .gallery-item .independent_div_tag.c-orange:hover {
    background: linear-gradient(135deg, rgba(251, 146, 60, 1), rgba(249, 115, 22, 0.95));
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

/* 悬停徽章样式 */
.photo-gallery .gallery-item .hover-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.photo-gallery .gallery-item .hover-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    backdrop-filter: blur(2px);
    transition: all .3s ease;
    opacity: 0;
    transform: translateX(20px);
}

.photo-gallery .gallery-item:hover .hover-badge {
    opacity: 1;
    transform: translateX(0);
}

/* 徽章出现的动画延迟 */
.photo-gallery .gallery-item:hover .hover-badge:nth-child(1) { transition-delay: 0s; }
.photo-gallery .gallery-item:hover .hover-badge:nth-child(2) { transition-delay: 0.05s; }
.photo-gallery .gallery-item:hover .hover-badge:nth-child(3) { transition-delay: 0.1s; }
.photo-gallery .gallery-item:hover .hover-badge:nth-child(4) { transition-delay: 0.15s; }
.photo-gallery .gallery-item:hover .hover-badge:nth-child(5) { transition-delay: 0.2s; }

/* 徽章颜色 */
.photo-gallery .gallery-item .hover-badge.c-blue { background-color: rgba(0, 132, 255, 0.85); }
.photo-gallery .gallery-item .hover-badge.c-red { background-color: rgba(255, 59, 48, 0.85); }
.photo-gallery .gallery-item .hover-badge.c-green { background-color: rgba(40, 205, 65, 0.85); }
.photo-gallery .gallery-item .hover-badge.c-yellow { background-color: rgba(255, 204, 0, 0.85); }
.photo-gallery .gallery-item .hover-badge.c-purple { background-color: rgba(175, 82, 222, 0.85); }

/* 媒体查询中的响应式样式 */
@media(max-width: 768px) {
    .photo-gallery.auto-height .gallery-item {
        width: calc(100% / var(--g-cols, 2)) !important;
    }
}

@media(max-width: 480px) {
    .photo-gallery.auto-height .gallery-item {
        width: calc(100% / var(--g-cols, 2)) !important; /* 保持2列，不要1列 */
    }
}

/* 小工具定制样式 */
.widget_cxzztclean_photo_gallery_widget {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.cxzztclean-photo-gallery-widget-container {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 30px;
}

.cxzztclean-photo-gallery-widget-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
    border-left: 4px solid var(--theme-color, #0084ff);
}

/* Lightbox 支持样式 */
.photo-gallery.lightbox-enabled .gallery-item {
    cursor: pointer;
}

/* ===== Masonry自动高度模式专用修正 ===== */
.photo-gallery.auto-height .gallery-item .item-thumbnail {
    padding-bottom: 0 !important; /* 由图片自身高度撑开 */
    overflow: hidden; /* 确保图片不溢出 */
}

.photo-gallery.auto-height .gallery-item .item-thumbnail img {
    position: static !important; /* 让图片参与文档流 */
    width: 100% !important;
    height: auto !important; /* 高度随原图 */
    object-fit: cover; /* 裁剪保持填充 */
    display: block; /* 移除图片底部空隙 */
    transition: transform 0.3s ease; /* 平滑的悬停效果 */
}

/* Masonry降级样式 - 当Masonry失败时使用CSS Grid */
.photo-gallery.auto-height.masonry-fallback .posts-row {
    display: grid !important;
    grid-template-columns: repeat(var(--g-cols, 2), 1fr); /* 移动端优先fallback */
    gap: 24px;
    grid-auto-rows: masonry; /* 现代浏览器的原生瀑布流 */
}

/* 桌面端Masonry降级恢复 */
@media(min-width: 769px) {
    .photo-gallery.auto-height.masonry-fallback .posts-row {
        grid-template-columns: repeat(var(--g-cols, 4), 1fr); /* 桌面端fallback */
    }
}

/* 对于不支持grid-auto-rows: masonry的浏览器 */
@supports not (grid-auto-rows: masonry) {
    .photo-gallery.auto-height.masonry-fallback .posts-row {
        grid-auto-rows: min-content;
    }
}

/* 写真模式移动端响应式优化 */
@media(max-width: 768px) {
    .photo-gallery .gallery-item .independent-div {
        top: 6px;
        left: 6px;
    }

    .photo-gallery .gallery-item .independent_div_tag {
        padding: 3px 8px;
        font-size: 10px;
        border-radius: 10px;
    }
}

@media(max-width: 480px) {
    .photo-gallery .gallery-item .independent-div {
        top: 4px;
        left: 4px;
        opacity: 0.9;
    }

    .photo-gallery .gallery-item .independent_div_tag {
        padding: 2px 6px;
        font-size: 9px;
        border-radius: 8px;
        backdrop-filter: blur(8px);
        letter-spacing: 0.2px;
    }

    /* 手机端减少悬停效果 */
    .photo-gallery .gallery-item .independent_div_tag:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

/* 优化的加载状态 */
.photo-gallery.loading .posts-row {
    opacity: 0.3;
    pointer-events: none;
}

.photo-gallery.loading .gallery-item {
    transform: translateY(20px);
    opacity: 0;
}

/* 加载完成后的动画 */
.photo-gallery.loaded .posts-row {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.photo-gallery.loaded .gallery-item {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.4s ease;
}

/* 渐进式显示动画 */
.photo-gallery.loaded .gallery-item:nth-child(1) { transition-delay: 0.1s; }
.photo-gallery.loaded .gallery-item:nth-child(2) { transition-delay: 0.15s; }
.photo-gallery.loaded .gallery-item:nth-child(3) { transition-delay: 0.2s; }
.photo-gallery.loaded .gallery-item:nth-child(4) { transition-delay: 0.25s; }
.photo-gallery.loaded .gallery-item:nth-child(n+5) { transition-delay: 0.3s; }

/* 移除骨架屏 */
.photo-gallery .skeleton-item { display: none !important; }

/* 媒体查询中的骨架屏样式 */
@media(max-width: 768px) {
    .photo-gallery.auto-height .skeleton-item {
        width: calc((100% / var(--g-cols, 2)) - 24px) !important;
    }
}

@media(max-width: 480px) {
    .photo-gallery.auto-height .skeleton-item {
        width: calc((100% / var(--g-cols, 2)) - 24px) !important; /* 保持2列 */
    }
}

/* ===== 移动端统一固定两列 - 提高优先级覆盖内联样式 ===== */
/* 统一规则：≤768px 始终显示2列，不再使用1列布局 */
@media(max-width:768px){
    /* 调整全局列数变量 - 使用!important覆盖内联样式 */
    .photo-gallery{ --g-cols:2 !important; }
    /* Grid 布局：固定两列 */
    .photo-gallery .posts-row{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
    /* Masonry 自动高度：宽度同样二分 */
    .photo-gallery.auto-height .gallery-item{ width:calc(100%/2) !important; }
}

/* 小屏幕设备 (≤480px) - 继续保持两列，与画廊小工具统一 */
@media(max-width:480px){
    .photo-gallery{ --g-cols:2 !important; }
    .photo-gallery.auto-height .gallery-item{ width:calc(100%/2) !important; }
}

/* ===== 自动高度模式的宽度设置 - 放在最后确保优先级 ===== */
.photo-gallery.auto-height .gallery-item {
    width: calc(100% / var(--g-cols, 4)) !important; /* 纯百分比列宽 */
    margin: 0 0 24px 0 !important; /* 仅保留纵向间距 */
    float: left; /* 添加浮动确保多列布局 */
    box-sizing: border-box; /* 确保padding和border计算正确 */
}

/* ==== 移动端防止水平滚动 ==== */
@media(max-width:768px){
    .photo-gallery,
    .photo-gallery.auto-height,
    .card-gallery,
    .card-gallery.auto-height{
        margin:0 !important; /* 移除 -12px 负外边距 */
    }
    /* Swiper 容器限制 */
    .swiper-container{
        width:100% !important;
        overflow:hidden;
    }
    .swiper-wrapper{max-width:100% !important;}
    /* 搜索框输入自适应 */
    .cscj-txt{max-width:100%;box-sizing:border-box;}
}

/* ===== Lightbox功能与文章链接共存 ===== */
/* 确保覆盖层链接可点击 */
.photo-gallery .photo-overlay {
    pointer-events: none; /* 覆盖层本身不接收鼠标事件 */
    z-index: 5;
}

.photo-gallery .photo-overlay .overlay-inner {
    pointer-events: none; /* 内层容器也不接收鼠标事件 */
}

.photo-gallery .photo-overlay a,
.photo-gallery .photo-overlay .abc .xo_left,
.photo-gallery .photo-overlay .abc .xo_right {
    pointer-events: auto !important; /* 只有链接和按钮接收鼠标事件 */
    position: relative;
    z-index: 6;
    display: inline-block;
}

.photo-gallery .item-thumbnail {
    position: relative;
    z-index: 1;
}

/* lightbox提示图标样式 */
.photo-gallery .lightbox-tip {
    transition: opacity 0.3s ease !important;
}

/* 悬停时的视觉反馈 */
.photo-gallery.lightbox-enabled .item-thumbnail:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    pointer-events: none;
    z-index: 2;
}

/* 确保标题链接在移动端也可点击 */
@media(max-width: 768px) {
    .photo-gallery .photo-overlay a {
        padding: 5px;
        margin: -5px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}