a {
    text-decoration:none;
    

}
.project {
    margin: 100px 0;
    min-height: calc(100vh - 450px);
}
.project-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3列 */
    gap: 40px; /* 网格间距，可根据需要调整 */
    max-width: 1200px; /* 最大宽度以避免过宽铺满 */
    margin: 0 auto;
    overflow: hidden;
    justify-items: center; /* 居中每个子项 */
}
.project-item {
    position: relative; /* 创建层叠上下文 */
    z-index: 1;
    height: 300px;
    width: 100%; /* 让网格列控制宽度，卡片自身为流式宽度 */
    background-color: #fff;
    overflow: hidden;
    border-radius: 16px; /* 确保子层被裁切，不会突出来 */
}

/* 把背景放在最上层：使用伪元素作为覆盖层（top layer），但不阻塞鼠标事件 */
.project-item::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background-image: url('/wp-content/themes/ITStudio/static/img/background.png');
    background-size: cover;
    background-position: bottom;
    z-index: 1; /* 放在图片之上但低于文字层，文字层将有更高的 z-index */
    pointer-events: none; /* 不阻塞点击/悬停 */
    border-radius: 16px;
}

/* 背景层 */
.project-item-img {
    position: relative; /* 保持图片容器定位，但不再作为背景图层 */
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* 文字层：z-index 设为较低值，背景伪元素位于最上层 */
.project-item-text{
    position: relative;
    z-index: 3; /* 保持在图片和伪背景之上，确保文字可见 */
}

.project-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持裁切，填满容器 */
    border-radius: 16px;
}
.project-item-text {
    position: relative;
    bottom: 70px;
    left: 20px;
    margin: 0 10px;
    font-size: 16px;
    color: #fff;
}


@media screen and (max-width: 1145px) {
    /* 中等屏：两列布局，卡片自适应宽度以避免单行显示不全 */
    .project-container {
        width: calc(100% - 20px);
        gap: 28px;
        justify-items: center;
        margin: 0 auto;
    }

    .project-item {
        width: 100%;
        max-width: 480px; /* 控制卡片最大宽度，避免超出容器 */
        margin: 16px 0;
    }
    .project-item-img {
        width: 100%;
    }
    .project-item:hover .project-item-text {
        display: block;
    }
    .project {
    min-height: calc(100vh - 365px);
}
}

@media screen and (max-width: 768px) {
    .project-item-text {
        font-size: 14px;
    }

    /* 切换为单列布局：卡片铺满容器宽度，图片固定高度以保证一致裁切 */
    .project-item {
        height: auto; /* 由内容撑开 */
        width: 100%;
        max-width: 650px; /* 限制最大宽度，居中显示 */
        margin: 12px 0;
    }
    .project-item-img {
        width: 100%;
    }
    .project {
        margin: 100px 0 0 0;
    }
    .project-container {
        width: calc(100% - 40px);
        grid-template-columns: 1fr; /* 单列 */
        gap: 20px;
        justify-items: center; /* 卡片居中 */
        margin: 0 auto;
    }
}
@media screen and (max-width: 667px) {
    .project-container {
        grid-template-columns: 1fr; /* 确保更小屏幕仍为单列 */
        width: calc(100% - 24px);
        gap: 16px;
        justify-items: center;
    }
}