/* 米费勒 · 首页 #local「上门服务」局部样式（2026-11-09 合规重构）
 * 只被 index.html 引用，且在 main.css 之后加载。
 * 全部规则限定在 #local 作用域内，不修改 main.css 的任何全局变量或全局选择器。
 * 色值只在 #local 上定义一次局部变量，规则体一律 var() 引用，不污染全站。
 * 前缀 .lm-；沿用既有 .local-grid / .local-copy / .loc-now / .sr-only / .pulse，零新增全局规则。
 */
#local {
  --lm-bg: #12331B;            /* 覆盖实测 --ink-900 #173E26 */
  --lm-bg-grad: #0E2416;
  --lm-orange: #E87722;
  --lm-white: #FFFFFF;
  --lm-cta: #C4551A;
  --lm-cta-hover: #AD4712;
  --lm-cta-active: #A9461A;
  --lm-border: rgba(255, 255, 255, 0.08);
  --lm-cta-shadow: 0 8px 24px rgba(196, 85, 26, 0.28);
  --lm-cta-shadow-hover: 0 12px 30px rgba(196, 85, 26, 0.36);
}

/* ---------- 基础档（≥1025）：双栏 0.86fr / 1.14fr，gap 56px，padding 80px ---------- */
#local.section-dark { background: var(--lm-bg); }
#local.section { padding: 80px 0; }   /* 覆盖 84 / clamp / 104@≥1025 / 72@≤1080 / 64@≤640 / 48@≤480 */

#local .lm-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 56px;
  align-items: center;
}
/* 文案列：轻量服务卡，与右侧地图卡左右对称；半透明底 + 细描边只在 #local 作用域内。
 * 装饰一律用伪元素——CMS 注入链会重建 [data-cms] 元素的 innerHTML，
 * 写进带 data-cms 标签内部的装饰节点会被覆盖掉。 */
#local .lm-copy {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 34px 30px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(32,90,47,.30), transparent 62%),
    rgba(255,255,255,.045);
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
}
/* 左上橙色短竖条：面积 <5%，只做活元素锚点，呼应眉标与地图定位点 */
#local .lm-copy::before {
  content: "";
  position: absolute;
  left: 0; top: 34px;
  width: 3px; height: 30px;
  border-radius: 0 3px 3px 0;
  background: var(--lm-orange);
}

/* 眉标：覆盖 .section-dark .kicker 的浅绿 #A9C9B1。
 * 注意：.section-dark 与 #local 是同一个 <section>，不能写成 ".section-dark #local .kicker"
 *（后代选择器不成立），必须用复合选择器 #local.section-dark 才能命中并保持局部作用域。 */
#local.section-dark .kicker {
  margin: 0 0 14px;
  color: var(--lm-orange);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2em;
}
#local.section-dark .kicker::before { background: var(--lm-orange); }

#local .local-copy h2 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--lm-white);
}

/* 定位状态：与「预约上门」同模具的方角矩形按钮（同高 / 同圆角 / 同字号），
   描边款与主 CTA 的实心橙区分主次；橙色定位点保留。
   老板 2026-11-12 定稿：两个控件「一样大、款式统一、两头方一点」。 */
#local .loc-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
  overflow: hidden;
}
#local .loc-now::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--lm-orange);
  box-shadow: 0 0 0 4px rgba(232,119,34,.18);
}
#local .loc-now b {
  font-weight: 700;
  color: var(--lm-white);
  /* 超长城市名（如乌鲁木齐）在窄双栏下优雅省略，而不是被 overflow 硬切字 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 唯一主 CTA：与定位状态「同模具」——同高 48px / 同圆角 6px / 同字号 14px / 同内边距，
   方角矩形、两头方一点；深橙渐变（白字对比度 ≥4.5:1）+ 内高光，四态齐全 */
#local .lm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: linear-gradient(135deg, #CE5A1C, #B94C14);
  color: var(--lm-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(196,85,26,.30), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#local .lm-cta:hover {
  background: linear-gradient(135deg, #D9631E, #C0521A);
  box-shadow: 0 14px 32px rgba(196,85,26,.38), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-2px);
}
#local .lm-cta:active {
  background: var(--lm-cta-active);
  box-shadow: none;
  transform: translateY(0);
}
#local .lm-cta:focus-visible {
  outline: 3px solid var(--lm-white);
  outline-offset: 2px;
}
#local .lm-cta .icon { width: 18px; height: 18px; transition: transform .18s ease; }
#local .lm-cta:hover .icon { transform: translateX(3px); }

/* 一对等大控件同排：用 CSS Grid 的 minmax(0,1fr) 强制严格等宽，
   不受文字 min-content 宽度顶开（flex:1 1 0 会有 4px 偏差）。
   两者同宽 / 同高 48px / 同圆角 6px / 同字号，只是实心橙与描边款区分主次。 */
#local .lm-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}
#local .lm-action-row .loc-now,
#local .lm-action-row .lm-cta {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

/* 次级入口：轻量文字链，层级明确低于实心主 CTA。
   与 .lm-action-row 用完全相同的两列 Grid（列宽 + gap 一致），
   使「进入城市页」对齐左列「当前城市」、「了解服务标准」对齐右列「预约上门」。
   细竖线改用 .lm-links 伪元素画在两列缝正中，不占文字空间、不破坏对齐。 */
#local .lm-links {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
#local .lm-links::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 9px);
  width: 1px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.18);
  pointer-events: none;
}
#local .lm-sub,
#local .lm-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* 与上方按钮内文字居中一致，视觉上下对应 */
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .15s ease;
}
/* 超长动态文案（进入{city}城市服务页）在窄列内优雅省略，不撑破栅格 */
#local .lm-sub > span,
#local .lm-ghost > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#local .lm-sub:hover,
#local .lm-ghost:hover { color: var(--lm-white); }
#local .lm-sub .icon,
#local .lm-ghost .icon {
  width: 15px; height: 15px; flex: 0 0 auto;
  opacity: .7;
  transition: transform .15s ease, opacity .15s ease;
}
#local .lm-sub:hover .icon,
#local .lm-ghost:hover .icon { opacity: 1; transform: translateX(3px); }
#local .lm-sub:focus-visible,
#local .lm-ghost:focus-visible {
  outline: 2px solid var(--lm-white);
  outline-offset: 4px;
  border-radius: 2px;
}

/* 常驻地图卡：1/1 是唯一比例，viewBox 1000×994.5 用 meet 完整显示，不裁切、不加橙色光晕 */
#local .lm-map {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--lm-border);
  border-radius: 14px;
  background: linear-gradient(165deg, var(--lm-bg-grad), var(--lm-bg));
  overflow: hidden;
}
#local .lm-map svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* 静态示意图：不可 zoom / pan / 点击 */
}

/* ---------- 显式压回 main.css:1601 的 1080px 单栏断点，保证 1025–1080 仍双栏 ---------- */
@media (max-width: 1080px) {
  #local .lm-grid { grid-template-columns: 0.86fr 1.14fr; gap: 56px; }
}

/* ---------- 641–1024：双栏压缩 1fr / 1fr，gap 32px，padding 64px ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  #local.section { padding: 64px 0; }
  #local .lm-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  #local .lm-copy { padding: 28px 26px 26px; }
  #local .lm-copy::before { top: 28px; }
  #local .lm-map { max-width: none; }
  #local .local-copy h2 { font-size: clamp(24px, 3.4vw, 32px); }
  /* 中等宽度双栏较窄：收紧次级入口字号，两列 Grid 对齐关系保持不变 */
  #local .lm-sub,
  #local .lm-ghost { font-size: 11px; gap: 4px; }
  #local .lm-sub .icon,
  #local .lm-ghost .icon { width: 11px; height: 11px; }
  /* 长城市名在这一档空间最紧：两个控件同步收紧（字号仍保持一致），
     城市名由 .loc-now b 的省略号降级，控件尺寸 / 等大 / 同排不变 */
  #local .loc-now,
  #local .lm-cta { font-size: 12px; padding: 0 7px; gap: 5px; }
}

/* ---------- 641–767：双栏最窄临界点，文案列仅约 216px ----------
   只收紧这一对控件的字号 / 内边距 / 圆点，保证默认城市名完整显示；
   栅格比例、地图尺寸、链接排布都不动。 */
@media (min-width: 641px) and (max-width: 767px) {
  #local .loc-now,
  #local .lm-cta { font-size: 11px; padding: 0 5px; gap: 4px; }
  #local .loc-now::before { width: 5px; height: 5px; flex-basis: 5px; }
  /* 列宽仅约 103px：隐藏装饰箭头、再降一档字号，让默认城市名链接完整显示不被截 */
  #local .lm-sub,
  #local .lm-ghost { font-size: 10px; gap: 3px; }
  #local .lm-links::before { height: 13px; }
}

/* ---------- ≤640：单栏，文案在上地图在下，padding 32px，内部 gap 20px ---------- */
/* ===== 手机端重排（2026-11-12）：四层堆叠 → 两层，且每层两个控件等大 / 同排 =====
   第一层：当前城市 + 预约上门，一对等宽等高的方角按钮，横向一排；
   第二层：进入城市页 + 了解服务标准，用同一套两列 Grid，右列与「预约上门」严格对齐。
   长城市名（乌鲁木齐等）靠字号与内边距收紧容纳；极窄屏才允许自动换行。 */
@media (max-width: 640px) {
  #local.section { padding: 32px 0; }   /* 覆盖 ≤480 的 48px 与 ≤640 的 64px */
  #local .lm-grid { grid-template-columns: 1fr; gap: 18px; }
  #local .lm-copy { padding: 22px 20px 20px; border-radius: 14px; }
  #local .lm-copy::before { top: 22px; height: 26px; }
  #local.section-dark .kicker { margin: 0 0 10px; font-size: 11px; }
  #local .lm-map { max-width: none; }
  #local .local-copy h2 { font-size: 22px; line-height: 1.32; }
  /* 一对等大按钮：两个同时降高 / 降字号 / 收内边距，尺寸仍完全一致。
     字号与内边距同时收紧，是为了让最长城市名「乌鲁木齐」在 390px 也不被裁。 */
  #local .loc-now,
  #local .lm-cta {
    height: 44px;
    padding: 0 8px;
    gap: 6px;
    font-size: 12px;
  }
  #local .loc-now::before { width: 6px; height: 6px; flex-basis: 6px; box-shadow: 0 0 0 3px rgba(232,119,34,.18); }
  #local .lm-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }
  /* 两个次级入口：沿用两列 Grid，gap 与 .lm-action-row 一致(8px)，
     右列左边缘与「预约上门」按钮左边缘严格重合；竖线由 .lm-links::before 画在列缝。 */
  #local .lm-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
  }
  #local .lm-sub,
  #local .lm-ghost { font-size: 11.5px; gap: 4px; }
  #local .lm-sub .icon,
  #local .lm-ghost .icon { width: 12px; height: 12px; }
}

/* ≤340：极窄屏安全阀。两个控件仍严格等宽等高，两列 Grid 对齐不变，
   仅再收一档字号；超长城市名由 span 省略号降级，绝不撑破卡片。 */
@media (max-width: 340px) {
  #local .loc-now,
  #local .lm-cta { font-size: 11px; padding: 0 6px; gap: 5px; }
  /* 列宽仅约 111px：隐藏装饰箭头、降到 10px，保证默认城市名链接完整显示不被截 */
  #local .lm-sub,
  #local .lm-ghost { font-size: 10px; gap: 3px; }
  #local .lm-sub .icon,
  #local .lm-ghost .icon { display: none; }
  #local .lm-links::before { height: 13px; }
}

/* ≤380 只保留 H2 字号降级，不叠加任何间距规则 */
@media (max-width: 380px) {
  #local .local-copy h2 { font-size: 22px; }
}

/* 减少动效：共享渲染器的定位环停闪但保留 1 个静态橙环，定位信息不丢；CTA 无过渡无位移。
   数值与 assets/css/gridmap.css 的 reduced-motion 降级保持一致（animation none / halo .45 scale 1.5 / beat .35）。 */
@media (prefers-reduced-motion: reduce) {
  #local .lm-map .mlf-gridmap .mlf-gm-loc > .mcity .halo { animation: none; opacity: .45; transform: scale(1.5); }
  #local .lm-map .mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d2,
  #local .lm-map .mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d3 { display: none; }
  #local .lm-map .mlf-gridmap .mlf-gm-loc > .mcity .beat { animation: none; opacity: .35; }
  #local .lm-map .mlf-gridmap .mlf-gm-loc > .mcity .ring { animation: none; }
  #local .lm-cta,
  #local .lm-sub,
  #local .lm-ghost { transition: none; }
  #local .lm-cta:hover,
  #local .lm-cta:active { transform: none; }
  #local .lm-cta .icon,
  #local .lm-sub .icon,
  #local .lm-ghost .icon { transition: none; }
  #local .lm-cta:hover .icon,
  #local .lm-sub:hover .icon,
  #local .lm-ghost:hover .icon { transform: none; }
}