/*
 * Layout Styles for 广东中证司法鉴定中心网站
 * 定义网站的基础布局、网格系统和容器
 */

/* === 基础容器 === */
.container {
    width: 100%;
    margin: 0 auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

/* 响应式容器尺寸 */
@media (min-width: 640px) {
    .container {
        max-width: var(--container-sm);
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: var(--container-2xl);
    }
}

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

/* 预定义网格列数 */
.grid-cols-1 { grid-template-columns: repeat(1, 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); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* 响应式网格 */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* === Flexbox布局 === */
.flex {
    display: flex;
}

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

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

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

/* Flex对齐 */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Flex项目 */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* === 页面布局结构 === */
.page-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--header-background);
    box-shadow: var(--header-shadow);
}

.page-main {
    flex: 1;
}

.page-footer {
    margin-top: auto;
}

/* === Section布局 === */
.section {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}

.section-sm {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}

.section-lg {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
}

.section-xl {
    padding-top: var(--spacing-32);
    padding-bottom: var(--spacing-32);
}

/* === 响应式显示 === */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* 移动端隐藏 */
@media (max-width: 767px) {
    .hidden-mobile { display: none; }
}

/* 桌面端隐藏 */
@media (min-width: 768px) {
    .hidden-desktop { display: none; }
}

/* 平板端显示 */
@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet { display: block; }
}

/* === 间距工具类 === */
/* Margin */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }

.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.pt-4 { padding-top: var(--spacing-4); }
.pt-8 { padding-top: var(--spacing-8); }
.pt-12 { padding-top: var(--spacing-12); }

.pb-4 { padding-bottom: var(--spacing-4); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pb-12 { padding-bottom: var(--spacing-12); }

.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

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

/* === 宽度和高度 === */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

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

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