/* 响应式设计模块 */

/* ==================== 顶部导航移动端适配 ==================== */

/* 中等屏幕 (1200px 以下) - TAB按钮响应式 */
@media (max-width: 1200px) {
    .tab-style {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 2.5rem;
        order: -1;
    }

    .tab-style .bg-white\/80 {
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
    }

    .tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* 平板及以下 (768px 以下) */
@media (max-width: 768px) {
    /* 顶部导航栏 */
    #mainNav {
        padding: 0.75rem 0;
    }

    #mainNav .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #mainNav .logo img {
        height: 3rem; /* 48px */
    }

    /* 汉堡菜单按钮 */
    #mobileMenuBtn {
        z-index: 1001;
        position: relative;
    }

    /* 移动端菜单面板 */
    #mobileMenuPanel {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 移动端菜单项 */
    .mobile-nav-item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .mobile-submenu-btn {
        min-height: 48px;
    }

    /* 子菜单 */
    .mobile-submenu {
        padding: 0.5rem 0;
    }

    .mobile-submenu .mobile-nav-item {
        padding-left: 2rem;
        font-size: 0.95rem;
    }

    /* 导航栏 */
    .nav-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
    }

    .nav-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        width: 100%;
    }

    .logo {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .logo img {
        max-width: 150px;
    }

    /* Tab 按钮 */
    .tab-style {
        margin-bottom: 2rem;
    }

    .tab-btn {
        padding: 0.5rem 1.25rem;
        font-size: 1rem;
        border-radius: 0.5rem;
    }

    .services-tab-style {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    .services-tab-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        flex: 0 1 auto;
    }

    .services-tab-btn i {
        font-size: 1rem;
    }

    /* 分页组件 */
    .pagination-container {
        gap: 0.75rem;
        margin-top: 2rem;
    }

    .pagination-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .pagination-ellipsis {
        padding: 0.5rem 0.25rem;
    }

    /* 卡片 */
    .achievement-card,
    .plan-card,
    .vision-card,
    .card-hover {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .card-icon {
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
    }

    .card-title {
        font-size: 1.1rem;
    }

    .card-description {
        font-size: 0.9rem;
    }

    /* 栅格 */
    .grid {
        gap: 1rem;
    }

    .grid.grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* 间距 */
    .mg-top-5 {
        margin-top: 5rem;
    }

    .section-content {
        padding: 2rem 1rem;
    }

    .space-y-12 > * + * {
        margin-top: 2rem;
    }
}

/* ==================== 手机设备 (480px 以下) ==================== */
@media (max-width: 480px) {
    /* 顶部导航栏 - 手机端优化 */
    #mainNav {
        padding: 0.5rem 0;
    }

    #mainNav .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #mainNav .logo img {
        height: 2.5rem; /* 40px */
    }

    /* 汉堡菜单按钮 - 手机端 */
    #mobileMenuBtn {
        width: 44px;
        height: 44px;
        padding: 0.5rem;
        margin-right: 0.5rem;
    }

    #mobileMenuBtn .hamburger-line {
        width: 24px;
        height: 2.5px;
    }

    /* 移动端菜单面板 - 手机端 */
    #mobileMenuPanel {
        top: 3.5rem;
        max-height: calc(100vh - 3.5rem);
    }

    /* 移动端菜单项 - 手机端 */
    .mobile-nav-item {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .mobile-submenu-btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        min-height: 48px;
    }

    .mobile-submenu {
        background-color: #f9fafb;
    }

    .mobile-submenu .mobile-nav-item {
        padding: 0.65rem 1rem 0.65rem 2rem;
        font-size: 0.9rem;
    }

    /* 移动端背景遮罩 */
    #mobileMenuBackdrop {
        backdrop-filter: blur(2px);
    }

    /* 导航栏 */
    .nav-container {
        padding: 0 1rem;
        justify-content: space-between;
    }

    .nav-links {
        gap: 0.5rem;
    }

    .nav-links a {
        font-size: 0.9rem;
    }

    .logo img {
        max-height: 40px;
    }

    /* 标题 */
    h1, .hero h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    h2, .section h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* 内容间距 */
    .section {
        padding: 2rem 1rem;
    }

    .mg-top-5 {
        margin-top: 4rem;
    }

    .section-content {
        padding: 1.5rem 0.75rem;
    }

    /* Tab 按钮 - 优化触摸大小 */
    .tab-style {
        margin-bottom: 1.5rem;
    }

    .tab-style .bg-white\/80 {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .tab-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        border-radius: 0.5rem;
        flex: 1 1 auto;
        min-width: 80px;
        white-space: normal;
        height: auto;
        line-height: 1.2;
        min-height: 44px; /* 移动端最小触摸区域 */
    }

    .services-tab-style {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .services-tab-btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        height: auto;
        min-height: 44px; /* 移动端最小触摸区域 */
    }

    .services-tab-btn span {
        font-size: 0.9rem;
    }

    .services-tab-btn i {
        font-size: 1rem;
        display: inline-block;
    }

    /* 卡片 */
    .achievement-card,
    .plan-card,
    .vision-card,
    .card-hover {
        padding: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 1rem;
    }

    .card-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.75rem;
        margin-left: auto;
        margin-right: auto;
    }

    .card-icon i {
        font-size: 1.5rem;
    }

    .card-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .card-description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* 栅格 */
    .grid {
        gap: 0.75rem;
    }

    .grid.grid-cols-1,
    .grid.lg\:grid-cols-3,
    .grid.md\:grid-cols-2,
    .about-grid,
    .services-grid,
    .products-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* 间距 */
    .space-y-8 > * + * {
        margin-top: 1.5rem;
    }

    .space-y-12 > * + * {
        margin-top: 1.5rem;
    }

    .gap-8 {
        gap: 1rem;
    }

    .gap-12 {
        gap: 1.5rem;
    }

    .mb-6 {
        margin-bottom: 0.75rem;
    }

    .mb-8 {
        margin-bottom: 1rem;
    }

    .mb-16 {
        margin-bottom: 1.5rem;
    }

    /* 文本 */
    p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* 分页组件 - 手机端 */
    .pagination-container {
        gap: 0.5rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
    }

    .pagination-btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
        min-height: 44px;
        min-width: 44px;
    }

    .pagination-number {
        min-width: 44px;
        padding: 0.5rem 0.4rem;
    }

    .pagination-ellipsis {
        padding: 0.5rem 0.2rem;
        font-size: 0.85rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-section {
        padding-bottom: 1rem;
        border-bottom: 1px solid #374151;
    }

    .footer-section:last-child {
        border-bottom: none;
    }

    /* 按钮 */
    .btn, button {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        min-height: 44px;
    }

    /* 表单 */
    input, textarea, select {
        font-size: 16px; /* 防止iOS自动缩放 */
        padding: 0.75rem;
        line-height: 1.5;
    }

    /* 图片 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 列表 */
    ul, ol {
        padding-left: 1.5rem;
    }

    li {
        margin-bottom: 0.5rem;
    }
}

/* ==================== 超小屏幕 (320px 以下) ==================== */
@media (max-width: 320px) {
    .tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    h1, .hero h1 {
        font-size: 1.5rem;
    }

    h2, .section h2 {
        font-size: 1.25rem;
    }

    .section {
        padding: 1.5rem 0.5rem;
    }
}

/* ==================== 推广优势页面专属样式 ==================== */

/* 平板设备 (768px 以下) - 推广优势页面 */
@media (max-width: 768px) {
    /* Hero区域 */
    .hero-section {
        padding: 4rem 1.5rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    /* 推广优势Tab按钮 */
    .advantage-tab-style {
        gap: 1rem;
        margin-bottom: 3rem;
    }

    .advantage-tab-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    /* 优势卡片 */
    .advantage-card-v2,
    .promotion-card-horizontal,
    .prison-advantage-card {
        padding: 1.75rem;
    }

    .advantage-card-v2 .icon-wrapper,
    .promotion-card-horizontal .icon-wrapper,
    .prison-advantage-card .icon-wrapper {
        width: 3rem;
        height: 3rem;
        font-size: 1.3rem;
    }

    .advantage-card-v2 h3,
    .promotion-card-horizontal h3,
    .prison-advantage-card h3 {
        font-size: 1.15rem;
    }

    /* 推广横向卡片 - 改为竖向布局 */
    .promotion-card-horizontal {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
    }

    .promotion-card-horizontal .icon-wrapper {
        align-self: flex-start;
    }

    /* 统计数据模块 - 保持一排四个 */
    .stats-section {
        padding: 3rem 1.5rem !important;
        margin-top: 3rem !important;
    }

 .stats-section .stats-grid {
        grid-template-columns: repeat(4, 1fr); /* 保持4列 */
        gap: 1rem;
    }

     .stats-section .stats-grid .stat-item {
        padding: 1.5rem 1rem;
    }

     .stats-section .stats-grid .stat-number {
        font-size: 1.75rem;
    }

     .stats-section .stats-grid .stat-label {
        font-size: 0.85rem;
    }

    /* CTA区域 */
    .cta-section {
        padding: 4rem 1.5rem;
    }

    .cta-section h2 {
        font-size: 1.75rem;
    }
}

/* 手机设备 (768px 以下) - 推广优势页面 */
@media (max-width: 768px) {
    .pc-nav{
        display: none !important;
    }
    .mobile-nav{
        display: block;
        width: 100px;
        height: 200px;
        background-color: #ccc;
    }
    /* Hero区域 */
    .hero-section {
        padding: 3rem 1rem;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        gap: 0.75rem;
    }

    .hero-btn {
        padding: 0.65rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
        max-width: 280px;
    }

    /* Tab按钮 - 纵向排列 */
    .advantage-tab-style {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 2rem;
        padding: 0.5rem;
    }

    .advantage-tab-btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        justify-content: center;
        min-height: 44px;
    }

    .advantage-tab-btn i {
        display: inline-block;
        margin-right: 0.5rem;
    }

    /* 优势卡片 */
    .advantage-card,
    .advantage-card-v2,
    .promotion-card-horizontal,
    .prison-advantage-card {
        padding: 1.5rem 1.25rem;
        margin-bottom: 1.25rem;
        border-radius: 0.875rem;
    }

    .advantage-icon-box {
        width: 5rem;
        height: 5rem;
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .advantage-card h3,
    .advantage-card-v2 h3,
    .promotion-card-horizontal h3,
    .prison-advantage-card h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .advantage-card > p,
    .prison-advantage-card p {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }

    .advantage-card-v2 .icon-wrapper,
    .promotion-card-horizontal .icon-wrapper,
    .prison-advantage-card .icon-wrapper {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .advantage-card-v2 ul li,
    .promotion-card-horizontal ul li {
        font-size: 0.85rem;
        margin-bottom: 0.65rem;
        line-height: 1.6;
    }

    /* 推广横向卡片 */
    .promotion-card-horizontal {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.5rem;
    }

    .promotion-banner {
        margin-bottom: 2rem;
        border-radius: 0.75rem;
    }

    /* 统计数据模块 - 手机端一排四个优化 */
    .stats-section {
        padding: 2rem 0.75rem !important;
        margin-top: 2rem !important;
        border-radius: 1rem;
    }

    .stats-section .stats-grid {
        grid-template-columns: repeat(4, 1fr); /* 保持一排四个 */
        gap: 0.5rem;
    }

     .stats-section .stats-grid .stat-item {
        padding: 1rem 0.5rem;
        border-radius: 0.75rem;
    }

     .stats-section .stats-grid .stat-number {
        font-size: 1.25rem;  /* 手机端缩小字号 */
        margin-bottom: 0.25rem;
        font-weight: 700;
        line-height: 1.1;
    }

     .stats-section .stats-grid .stat-label {
        font-size: 0.7rem;  /* 标签字号更小 */
        line-height: 1.3;
        word-break: break-word; /* 允许文字换行 */
    }
    .contact-info{
        padding: 0;
    }
     .contact-info .contact-info-box{
        padding: 0 !important;
    }
    
    /* 首页联系我们部分文字左padding在移动端设为0 */
    .contact-info[style*="padding-left"] {
        padding-left: 0 !important;
    }
    
    .contact-info > div[style*="padding-left"] {
        padding-left: 0 !important;
    }

    /* CTA区域 */
    .cta-section {
        padding: 3rem 1rem;
    }

    .cta-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .cta-section p {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    .cta-buttons {
        gap: 0.75rem;
        flex-direction: column;
        align-items: center;
    }

    .cta-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
        max-width: 280px;
        min-height: 44px;
    }

    /* 优势列表 */
    .advantage-list li {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .advantage-list i {
        font-size: 1rem;
        margin-right: 0.65rem;
    }
    .about-hd{
        width: 100%;
        padding: 0 0.5rem;
    }
    .about-hd .stat-card{
        font-size: 0.8rem !important;
    }
    .stat-number{
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
        font-weight: 700;
        line-height: 1.1;
    }
}

/* 超小屏幕 (320px 以下) - 导航栏和推广优势页面 */
@media (max-width: 320px) {
    /* 超小屏导航栏 */
    #mainNav {
        padding: 0.4rem 0;
    }

    #mainNav .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #mainNav .logo img {
        height: 2rem; /* 32px */
    }

    /* 汉堡菜单按钮 - 超小屏 */
    #mobileMenuBtn {
        width: 40px;
        height: 40px;
        gap: 3px;
    }

    #mobileMenuBtn .hamburger-line {
        width: 20px;
        height: 2px;
    }

    /* 移动端菜单面板 - 超小屏 */
    #mobileMenuPanel {
        top: 3rem;
    }

    /* 移动端菜单项 - 超小屏 */
    .mobile-nav-item {
        padding: 0.625rem 0.75rem;
        font-size: 0.9rem;
        min-height: 44px;
    }

    .mobile-submenu-btn {
        padding: 0.625rem 0.75rem;
    }

    .mobile-submenu .mobile-nav-item {
        padding: 0.625rem 0.75rem 0.625rem 1.5rem;
        font-size: 0.85rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.875rem;
    }

    .advantage-tab-btn {
        padding: 0.65rem 0.875rem;
        font-size: 0.85rem;
    }

    /* 分页组件 - 超小屏 */
    .pagination-container {
        gap: 0.375rem;
        margin-top: 1.25rem;
    }

    .pagination-btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
        min-height: 40px;
        min-width: 40px;
    }

    .pagination-number {
        min-width: 40px;
        padding: 0.4rem 0.3rem;
    }

    .pagination-ellipsis {
        padding: 0.4rem 0.15rem;
        font-size: 0.8rem;
    }

    /* 统计数据 - 超小屏保持一排四个 */
    .stats-section {
        padding: 1.5rem 0.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr); /* 保持一排四个 */
        gap: 0.375rem;
    }

    .stat-item {
        padding: 0.75rem 0.375rem;
        border-radius: 0.5rem;
    }

    .stat-number {
        font-size: 1rem;  /* 超小屏进一步缩小 */
        margin-bottom: 0.2rem;
        line-height: 1;
    }

    .stat-label {
        font-size: 0.625rem; /* 约10px */
        line-height: 1.2;
        word-break: break-word;
    }

    .cta-section h2 {
        font-size: 1.25rem;
    }

    .advantage-card-v2,
    .promotion-card-horizontal,
    .prison-advantage-card {
        padding: 1.25rem 1rem;
    }
}