/* ============================================
   钧信书院 - 移动端响应式样式
   断点：768px 以下
   ============================================ */

/* 通用工具 */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* ============== 移动端样式 ============== */
@media (max-width: 768px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }

    body {
        font-size: 14px;
    }

    .container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }

    /* ====== 顶部导航 ====== */
    .site-header {
        padding: 12px 16px !important;
    }
    .site-header .site-logo {
        font-size: 18px !important;
    }
    .site-header .site-nav {
        display: none !important;
    }
    .site-header .site-nav.is-open {
        display: flex !important;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        background: var(--bg-primary, #1a1a2e);
        z-index: 999;
        padding: 24px 16px;
        gap: 20px;
        overflow-y: auto;
    }
    .site-header .site-nav.is-open a {
        font-size: 18px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* 汉堡菜单按钮 */
    .nav-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 8px;
    }
    .nav-toggle span {
        width: 24px;
        height: 2px;
        background: var(--accent, #e8d5b7);
        transition: all 0.3s;
    }
    .nav-toggle.is-open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.is-open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* ====== Hero / 首页 ====== */
    .hero-section {
        padding: 60px 16px !important;
    }
    .hero-section h1 {
        font-size: 28px !important;
        line-height: 1.4 !important;
    }
    .hero-section p {
        font-size: 14px !important;
    }
    .btn-hero {
        padding: 12px 32px !important;
        font-size: 14px !important;
    }

    /* ====== 卡片网格 ====== */
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .feature-card {
        padding: 20px !important;
    }

    /* ====== 页面标题 ====== */
    .page-header h1 {
        font-size: 24px !important;
    }
    .page-section {
        padding: 40px 0 !important;
    }

    /* ====== 易经/八字/紫微等内页表单 ====== */
    .reading-form {
        padding: 24px 16px !important;
    }
    .reading-form .form-row {
        grid-template-columns: 1fr !important;
    }
    .reading-form input,
    .reading-form select,
    .reading-form textarea {
        font-size: 16px !important; /* 防止 iOS 自动缩放 */
    }

    /* ====== 用户中心 ====== */
    .user-dashboard {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .user-sidebar {
        position: static !important;
    }
    .user-sidebar .user-nav {
        flex-direction: row !important;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }
    .user-sidebar .user-nav a {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ====== 表格响应式 ====== */
    table {
        font-size: 12px !important;
    }
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ====== 卦象详情 ====== */
    .gua-symbol {
        font-size: 48px !important;
    }

    /* ====== 八字盘 ====== */
    .bazi-chart {
        grid-template-columns: repeat(4, 1fr) !important;
        font-size: 12px !important;
    }

    /* ====== 紫微宫格 ====== */
    .ziwei-chart {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .ziwei-cell {
        padding: 8px 4px !important;
        font-size: 11px !important;
        min-height: 80px !important;
    }

    /* ====== 奇门九宫 ====== */
    .qimen-chart {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .qimen-cell {
        padding: 12px 6px !important;
        font-size: 11px !important;
    }

    /* ====== 商品/订单卡片 ====== */
    .product-card,
    .order-card {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .product-card .price,
    .order-card .price {
        margin-top: 12px;
        text-align: left !important;
    }

    /* ====== 模态框 ====== */
    .modal {
        width: 92% !important;
        max-width: 100% !important;
    }

    /* ====== 表单底部按钮 ====== */
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    .form-actions button {
        width: 100%;
    }

    /* ====== 全局滚动条优化 ====== */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* ====== 二维码支付页 ====== */
    .qrcode-pay {
        text-align: center;
    }
    .qrcode-pay img {
        max-width: 240px;
        margin: 0 auto;
    }

    /* ====== 页脚 ====== */
    .site-footer {
        padding: 24px 16px !important;
        font-size: 12px !important;
    }
    .site-footer .footer-links {
        flex-wrap: wrap;
        gap: 12px !important;
        justify-content: center;
    }
}

/* ============== 平板 / 中等屏 ============== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 90% !important;
    }
    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============== 防止横屏过宽 ============== */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        padding: 40px 16px !important;
    }
    .hero-section h1 {
        font-size: 24px !important;
    }
}