﻿/*心理科普-分页列表，专用样式*/

/* 科普知识列表 */
.psychology-list { background: white; border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }

.psychology-item { display: flex; padding: 20px 0; border-bottom: 1px solid #e0e0e0; gap: 20px; transition: all 0.3s ease; }
.psychology-item:last-child { border-bottom: none; }

.psychology-item:hover { transform: translateX(5px); }

.psychology-media { flex-shrink: 0; width: 280px; height: 200px; border-radius: 8px; overflow: hidden; position: relative; }

.psychology-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

.psychology-item:hover .psychology-img { transform: scale(1.05); }

.video-overlay { position: relative; width: 100%; height: 100%; }

.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.3s ease; z-index: 2; }

.psychology-item:hover .play-icon { background: var(--primary-color); transform: translate(-50%, -50%) scale(1.1); }

.psychology-content { flex: 1; display: flex; flex-direction: column; }

.psychology-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }

.psychology-title { font-size: 1.3rem; font-weight: 700; color: var(--neutral-700); margin: 0 0 10px 0; line-height: 1.4; }

.psychology-category { padding: 3px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: 500; margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.psychology-excerpt { font-size: 1rem; line-height: 1.6; color: var(--neutral-600); margin-bottom: 15px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.psychology-footer { display: flex; justify-content: space-between; align-items: center; }

.psychology-meta { display: flex; gap: 20px; font-size: 0.9rem; color: var(--neutral-600); }

.meta-item { display: flex; align-items: center; }
.meta-item i { margin-right: 5px; }

/*特有样式：分页*/
.pagination-container { margin-top:20px;}


/* 响应式设计 */
@media (max-width: 1200px) {
    .content-row { flex-direction: column; }

    .content-right { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }

    .sidebar-section { flex: 1; min-width: calc(50% - 10px); }

    .featured-content { flex-direction: column; }

    .featured-large { height: 250px; }

    .featured-sidebar { display: flex; flex-wrap: wrap; gap: 10px; }

    .featured-small { flex: 1; min-width: calc(50% - 5px); }
}

@media (max-width: 992px) {
    .category-nav { gap: 10px; }

    .category-item { padding: 10px 15px; min-width: 80px; }

    .category-item i { font-size: 1.2rem; margin-bottom: 5px; }

    .category-item span { font-size: 0.8rem; }

    .psychology-item { flex-direction: column; align-items: center; }

    .psychology-media { width: 100%; height: 250px; }
}

@media (max-width: 768px) {
    .section-title { font-size: 2rem; }

    .sidebar-section { min-width: 100%; }

    .search-bar { max-width: 100%; margin: 0 20px; }

    .featured-small { min-width: 100%; }

    .psychology-header { flex-direction: column; align-items: flex-start; gap: 10px; }

    .psychology-footer { flex-direction: column; align-items: flex-start; gap: 15px; }

    .psychology-meta { gap: 15px; flex-wrap: wrap; }
}

@media (max-width: 576px) {
    .section-title { font-size: 1.7rem; }

    .category-nav { justify-content: flex-start; overflow-x: auto; padding: 0 15px; }

    .category-item { min-width: 70px; padding: 10px; }

    .category-item span { font-size: 0.75rem; }

    .psychology-media { height: 200px; }

    .featured-large { height: 200px; }

    .featured-title { font-size: 1.1rem; }

    .featured-excerpt { font-size: 0.8rem; }

    .qrcode { width: 150px; height: 150px; }
}