/* 专业布局框架 - 网站架构规范 */

/* ========================================
   1. 布局基础设置
   ======================================== */

/* 容器系统 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-fluid {
    width: 100%;
    padding: 0 20px;
}

/* 网格系统 */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 弹性布局 */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* ========================================
   2. 页面结构规范
   ======================================== */

/* 页面主体结构 */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    width: 100%;
}

/* 导航栏布局 - 基础结构已在styles.css中定义 */
/* 保留这里仅作为备注，实际样式在styles.css中 */

/* 主内容区域 */
.content-wrapper {
    margin-top: 80px; /* 导航栏高度补偿 */
}

/* 页脚布局 */
.footer {
    margin-top: auto;
    width: 100%;
}

/* ========================================
   3. 组件布局规范
   ======================================== */

/* 卡片组件 */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-header {
    flex-shrink: 0;
}

.card-body {
    flex: 1;
}

.card-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* 网格卡片容器 */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

/* 列表布局 */
.list-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.list-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ========================================
   4. 响应式断点
   ======================================== */

/* 大屏幕 (1200px+) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 中等屏幕 (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 平板 (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 移动端 (< 768px) */
@media (max-width: 767px) {
    .container {
        padding: 0 15px;
    }
    
    /* 移动端网格全部变为单列 */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* 导航栏移动端布局 */
    .nav-links {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: linear-gradient(135deg, rgba(139, 111, 71, 0.98) 0%, rgba(107, 93, 66, 0.98) 100%);
        flex-direction: column;
        padding: 2rem;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    /* 内容区域调整 */
    .content-wrapper {
        margin-top: 60px;
    }
    
    /* 标题字体大小调整 */
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.5rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    /* 按钮组移动端堆叠 */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .btn {
        width: 100%;
    }
    
    /* 标签页按钮移动端滚动 */
    .tab-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .tab-buttons::-webkit-scrollbar {
        height: 5px;
    }
    
    /* 统计数据移动端布局 */
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* 小屏手机 (< 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.2rem !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    section {
        padding: 60px 0;
    }
}

/* ========================================
   5. 布局工具类
   ======================================== */

/* 间距 */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 3rem; }

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 显示控制 */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* 溢出控制 */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ========================================
   6. 打印样式
   ======================================== */

@media print {
    .no-print {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
    }
    
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}