/* ================================================
   社会责任列表页（responsibility.html）移动端响应式样式
   - 覆盖 PC 样式 css/responsibility.css 中的 vw 布局与固定宽高
   - 适配板块：Banner / 二级导航 / 助学日轮播 / 冬助日横滑 / 仁爱天使基金 / 查看更多按钮
   - 顶部导航（header）与页脚（footer）为公共模块，
     已由 css/responsive/common-responsive.css 处理，本文件不重复编写
   - 全站唯一断点：@media only screen and (max-width: 767px)，不设其他断点
   - 注意：本文件需在 responsibility.css 之后被引入方可生效
     （页面引入工作由主任务处理，本文件只负责样式覆盖）
   ================================================ */

@media only screen and (max-width: 767px) {

    /* ---------- 顶部导航汉堡按钮对齐修复 ----------
       公共 header.html 的 DOM 顺序为 logo → nav → 汉堡 → 搜索表单，
       flex space-between 下汉堡不会自动靠右，而是悬在中间偏左；
       首页（index.css）给汉堡设置了 margin-left:auto 使其靠右。
       此处复刻首页写法：margin-left:auto 把汉堡推到最右，
       右侧间距与首页完全一致。 */
    header .nav-toggle,
    .header .nav-toggle {
        margin-left: auto !important;
    }

    /* 强制导航容器 flex 两端对齐（覆盖各内页自身 header 布局差异） */
    header,
    .header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* 清除 Logo 区多余左内边距，保证左右视觉对齐 */
    header .logo-area,
    .header .logo-area {
        padding-left: 0 !important;
    }

    /* ============ Banner 横幅 ============ */
    .banner {
        width: 100% !important;
        height: 200px !important;
        /* 覆盖内联 background-size:100%（等比铺满防拉伸变形） */
        background-size: cover !important;
    }

    .banner-content {
        width: 100% !important;
        border-left: 3px solid #fff;
        padding-left: 14px;
        box-sizing: border-box;
    }

    .banner-title-en {
        font-size: 20px !important;
        line-height: 1.3 !important;
        letter-spacing: 1px;
    }

    .banner-title-cn {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* ============ 二级导航：横向滑动 + 触控目标 ≥44px ============ */
    .sub-nav {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 6px 0;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sub-nav a {
        flex-shrink: 0;
        white-space: nowrap;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: 15px !important;
        line-height: 24px !important;
        box-sizing: border-box;
    }

    .sub-nav a.active::after {
        left: 16px !important;
        right: 16px !important;
        height: 3px !important;
    }

    /* ============ 通用标题 / 描述 ============ */
    .section-title {
        width: auto !important;
        height: auto !important;
        margin-top: 32px !important;
        margin-bottom: 16px !important;
        font-size: 24px !important;
        line-height: 1.4 !important;
    }

    .section-desc {
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 16px;
        box-sizing: border-box;
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    /* ============ 助学日 / 仁爱天使：轮播容器 ============ */
    .box-style,
    .fund-style {
        padding: 0 !important;
    }

    .gallery-wrapper {
        width: 100% !important;
        margin: 0 auto 24px auto !important;
    }

    .gallery-grid {
        gap: 12px !important;
    }

    /* 轮播保持横向排列；覆盖内联 justify-content:space-between，
       保证 JS 按 itemWidth+gap 的无缝循环位移准确 */
    .scholarship-gallery,
    .renai-listhr {
        justify-content: flex-start !important;
    }

    /* 轮播卡片：宽度适配视口 */
    .gallery-item {
        width: 70vw !important;
        max-width: 300px;
        flex-shrink: 0;
    }

    .gallery-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3; /* 对应 PC 447x335 的近似比例 */
    }

    .gallery-caption {
        width: 100% !important;
        height: auto !important;
        min-height: 34px;
        padding: 6px 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        letter-spacing: 1px !important;
    }

    /* 轮播左右箭头：固定 px 尺寸，避免 vw 缩得过小 */
    .icon-style {
        width: 28px !important;
        height: 52px !important;
        flex-shrink: 0;
    }

    /* 仁爱轮播卡片底部文字（内联 width:111.5% 需覆盖防溢出） */
    .bottom-text {
        width: 100% !important;
        height: auto !important;
        min-height: 36px;
        padding: 4px 10px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ============ 冬助日：背景区 + 横向滑动图集 ============ */
    .winter-section {
        width: 100% !important;
        height: auto !important;
        padding: 28px 0 32px !important;
        /* 覆盖内联 background-size:100%，防背景拉伸 */
        background-size: cover !important;
    }

    .winter-gallery-wrapper {
        margin: 16px auto 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px;
    }

    .winter-gallery {
        width: max-content; /* 内容撑开，保持横向滑动 */
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    .winter-item {
        width: 240px !important;
        height: 186px !important;
        flex-shrink: 0;
    }

    .black_fooders {
        height: auto !important;
        min-height: 36px;
        padding: 4px 10px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* 分页指示（纯装饰，非交互） */
    .pagination {
        gap: 14px !important;
        margin-top: 16px !important;
    }

    .pagination span {
        font-size: 12px !important;
    }

    .pag-btn {
        width: 34px !important;
        height: 34px !important;
    }

    /* ============ 仁爱天使基金：大图 + 覆盖条 ============ */
    .fund-hero {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .fund-img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }

    /* 覆盖条由绝对定位改为文档流，置于图下，避免遮挡与溢出 */
    .fund-overlay {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        
        font-size: 14px !important;
        line-height: 1.8 !important;
        letter-spacing: 1px !important;
        box-sizing: border-box;
    }

    /* ============ 查看更多按钮（内联 margin 需覆盖） ============ */
    .view-more-container {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    .btn-view-more-custom {
        max-width: 100%;
        min-height: 44px;
        padding: 12px 22px !important;
        font-size: 14px !important;
        box-sizing: border-box;
        white-space: nowrap;
    }

    /* 移动端无悬停：取消卡片放大与阴影动画 */
    .gallery-item:hover,
    .winter-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ================================================
   responsibility.html 移动端专项改造（追加层，置于文件末尾保证覆盖优先级）
   - Banner：降高 + 英文副题缩小 / 中文主标题放大
   - 二级导航（助学日/冬助日/仁爱天使基金）Tab：横向可滚动、
     触控高度≥44px、品牌青绿文字 + 通栏底部下划线
   - 板块排版：大标题放大居中、正文 15px/1.7
   - 绿色背景文本块：圆角 + 内边距 + 白色文字，背景 cover
   - 图片轮播：scroll-snap 一屏一卡 + 悬浮箭头(≥44px) + 底部圆点指示器
   - 查看更多按钮：宽度自适应 ≤85%、触控高度≥44px、居中
   - 全局：styled-section 线稿底纹弱化为纯色浅底、16px 安全边距
   注：Tab 内容显隐切换 / 面板等高 min-height / 圆点指示器注入由
   js/responsive/responsibility.js 运行时完成（原生 JS，PC 不受影响）
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 1. Banner：降高 + 标题响应式缩放 ---------- */
    .banner {
        height: 168px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    .banner-content {
        width: 100% !important;
        border-left: 3px solid #fff;
        padding-left: 14px;
        box-sizing: border-box;
    }
    .banner-title-en {
        font-size: 14px !important;
        letter-spacing: 1.5px !important;
        line-height: 1.4 !important;
        opacity: 0.95;
    }
    .banner-title-cn {
        font-size: 28px !important;
        line-height: 1.3 !important;
        font-weight: 800;
    }

    /* ---------- 2. 二级导航 Tab 栏：横向可滚动 + 通栏下划线 ---------- */
    .sub-nav {
        margin: 0 !important;
        padding: 8px 0;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;             /* Firefox 隐藏滚动条 */
    }
    .sub-nav::-webkit-scrollbar {
        display: none !important;          /* Chrome/Safari 隐藏滚动条 */
    }
    .sub-nav a {
        flex-shrink: 0;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;                  /* 触控高度 ≥44px */
        padding: 12px 18px !important;
        font-size: 16px !important;
        line-height: 24px !important;
        box-sizing: border-box;
    }
    .sub-nav a.active {
        color: #1bbab8 !important;         /* 品牌青绿色文字 */
    }
    .sub-nav a.active::after {
        left: 0 !important;                /* 通栏底部下划线 */
        right: 0 !important;
        height: 3px !important;
        background-color: #1bbab8 !important;
    }

    /* ---------- 3. 板块内容通用排版 ---------- */
    .section-title {
        width: auto !important;
        height: auto !important;
        margin: 28px auto 18px !important;
        font-size: 26px !important;
        line-height: 1.4 !important;
        text-align: center;
    }
    .section-desc {
        width: 100% !important;
        margin: 0 0 22px 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: #5A4632 !important;         /* 加深保证对比度 */
        text-align: justify;
    }
    /* 冬助日（绿色背景）内文字转白色，保证对比度 */
    .winter-section .section-desc {
        color: #FFFFFF !important;
        padding: 0 16px !important;
    }
    .winter-section .section-title {
        color: #FFFFFF !important;
    }

    /* ---------- 4. 绿色背景文本块：圆角 + 内边距 + cover ---------- */
    .winter-section {
        width: auto !important;
        margin: 0 16px 24px !important;    /* 取消通栏贴边 */
        border-radius: 16px !important;
        padding: 26px 0 32px !important;
        background-size: cover !important;
        background-position: center center !important;
        box-sizing: border-box;
    }
    .winter-gallery-wrapper {
        margin: 18px 0 0 !important;
        padding: 0 14px;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none;
    }
    .winter-gallery-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    .winter-item {
        width: 240px !important;
        height: auto !important;
        border-radius: 12px !important;
        scroll-snap-align: start;
        overflow: hidden;
    }
    .winter-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 443 / 393;
        object-fit: cover;
    }
    /* 仁爱天使基金绿色覆盖条 */
    .fund-overlay {
        border-radius: 12px !important;
        margin: 12px 0 0 !important;
        
        font-size: 15px !important;
        line-height: 1.8 !important;
        letter-spacing: 0.5px !important;
        box-sizing: border-box;
    }
    .fund-img {
        border-radius: 12px !important;
    }

    /* ---------- 5. 图片轮播：scroll-snap 一屏一卡 ---------- */
    .box-style,
    .fund-style {
        position: relative !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    .gallery-wrapper {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
        margin: 0 auto 20px !important;
    }
    .scholarship-gallery,
    .renai-listhr {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .scholarship-gallery::-webkit-scrollbar,
    .renai-listhr::-webkit-scrollbar {
        display: none !important;
    }
    .gallery-item {
        flex: 0 0 100% !important;         /* 一屏完整展示 1 张 */
        width: 100% !important;
        max-width: none !important;
        scroll-snap-align: start;
        border-radius: 12px !important;
        overflow: hidden;
        box-sizing: border-box;
    }
    .gallery-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .gallery-caption {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 40px;
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        box-sizing: border-box;
    }
    /* 仁爱轮播卡片底部文字（覆盖内联 width:111.5% 防溢出） */
    .bottom-text {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 40px;
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        box-sizing: border-box;
        border-radius: 0 0 12px 12px;
    }
    /* 左右箭头：放大、半透明悬浮图片两侧，点击区域≥44px */
    .icon-style {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0;
        opacity: 0.8;
        z-index: 6;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 50%;
        object-fit: contain;
        cursor: pointer;
        box-sizing: border-box;
    }
    .scholarship-prev,
    .renaizuo-prev {
        left: 12px !important;
    }
    .scholarship-next,
    .renaiyou-next {
        right: 12px !important;
    }
    /* 底部圆点指示器（由 js/responsive/responsibility.js 注入） */
    .gallery-wrapper .mobile-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
    }
    .mobile-dots .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #C9D6D3;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }
    .mobile-dots .dot.active {
        background: #1bbab8;               /* 当前项品牌色高亮 */
        width: 24px;
        border-radius: 6px;
    }

    /* ---------- 6. 查看更多按钮 ---------- */
    .view-more-container {
        margin: 26px 0 !important;
        text-align: center !important;
    }
    .btn-view-more-custom {
        width: auto !important;
        max-width: 85% !important;         /* 最大不超过内容区 85% */
        min-height: 48px !important;       /* 触控高度 ≥44px */
        padding: 14px 26px !important;
        font-size: 15px !important;
        border-radius: 30px !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* ---------- 7. 全局细节 ---------- */
    /* 线稿底纹弱化：纯色浅底，避免干扰正文阅读 */
    .styled-section {
        background-image: none !important;
        background-color: #F7F9F8 !important;
    }
    /* 区块 16px 安全边距 */
    .styled-section section {
        padding: 0 16px;
        box-sizing: border-box;
    }
    /* Tab 内容分组容器（JS 包裹生成） */
    .mob-sections-wrap {
        box-sizing: border-box;
    }
    /* 页面底部为悬浮「联系我们」按钮预留安全边距 */
    .view-more-container:last-of-type {
        margin-bottom: 96px !important;
    }
}

/* ================================================
   追加层：社会责任页 移动端「三栏目平铺展示」专项改造
   - 仅 (max-width:767px) 生效，PC 端 100% 原样保留
   - 覆盖上方轮播/滑动方案：
     1. 隐藏 .sub-nav Tab 标签栏（不占高度，Tab 交互整体移除）
     2. 三个栏目（助学日/冬助日/仁爱天使基金）全部平铺向下展示
     3. 各栏目列表改一行 2 列网格，彻底关闭横向滚动
     4. 每栏目最多展示前 4 条（CSS 隐藏第 5 项起，不改 CMS 循环标签）
     5. 隐藏轮播左右箭头/圆点指示器
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 1. 隐藏 Tab 标签栏（不占高度） ---------- */
    .sub-nav {
        display: none !important;
    }

    /* ---------- 2. 三栏目平铺展示：栏目间保留上下间距 ---------- */
    .styled-section {
        margin-bottom: 28px !important;
    }

    /* ---------- 3. 各栏目列表：一行 2 列网格，关闭横向滚动 ---------- */
    .scholarship-gallery,
    .renai-listhr,
    .winter-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        justify-content: stretch !important;
        overflow: visible !important;          /* 彻底关闭横向滚动 */
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: auto;
    }
    .gallery-item,
    .winter-item {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex: none !important;
        min-width: 0;                          /* 防止内容撑破网格 */
        scroll-snap-align: none !important;
        box-sizing: border-box;
    }
    .winter-gallery-wrapper {
        overflow: visible !important;
        padding: 0 !important;
    }
    .gallery-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .winter-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 443 / 393;
        object-fit: cover;
    }

    /* ---------- 4. 每栏目最多展示前 4 条（第 5 项起隐藏） ---------- */
    .scholarship-gallery .gallery-item:nth-of-type(n+5),
    .renai-listhr .gallery-item:nth-of-type(n+5),
    .winter-gallery .winter-item:nth-of-type(n+5) {
        display: none !important;
    }

    /* ---------- 5. 隐藏轮播左右箭头 ---------- */
    .box-style .icon-style,
    .fund-style .icon-style {
        display: none !important;
    }

    /* ---------- 6. 全局防横向溢出 ---------- */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ================================================
   追加层：仁爱天使基金模块 移动端「图上文下」排版专项
   - 仅 (max-width:767px) 生效，PC 端 100% 原样保留
   - 原 PC「左侧大图 + 底部青色覆盖条」布局 →
     移动端改为「图片在上、青色文字卡片在下」垂直布局，紧挨无大间隙
   - 下方 .renai-listhr 两列网格等已调好模块不做任何改动
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 1. 基金头部：左右排版 → 上下垂直布局 ---------- */
    .fund-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    .fund-hero > div {
        width: 100% !important;
        min-width: 0;
    }
    .fund-hero-box {
        width: 100% !important;
        min-width: 0;
    }

    /* ---------- 2. 图片：100% 宽自适应，保留原有圆角 ---------- */
    .fund-img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* ---------- 3. 青色文字卡片：贴图底部、移动端字号、防按钮遮挡 ---------- */
    .fund-overlay {
        width: 100% !important;
        margin-top: 0 !important;                  /* 紧挨图片，无多余大间隙 */
        border-radius: 12px !important;            /* 保留卡片圆角 */
        
        font-size: 15px !important;
        line-height: 1.8 !important;               /* 行高舒适 */
        letter-spacing: 0.5px !important;
        box-sizing: border-box;
        text-align: justify;
    }
}