/* define container */
.my_post_container {
            margin: 0 auto;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            min-width: 900px; /* 最小宽度，防止在小屏幕上过分压缩 */        
            max-width: 1500px;
            overflow: hidden;
            background-color: s#ffffff;
        }

/* define container */
.head_css{
            text-align: center;
            padding: 40px 20px;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
}

.section-divider {
    height: 3px;
    background: linear-gradient(to right, transparent, #6e8efb, transparent);
    margin: 50px 0;
    border: none;
}

.section-title {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            color: #444;
            font-size: 2.5rem;
}
        
.section-title i {
    margin-right: 15px;
    color: #6e8efb;
    font-size: 2rem;
}

/* AI, English, Economy Sections */
.blog-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-item {
            display: flex;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #eaeaea;
}

.blog-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
.blog-image {
    flex: 0 0 280px;
    height: 180px;
    overflow: hidden;
}

.blog-image img {
            width: 90%;
            height: 90%;
            object-fit: contain;
            transition: transform 0.5s ease;
        }

.blog-item:hover .blog-image img {
            transform: scale(1.05);
        }
        
.blog-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
        
.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
}
        
.blog-title {
            font-size: 1.4rem;
            color: #333;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease;
}
        
.blog-title:hover {
            color: #6e8efb;
}
        
.publish-date {
            font-size: 0.85rem;
            color: #777;
            white-space: nowrap;
            margin-left: 15px;
}
        
.tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: auto;
}
        
.tag {
            background-color: #eef2ff;
            color: #5a67d8;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            transition: background-color 0.2s ease;
}
        
.tag:hover {
            background-color: #dde4ff;
            cursor: pointer;
}



/* Books Section */
.books-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 25px;
}
        
.book-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            border: 1px solid #eee;
}
        
.book-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
        
.book-cover {
            height: auto;
            overflow: hidden;
}
        
.book-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
}
        
.book-item:hover .book-cover img {
            transform: scale(1.08);
}
        
.book-title {
            padding: 12px 10px;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
            color: #333;
            text-decoration: none;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
}
        
.book-title:hover {
            color: #6e8efb;
}


/* Videos Section */
.videos-section {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
            gap: 25px;
}
        
.video-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            border: 1px solid #eee;
}
        
.video-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
        
.video-cover {
            height: 300px;
            overflow: hidden;
            position: relative;
}
        
.video-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
}
        
.video-item:hover .video-cover img {
            transform: scale(1.08);
}
        
.platform-icon {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 500;
}
        
.youtube {
            background: rgba(255, 0, 0, 0.8);
}
        
.bilibili {
            background: rgba(0, 169, 255, 0.8);
}
        
.video-title {
            padding: 12px 10px;
            text-align: center;
            font-size: 0.9rem;
            color: #333;
            text-decoration: none;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
}
        
.video-title:hover {
            color: #6e8efb;
}

.bilibili-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://s1.aigei.com/src/img/png/ca/ca068f4865cb43158344b81d0ba21b8d.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:L3eEBqBu3r7EVqzJBPnOKogN2eU=");
    background-size: contain;
    background-repeat: no-repeat;
}

.youtube-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../img/youtube_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
}
        
        
@media (max-width: 768px) {
            .my_post_container {
            margin: 0 auto;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            min-width: auto; /* 最小宽度，防止在小屏幕上过分压缩 */
            max-width: 1500px;
            overflow: hidden;
            background-color: #ffffff;}

            .head_css{
            text-align: center;
            padding: 40px 20px;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            font-size: 12px;
}

    /* AI, English, Economy Sections */
            .blog-section {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .blog-item {
            display: flex;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #eaeaea;
            align-items: flex-start;
            gap: 10px;
            }

            .blog-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

.blog-image {
            flex: 0 0 120px; /* 固定图片容器宽度 */
            height: 110px;
            overflow: hidden;
            cursor: pointer;
}

.blog-image img {
            width: 100%;
            height: 100%;
            object-fit:scale-down;
            transition: transform 0.5s ease;
        }

.blog-item:hover .blog-image img {
            transform: scale(1.05);
        }

.blog-content {
    height: auto;
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
            margin-bottom: 10px;
            flex-direction: column; /* 标题和日期改为垂直排列 */
}

.publish-date {
                margin-left: 0;
                margin-top: 5px;
            }

.blog-title {
            font-size: 1.3rem;
            color: #333;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease;
}

.tag {
            background-color: #eef2ff;
            color: #5a67d8;
            padding: 0px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            transition: background-color 0.2s ease;
}
        .books-section {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
            gap: 8px;
}

        .book-cover {
            height: 112px;
            overflow: hidden;
            position: relative;
        }


.videos-section {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
            gap: 8px;
}
.video-cover {
            height: 112px;
            overflow: hidden;
            position: relative;
}
}