/* 
 * Layout.css
 * 这个文件包含网站的基本布局样式，如网格、容器等
 * 将布局与视觉样式分离，方便后续扩展和维护
 */

/* 布局容器 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

/* 网格布局 - 更紧凑的间距 */
.grid {
    display: grid;
}

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

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

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

/* 水平滚动容器 - 用于横向显示内容 */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    padding: 1rem 0;
    margin: 0 auto;
    width: 100%;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    justify-content: center;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.horizontal-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* 横向布局容器 */
.horizontal-layout {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin-bottom: 0;
}

/* 横向部分宽度 */
.horizontal-item {
    flex: 0 0 300px;
    max-width: 300px;
    margin-right: 15px;
}

.horizontal-feature {
    flex: 0 0 250px;
    max-width: 250px;
    margin-right: 15px;
}

.horizontal-step {
    flex: 0 0 290px;
    max-width: 290px;
    margin-right: 15px;
}

.horizontal-testimonial {
    flex: 0 0 400px;
    max-width: 400px;
    margin-right: 15px;
}

.horizontal-pricing {
    flex: 0 0 330px;
    max-width: 330px;
    margin-right: 15px;
}

/* 图像容器样式 - 优化显示效果 */
.image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    max-height: 350px; /* 控制图片容器最大高度 */
}

.image-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 方法说明区图片容器 */
.usage-image-container {
    max-height: 250px;
    margin-bottom: 15px;
}

/* 部分布局 - 减少垂直空间 */
.header {
    padding: 15px 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
}

.hero {
    min-height: 400px;
    padding: 50px 0 60px;
}

.section {
    padding: 3rem 1rem;
    position: relative;
}

.section.compact {
    padding: 1.5rem 1rem;
}

/* 一屏显示区域 */
.section.fullscreen {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer {
    padding: 30px 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-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-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-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; }

/* 减少区域间的间距 */
.section + .section {
    padding-top: 1rem;
}

/* 响应式布局 */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .image-container {
        max-height: 300px;
    }
    
    .horizontal-feature {
        flex: 0 0 230px;
        max-width: 230px;
    }
    
    .horizontal-step {
        flex: 0 0 280px;
        max-width: 280px;
    }
    
    .horizontal-testimonial {
        flex: 0 0 380px;
        max-width: 380px;
    }
}

@media (max-width: 768px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .hero {
        min-height: auto;
        padding: 30px 0 40px;
    }
    
    .section {
        padding: 2rem 0.5rem;
    }
    
    .section.compact {
        padding: 1rem 0.5rem;
    }
    
    .image-container {
        max-height: 250px;
    }
    
    /* 确保水平滚动区域在移动设备上居中 */
    .horizontal-scroll {
        justify-content: flex-start;
        padding: 0.5rem 0;
    }
    
    .horizontal-feature {
        flex: 0 0 220px;
        max-width: 220px;
    }
    
    .horizontal-step {
        flex: 0 0 270px;
        max-width: 270px;
    }
    
    .horizontal-testimonial {
        flex: 0 0 360px;
        max-width: 360px;
    }
    
    .horizontal-pricing {
        flex: 0 0 310px;
        max-width: 310px;
    }
}

@media (max-width: 576px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .hero {
        padding: 25px 0 35px;
    }
    
    .section {
        padding: 30px 0;
    }
    
    .section.compact {
        padding: 20px 0;
    }
    
    .container {
        padding: 0 12px;
    }
    
    .image-container {
        max-height: 200px;
    }
    
    .horizontal-feature {
        flex: 0 0 210px;
        max-width: 210px;
    }
    
    .horizontal-step {
        flex: 0 0 260px;
        max-width: 260px;
    }
    
    .horizontal-testimonial {
        flex: 0 0 330px;
        max-width: 330px;
    }
    
    .horizontal-pricing {
        flex: 0 0 290px;
        max-width: 290px;
    }
}

/* 功能特点和价格特定的水平滚动容器样式 */
#features .horizontal-scroll,
#pricing .horizontal-scroll {
    justify-content: center !important;
    margin: 0 auto;
    max-width: 100%;
    padding-left: calc(50% - 500px);
    padding-right: calc(50% - 500px);
}

/* 确保功能卡片在横向滚动时保持居中 */
.horizontal-feature {
    scroll-snap-align: center;
}

.horizontal-pricing {
    scroll-snap-align: center;
}

/* 响应式调整 - 居中优化 */
@media (max-width: 1024px) {
    #features .horizontal-scroll,
    #pricing .horizontal-scroll {
        padding-left: calc(50% - 400px);
        padding-right: calc(50% - 400px);
    }
}

@media (max-width: 768px) {
    #features .horizontal-scroll,
    #pricing .horizontal-scroll {
        padding-left: 0;
        padding-right: 0;
        justify-content: flex-start !important;
    }
    
    .section {
        padding: 2rem 0.5rem;
    }
    
    .section.compact {
        padding: 1rem 0.5rem;
    }
}