/* =========================================================
   responsive.css — 响应式与主题
   内容：媒体查询（1080/860/640px）/ 滚动渐入动画 / 焦点样式 /
         深色模式 / Container Queries
   来源：原 style.css 1504-1826 行（拆分时未改动任何规则）
   ========================================================= */

/* ===================== Responsive ===================== */
@media (max-width: 1080px) {
    .site-header {
        padding: 0 24px;
    }

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

    .section-title::before,
    .section-title::after {
        display: none;
    }
}

@media (max-width: 860px) {
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(250,247,242,0.98);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 28px rgba(26,26,46,0.1);
        padding: 8px 0;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    }
    .nav.menu-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .nav a {
        display: block;
        padding: 12px 24px;
        font-size: 14px;
        border-left: 2px solid transparent;
    }
    .nav a::before { display: none; }
    .nav a:hover, .nav a.active {
        background: rgba(194,58,48,0.06);
        border-left-color: var(--fire);
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
        display: grid;
        place-content: center;
        gap: 5px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: var(--dim);
    }
    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        transition: transform 0.25s, opacity 0.25s;
    }
    .nav-toggle.menu-open span:first-child { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.menu-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.menu-open span:last-child { transform: translateY(-7px) rotate(-45deg); }

    .hero,
    .page-hero {
        background:
            radial-gradient(60% 50% at 80% 30%, rgba(251, 191, 36, 0.24), transparent 60%),
            radial-gradient(40% 40% at 8% 92%, rgba(101, 163, 13, 0.12), transparent 60%),
            linear-gradient(145deg, #fbf3e7, #faf6ef 66%, #f4ecdf);
    }

    .system-grid,
    .card-grid,
    .spirit-layout,
    .philosophy-grid,
    .two-column,
    .profile-grid,
    .member-layout,
    .info-grid,
    .attribute-grid {
        grid-template-columns: 1fr;
    }

    .member-portrait {
        position: relative;
        top: auto;
        min-height: 380px;
    }
}

@media (max-width: 640px) {
    .site-header {
        height: 60px;
        padding: 0 18px;
    }

    .brand span {
        display: none;
    }

    .brand img {
        width: 32px;
        height: 32px;
    }

    .join-btn {
        min-width: 92px;
        height: 34px;
        font-size: 11px;
    }

    .hero,
    .page-hero {
        min-height: 92vh;
        padding: 100px 22px 62px;
    }

    .page-hero {
        min-height: 56vh;
    }

    .hero p,
    .page-hero p,
    .vision-card p {
        font-size: 16px;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .section {
        padding: 64px 22px;
    }

    .about-card,
    .content-card,
    .vision-card,
    .spirit-slogan,
    .statement {
        padding: 28px;
    }

    .spirit-slogan {
        min-height: 340px;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .info-panel,
    .info-grid,
    .attribute-grid {
        gap: 10px;
    }

    .info-panel {
        padding: 24px;
    }
}

/* ===== 滚动渐入动画（cxjc 风格） ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 焦点样式 ===== */
:focus-visible {
    outline: 2px solid var(--fire-2);
    outline-offset: 2px;
}

/* ===== 深色模式 ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1614;
        --bg-1: #241e1a;
        --surface: #2a241f;
        --surface-2: #322a24;
        --surface-3: #3a322c;
        --glass: rgba(26, 22, 20, 0.72);
        --line: rgba(220, 200, 170, 0.10);
        --line-2: rgba(220, 200, 170, 0.18);
        --text: #ece3d8;
        --dim: #b5a99a;
        --faint: #887e72;
        --fire-text: #f97316;
        --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
        --shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    body::before {
        background:
            radial-gradient(50% 45% at 92% 4%, rgba(251, 191, 36, 0.08), transparent 60%),
            radial-gradient(42% 42% at 78% 26%, rgba(239, 68, 68, 0.06), transparent 60%),
            radial-gradient(40% 40% at 8% 92%, rgba(101, 163, 13, 0.06), transparent 60%),
            linear-gradient(180deg, #1a1614, #1e1a16 60%, #221e18);
    }

    .site-header {
        background: linear-gradient(180deg, rgba(26, 22, 20, 0.88), rgba(26, 22, 20, 0.64));
        border-bottom-color: var(--line);
    }

    .nav.menu-open {
        background: rgba(26, 22, 20, 0.98);
    }

    .hero {
        background:
            radial-gradient(40% 50% at 84% 30%, rgba(251, 191, 36, 0.14), transparent 62%),
            radial-gradient(36% 42% at 96% 6%, rgba(239, 68, 68, 0.08), transparent 60%),
            radial-gradient(34% 40% at 6% 90%, rgba(101, 163, 13, 0.06), transparent 60%),
            linear-gradient(150deg, #1e1815 0%, #1a1614 50%, #1c1815 100%);
    }

    .hero::after,
    .page-hero::after {
        color: rgba(234, 88, 12, 0.08);
    }

    .eyebrow {
        background: var(--surface-2);
    }

    .grid-card {
        background: var(--surface);
    }

    .grid-card:hover {
        background: var(--surface-3);
    }

    .vision-card {
        background: var(--surface);
    }

    .about-card,
    .content-card {
        background: var(--surface);
    }

    /* img 透明度由 .img-loaded 系统统一控制，见下方 dark mode img 规则 */

    .home-featured-match {
        background: var(--surface);
    }

    .match-card {
        background: var(--surface);
    }

    .admin-card {
        background: var(--surface);
    }

    /* 通知下拉 */
    .notif-dropdown {
        background: var(--surface);
    }
    .notif-item:hover {
        background: rgba(234, 88, 12, 0.06);
    }
    .notif-item.unread {
        background: rgba(234, 88, 12, 0.03);
    }

    /* 文章卡片 */
    .article-card {
        background: var(--surface);
    }

    .dash-card {
        background: var(--surface);
    }

    .comment-item {
        background: var(--surface-2);
    }

    /* toast */
    #toast-container > div {
        background: var(--surface) !important;
        color: var(--text) !important;
    }

    /* footer：原浅色米底硬编码，深色下改为暗面 */
    footer {
        background: #241e1a;
        border-top-color: var(--line);
    }
}