/* ============================================
   中小学教育风格设计系统 - Education Style Design System
   ============================================ */

:root {
    /* 教育风格颜色 - 温暖、友好、专业 */
    --magazine-primary: #1e3a5f;        /* 深蓝色 - 知识、专业 */
    --magazine-secondary: #2c5282;     /* 中蓝色 */
    --magazine-accent: #3182ce;         /* 亮蓝色 - 活力、成长 */
    --magazine-accent-secondary: #f59e0b; /* 橙色 - 温暖、活力 */
    --magazine-accent-success: #10b981;  /* 绿色 - 成长、成功 */
    --magazine-text: #2d3748;          /* 深灰蓝 - 易读 */
    --magazine-text-light: #718096;    /* 中灰蓝 */
    --magazine-bg: #f7fafc;            /* 浅灰蓝 - 柔和背景 */
    --magazine-bg-alt: #edf2f7;        /* 稍深背景 */
    --magazine-border: #cbd5e0;        /* 柔和边框 */
    
    /* 教育风格字体 - 清晰、易读 */
    --magazine-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --magazine-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* 教育风格间距 */
    --magazine-gap-large: 60px;
    --magazine-gap-medium: 40px;
    --magazine-gap-small: 20px;
    
    /* 教育风格圆角 */
    --magazine-radius: 12px;
    --magazine-radius-large: 16px;
    --magazine-radius-small: 8px;
}

/* 全局教育风格 */
body {
    font-family: var(--magazine-font-body);
    color: var(--magazine-text);
    background: var(--magazine-bg);
    line-height: 1.7;
}

/* 教育风格标题 - 清晰、友好 */
.magazine-title {
    font-family: var(--magazine-font-heading);
    font-weight: 600;
    color: var(--magazine-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.magazine-title-large {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.magazine-title-medium {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.magazine-title-small {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.magazine-subtitle {
    font-size: 1.25rem;
    color: var(--magazine-text-light);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* 杂志风格容器 */
.magazine-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--magazine-gap-small);
}

@media (min-width: 768px) {
    .magazine-container {
        padding: 0 var(--magazine-gap-medium);
    }
}

/* 杂志风格网格布局 */
.magazine-grid {
    display: grid;
    gap: var(--magazine-gap-small);
}

.magazine-grid-featured {
    grid-template-columns: 1fr;
    gap: var(--magazine-gap-medium);
}

@media (min-width: 768px) {
    .magazine-grid-featured {
        grid-template-columns: 2fr 1fr;
        gap: var(--magazine-gap-large);
    }
}

.magazine-grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--magazine-gap-small);
}

@media (min-width: 1024px) {
    .magazine-grid-masonry {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: var(--magazine-gap-medium);
    }
}

/* 杂志风格文章卡片 */
.magazine-article {
    position: relative;
    background: var(--magazine-bg);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.magazine-article:hover {
    transform: translateY(-5px);
}

.magazine-article-featured {
    grid-column: span 1;
}

@media (min-width: 768px) {
    .magazine-article-featured {
        grid-column: span 2;
    }
}

.magazine-article-image {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* 3:2 比例 */
    overflow: hidden;
    background: var(--magazine-bg-alt);
}

.magazine-article-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.magazine-article:hover .magazine-article-image img {
    transform: scale(1.05);
}

.magazine-article-content {
    padding: var(--magazine-gap-small);
    background: var(--magazine-bg);
}

.magazine-article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--magazine-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.magazine-article-title {
    font-family: var(--magazine-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--magazine-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.magazine-article-excerpt {
    font-size: 1rem;
    color: var(--magazine-text-light);
    line-height: 1.7;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.magazine-article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--magazine-border);
    font-size: 0.875rem;
    color: var(--magazine-text-light);
}

/* 杂志风格标签 */
.magazine-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--magazine-accent);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
}

/* 杂志风格大标题区域 */
.magazine-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: var(--magazine-bg-alt);
    margin-bottom: var(--magazine-gap-large);
    overflow: hidden;
}

.magazine-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: var(--magazine-gap-large) var(--magazine-gap-small);
}

.magazine-hero-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

@media (min-width: 1024px) {
    .magazine-hero-image {
        opacity: 1;
    }
}

/* 杂志风格列表项 */
.magazine-list-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--magazine-gap-small);
    padding: var(--magazine-gap-small) 0;
    border-bottom: 1px solid var(--magazine-border);
    transition: background 0.3s ease;
}

.magazine-list-item:hover {
    background: var(--magazine-bg-alt);
}

.magazine-list-item-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--magazine-bg-alt);
}

.magazine-list-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.magazine-list-item:hover .magazine-list-item-image img {
    transform: scale(1.1);
}

.magazine-list-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.magazine-list-item-meta {
    font-size: 0.75rem;
    color: var(--magazine-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.magazine-list-item-title {
    font-family: var(--magazine-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--magazine-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.magazine-list-item-excerpt {
    font-size: 0.9375rem;
    color: var(--magazine-text-light);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 杂志风格侧边栏 */
.magazine-sidebar {
    background: var(--magazine-bg-alt);
    padding: var(--magazine-gap-medium);
}

.magazine-sidebar-title {
    font-family: var(--magazine-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--magazine-primary);
    margin-bottom: var(--magazine-gap-small);
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--magazine-accent);
}

.magazine-sidebar-item {
    padding: var(--magazine-gap-small) 0;
    border-bottom: 1px solid var(--magazine-border);
}

.magazine-sidebar-item:last-child {
    border-bottom: none;
}

.magazine-sidebar-item-title {
    font-family: var(--magazine-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--magazine-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.magazine-sidebar-item-meta {
    font-size: 0.75rem;
    color: var(--magazine-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 杂志风格筛选器 */
.magazine-filters {
    background: var(--magazine-bg-alt);
    padding: var(--magazine-gap-medium);
    margin-bottom: var(--magazine-gap-medium);
    border-top: 3px solid var(--magazine-accent);
}

.magazine-filter-group {
    margin-bottom: 0.75rem;
}

.magazine-filter-group:last-child {
    margin-bottom: 0;
}

.magazine-filter-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--magazine-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    display: block;
}

.magazine-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.magazine-filter-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--magazine-bg);
    color: var(--magazine-text);
    border: 1px solid var(--magazine-border);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    border-radius: 3px;
}

.magazine-filter-tag:hover {
    background: var(--magazine-primary);
    color: white;
    border-color: var(--magazine-primary);
}

.magazine-filter-tag.active {
    background: var(--magazine-accent);
    color: white;
    border-color: var(--magazine-accent);
}

/* 杂志风格响应式 */
@media (max-width: 767px) {
    .magazine-title-large {
        font-size: 2.5rem;
    }
    
    .magazine-title-medium {
        font-size: 2rem;
    }
    
    .magazine-grid-featured {
        grid-template-columns: 1fr;
    }
    
    .magazine-list-item {
        grid-template-columns: 1fr;
    }
    
    .magazine-list-item-image {
        aspect-ratio: 16/9;
    }
    
    .magazine-hero-image {
        width: 100%;
        opacity: 0.2;
    }
}

/* 杂志风格动画 */
@keyframes magazineFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.magazine-article,
.magazine-list-item {
    animation: magazineFadeIn 0.6s ease-out;
}

/* 杂志风格分页 - 统一所有分页样式 */
.magazine-pagination,
.pagination-wrapper-magazine,
.search-pagination-magazine,
.member-pagination-magazine {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--magazine-gap-large);
    padding: var(--magazine-gap-medium) 0;
    flex-wrap: wrap;
}

/* 统一所有分页链接和按钮样式 */
.magazine-pagination a,
.magazine-pagination span,
.pagination-wrapper-magazine a,
.pagination-wrapper-magazine span,
.search-pagination-magazine a,
.search-pagination-magazine span,
.member-pagination-magazine a,
.member-pagination-magazine span,
.list-page a,
.list-page span,
.list-page > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 1rem;
    background: var(--magazine-bg);
    color: var(--magazine-text);
    border: 2px solid var(--magazine-border);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    margin: 0 0.25rem;
}

.magazine-pagination a:hover,
.pagination-wrapper-magazine a:hover,
.search-pagination-magazine a:hover,
.member-pagination-magazine a:hover,
.list-page a:hover {
    background: var(--magazine-primary);
    color: white;
    border-color: var(--magazine-primary);
    transform: translateY(-2px);
}

.magazine-pagination .current,
.pagination-wrapper-magazine .current,
.search-pagination-magazine .current,
.member-pagination-magazine .current,
.list-page .current,
.list-page .active {
    background: var(--magazine-accent);
    color: white;
    border-color: var(--magazine-accent);
}

/* 确保分页容器正确显示 */
.list-page {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}