/**
 * 布局样式 - 容器宽度与响应式断点
 *
 * 动态变量 (--tah-container-pc, --tah-container-tablet,
 * --tah-container-mobile, --tah-form-max-width) 由 PHP 在
 * tah_output_dynamic_css() 中通过内联 <style> 输出到 :root。
 *
 * @package Xuhuan
 * @since 1.0.0
 */

/* ==========================================================================
   PC端布局 (>1400px)
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-pc);
    margin: 0 auto;
    padding: 0 24px;
}

.submit-form-wrapper,
.login-form-wrapper,
.register-form-wrapper {
    max-width: var(--form-max-width);
    margin: 0 auto;
}

/* 首页网格布局 */
.models-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ==========================================================================
   平板端布局 (768px - 1400px)
   ========================================================================== */
@media (max-width: 1400px) {
    .container {
        max-width: var(--container-tablet);
        padding: 0 20px;
    }
}

@media (max-width: 960px) {
    .container {
        max-width: 100%;
        padding: 0 16px;
    }
    
    .models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ==========================================================================
   移动端布局 (<768px)
   ========================================================================== */
@media (max-width: 768px) {
    .container {
        max-width: var(--tah-container-mobile);
        padding: 0 16px;
    }
    
    .models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* 隐藏桌面端元素 */
    .hide-mobile {
        display: none !important;
    }
    
    /* 显示移动端元素 */
    .show-mobile {
        display: block !important;
    }
    
    /* Hero区域适配 */
    .hero-section {
        padding: 40px 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    /* 表单适配 */
    .submit-form {
        padding: 20px;
        border-radius: 12px;
    }
    
    .form-section {
        padding: 16px;
    }
    
    /* 步骤指示器 */
    .submit-steps {
        padding: 12px;
        overflow-x: auto;
    }
    
    .submit-steps .step-label {
        display: none;
    }
    
    /* 按钮适配 */
    .btn-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-group .btn {
        width: 100%;
    }
}

/* ==========================================================================
   小屏移动端 (<480px)
   ========================================================================== */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    .models-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* 更紧凑的卡片 */
    .model-card {
        border-radius: 8px;
    }
    
    .category-card {
        padding: 16px 12px;
    }
    
    /* 搜索框适配 */
    .search-box {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-box input,
    .search-box button {
        width: 100%;
    }
}