/* JunYears Portal v5 — Linear Design System */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: #08090a;
}

body {
    background: #08090a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
    background: rgba(113,112,255,0.2);
    color: #f7f8f8;
}

/* Transitions */
a, button {
    transition: all 0.2s ease;
}

/* ===== CSS Custom Properties for Typography ===== */
:root {
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-features: 'cv01', 'ss03';
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 32px;
    --text-4xl: 36px;
    --text-hero: clamp(32px, 6vw, 64px);
    --weight-normal: 400;
    --weight-medium: 510;
    --weight-semibold: 590;
    --leading-tight: 1.1;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --tracking-display: -0.022em;
    --tracking-body: -0.011em;
}

/* ===== Typography Utilities ===== */
.text-primary { font-family: var(--font-primary); font-feature-settings: var(--font-features); }
.text-mono { font-family: var(--font-mono); }

/* ===== 智能响应式布局系统 =====
 * 核心：CSS Grid auto-fit + minmax
 * 卡片根据容器宽度自动决定列数，无需写死
 */

/* 基础行容器：Flexbox 回退 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}

/* 智能网格容器：自动填充列 */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--item-min, 320px)), 1fr));
    gap: var(--gap, 16px);
}

/* 不同场景的最小宽度 */
.grid-auto-sm { --item-min: 240px; }
.grid-auto-md { --item-min: 300px; }
.grid-auto-lg { --item-min: 360px; }
.grid-auto-xl { --item-min: 400px; }

/* 紧凑型网格（用于标签、小卡片） */
.grid-auto-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 8px;
}

/* 弹性 Flex 行：子元素按内容自然排列 */
.flex-auto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 16px);
}

.flex-auto > * {
    flex: 1 1 var(--item-basis, 300px);
    min-width: 0;
}

/* 间隙 */
.g-2 { gap: 12px; --gap: 12px; }
.g-3 { gap: 16px; --gap: 16px; }
.g-4 { gap: 24px; --gap: 24px; }
.g-5 { gap: 32px; --gap: 32px; }

/* 间距系统 */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 32px; }

/* 传统 col 类：保持向后兼容，但内部也用 grid */
.col-2, .col-3, .col-md-4, .col-md-6,
.col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

/* 平板端 */
@media (min-width: 768px) {
    .col-md-4, .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
    .col-md-6, .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
}

/* 电脑端 */
@media (min-width: 1200px) {
    .col-lg-3 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-5 { flex: 0 0 40%; max-width: 40%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}

/* ===== Responsive Section Padding ===== */
section[id] {
    padding: clamp(60px, 10vh, 120px) 0;
}

/* ===== Typography Utils (扩展) ===== */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.weight-normal { font-weight: var(--weight-normal); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }

/* ===== Responsive Container Padding ===== */
@media (max-width: 767px) {
    .container { padding-left: 20px; padding-right: 20px; }
}