/**
 * 唐飚严选子主题 - 自定义样式
 * 
 * 包含品牌特色样式和响应式布局
 */

/* 品牌色彩变量 */
:root {
    --tangbiao-primary: #d4af37;     /* 金色 - 主色调 */
    --tangbiao-secondary: #8b4513;   /* 棕色 - 辅助色 */
    --tangbiao-accent: #ff6b35;      /* 橙色 - 强调色 */
    --tangbiao-text: #333333;        /* 深灰 - 文字色 */
    --tangbiao-bg: #ffffff;          /* 白色 - 背景色 */
    --tangbiao-light: #f8f8f8;      /* 浅灰 - 浅背景 */
    --tangbiao-border: #e0e0e0;     /* 边框色 */
}

/* 全局容器样式 */
.tangbiao-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 响应式网格布局 */
.tangbiao-grid {
    display: grid;
    gap: 20px;
}

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

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

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

/* 卡片样式 */
.tangbiao-card {
    background: var(--tangbiao-bg);
    border: 1px solid var(--tangbiao-border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tangbiao-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 按钮样式 */
.tangbiao-btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--tangbiao-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.tangbiao-btn:hover {
    background: var(--tangbiao-secondary);
    color: white;
}

.tangbiao-btn-secondary {
    background: var(--tangbiao-accent);
}

.tangbiao-btn-secondary:hover {
    background: #e55a2b;
}

/* 响应式媒体查询 */

/* 平板端 (768px - 1024px) */
@media (max-width: 1024px) {
    .tangbiao-container {
        padding: 0 15px;
    }
    
    .tangbiao-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tangbiao-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 移动端 (最大768px) */
@media (max-width: 768px) {
    .tangbiao-container {
        padding: 0 10px;
    }
    
    .tangbiao-grid,
    .tangbiao-grid-2,
    .tangbiao-grid-3,
    .tangbiao-grid-4 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tangbiao-card {
        padding: 15px;
    }
    
    .tangbiao-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* 小屏移动端 (最大480px) */
@media (max-width: 480px) {
    .tangbiao-container {
        padding: 0 8px;
    }
    
    .tangbiao-card {
        padding: 12px;
    }
    
    .tangbiao-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* 大屏幕优化 (最小1200px) */
@media (min-width: 1200px) {
    .tangbiao-container {
        padding: 0 40px;
    }
    
    .tangbiao-grid {
        gap: 30px;
    }
}