/* ==========================================================================
   responsive.css — 全局响应式工具类
   --------------------------------------------------------------------------
   前缀：r-  （避免与项目已有类冲突）
   断点：
     r-sm-  ≥ 576px  （手机横屏 / 小平板）
     r-md-  ≥ 768px  （平板）
     r-lg-  ≥ 992px  （笔记本）
     r-xl-  ≥ 1200px （桌面宽屏）
   功能：
     1. 容器容器
     2. 栅格系统（row / col + 断点）
     3. 显示/隐藏
     4. flex 布局
     5. padding / margin 间距
     6. 字体大小
     7. 特殊组件适配：表格、卡片、弹窗
   ========================================================================== */

/* ---------- 1. 容器 ---------- */
.r-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 576px)  { .r-container { max-width: 540px; } }
@media (min-width: 768px)  { .r-container { max-width: 720px; } }
@media (min-width: 992px)  { .r-container { max-width: 960px; padding-left: 20px; padding-right: 20px; } }
@media (min-width: 1200px) { .r-container { max-width: 1160px; } }
@media (min-width: 1600px) { .r-container { max-width: 1440px; } }

.r-container-fluid {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 992px) {
    .r-container-fluid { padding-left: 24px; padding-right: 24px; }
}

/* ---------- 2. 栅格 ---------- */
.r-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
@media (min-width: 992px) { .r-row { margin-left: -12px; margin-right: -12px; } }

.r-col, .r-col-1, .r-col-2, .r-col-3, .r-col-4, .r-col-6, .r-col-8, .r-col-12 {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
}
@media (min-width: 992px) {
    .r-col, .r-col-1, .r-col-2, .r-col-3, .r-col-4, .r-col-6, .r-col-8, .r-col-12 {
        padding-left: 12px;
        padding-right: 12px;
    }
}
.r-col    { flex: 1 0 0%; }
.r-col-12 { flex: 0 0 100%; max-width: 100%; }
.r-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.r-col-6  { flex: 0 0 50%; max-width: 50%; }
.r-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.r-col-3  { flex: 0 0 25%; max-width: 25%; }
.r-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.r-col-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }

/* md 断点（平板） */
@media (min-width: 768px) {
    .r-md-col-12 { flex: 0 0 100%; max-width: 100%; }
    .r-md-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .r-md-col-6  { flex: 0 0 50%; max-width: 50%; }
    .r-md-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .r-md-col-3  { flex: 0 0 25%; max-width: 25%; }
}
/* lg 断点（笔记本） */
@media (min-width: 992px) {
    .r-lg-col-12 { flex: 0 0 100%; max-width: 100%; }
    .r-lg-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .r-lg-col-6  { flex: 0 0 50%; max-width: 50%; }
    .r-lg-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .r-lg-col-3  { flex: 0 0 25%; max-width: 25%; }
}
/* xl 断点（宽屏） */
@media (min-width: 1200px) {
    .r-xl-col-12 { flex: 0 0 100%; max-width: 100%; }
    .r-xl-col-6  { flex: 0 0 50%; max-width: 50%; }
    .r-xl-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .r-xl-col-3  { flex: 0 0 25%; max-width: 25%; }
    .r-xl-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* ---------- 3. 显示/隐藏 ---------- */
.r-hidden        { display: none !important; }
.r-flex          { display: flex !important; }
.r-block         { display: block !important; }
.r-inline-flex   { display: inline-flex !important; }
.r-inline-block  { display: inline-block !important; }

/* ≥ sm（隐藏手机竖屏可见） */
@media (min-width: 576px) {
    .r-sm-hidden { display: none !important; }
    .r-sm-flex   { display: flex !important; }
    .r-sm-block  { display: block !important; }
}
/* ≥ md（平板及以上可见，手机端隐藏） */
@media (min-width: 768px) {
    .r-md-hidden { display: none !important; }
    .r-md-flex   { display: flex !important; }
    .r-md-block  { display: block !important; }
}
/* ≥ lg（笔记本+可见，平板/手机隐藏） */
@media (min-width: 992px) {
    .r-lg-hidden { display: none !important; }
    .r-lg-flex   { display: flex !important; }
    .r-lg-block  { display: block !important; }
}
/* ≥ xl（宽屏可见） */
@media (min-width: 1200px) {
    .r-xl-hidden { display: none !important; }
    .r-xl-flex   { display: flex !important; }
}
/* 仅手机端显示（< md） */
.r-mobile-only { display: block !important; }
@media (min-width: 768px) { .r-mobile-only { display: none !important; } }

/* ---------- 4. flex 布局工具 ---------- */
.r-flex-wrap      { flex-wrap: wrap; }
.r-flex-column    { flex-direction: column; }
.r-items-center   { align-items: center; }
.r-items-start    { align-items: flex-start; }
.r-items-end      { align-items: flex-end; }
.r-justify-between{ justify-content: space-between; }
.r-justify-center { justify-content: center; }
.r-justify-start  { justify-content: flex-start; }
.r-justify-end    { justify-content: flex-end; }
.r-grow-1         { flex-grow: 1; }
.r-shrink-0       { flex-shrink: 0; }
.r-gap-4          { gap: 4px; }
.r-gap-8          { gap: 8px; }
.r-gap-12         { gap: 12px; }
.r-gap-16         { gap: 16px; }
.r-gap-24         { gap: 24px; }

/* 手机端：默认竖排；平板及以上横排 */
@media (max-width: 991.98px) {
    .r-stack-lg { flex-direction: column !important; align-items: stretch !important; }
    .r-stack-lg.r-gap-24 { gap: 16px; }
    .r-stack-lg.r-gap-16 { gap: 12px; }
    .r-stack-lg.r-gap-12 { gap: 8px; }
}

/* ---------- 5. 间距 padding margin（基于 4px 栅格） ---------- */
.r-p-0  { padding: 0 !important; }
.r-p-8  { padding: 8px !important; }
.r-p-12 { padding: 12px !important; }
.r-p-16 { padding: 16px !important; }
.r-p-20 { padding: 20px !important; }
.r-p-24 { padding: 24px !important; }
.r-p-32 { padding: 32px !important; }

.r-px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.r-px-16 { padding-left: 16px !important; padding-right: 16px !important; }
.r-px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.r-px-24 { padding-left: 24px !important; padding-right: 24px !important; }

.r-py-8  { padding-top: 8px !important; padding-bottom: 8px !important; }
.r-py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.r-py-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.r-py-24 { padding-top: 24px !important; padding-bottom: 24px !important; }
.r-py-32 { padding-top: 32px !important; padding-bottom: 32px !important; }

.r-mt-8   { margin-top: 8px; }
.r-mt-12  { margin-top: 12px; }
.r-mt-16  { margin-top: 16px; }
.r-mt-20  { margin-top: 20px; }
.r-mt-24  { margin-top: 24px; }
.r-mt-32  { margin-top: 32px; }
.r-mb-8   { margin-bottom: 8px; }
.r-mb-12  { margin-bottom: 12px; }
.r-mb-16  { margin-bottom: 16px; }
.r-mb-20  { margin-bottom: 20px; }
.r-mb-24  { margin-bottom: 24px; }
.r-mb-32  { margin-bottom: 32px; }
.r-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* 手机端缩减间距 */
@media (max-width: 767.98px) {
    .r-p-24-sm-16 { padding: 16px !important; }
    .r-p-32-sm-16 { padding: 16px !important; }
    .r-py-24-sm-16{ padding-top: 16px !important; padding-bottom: 16px !important; }
    .r-gap-24-sm-12 { gap: 12px !important; }
    .r-gap-16-sm-8  { gap: 8px !important; }
}

/* ---------- 6. 字体大小 ---------- */
.r-text-xs   { font-size: 11px; line-height: 1.5; }
.r-text-sm   { font-size: 12px; line-height: 1.6; }
.r-text-base { font-size: 14px; line-height: 1.6; }
.r-text-lg   { font-size: 16px; line-height: 1.55; }
.r-text-xl   { font-size: 18px; line-height: 1.5; }
.r-text-2xl  { font-size: 20px; line-height: 1.4; }
.r-text-3xl  { font-size: 24px; line-height: 1.3; }
.r-text-4xl  { font-size: 30px; line-height: 1.25; }
.r-text-5xl  { font-size: 38px; line-height: 1.2; }
.r-text-bold { font-weight: 700; }
.r-text-500  { font-weight: 500; }
.r-text-center   { text-align: center; }
.r-text-right    { text-align: right; }
.r-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-text-wrap     { white-space: normal; word-break: break-word; }

/* 手机端标题缩放 */
@media (max-width: 767.98px) {
    .r-text-5xl  { font-size: 26px; }
    .r-text-4xl  { font-size: 22px; }
    .r-text-3xl  { font-size: 19px; }
    .r-text-2xl  { font-size: 17px; }
    .r-text-xl   { font-size: 16px; }
    .r-text-lg   { font-size: 15px; }
    .r-text-center-sm { text-align: center !important; }
}

/* ---------- 7. 宽度工具 ---------- */
.r-w-full   { width: 100% !important; }
.r-h-full   { height: 100% !important; }
.r-max-w-full { max-width: 100% !important; }
.r-min-h-0  { min-height: 0; }

/* ---------- 8. 特殊组件适配（遵循经验：加作用域，不影响 AdminLTE 等框架组件） ---------- */

/* 表格：强制横向滚动容器（经验：不强行压缩列，用 overflow-x） */
.r-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}
.r-table-wrap > table {
    min-width: 720px;        /* 确保表格不被挤压缩放文字 */
    width: max-content;      /* 列宽自然展开，内容不折行 */
    margin: 0;
}
@media (max-width: 767.98px) {
    .r-table-wrap > table { min-width: 640px; }
    .r-table-wrap th,
    .r-table-wrap td { padding: 8px 10px !important; font-size: 12px; }
    .r-table-wrap th:first-child,
    .r-table-wrap td:first-child { position: sticky; left: 0; background: var(--card-bg-solid); z-index: 1; }
}

/* 卡片栅格：手机端 1 列 → 平板 2 列 → 笔记本 3 列 → 宽屏 4 列 */
.r-card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .r-card-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 992px)  { .r-card-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .r-card-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* 弹窗/模态框：手机端全屏化，不显示为悬浮小窗口 */
@media (max-width: 767.98px) {
    .r-modal-mobile-full {
        position: fixed !important;
        inset: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* 按钮：手机端加宽加高，最小点击区域 44×44px */
.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    min-height: 36px;
    min-width: 36px;
    -webkit-tap-highlight-color: transparent;
}
.r-btn-block { display: flex; width: 100%; }
@media (max-width: 767.98px) {
    .r-btn {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 15px;
        border-radius: 12px;
    }
    .r-btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .r-btn-group .r-btn { width: 100%; }
}

/* 输入框：手机端加高 */
.r-input, .r-select, .r-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.r-input:focus, .r-select:focus, .r-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}
.r-textarea { min-height: 90px; resize: vertical; }
@media (max-width: 767.98px) {
    .r-input, .r-select, .r-textarea {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 12px;
        min-height: 48px;
    }
}

/* 移动端：防止按钮/表单意外换行 */
.r-form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .r-form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .r-form-grid.r-form-3 { grid-template-columns: repeat(3, 1fr); }
    .r-form-grid.r-form-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 9. 首页 hero 区域适配 ---------- */
@media (max-width: 991.98px) {
    .hero-section { padding: 48px 0 32px !important; }
    .hero-title   { font-size: 26px !important; letter-spacing: 1px !important; }
    .hero-subtitle{ font-size: 14px !important; }
    .hero-cta     { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
    .hero-cta .btn,
    .hero-cta a   { width: 100%; justify-content: center; }
    .hero-visual  { margin-top: 32px; max-width: 280px; margin-left: auto; margin-right: auto; }
    .hero-features{ grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .hero-feature-card { padding: 16px !important; }
}
@media (max-width: 479.98px) {
    .hero-title    { font-size: 22px !important; }
    .hero-features { grid-template-columns: 1fr !important; }
}

/* ---------- 10. 服务详情页通用适配 ---------- */
@media (max-width: 991.98px) {
    .page-header { padding: 28px 0 20px !important; }
    .page-header .page-title { font-size: 22px !important; }
    .page-subtitle { font-size: 13px !important; }
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .content-section { padding: 18px !important; }
    .content-section h2 { font-size: 18px !important; margin-bottom: 12px !important; }
    .feature-list { grid-template-columns: 1fr !important; gap: 12px !important; }
    .price-card { padding: 20px !important; }
    .price-card .price { font-size: 28px !important; }
    .sidebar-widget { order: -1; }  /* 移动端小部件放到内容前 */
}