/* =====================================================================
全站移动端响应式补丁 (low-cost global responsive layer)
- 本文件在 style.css 之后加载，故同等特异性的选择器可直接覆盖。
- 思路：1) 全局安全网 2) clamp() 流体字号(免媒体查询) 3) 少量断点修布局
- 断点对齐 Bootstrap 4：xl≥1200 lg≥992 md≥768 sm≥576
- 导航(汉堡/抽屉)模板已自带，无需在此处理。
- 第6段：手机端横向滑动（科技赋能 / 罗蜜雅伦公益 / 项目体验），仅在 ≤767px 生效，PC 不受影响。
===================================================================== */
/* ---------- 0. WOW.js 兜底（关键） ----------
WOW.js 会给所有 .wow 元素加【行内】visibility:hidden，再靠滚动检测逐个改回 visible。
若该回调未触发，这些元素(首页约28处:科技赋能图/公益图/blog图等)会永久隐藏，
表现为"图片缺失"且滚动无法恢复、控制台无报错。
行内样式仅 !important 可覆盖 —— 强制始终可见，动画能跑则照常跑，跑不了也不影响显示。 */
.wow { visibility: visible !important; }
/* ---------- 导航栏吸顶（全站 PC + 手机统一） ----------
jquery.sticky 在本站未生效、导航随页面滚走。改用纯 CSS 强制 fixed 固定顶部 +
棕色背景，!important 覆盖 sticky.js 可能的内联定位。全宽度生效。 */
.site-navbar,
.sticky-wrapper .site-navbar {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
width: 100% !important;
background: #A5816B !important;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
z-index: 1999;
}
/* sticky.js 给 wrapper 设的高度/定位归零，避免占位错乱 */
.sticky-wrapper { height: auto !important; position: static !important; }
/* 固定后棕底，汉堡按钮图标用浅色保证可见 */
.site-navbar .site-menu-toggle .icon-menu { color: #fff; }
/* 导航恒为棕色(深)背景 → 始终用白色 logo + 白色菜单文字，
覆盖各页 is-sticky 触发的「深色 logo / 深色文字」(否则锚点跳转滚动后 logo 变色、文字异常)。 */
/* 关键：sticky.js 把 .is-sticky 加在父级 .sticky-wrapper 上(不是 .site-navbar 本身)。
带 #锚点 跳转后页面滚到锚点 → is-sticky 触发 → 各页 .sticky-wrapper.is-sticky 规则显示深色 logo。
下面匹配真实 DOM 结构(wrapper 父 + navbar 子)并用 body 提权 + !important 强制白色 logo。 */
body .site-navbar .logo-default,
body .site-navbar.is-sticky .logo-default,
body .sticky-wrapper.is-sticky .site-navbar .logo-default,
body .sticky-wrapper.is-sticky.js-sticky-header .logo-default { display: block !important; }
body .site-navbar .logo-sticky,
body .site-navbar.is-sticky .logo-sticky,
body .sticky-wrapper.is-sticky .site-navbar .logo-sticky,
body .sticky-wrapper.is-sticky.js-sticky-header .logo-sticky { display: none !important; }
body .site-navbar .site-navigation .site-menu > li > a,
body .site-navbar.is-sticky .site-navigation .site-menu > li > a,
body .sticky-wrapper.is-sticky .site-navbar .site-navigation .site-menu > li > a {
color: #fff !important;
}
/* 科技赋能横滑包裹层：
≥768px(PC/平板) 让包裹层接管整行、自身作为 flex 多列容器，6 张卡片按 col-lg-4 排 3 列；
≤767px 在第6段转为横滑容器。
（早期用 display:contents 透明化，但其在 flex 下浏览器兼容性差，会让 PC 栅格塌陷，故改为显式 flex 容器。） */
@media only screen and (min-width: 768px) {
/* 标题与卡片包裹层各占整行；包裹层内部 flex 多列还原 col-lg-4 三列栅格 */
.feature_area .row.feature_bg > .section-title { width: 100%; flex: 0 0 100%; }
.feature_track {
display: flex;
flex-wrap: wrap;
width: 100%;
flex: 0 0 100%;
}
}
/* 仅手机端换行的
：PC 隐藏（不换行），手机端第4段显示 */
br.mobile-br { display: none; }
/* ---------- 1. 全局安全网（所有宽度生效） ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
/* 图片/媒体永不溢出 */
img { max-width: 100%; height: auto; }
video, iframe, embed, object { max-width: 100%; }
/* 长链接/长词不撑破容器 */
p, h1, h2, h3, h4, h5, h6, a, span, li { overflow-wrap: break-word; word-wrap: break-word; }
/* 表格在窄屏可横向滚动而不撑破页面 */
.table-responsive { -webkit-overflow-scrolling: touch; }
/* ---------- 2. 流体字号（clamp：手机自动缩小，桌面保持原值） ---------- */
.section-title h2,
h2.section-title-white { font-size: clamp(28px, 5.2vw, 54px); line-height: 1.25; }
.hero-text h2 { font-size: clamp(30px, 6vw, 54px); line-height: 1.2; }
.hero-text p { font-size: clamp(15px, 2.2vw, 20px); }
.single_about_content h2 { font-size: clamp(26px, 4.8vw, 50px); line-height: 1.3; }
.section-top-title,
.section-top-title h2 { font-size: clamp(26px, 4.8vw, 52px); line-height: 1.3; }
/* 其它散落的大标题统一兜底（46/40/80px 等） */
.single_feature h3,
.single_testimonial h3,
.home_blog_content h3,
.blog_title_info h3 { font-size: clamp(18px, 2.6vw, 24px); }
/* ---------- 3. 平板及以下 (≤991px) ---------- */
@media only screen and (max-width: 991px) {
/* 区块上下内边距收一档 */
.section-padding { padding-top: 60px; padding-bottom: 60px; }
.section-top { padding-top: 40px; padding-bottom: 40px; }
.section-title { margin-bottom: 40px; }
/* 写死的高视频/大图块改为自适应 */
.home_video { height: auto; min-height: 320px; }
.home_video video { height: auto; }
}
/* ---------- 4. 手机 (≤767px) ---------- */
@media only screen and (max-width: 767px) {
.section-padding { padding-top: 45px; padding-bottom: 45px; }
/* 仅手机端换行的
显示出来 */
br.mobile-br { display: inline; }
/* 移动端抽屉菜单：menu.css 用 100vh 固定高度，在手机浏览器(含地址栏)算不准，
底部菜单项(如「关注我们」)滚不到。
用 absolute top/bottom 让滚动容器物理贴满抽屉(不依赖视口单位)，
抽屉本身用 dvh，底部大留白确保最后一项完整露出。 */
.site-mobile-menu { top: 0; height: 100vh !important; height: 100dvh !important; }
.site-mobile-menu .site-mobile-menu-body {
position: absolute !important;
top: 52px;
bottom: 0;
left: 0;
right: 0;
height: auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 160px !important;
box-sizing: border-box;
}
/* section-top 蓝色底色块：手机端高度减小（保留顶部空间避开固定导航栏） */
.section-top { padding-top: 90px !important; padding-bottom: 36px !important; }
/* 全站统一：54px 主标题 → 36px（覆盖第2段 clamp 及 style.css 各处 54px） */
.section-title h2,
h2.section-title-white,
.hero-text h2,
.single_why_choose h2,
.single_why_choose_title h2,
.section-top-title h1,
.section-top-title h2 { font-size: 36px !important; line-height: 1.3; }
/* 全站统一：16px 正文 → 14px */
body,
.section-title p,
.single_why_choose p,
.single_why_choose_title p,
.single_testimonial p,
.consultation_desc { font-size: 14px; }
/* 导航栏 logo 缩小：menu.css 写死 width:150px，手机端缩小为固定宽度
（SVG 可能无内在宽高比，必须用 width 而非 max-height，否则宽度算成 0 会消失）。
两站共用此 CSS，按 logo 图片名区分：罗蜜大一点、萱娅小一点。 */
.site-logo img,
.site-logo-img { height: auto !important; }
.site-logo-img[src*="罗蜜"] { width: 120px !important; }
.site-logo-img[src*="萱娅"] { width: 95px !important; }
/* 汉堡菜单按钮(.icon-menu)靠右对齐：
该列带 Bootstrap .d-inline-block(可能 !important)，无法改成 flex；
故用 text-align:right 让列内的 (inline-block) 靠右，按钮自身 block + margin-left:auto 双保险。 */
.site-navbar .container .row > div:last-child { text-align: right; }
.site-menu-toggle.float-right {
float: none !important;
display: block !important;
margin-left: auto !important;
margin-right: 0 !important;
width: -moz-fit-content;
width: fit-content;
}
.site-menu-toggle .icon-menu { font-size: 28px; }
/* 各模块顶部标题统一 36px（公益标题 .single_why_choose_title h2 特异性更高，一并覆盖） */
.section-title h2,
.single_why_choose_title h2 { font-size: 36px !important; line-height: 1.3; }
/* 各模块标题下的描述正文，手机端 14px 并左对齐（PC 为 16px 居中，不受影响） */
.section-title p { font-size: 14px; line-height: 1.6; text-align: left; }
/* 首页所有正文的字重 + 字体统一为科技赋能正文(.section-title p)的样式：
font-weight:300 + Poppins/系统无衬线（覆盖爱掌心 normal、资讯 400、评价继承等差异） */
.single_why_choose p,
.single_testimonial p,
.consultation_desc {
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
/* 公益正文：取消其中的
硬换行，让文字自然回流，保证小机型文案完整可见 */
.single_why_choose_title p br { display: none; }
/* 公益模块容器全宽无内边距，正文「中。」末尾被裁 → 给容器和正文补左右内边距并允许换行 */
.portfolio_area > .container-fluid { padding-left: 16px; padding-right: 16px; }
.single_why_choose_title p {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
white-space: normal !important; /* 强制换行，防 nowrap 导致末尾溢出被 overflow-x:hidden 裁掉 */
word-break: break-word;
overflow-wrap: anywhere;
overflow: visible;
/* 与科技赋能正文(.section-title p)保持一致：14px / 字重300 / Poppins */
font-size: 14px;
line-height: 1.6;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
/* 「爱，是我们掌心恒久的温度」模块：手机端标题+正文居中（与其他模块一致），标题 36px、正文 12px */
.single_why_choose { margin-left: 0; text-align: center; }
.single_why_choose h2 { font-size: 36px; line-height: 1.1; text-align: center !important; }
.single_why_choose p { font-size: 14px; line-height: 1.7; text-align: center !important; }
/* 「爱的答案」按钮与下方图片（堆叠后）拉开间距 */
.why_choose_area .single_why_choose { margin-bottom: 40px; }
/* float 布局在手机上取消浮动、改为块级居中堆叠 */
.testimonial_img,
.testimonial_img img { float: none; margin: 0 auto 24px; display: block; }
/* 相邻两列之间留出竖向间距（col 堆叠后避免贴死） */
.single_testimonial,
.single_logo,
.single_about_content { margin-bottom: 30px; }
/* 页脚写死了 height:300px，手机堆叠会溢出 → 改自适应 */
.footer { height: auto; padding-bottom: 30px; }
/* 页脚各栏堆叠后给间距，二维码居中 */
.single_footer { margin-bottom: 30px; text-align: center; }
.footer_qr_item { display: inline-block; margin: 0 12px 16px; }
.footer_custom_info { text-align: center; }
/* 主按钮在手机上更易点（不强制全宽，仅放大点击区） */
.btn_one, .home_b_btn { padding-left: 28px; padding-right: 28px; }
/* 订阅/表单输入框堆叠占满宽度 */
.input-group .form-control,
.subscribe__input { width: 100%; }
}
/* ---------- 5. 小屏手机 (≤575px) ---------- */
@media only screen and (max-width: 575px) {
.section-padding { padding-top: 36px; padding-bottom: 36px; }
/* 把容器左右留白收紧一点，给内容更多空间 */
.container { padding-left: 18px; padding-right: 18px; }
/* 主按钮可考虑全宽，触达更友好（如不需要可删本段） */
.btn_one, .home_b_btn { display: inline-block; }
}
/* ---------- 6. 手机端横向滑动（对标 Apple「全系产品，细细看」，仅 ≤767px） ----------
科技赋能 / 罗蜜雅伦公益 / 项目体验 三个模块的卡片在手机端改为
「横向滑动 + 滚动吸附」，每屏约 2 张并露出下一张一角，提示可滑动。
- 科技赋能：标题留在 .row 内不动，仅卡片所在的 .feature_track 横滑（PC 端 .feature_track=contents 无影响）。
- 公益 / 项目体验：标题本就在 .row 外，直接让其 .row 横滑即可。
- 全部包裹在 max-width:767px 内 → PC 端零改动。 */
@media only screen and (max-width: 767px) {
/* —— 横滑容器（四处共用：科技赋能 / 公益 / 项目体验 / 资讯） —— */
.feature_track,
.portfolio_area .portfolio-grid > .row,
.blog_area .row.text-center,
#home-news-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding: 0 16px;
margin-left: 0;
margin-right: 0;
padding: 4px 16px 16px; /* 左右留边，底部留滑动空间 */
gap: 14px;
}
/* 科技赋能：手机端模块顶部加间距，避免「科技赋能」标题紧贴上方首屏大图 */
.feature_area { padding-top: 40px; }
/* .feature_track 是 .row 的子项，让它占满整行宽度再内部横滑 */
.feature_area .row.feature_bg .section-title { flex: 0 0 100%; max-width: 100%; }
.feature_track { flex: 0 0 100%; max-width: 100%; }
/* .feature_bg 的 PC 端 padding:60px 会让横滑区左右缩进 120px、图片显小 → 手机端压缩 */
.feature_area .row.feature_bg { padding: 0; box-shadow: none; }
/* 隐藏横向滚动条，保持简洁 */
.feature_track::-webkit-scrollbar,
.portfolio_area .portfolio-grid > .row::-webkit-scrollbar,
.blog_area .row.text-center::-webkit-scrollbar,
#home-news-list::-webkit-scrollbar { height: 0; display: none; }
/* —— 每张卡片：固定宽度 + 吸附，主卡 83%、露出下一张一角（对标 Apple 观感） —— */
.feature_track > [class*="col-"],
.portfolio_area .portfolio-grid > .row > [class*="col-"],
.blog_area .row.text-center > [class*="col-"],
#home-news-list > [class*="col-"] {
flex: 0 0 83%;
max-width: 83%;
padding-left: 0;
padding-right: 0;
margin-bottom: 0; /* 单行横滑，去掉堆叠时的竖向间距 */
scroll-snap-align: start;
}
/* 资讯卡片下方文字缩小到 12px */
#home-news-list .consultation_desc {
font-size: 14px;
margin-top: 10px;
line-height: 1.5;
}
/* 横滑时卡片本身也去掉竖向外边距 */
.feature_area .single_feature,
.portfolio_area .single-gallery,
.blog_area .home_single_blog { margin-bottom: 0; }
/* 公益「查看更多」按钮在横滑区下方，单独成行居中 */
.portfolio_area .portfolio-grid > .col-lg-12 { padding: 16px; }
/* 项目体验：卡片变窄(46%)后，原 padding:30px 会挤压「点击体验」按钮致变形。
缩小内边距并让按钮不换行、宽度自适应文字。 */
.blog_area .home_blog_content { padding: 16px 12px; text-align: center; }
.blog_area .home_b_btn {
white-space: nowrap;
width: auto;
padding: 6px 18px;
}
}
/* ---------- 7. 倾听爱的声音：一屏一张，头像在上居中、文案在下，左右滑动（仅 ≤767px） ----------
每张卡片占满一屏宽并吸附 → 一次滑动翻一张。
卡片内部纵向排布：头像居中在上，姓名+评价在下居中。 */
@media only screen and (max-width: 767px) {
.testimonial_area .col-lg-10 > .row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
margin: 0;
padding: 4px 16px 16px;
gap: 16px;
}
.testimonial_area .col-lg-10 > .row::-webkit-scrollbar { height: 0; display: none; }
/* 每张卡片占满一屏宽并吸附 → 一面板一张 */
.testimonial_area .col-lg-10 > .row > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
scroll-snap-align: start;
}
/* 卡片内部：纵向、整体居中（覆盖第4段 / PC 的 float 横排） */
.testimonial_area .single_testimonial {
margin-bottom: 0;
overflow: visible;
text-align: center;
}
/* 头像在上居中（取消 float，容器满宽 + 图片块级水平居中） */
.testimonial_area .testimonial_img {
float: none !important;
display: block;
width: 100%;
text-align: center;
margin: 0 0 12px;
}
.testimonial_area .testimonial_img img {
float: none !important;
display: block;
margin: 0 auto !important; /* 覆盖 style.css 的 margin-right:20px */
width: 150px !important;
height: 150px !important;
border-radius: 50%;
object-fit: cover;
}
/* 文案在下、居中 */
.testimonial_area .single_testimonial h4 {
font-size: 16px !important; /* style.css 为 24px，加 !important 确保缩小生效 */
line-height: 1.3;
margin-top: 0;
margin-bottom: 2px; /* 与正文间距缩短 */
white-space: normal;
overflow: visible; /* 覆盖 style.css 的 overflow:hidden，避免裁切 */
}
.testimonial_area .single_testimonial p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 0;
overflow: visible;
}
}
/* ---------- 8. 横滑模块下方左右箭头（对标 Apple iPhone 滑动条，仅 ≤767px） ----------
箭头由 hscroll-nav.js 动态生成。默认隐藏，仅手机端显示。 */
.hscroll-nav { display: none; }
@media only screen and (max-width: 767px) {
.hscroll-nav {
display: flex;
justify-content: flex-end; /* 靠右排列，同 Apple */
gap: 12px;
padding: 4px 16px 0;
}
.hscroll-arrow {
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #e8e8ed; /* Apple 风格浅灰底 */
cursor: pointer;
padding: 0;
position: relative;
-webkit-tap-highlight-color: transparent;
transition: background .2s, opacity .2s;
}
.hscroll-arrow:disabled { opacity: .35; cursor: default; }
.hscroll-arrow:not(:disabled):active { background: #d8d8de; }
/* 纯 CSS chevron（深色折角箭头） */
.hscroll-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-top: 2px solid #1d1d1f;
border-right: 2px solid #1d1d1f;
}
.hscroll-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.hscroll-next::before { transform: translate(-70%, -50%) rotate(45deg); }
}