/* 布局样式 - 页面整体布局和网格系统 */

/* 基础布局 */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

/* 网格系统 */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

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

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

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

.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

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

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

.flex--center {
    align-items: center;
    justify-content: center;
}

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

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

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

.flex--1 {
    flex: 1;
}

.flex--2 {
    flex: 2;
}

.flex--3 {
    flex: 3;
}

/* 间距工具类 */
.gap--xs { gap: var(--spacing-xs); }
.gap--sm { gap: var(--spacing-sm); }
.gap--md { gap: var(--spacing-md); }
.gap--lg { gap: var(--spacing-lg); }
.gap--xl { gap: var(--spacing-xl); }
.gap--2xl { gap: var(--spacing-2xl); }

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

/* 显示工具类 */
.d--block { display: block; }
.d--inline { display: inline; }
.d--inline-block { display: inline-block; }
.d--flex { display: flex; }
.d--grid { display: grid; }
.d--none { display: none; }

/* 位置工具类 */
.position--relative { position: relative; }
.position--absolute { position: absolute; }
.position--fixed { position: fixed; }
.position--sticky { position: sticky; }

/* 溢出处理 */
.overflow--hidden { overflow: hidden; }
.overflow--auto { overflow: auto; }
.overflow--scroll { overflow: scroll; }
.overflow--visible { overflow: visible; }

/* 宽度工具类 */
.w--full { width: 100%; }
.w--auto { width: auto; }
.w--screen { width: 100vw; }

/* 高度工具类 */
.h--full { height: 100%; }
.h--auto { height: auto; }
.h--screen { height: 100vh; }

/* 边距工具类 */
.m--0 { margin: 0; }
.m--auto { margin: auto; }
.m--xs { margin: var(--spacing-xs); }
.m--sm { margin: var(--spacing-sm); }
.m--md { margin: var(--spacing-md); }
.m--lg { margin: var(--spacing-lg); }
.m--xl { margin: var(--spacing-xl); }
.m--2xl { margin: var(--spacing-2xl); }

.mt--0 { margin-top: 0; }
.mt--auto { margin-top: auto; }
.mt--xs { margin-top: var(--spacing-xs); }
.mt--sm { margin-top: var(--spacing-sm); }
.mt--md { margin-top: var(--spacing-md); }
.mt--lg { margin-top: var(--spacing-lg); }
.mt--xl { margin-top: var(--spacing-xl); }
.mt--2xl { margin-top: var(--spacing-2xl); }

.mb--0 { margin-bottom: 0; }
.mb--auto { margin-bottom: auto; }
.mb--xs { margin-bottom: var(--spacing-xs); }
.mb--sm { margin-bottom: var(--spacing-sm); }
.mb--md { margin-bottom: var(--spacing-md); }
.mb--lg { margin-bottom: var(--spacing-lg); }
.mb--xl { margin-bottom: var(--spacing-xl); }
.mb--2xl { margin-bottom: var(--spacing-2xl); }

.ml--0 { margin-left: 0; }
.ml--auto { margin-left: auto; }
.ml--xs { margin-left: var(--spacing-xs); }
.ml--sm { margin-left: var(--spacing-sm); }
.ml--md { margin-left: var(--spacing-md); }
.ml--lg { margin-left: var(--spacing-lg); }
.ml--xl { margin-left: var(--spacing-xl); }
.ml--2xl { margin-left: var(--spacing-2xl); }

.mr--0 { margin-right: 0; }
.mr--auto { margin-right: auto; }
.mr--xs { margin-right: var(--spacing-xs); }
.mr--sm { margin-right: var(--spacing-sm); }
.mr--md { margin-right: var(--spacing-md); }
.mr--lg { margin-right: var(--spacing-lg); }
.mr--xl { margin-right: var(--spacing-xl); }
.mr--2xl { margin-right: var(--spacing-2xl); }

/* 内边距工具类 */
.p--0 { padding: 0; }
.p--xs { padding: var(--spacing-xs); }
.p--sm { padding: var(--spacing-sm); }
.p--md { padding: var(--spacing-md); }
.p--lg { padding: var(--spacing-lg); }
.p--xl { padding: var(--spacing-xl); }
.p--2xl { padding: var(--spacing-2xl); }

.pt--0 { padding-top: 0; }
.pt--xs { padding-top: var(--spacing-xs); }
.pt--sm { padding-top: var(--spacing-sm); }
.pt--md { padding-top: var(--spacing-md); }
.pt--lg { padding-top: var(--spacing-lg); }
.pt--xl { padding-top: var(--spacing-xl); }
.pt--2xl { padding-top: var(--spacing-2xl); }

.pb--0 { padding-bottom: 0; }
.pb--xs { padding-bottom: var(--spacing-xs); }
.pb--sm { padding-bottom: var(--spacing-sm); }
.pb--md { padding-bottom: var(--spacing-md); }
.pb--lg { padding-bottom: var(--spacing-lg); }
.pb--xl { padding-bottom: var(--spacing-xl); }
.pb--2xl { padding-bottom: var(--spacing-2xl); }

.pl--0 { padding-left: 0; }
.pl--xs { padding-left: var(--spacing-xs); }
.pl--sm { padding-left: var(--spacing-sm); }
.pl--md { padding-left: var(--spacing-md); }
.pl--lg { padding-left: var(--spacing-lg); }
.pl--xl { padding-left: var(--spacing-xl); }
.pl--2xl { padding-left: var(--spacing-2xl); }

.pr--0 { padding-right: 0; }
.pr--xs { padding-right: var(--spacing-xs); }
.pr--sm { padding-right: var(--spacing-sm); }
.pr--md { padding-right: var(--spacing-md); }
.pr--lg { padding-right: var(--spacing-lg); }
.pr--xl { padding-right: var(--spacing-xl); }
.pr--2xl { padding-right: var(--spacing-2xl); }

/* 响应式网格 */
@media (max-width: 640px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
    
    .flex--wrap {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 打印样式 */
@media print {
    .header,
    .footer,
    .nav__toggle {
        display: none;
    }
    
    .main {
        padding: 0;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
}