/*
 * 复禾健康风格响应式CSS系统
 * 文件：fh21_responsive.css
 * 描述：响应式适配，支持桌面、平板、移动端
 */

/* ==================== 通用响应式调整 ==================== */

/* 桌面端（≥1200px）默认样式已在其他CSS中定义 */

/* 平板端（768px-1199px） */
@media (max-width: 1199px) {
    header{display:none;}
    footer{display:none;}
    .fh21-sidebar-left {
        display: none;
    }
    .fh21-scroll-relative{display: none;}
     .w870 { width: 100%  !important; }
    /* 容器宽度调整 */
    .fh21-container,
    .w1200 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* 三栏布局调整为两栏：左侧边栏下移 */
    .fh21-main {
        display: flex;
        flex-wrap: wrap;
    }

    /* .fh21-sidebar-left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        order: 3;
    } */

    .fh21-content {
        width: 66.666%;
        margin-right: 3.333%;
    }

    .fh21-sidebar-right {
        width: 30%;
    }

    /* 头部调整 */
    .fh21-header .fh21-header-inner {
        flex-wrap: wrap;
    }

    .fh21-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
    }

    .fh21-search {
        order: 2;
    }

    /* 文章列表调整 */
    .fh21-list-item {
        padding: 15px 0 15px 165px;
    }

    .fh21-list-image {
        width: 150px;
        height: 100px;
    }

    .fh21-list-image a {
        width: 150px;
        height: 100px;
    }

    /* 侧边栏模块调整 */
    .fh21-sidebar-module {
        padding: 0 10px;
    }

    /* 页脚调整 */
    .fh21-footer-links,
    .fh21-footer-main {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .fh21-footer-main {
        padding: 40px 15px;
    }

    .fh21-footer-left,
    .fh21-footer-right {
        position: relative;
        width: 100%;
        padding: 0;
        border: none;
        margin-bottom: 20px;
    }

    .fh21-footer-center {
        width: 100%;
        padding-left: 0;
    }

    /* 分类导航调整 */
    .fh21-category-nav .fh21-category-link {
        font-size: 14px;
        line-height: 40px;
    }

    /* 分页调整 */
    .fh21-pagination a {
        padding: 7px 12px;
        font-size: 14px;
        margin-right: 3px;
    }
}

/* 移动端（<768px） */
@media (max-width: 767px) {
    /* 容器宽度调整 */
        header{display:none;}
    footer{display:none;}
    .fh21-sidebar-left {
        display: none;
    }
    .fh21-scroll-relative{display: none;}
    .w870 { width: 100%  !important; }
    .fh21-container,
    .w1200 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* 防止媒体元素溢出 */
    .fh21-content img,
    .fh21-content video,
    .fh21-content iframe,
    .fh21-content table {
        max-width: 100%;
        height: auto;
    }

    /* 单栏布局 */
    .fh21-content,
    .fh21-sidebar-right,
    /* .fh21-sidebar-left {
        width: 100%;
        margin-right: 0;
        float: none;
    } */

 

    /* 显示侧边栏的类 */
    .fh21-sidebar.show,
    .fh21-sidebar-left.show,
    .fh21-sidebar-right.show,
    .fh21-sidebar-right.show .fh21-sidebar {
        display: block !important;
        width: 100%;
        margin-bottom: 20px;
    }


    /* 主内容区移除浮动 */
    .fh21-main {
        display: block;
    }

    /* 头部调整为移动端样式 */
    .fh21-header {
        height: auto;
        padding: 10px 0;
    }

    .fh21-header .fh21-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .fh21-logo {
        width: 120px;
        height: 40px;
        margin-bottom: 10px;
    }

    .fh21-nav {
        width: 100%;
        margin: 10px 0;
    }

    .fh21-search {
        width: 100%;
        margin-top: 10px;
    }

    .fh21-search .fh21-form-input {
        width: 100%;
    }

    /* 汉堡菜单（如果需要） */
    .fh21-nav-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .fh21-nav-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.3s;
    }

    .fh21-nav-collapse {
        display: none;
    }

    .fh21-nav-collapse.show {
        display: block;
    }

    /* 文章列表调整为移动端 */
    .fh21-list-item {
        padding: 15px 0;
    }

    .fh21-list-item:not(.no-image) {
        padding-left: 0;
    }

    .fh21-list-image {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .fh21-list-image a {
        width: 100%;
        height: 180px;
    }

    .fh21-list-image img {
        height: 180px;
        object-fit: cover;
    }

    .fh21-list-title {
        font-size: 16px;
        line-height: 24px;
        margin-top:25px;
    }

    .fh21-list-description {
        font-size: 14px;
        line-height: 20px;
        height: auto;
        max-height: 60px;
    }

    /* 侧边栏模块调整 */
    .fh21-sidebar-module {
        margin-bottom: 20px;
    }

    .fh21-module-title {
        font-size: 18px;
    }

    .fh21-popular-item {
        padding: 8px 0;
    }

    .fh21-popular-image {
        width: 80px;
        height: 54px;
    }

    /* 分类导航调整 */
    .fh21-category-nav {
        margin-bottom: 20px;
    }

    .fh21-category-nav .fh21-category-link {
        font-size: 14px;
        line-height: 36px;
        padding-left: 10px;
        padding-right: 15px;
    }

    .fh21-category-nav .fh21-category-link.active,
    .fh21-category-nav .fh21-category-link:hover {
        font-size: 14px;
    }

    /* 分页调整 */
    .fh21-pagination {
        padding: 10px 0;
    }

    .fh21-pagination a {
        padding: 6px 10px;
        font-size: 14px;
        margin-right: 2px;
        margin-bottom: 5px;
    }

    /* 页脚调整 */
    .fh21-footer-links {
        padding: 15px 0;
    }

    .fh21-links-title {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .fh21-links-content {
        width: 100%;
        float: none;
    }

    .fh21-links-row ul li {
        width: 50%;
        float: left;
        padding: 3px 0;
    }

    .fh21-footer-main {
        padding: 20px 15px;
    }

    .fh21-footer-left,
    .fh21-footer-center,
    .fh21-footer-right {
        position: relative;
        width: 100%;
        padding: 0;
        border: none;
        margin-bottom: 20px;
    }

    .fh21-footer-links-list ul li {
        width: 50%;
        float: left;
        margin-bottom: 5px;
    }

    .fh21-footer-qrcode {
        float: none;
        display: inline-block;
        margin: 0 10px 10px 0;
    }

    /* 按钮调整 */
    .fh21-btn {
        padding: 6px 15px;
        font-size: 14px;
        display: block;
        margin-bottom: 10px;
    }

    /* 表单调整 */
    .fh21-form-input,
    .fh21-form-select,
    .fh21-form-textarea {
        font-size: 16px; /* 移动端防止缩放 */
    }

    /* 卡片调整 */
    .fh21-card {
        margin-bottom: 15px;
    }

    /* 隐藏非必要元素 */
    .fh21-hide-mobile {
        display: none !important;
    }

    /* 显示移动端专用元素 */
    .fh21-show-mobile {
        display: block !important;
    }
}

/* 超小屏幕（<576px） */
@media (max-width: 575px) {
    header{display:none;}
    footer{display:none;}
    .fh21-sidebar-left {
        display: none;
    }
    .fh21-scroll-relative{display: none;}
    .w870 { width: 100%  !important; }
    /* 容器宽度调整（确保覆盖） */
    .fh21-container,
    .w1200 {
        width: 100%;
        padding: 0 10px; /* 更小的padding以适应超小屏幕 */
        box-sizing: border-box;
    }

    /* 进一步调整 */
    .fh21-list-image a {
        height: 150px;
    }

    .fh21-list-image img {
        height: 150px;
    }

    .fh21-popular-image {
        width: 60px;
        height: 40px;
    }

    .fh21-links-row ul li {
        width: 100%;
        float: none;
    }

    .fh21-footer-links-list ul li {
        width: 100%;
        float: none;
    }

    /* 分页更紧凑 */
    .fh21-pagination a {
        padding: 5px 8px;
        font-size: 13px;
    }

    /* 文章标题字体调整 */
    .fh21-list-title {
        font-size: 15px;
        line-height: 22px;
        margin-top:25px;
    }

    /* 模块标题 */
    .fh21-module-title {
        font-size: 16px;
        line-height: 24px;
    }

    .fh21-module-title span {
        font-size: 16px;
    }
}

/* 平板横屏（768px-992px）特定调整 */
@media (min-width: 768px) and (max-width: 992px) {
        header{display:none;}
    footer{display:none;}
    .fh21-sidebar-left {
        display: none;
    }
    .fh21-scroll-relative{display: none;}
    .w870 { width: 100%  !important; }
    .fh21-content {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .fh21-sidebar-right {
        width: 100%;
    }

    /* .fh21-sidebar-left {
        width: 100%;
        margin-bottom: 30px;
    } */
}

/* 打印样式 */
@media print {
    .fh21-header,
    .fh21-sidebar,
    .fh21-footer,
    .fh21-btn,
    .fh21-search,
    .fh21-nav {
        display: none !important;
    }

    .fh21-container,
    .fh21-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .fh21-list-item {
        page-break-inside: avoid;
    }
}

/* 汉堡菜单响应式样式 */
@media (max-width: 767px) {
        header{display:none;}
    footer{display:none;}
    .fh21-sidebar-left {
        display: none;
    }
    .fh21-scroll-relative{display: none;}
    .w870 { width: 100%  !important; }
    .fh21-nav-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 1001;
    }

    .fh21-nav-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.3s;
    }

    .fh21-hide-desktop {
        display: block;
    }

    .fh21-nav-collapse {
        display: none;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .fh21-nav-collapse.show {
        display: block;
    }

    .fh21-nav-collapse .menus ul {
        flex-direction: column;
    }

    .fh21-nav-collapse .menus ul li {
        float: none;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .fh21-nav-collapse .menus ul li a {
        padding: 15px;
        display: block;
    }
}