/* ============================================================
   care-mode.css —— 关怀模式（大字版）
   开启方式：html 加 class="care-mode"（js/care.js 切换，localStorage 持久化）
   思路（依据工信部《互联网应用适老化通用设计规范》）：
     1. 字号整体放大，正文 20px 起，标题 24~28px
     2. 强制单列堆叠（移动端布局在桌面宽度下也生效），布局不乱
     3. 隐藏装饰性/动效元素（专题轮播、顶部曲线、二维码浮标）
     4. 加大点击热区（按钮、选项卡、列表行）
   注意：本文件只写「覆盖规则」，正常模式样式仍在 home.css / public.css
   ============================================================ */

/* ---------- 全局字号基准 ---------- */
html.care-mode {
    font-size: 20px;               /* BS5 的 rem 尺寸整体跟着放大 */
}
html.care-mode body {
    font-size: 20px;
    line-height: 1.8;
}

/* ---------- 强制单列堆叠：只作用于首页（大轮播内的区块），其余页面保持各自布局 ---------- */
html.care-mode #pageSwiper .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
/* 互动交流入口卡片：关怀模式下变两行，补上纵向间距
   （.hdjl-entries 只定义了 --bs-gutter-x，PC 单行用不到纵向；Bootstrap 的行
     会按 --bs-gutter-y 自动给第二行起加 margin-top） */
html.care-mode #pageSwiper .hdjl-entries {
    --bs-gutter-y: 1.5rem;
}
/* 入口卡片改两列一行，点击区够大又不至于太稀疏
   （带 #pageSwiper 提升优先级，压过上面带 ID 的单列规则） */
html.care-mode #pageSwiper .fwpt-grid > [class*="col-"],
html.care-mode #pageSwiper .zwxx-entries > [class*="col-"],
html.care-mode #pageSwiper .hdjl-entries > [class*="col-"] {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
}
/* 互动交流左右两栏（55%/45%）改上下堆叠 */
html.care-mode .hdjl-side-l,
html.care-mode .hdjl-side-r {
    width: 100%;
    flex: 0 0 auto;
    max-width: 100%;
}

/* ---------- 隐藏装饰性元素 ---------- */
/* html.care-mode .specials,        专题轮播（自动播放动效，适老化建议去除）
html.care-mode .qr-dock {       二维码浮标
    display: none;
} */

/* ---------- 头部：蓝带与 PC 端一致（header-art SVG 照常绘制，不在隐藏列表里） ----------
   只有顶部那条蓝带是蓝的，日期/工具按钮落在蓝带上需要白字；
   导航、会徽、搜索在蓝带下方的浅色区，保持普通模式配色不动 */
html.care-mode .header-date {
    color: #fff;
}

/* ---------- 头部 ---------- */
html.care-mode .header-date { font-size: 18px; }
html.care-mode .header-tools a { font-size: 20px; }
html.care-mode .header-tools .icon { width: 22px; height: 22px; }
html.care-mode .primary-nav { flex-wrap: wrap; }
html.care-mode .primary-nav a { font-size: 26px; padding: 12px 0; }
html.care-mode .nav-logo { width: 120px; height: auto; }
html.care-mode .logo-title { font-size: 36px; }
html.care-mode .logo-subtitle { font-size: 16px; }
html.care-mode .search-input { font-size: 20px; height: 56px; }
html.care-mode .search-button { width: 56px; height: 56px; }
html.care-mode .search-button .icon { width: 26px; height: 26px; }

/* ---------- 新闻频道 ---------- */
html.care-mode .news-tab { font-size: 28px; }
html.care-mode .news-more { font-size: 22px; }
html.care-mode .news-list li { height: auto; padding: 14px 0; }
html.care-mode .news-list .news-title { font-size: 22px; line-height: 1.6; }
html.care-mode .news-list .news-date { font-size: 18px; }
html.care-mode .home-caption h5 { font-size: 24px; line-height: 1.5; }
/* 焦点图保持固定高度，只放大标题条内边距 */
html.care-mode .home-caption { padding: 14px 20px; }

/* ---------- 服务平台 ---------- */
html.care-mode .fwpt-card { padding: 26px 10px; }
html.care-mode .fwpt-icon { width: 76px; height: 76px; }
html.care-mode .fwpt-name { font-size: 22px; margin-top: 14px; }

/* ---------- 互动交流 ---------- */
html.care-mode .hdjl-tab { font-size: 26px; }
html.care-mode .hdjl-more { font-size: 22px; }
html.care-mode .hdjl-entry-icon { width: 56px; height: 56px; }
html.care-mode .hdjl-entry-name { font-size: 22px; }
html.care-mode .hdjl-item-link { padding: 14px 0; }
html.care-mode .hdjl-item-title { font-size: 22px; line-height: 1.6; }
html.care-mode .hdjl-item-meta { font-size: 18px; }
html.care-mode .hdjl-item-seal { width: 72px; height: 72px; }
html.care-mode .hdjl-news-title { font-size: 26px; }
html.care-mode .hdjl-news-text { font-size: 20px; line-height: 1.7; }
html.care-mode .hdjl-phone-label { font-size: 18px; }
html.care-mode .hdjl-phone-num { font-size: 22px; }
html.care-mode .hdjl-phone-text { font-size: 18px; }

/* ---------- 政务信息 ---------- */
html.care-mode .zwxx-head-title { font-size: 26px; }
html.care-mode .zwxx-tab { font-size: 24px; }
html.care-mode .zwxx-more { font-size: 22px; }
html.care-mode .zwxx-entry-icon { width: 64px; height: 64px; }
html.care-mode .zwxx-entry-name { font-size: 22px; }
html.care-mode .zwxx-list li { height: auto; padding: 12px 0; }
html.care-mode .zwxx-list .zwxx-title { font-size: 20px; line-height: 1.6; }
html.care-mode .zwxx-list .zwxx-date { font-size: 16px; }

/* ---------- 页脚 ---------- */
html.care-mode .footer-select { font-size: 18px; height: 52px; }
html.care-mode .footer-copy { font-size: 18px; line-height: 2; }
html.care-mode .footer-copy span { margin: 0 10px; }

/* ---------- 标题放开自动换行（大字模式下不截断） ----------
   原样式是「单行省略号」或「多行截断」，字号放大后会裁字；
   中文无断词问题，放开后浏览器自动换行 */
html.care-mode .home-caption h5,
html.care-mode .news-list .news-title,
html.care-mode .hdjl-item-title,
html.care-mode .zwxx-list .zwxx-title {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
}
/* 新闻发布会图文：放开 4 行截断，显示全文 */
html.care-mode .hdjl-news-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* ---------- 概览页（通用概览 / 展示文章的概览） ----------
   布局与 PC 端一致（左栏目 + 右内容双栏，不单列堆叠），只放大字体 */
html.care-mode .side-head { font-size: 34px; }
html.care-mode .side-nav a { font-size: 28px; height: 72px; }
html.care-mode .list-title { font-size: 32px; }
html.care-mode .list-crumb { font-size: 20px; }
html.care-mode .list-group li { height: auto; padding: 12px 0; }
html.care-mode .l-text { font-size: 26px; line-height: 1.6; white-space: normal; text-overflow: clip; overflow: visible; }
html.care-mode .l-date { font-size: 20px; }

/* ---------- 文章区（展示文章的概览 / 细览） ---------- */
html.care-mode .fs-switch { display: none; }   /* 大字模式字号固定，切换无意义 */
html.care-mode .article-title { font-size: 36px; line-height: 1.6; }   /* 普通模式走 Bootstrap h1 ≈32px，放大到 36 */
html.care-mode .article-mate { font-size: 20px; }
html.care-mode .article-content { font-size: 22px; line-height: 2; }
