/* ==========================================================================
   ToupTek Astro Gallery - 样式主文件 (Main Stylesheet)
   版本：White Theme + Hybrid Layout (Right Info + Bottom Thumbs)
   ========================================================================== */

.atf-page-heading.atf-align-left .atf-post-label > span:not(:last-child)::after,.atf-page-heading.atf-align-left .atf-page-heading-title{
    color: var(--bs-white) ;
}

/* =========================================
   Gallery Banner
   说明：
   1. Gallery Banner 文案区统一回到 left-align 语义，和 /products 保持一致；
   2. Submit CTA 不再占据 Banner 主文案区，而是下沉到内容区顶部；
   3. 这里仅补 Gallery Banner 的反白文字与最大宽度，不重写其布局结构。
   ========================================= */

.atf-page-heading.gallery-page-banner > .container {
    position: relative;
    z-index: 1;
}

.atf-page-heading.gallery-page-banner .atf-page-heading-in {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v2-spacing-md);
    max-width: min(760px, 100%);
}

.atf-page-heading.gallery-page-banner .atf-page-heading-title {
    color: var(--v2-text-inverse) !important;
    text-shadow: 0 12px 30px rgba(var(--v2-bg-dark-rgb), 0.28);
    max-width: min(720px, 100%);
    margin: 0;
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

.atf-page-heading.gallery-page-banner .atf-post-label {
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 0 var(--v2-spacing-sm);
    padding: 10px 16px;
    border-radius: var(--v2-radius-pill);
    background: rgba(var(--v2-bg-dark-rgb), 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0;
}

.atf-page-heading.gallery-page-banner .atf-post-label > span,
.atf-page-heading.gallery-page-banner .atf-post-label > span a,
.atf-page-heading.gallery-page-banner .atf-post-label > span:last-child,
.atf-page-heading.gallery-page-banner .atf-post-label > span:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.88) !important;
}

@media (max-width: 767px) {
    .atf-page-heading.gallery-page-banner .atf-page-heading-in {
        max-width: 100%;
    }

    .atf-page-heading.gallery-page-banner .atf-page-heading-title {
        max-width: 100%;
        font-size: 28px;
        line-height: 36px;
        font-weight: 500;
        text-shadow: none;
    }

    .atf-page-heading.gallery-page-banner .atf-post-label {
        display: inline-flex;
        min-height: 0;
        padding: 0;
        gap: 0 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        font-size: 16px;
        line-height: 24px;
    }

    .atf-page-heading.gallery-page-banner .atf-post-label > span,
    .atf-page-heading.gallery-page-banner .atf-post-label > span a {
        color: #FFFFFF !important;
        font-size: 16px;
        line-height: 24px;
        opacity: 1;
    }

    .atf-page-heading.gallery-page-banner .atf-post-label > span:last-child,
    .atf-page-heading.gallery-page-banner .atf-post-label > span:not(:has(a)) {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 16px;
        line-height: 24px;
        opacity: 1;
    }

    .atf-page-heading.gallery-page-banner .atf-post-label > span:not(:last-child)::after {
        margin-left: 6px;
        color: #FFFFFF !important;
    }
}

/* Gallery 内容区工具栏：
   说明：
   1. 筛选导航和投稿入口同属 Gallery 内容工具，统一放在一个 toolbar 中；
   2. CTA 使用页面专属类名，避免继承 Banner 按钮的定位、transform 和内边距语义。 */
.tpa-gallery-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-spacing-lg);
    margin-bottom: var(--v2-spacing-xl);
    /* 工具栏是页面核心导航，不依赖 WOW 动画；这里兜底避免历史动画类残留导致 opacity: 0。 */
    visibility: visible !important;
    opacity: 1 !important;
}

.tpa-gallery-cta-bar {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-bottom: 0;
}

.tpa-gallery-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--v2-button-height);
    padding: 0 var(--v2-spacing-xl);
    border-radius: var(--v2-radius-button-pill);
    background: var(--v2-primary-500);
    border: 1px solid var(--v2-primary-500);
    color: var(--v2-text-inverse);
    font-size: var(--v2-font-size-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--v2-shadow-card);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tpa-gallery-submit-btn:hover {
    background: var(--v2-primary-400);
    border-color: var(--v2-primary-400);
    color: var(--v2-text-inverse);
    box-shadow: var(--v2-shadow-card-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.tpa-gallery-submit-btn span {
    color: inherit;
}

@media (max-width: 991px) {
    .tpa-gallery-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--v2-spacing-md);
    }

    .tpa-gallery-cta-bar {
        justify-content: flex-start;
        order: -1;
    }

    .tpa-gallery-toolbar .tpa-gallery-filter {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .tpa-gallery-toolbar {
        margin-bottom: var(--v2-spacing-lg);
    }

    .tpa-gallery-submit-btn {
        width: 100%;
        min-height: 42px;
        padding: 0 var(--v2-spacing-lg);
        font-size: var(--v2-font-size-sm);
    }
}

/* =========================================
   1. 页面基础容器 (Page Container)
   ========================================= */
.tpa-gallery-section {
    padding: var(--v2-spacing-xl) 0 calc(var(--v2-spacing-xl) * 1.5);
    /* 修改点：背景改为白色变量 */
    background-color: var(--color-white);
    min-height: 80vh;
}

.tpa-gallery-container {
    padding: 0 20px;
}


/* =========================================
   2. 筛选按钮控制 (Filter Buttons & Toggle)
   ========================================= */
/* 2.1 按钮容器 */
.tpa-gallery-filter {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}

/* 2.2 单个按钮样式 */
.tpa-filter-btn {
    background: transparent;
    /* 修改点：适配白底，使用灰色变量作为边框 */
    border: 1px solid var(--thm-ase);
    /* 修改点：文字颜色改为深色变量 */
    color: var(--guad-text);
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tpa-filter-btn:hover {
    /* 悬浮状态：浅灰背景 + 深色文字 */
    background: var(--thm-fb);
    border-color: var(--guad-text);
    color: var(--guad-text);
}

.tpa-filter-btn.active {
    /* 激活状态：品牌蓝背景 + 白色文字 */
    background: var(--thm-base);
    color: var(--color-white);
    border-color: var(--thm-base);
    box-shadow: 0 4px 10px rgba(45, 118, 192, 0.3);
}

/* 2.3 手机端折叠控制 (Mobile Toggle) */
#toggleFilterBtn {
    display: inline-block;
    cursor: pointer;
    /* 修改点：适配白底 */
    background: var(--thm-fb);
    color: var(--guad-text);
    border: 1px solid var(--thm-ase);
}

#filterList {
    display: none; /* 默认隐藏列表，点击后展开 */
    margin-top: 15px;
}

/* 2.4 大屏适配 (Desktop Toggle Override) */
@media (min-width: 768px) {
    #toggleFilterBtn {
        display: none !important; /* 大屏隐藏开关按钮 */
    }

    #filterList {
        display: flex !important; /* 大屏强制显示列表 */
    }
}


/* =========================================
   3. 列表布局重置 (Layout Reset)
   ========================================= */
.demo-gallery > ul {
    margin: 0; /* 抵消列间距 */
    padding-left: 0;
    width: auto;
}


/* =========================================
   4. 卡片容器与间距 (Card & Spacing)
   ========================================= */
.tpa-gallery-item {
    padding: 0 5px -5px 5px;
    float: left;
    margin: 0;
    list-style: none;
}

.tpa-gallery-item a {
    display: block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;

    /* 强制去除白边 */
    border: none !important;
    padding: 0 !important;

    /* 修改点：卡片默认背景改为浅灰色变量，防止图片加载前显示黑块 */
    background: var(--thm-fb) !important;

    /* 修改点：白底上的阴影需要更淡、更柔和 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.tpa-gallery-item a:hover {
    transform: translateY(-5px);
    /* 悬浮加深阴影 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}


/* =========================================
   5. 图片样式 (Image Styles) - 兼容 picture 标签和 img 标签
   ========================================= */
.tpa-gallery-item img,
.tpa-gallery-item picture {
    display: block; /* 消除基线空隙 */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    margin: 0 !important;
    transition: transform 0.5s ease;
    /* 在白底上不需要压暗图片，保持原亮 */
    filter: brightness(1);
}

/* picture 标签内的 img 继承样式 */
.tpa-gallery-item picture img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: none;
    margin: 0;
}

.tpa-gallery-item a:hover img,
.tpa-gallery-item a:hover picture {
    transform: scale(1.05);
}


/* =========================================
   6. 悬浮遮罩层 (Hover Overlay)
   ========================================= */
.tpa-poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 保持黑色半透明渐变，因为文字是白色的，需要在图片上保持对比度 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    opacity: 0.9;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.tpa-gallery-item a:hover .tpa-poster-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    opacity: 1;
}


/* =========================================
   7. 列表内文字排版 (List Typography)
   ========================================= */
.tpa-poster-content {
    padding: 15px;
    width: 100%;
    text-align: left;
    transform: translateY(5px);
    transition: transform 0.3s ease;
}

.tpa-gallery-item a:hover .tpa-poster-content {
    transform: translateY(0);
}

.tpa-cat-tag {
    display: inline-block;
    font-size: 10px;
    /* 分类名称保持数据源原始大小写，避免前台被样式强制改成全大写。 */
    text-transform: none;
    background: var(--thm-base); /* 品牌蓝 */
    color: var(--color-white);
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.tpa-poster-content h3 {
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpa-award-subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.4;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.tpa-poster-content h4 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    display: flex;
    align-items: center;
}

.tpa-poster-content h4 i {
    margin-right: 6px;
    font-size: 12px;
}


/* =========================================
   8. 空状态提示 (Empty State)
   ========================================= */
.tpa-gallery-empty h3 {
    /* 修改点：白底上使用灰色文字 */
    color: var(--thm-gray) !important;
}


/* =========================================
   9. LightGallery 基础覆盖 (Plugin Overrides)
   注意：灯箱内部保持深色模式，以提供最佳观影体验
   ========================================= */
.lg-sub-html h4 {
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 500;
    color: var(--color-white) !important;
    margin-bottom: 8px;
}

.lg-sub-html p {
    font-size: 16px !important;
    line-height: 24px !important;
    color: #ddd !important;
}

.lg-sub-html .lg-award-text {
    color: var(--thm-base) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 500;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0.2px;
}

/* 默认移动端的样式 (底部悬浮) */
.lg-sub-html {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.95) 100%) !important;
    padding: 60px 20px 30px 20px !important;
    text-align: left !important;
    z-index: 1080;
}

/* 修复全屏按钮不显示的问题 */
.lg-fullscreen {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 多显示器全屏修复补丁 */
.lg-outer.lg-fullscreen-on {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background-color: #000 !important; /* 全屏保持纯黑背景 */
}


/* =========================================
   10. 详情页参数列表美化 (Equip List Fix)
   ========================================= */
.lg-equip-info {
    font-size: 16px !important;
    color: #999 !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    line-height: 24px !important;
}

/* 设备行容器 - 使用 flex 布局实现标题和值的对齐 */
.lg-equip-info .equip-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.lg-equip-info .equip-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* 设备标题 - 固定宽度，右对齐 */
.lg-equip-info .equip-label {
    color: var(--color-white);
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
    padding-right: 10px;
}

/* 设备值容器 - flex 纵向排列多个值 */
.lg-equip-info .equip-values {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #999;
    flex: 1;
}

/* 单个设备值 */
.lg-equip-info .equip-value {
    display: block;
    line-height: 24px;
}

/* 10.1 产品链接样式 (Product Link in Equipment Info) */
.lg-equip-info .lg-product-link {
    color: var(--thm-base) !important; /* 品牌蓝色 */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px dashed rgba(45, 118, 192, 0.5);
    padding-bottom: 1px;
}

.lg-equip-info .lg-product-link:hover {
    color: #5fa8e6 !important; /* 悬浮时变亮 */
    border-bottom-color: #5fa8e6;
    text-decoration: none;
}


/* ==========================================================================
   11. PC 端混合布局 (Hybrid Layout)
   ★ 布局：[左大图] + [右文案侧边栏]
   ★ 缩略图：[底部横向] (通过按钮控制开关)
   ========================================================================== */
@media (min-width: 992px) {

    /* --- A. 图片主区域 --- */
    /* 右侧留出 360px 给文案，确保图片不被文案遮挡 */
    .lg-outer .lg-img-wrap,
    .lg-outer .lg-video-cont {
        padding-right: 360px !important;
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        height: 100%;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- B. 文案信息 (固定在右侧) --- */
    .lg-sub-html {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important; /* 固定在右边 */
        bottom: 0 !important;
        left: auto !important;

        width: 360px !important;
        height: 100% !important;
        background: #111 !important; /* 保持深色背景以便于阅读 */
        border-left: 1px solid rgba(255, 255, 255, 0.1);

        display: flex !important;
        flex-direction: column;
        justify-content: flex-start !important; /* 顶部对齐 */

        padding: 80px 40px 40px 40px !important;
        overflow-y: auto;
        z-index: 1080;
        background-image: none !important;
    }

    .lg-sub-html h4 {
        font-size: 24px !important;
        line-height: 32px !important;
        font-weight: 500;
        margin-bottom: 16px !important;
    }

    /* --- C. 缩略图栏 (恢复到底部) --- */
    .lg-thumb-outer {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important; /* 占满全宽 */
        height: 120px !important; /* 增加高度以容纳更大的缩略图 */
        background-color: #0d0d0d !important;

        z-index: 1090; /* 比文案层高，展开时会盖住文案底部一点 */
        padding: 10px 0 !important;
    }

    /* 恢复缩略图的横向排列 */
    .lg-thumb {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        transform: translate3d(0, 0, 0);
        margin: 0 auto !important;
    }

    /* --- D. 工具栏与按钮 --- */
    .lg-toogle-thumb {
        display: block !important;
        color: var(--color-white) !important;
    }

    .lg-toolbar {
        width: calc(100% - 360px) !important;
        background: transparent !important;
    }

    .lg-actions .lg-next {
        right: 380px !important;
    }
}


/* =========================================
   12. 缩略图尺寸调整 (Custom Thumb Size)
   适配 350x536 竖幅图片
   ========================================= */

/* 调整单个缩略图容器的尺寸 */
.lg-thumb-item {
    /* 根据 350/536 的比例 */
    width: 65px !important;
    height: 100px !important;

    margin-right: 5px !important;
    margin-bottom: 5px !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.lg-thumb-item.active,
.lg-thumb-item:hover {
    border-color: var(--thm-base) !important;
    opacity: 1;
}

/* 缩略图图片 - 兼容 picture 标签和 img 标签 */
.lg-thumb-item img,
.lg-thumb-item picture {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* 修正图片内容区域的底部留白，避免被增高的缩略图栏遮挡 */
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
    bottom: 120px !important;
}

/* ==========================================================================
   13. 移动端专属适配 (Mobile Optimization)
   适配范围：屏幕宽度小于 768px (手机/窄屏平板)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* --- A. 页面容器调整 --- */
    .tpa-gallery-section {
        /* 减小顶部留白，节省手机寸土寸金的空间 */
        padding: 30px 0 !important;
    }

    .tpa-gallery-container {
        /* 减小左右边距 */
        padding: 0 10px !important;
    }


    /* --- B. 导航按钮组 (Filter & Toggle) --- */
    /* 1. 筛选开关按钮 (Filter Toggle) */
    #toggleFilterBtn {
        display: block;
        width: 100%;
        padding: 10px 0;
        margin-bottom: 10px;
        background-color: var(--thm-fb);
        color: var(--guad-text);
        border: 1px solid var(--thm-ase);
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
    }

    /* 2. 展开后的按钮列表容器 */
    .tpa-gallery-filter {
        gap: 8px !important;
        margin-bottom: 0 !important;
        /* 确保 Flex 容器允许换行 */
        flex-wrap: wrap !important;
        justify-content: flex-start !important; /* 左对齐，防止最后一行居中显得奇怪 */
    }

    /* 3. 单个分类按钮 (默认样式：一行两个) */
    .tpa-filter-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        background-color: var(--color-white);
        text-align: center;

        /* ★★★ 核心修改 1：一行两个，禁止自动拉伸 ★★★ */
        /* calc(50% - 4px) 是为了减去 gap 的一半 (8px / 2 = 4px) */
        width: calc(50% - 4px) !important;
        flex-grow: 0 !important; /* 禁止拉伸，防止最后一行变宽 */
    }

    /* ★★★ 核心修改 2：第一个按钮 (All Works) 强制占满一行 ★★★ */
    /* data-filter="all" 也可以，但 :first-child 更通用 */
    .tpa-filter-btn:first-child {
        width: 100% !important;
        margin-bottom: 2px !important; /* 与下面的按钮稍微分开一点 */
    }

    .tpa-filter-btn.active {
        background-color: var(--thm-base) !important;
        color: var(--color-white) !important;
        border-color: var(--thm-base) !important;
    }


    /* --- C. 图片列表布局 (Grid System) --- */
    /* 1. 强制双列布局 (Two Columns) */
    /* 这里的权重必须很高，以覆盖 Bootstrap 的 col-12 */
    .tpa-gallery-item {
        width: 50% !important; /* 强制一行两张 */

        /* 极窄间距：左右各 3px (总间距 6px) */
        padding: 0 3px 0px 3px !important;

        /* 针对手机端的垂直间距微调，手机端不需要太大的负 margin */
        margin-bottom: -5px !important;
    }

    /* 2. 修正容器边距，抵消极窄间距 */
    .demo-gallery > ul {
        margin: 0 -3px !important;
    }

    /* 3. 图片样式 */
    .tpa-gallery-item a {
        border-radius: 4px !important; /* 减小圆角半径 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; /* 减淡阴影 */
    }


    /* --- D. 图片上的文字 (Overlay Content) --- */
    .tpa-poster-content {
        padding: 8px 10px !important; /* 减小内边距 */
    }

    /* 缩小标题字体 */
    .tpa-poster-content h3 {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .tpa-award-subtitle {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    /* 缩小摄影师名字和图标 */
    .tpa-poster-content h4 {
        font-size: 11px !important;
    }

    /* 隐藏分类标签 (Mobile 空间有限，可选择隐藏) */
    .tpa-cat-tag {
        font-size: 9px !important;
        padding: 1px 4px !important;
        margin-bottom: 3px !important;
    }


    /* --- E. 灯箱移动端优化 (LightGallery Mobile) --- */
    /* 确保底部的文字栏不挡住图片太多 */
    .lg-sub-html {
        padding: 20px 15px 15px 15px !important;
    }

    .lg-sub-html h4 {
        font-size: 20px !important;
        line-height: 28px !important;
        font-weight: 500;
    }

    .lg-sub-html p {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}

/* ============================================================
   V2 Gallery Overrides
   说明：
   - 画廊页重点统一筛选按钮、卡片圆角和 hover 阴影。
   ============================================================ */

.tpa-gallery-section {
    background-color: var(--v2-bg-primary);
}

.tpa-filter-btn {
    border-color: var(--v2-bg-divider);
    color: var(--v2-text-secondary);
    border-radius: var(--v2-radius-pill);
}

.tpa-filter-btn:hover {
    background: rgba(var(--v2-primary-500-rgb), 0.05);
    border-color: var(--v2-primary-500);
    color: var(--v2-primary-500);
}

.tpa-filter-btn.active {
    background: var(--v2-primary-500);
    border-color: var(--v2-primary-500);
    box-shadow: var(--v2-shadow-card);
}

.tpa-gallery-item a {
    border-radius: var(--v2-radius-lg);
    background: var(--v2-bg-content) !important;
    box-shadow: var(--v2-shadow-card);
}

.tpa-gallery-item a:hover {
    box-shadow: var(--v2-shadow-card-hover);
    transform: none;
}

/* LightGallery hides overflow on each list item, which clips the card shadow. */
.demo-gallery > ul > .tpa-gallery-item {
    overflow: visible;
}

.tpa-gallery-item:hover > a,
.tpa-gallery-item:focus-within > a {
    box-shadow: var(--v2-shadow-card-hover);
}

@media (hover: hover) {
    .tpa-gallery-item:hover > a,
    .tpa-gallery-item:focus-within > a,
    .tpa-gallery-item:hover > .tpa-gallery-card-like,
    .tpa-gallery-item:focus-within > .tpa-gallery-card-like {
        transform: translateY(-5px);
    }
}

/* ============================================================
   14. Gallery Likes
   说明：
   - 点赞按钮由 gallery.js 动态注入，英文页和多语言静态页共享同一套样式；
   - 列表按钮固定在卡片右下角，避免影响现有标题、作者和分类标签；
   - 灯箱按钮放在说明区设备信息下方，与列表按钮共享状态和交互语义。
   ============================================================ */

.tpa-gallery-item {
    position: relative;
}

.tpa-gallery-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-spacing-xs);
    min-height: 34px;
    padding: 0 var(--v2-spacing-md);
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.22);
    border-radius: var(--v2-radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--v2-primary-600);
    font-size: var(--v2-font-size-sm);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(var(--v2-bg-dark-rgb), 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.tpa-gallery-like-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--v2-primary-500-rgb), 0.45);
    background: var(--v2-bg-content);
    color: var(--v2-primary-500);
}

.tpa-gallery-like-btn.is-liked {
    border-color: rgba(var(--v2-primary-700-rgb), 0.22);
    background: rgba(var(--v2-primary-500-rgb), 0.10);
    color: var(--v2-primary-700);
}

.tpa-gallery-like-btn.is-loading {
    opacity: 0.68;
    cursor: wait;
    pointer-events: none;
}

.tpa-gallery-like-btn:disabled {
    cursor: wait;
}

.tpa-gallery-like-btn i {
    color: inherit;
    font-size: 1em;
}

.tpa-gallery-like-count {
    color: inherit;
}

.tpa-gallery-card-like {
    position: absolute;
    right: calc((var(--bs-gutter-x, 1.5rem) * 0.5) + var(--v2-spacing-sm));
    bottom: var(--v2-spacing-sm);
    z-index: 4;
}

/* 列表卡片覆盖在作品缩略图上，使用高对比深色玻璃底避免与星云背景混在一起。 */
.tpa-gallery-card-like.tpa-gallery-like-btn {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(var(--v2-bg-dark-rgb), 0.72);
    color: var(--v2-text-inverse);
    box-shadow: 0 2px 8px rgba(var(--v2-bg-dark-rgb), 0.26);
}

.tpa-gallery-card-like.tpa-gallery-like-btn:hover {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(var(--v2-bg-dark-rgb), 0.84);
    color: var(--v2-text-inverse);
}

/* 已点赞状态使用实色主蓝底，保证图标和数字在暗色/红色作品图上都清晰可见。 */
.tpa-gallery-card-like.tpa-gallery-like-btn.is-liked {
    border-color: rgba(255, 255, 255, 0.32);
    background: var(--v2-primary-700);
    color: var(--v2-text-inverse);
    box-shadow: 0 2px 10px rgba(var(--v2-primary-700-rgb), 0.32);
}

.tpa-gallery-lightbox-like-wrap {
    margin-top: var(--v2-spacing-md);
}

.tpa-gallery-lightbox-like {
    min-height: var(--v2-button-height);
    padding: 0 var(--v2-spacing-lg);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--v2-text-inverse);
    box-shadow: none;
}

.tpa-gallery-lightbox-like:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--v2-text-inverse);
}

.tpa-gallery-lightbox-like.is-liked {
    background: rgba(var(--v2-primary-500-rgb), 0.26);
    border-color: rgba(var(--v2-primary-500-rgb), 0.48);
    color: var(--v2-text-inverse);
}

@media (max-width: 767.98px) {
    .tpa-gallery-card-like {
        right: 10px;
        bottom: 7px;
        min-height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }}

/* 灯箱“仅看图片”模式：隐藏说明和缩略图，并释放全部图片空间。 */
.lg-outer.tpa-gallery-image-only .lg-sub-html,
.lg-outer.tpa-gallery-image-only .lg-thumb-outer,
.lg-outer.tpa-gallery-image-only .lg-toogle-thumb {
    display: none !important;
}

.lg-outer.tpa-gallery-image-only .lg-img-wrap,
.lg-outer.tpa-gallery-image-only .lg-video-cont {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

.lg-outer.tpa-gallery-image-only .lg-toolbar {
    width: 100% !important;
}

.lg-outer.tpa-gallery-image-only .lg-actions .lg-next {
    right: 20px !important;
}

.tpa-gallery-image-only-toggle {
    cursor: pointer;
}

.tpa-gallery-image-only-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -6px;
}

@media (max-width: 767.98px) {
    .tpa-gallery-filter {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tpa-gallery-filter::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .tpa-filter-btn,
    .tpa-filter-btn:first-child {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-bottom: 0 !important;
        padding: 8px 14px !important;
        border-radius: var(--v2-radius-pill, 999px) !important;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}