/*
Theme Name: Begin
Theme URI: https://zmingcx.com/begin.html
Author: 知更鸟
Author URI: https://zmingcx.com/
Description: HTML5+CSS3 响应式设计，博客、杂志、图片、公司企业多种布局可选，集成SEO自定义功能，丰富的主题选项，众多实用小工具。
Version: 2025/06/17
Requires at least: 5.4
Requires PHP: 7或更高
*
/*-- 样式文件位置 "css/be.css" --*/

/*分类瀑布流-----------------------------------------------------------------------------------------------------------*/
/* 瀑布流容器 */
.masonry-container {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    padding: 0px 0;
}

/* 瀑布流网格 */
.masonry-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 保证列间距 */
}

/* 瀑布流项目 */
.masonry-item {
    width: calc(20% - 16px); /* 默认：5列布局，16px 预留给 margin */
    margin: 8px;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}



/* 图片悬停放大效果 */
.masonry-link {
    display: block; /* 确保链接充满 masonry-item */
    overflow: hidden; /* 避免放大后溢出 */
    border-radius: 12px;
}

.masonry-link img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 🌟 悬停时放大并添加阴影 */
.masonry-link:hover img {
    transform: scale(1.03); /* 适度放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 轻微阴影提升层次感 */
}

/* 加载提示 */
.loading-more {
    text-align: center;
    padding: 20px;
    font-size: 16px;
    color: #888;
}

/* 🌟 响应式优化 */

/* 平板端 (3列) */
@media screen and (max-width: 1023px) {
    .masonry-item {
        width: calc(33.33% - 16px); /* 3列布局 */
    }
}

/* 手机端 (2列) */
@media screen and (max-width: 767px) {
    .masonry-item {
        width: calc(50% - 16px); /* 2列布局 */
    }
}
/*瀑布流加载特效-----------*/
.loading-more {
    display: none;
    text-align: center;
    padding: 20px;
}

.win11-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #0078D7; /* Windows 蓝色主色 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 暗色模式适配（可选） */
@media (prefers-color-scheme: dark) {
    .win11-spinner {
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top-color: #00B7FF;
    }
}
/*瀑布流加载特效-----------*/
/*分类瀑布流-----------------------------------------------------------------------------------------------------------*/

/* 图片布局缩略图动画效果------------------------------------------------------------------------------------------------- */
.custom-img-card {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 2 / 3;
	margin: 0;
}

.custom-img-card img.custom-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease-out;
	will-change: transform;
}
/* PC端悬停时缩放 */
@media (hover: hover) and (pointer: fine) {
	.custom-img-card:hover img.custom-img {
		transform: scale(1.03);
	}
}

/* 遮罩层，放在图片之上 */
.custom-img-card .custom-img-overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
	z-index: 1;
	pointer-events: none;
}

/* ✅ 标题必须定位，并放在 z-index 更高的层级 */
.custom-img-card .card-title {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	padding: 0 12px;
	box-sizing: border-box;
	z-index: 3;

	/* 引用原 grid-title 的视觉风格 */
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 25px;
	overflow: hidden;

	/* 可选增强可读性 */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.custom-img-card .card-title a {
	color: #fff; /* 或使用 inherit 看你主题风格 */
	text-decoration: none;
	display: block;

/* ✅ 限制单行显示 + 超出省略号 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 图片布局缩略图动画效果------------------------------------------------------------------------------------------------- */