/* ==================================================================
   mobile.css — 全站移动端适配规范（咸阳华尔倍丽 HUEBELLE）
   ------------------------------------------------------------------
   核心原则：本文件全部规则包裹在 @media (max-width: 768px) 内。
   >768px（桌面/平板）时，整个文件完全失效，桌面端零影响。
   仅新增，绝不覆盖 variables.css / base.css 的桌面规则，也不修改
   pages.css / components.css 内现有的 1024px / 768px 媒体查询。
   本文件加载在所有 CSS 最后，优先级最高。
   ================================================================== */

@media (max-width: 768px) {

  /* ================================================================
     模块 1：全局基线（间距 / 容器 / 节标题）
     ================================================================ */
  html { scroll-padding-top: calc(60px + 12px); }

  .section { padding-block: clamp(2.5rem, 9vw, 3.25rem); }
  .section--tight { padding-block: 1.75rem; }

  .container { padding-inline: 1.1rem; }

  .sec-head { margin-bottom: 1.5rem; }
  .sec-head--left { text-align: left; }
  .sec-head .sub { font-size: 0.9rem; }

  /* ================================================================
     模块 2：页头 / 导航 / 锚点条
     ================================================================ */
  :root { --header-h: 60px; }
  .site-header { height: 60px; }
  /* 手机端透明态与桌面端一致：真透明（露出深色 hero），滚动后出米白背景 */
  .site-header.is-transparent .brand__logo { filter: invert(1); }
  .site-header.is-transparent .nav__toggle span { background: var(--white); }
  .brand__logo { height: 34px; }
  .brand__logo--footer { height: 44px; }

  /* 移动抽屉：右侧面板（结构在 components.css 定义，此处微调） */
  .nav__drawer-panel { padding-top: calc(60px + var(--space-4)); }
  .m-link { padding-block: 0.9rem; font-size: 1.02rem; }

  /* 锚点导航（clinic / experts）横向滚动，隐藏滚动条 */
  .anchor-nav__inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .anchor-nav__inner::-webkit-scrollbar { display: none; }
  .anchor-nav a { white-space: nowrap; padding: 0.5em 1em; font-size: 0.85rem; }

  /* ================================================================
     模块 3：Hero 区
     ================================================================ */
  .hero--home .hero__inner { padding-block: calc(60px + 2rem) 3rem; gap: 1.5rem; }
  .hero__eyebrow,
  .hero__title-main,
  .hero__slogan { letter-spacing: 0; }
  .hero__meta { gap: 0.75rem; flex-wrap: wrap; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.6rem; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__tagline { font-size: 0.92rem; }

  .page-hero { min-height: 0; padding-block: calc(60px + 1.5rem) 1.75rem; }
  .page-hero__inner { padding-block: 0; }
  .page-hero .breadcrumb { margin-bottom: 0.6rem; font-size: 0.78rem; }

  .cta-band { padding: 2.25rem 1.25rem; }
  .cta-band .hero__actions { margin-top: 1.25rem; }

  /* ================================================================
     模块 4：卡片网格 → 双列紧凑（核心）
     ----------------------------------------------------------------
     覆盖 pages.css 内 768px 把这些网格压成 1fr 的规则，改为双列。
     ================================================================ */
  .dept-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }
  .value-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .shortcut-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .expert-showcase { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .expert-showcase__card--lead { grid-column: span 2; }
  .service-showcase { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .service-showcase__card,
  .service-showcase__card--featured { grid-column: auto; min-height: 190px; }

  /* 首页快捷导航卡 */
  .shortcut-card { padding: 1.1rem 1rem; }
  .shortcut-card__no { font-size: 0.95rem; }

  /* ================================================================
     模块 5：专家档案卡 / 医师卡 特殊处理
     ================================================================ */
  /* 专家大档案卡：图占满，正文内边距收紧 */
  .expert-card { grid-template-columns: 1fr; border-radius: var(--radius-lg); }
  .expert-card__visual { min-height: 220px; }
  .expert-card__body { padding: 1.5rem 1.35rem 1.75rem; }
  .expert-card__name { font-size: 1.5rem; }
  .expert-card__bio { font-size: 0.9rem; line-height: 1.7; }
  .expert-card__skills .cluster { gap: 0.4rem; }
  .expert-card__focus { font-size: 0.85rem; line-height: 1.7; }

  /* #doctors 的 .dept-grid 用了 inline style repeat(3,1fr)，普通选择器打不动
     → ID 选择器 + !important 精准覆盖，仅作用于这一处 */
  #doctors .dept-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem !important; }
  #doctors .doc-card__body { padding: 0.9rem 0.9rem 1rem; }
  #doctors .doc-card__name { font-size: 1rem; }
  #doctors .doc-card__title { font-size: 0.68rem; margin-top: 0.2rem; }
  #doctors .doc-card__bio { font-size: 0.78rem; line-height: 1.55; margin-top: 0.45rem; }
  #doctors .doc-card__skills { gap: 0.3rem; margin-top: 0.5rem; }
  #doctors .doc-card__skills .tag { font-size: 0.66rem; padding: 0.18em 0.4em; }

  /* ================================================================
     模块 6：卡片内部排版优化（双列紧凑下统一收紧）
     ================================================================ */
  .dept-card { padding: 1.15rem 1rem; }
  .dept-card .ico { width: 42px; height: 42px; margin: 0.5rem 0 0.65rem; }
  .dept-card .ico svg { width: 22px; height: 22px; }
  .dept-card h3 { font-size: 1rem; }
  .dept-card p { font-size: 0.8rem; line-height: 1.55; }
  .dept-card .more { font-size: 0.7rem; margin-top: 0.65rem; }

  .assurance { padding: 1.1rem 0.75rem; }
  .assurance .ico { width: 38px; height: 38px; }
  .assurance .ico svg { width: 20px; height: 20px; }
  .assurance .step { font-size: 0.72rem; }
  .assurance h4 { font-size: 0.92rem; }
  .assurance p { font-size: 0.72rem; line-height: 1.5; }

  .value-card { padding: 1.15rem 1rem; }
  .value-card .lbl { font-size: 0.78rem; }
  .value-card h3 { font-size: 1rem; }
  .value-card p { font-size: 0.78rem; line-height: 1.55; }

  .expert-showcase__card { min-height: 0; }
  .expert-showcase__media { aspect-ratio: 4 / 5; }
  .expert-showcase__body { padding: 0.85rem 0.85rem 1rem; }
  .expert-showcase__name { font-size: 1rem; }
  .expert-showcase__title { font-size: 0.72rem; }
  .expert-showcase__bio { font-size: 0.76rem; line-height: 1.55; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .expert-showcase__link { font-size: 0.74rem; }

  .service-showcase__content { padding: 0.9rem; }
  .service-showcase__name { font-size: 1rem; }
  .service-showcase__desc { font-size: 0.74rem; line-height: 1.55; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .service-showcase__cta { font-size: 0.72rem; }
  .service-showcase__no { font-size: 0.72rem; }

  /* 服务页详情块（保持单列，压缩间距） */
  .ser-list { padding: 2.25rem 0 2.5rem; }
  .ser-list__item { gap: 1.5rem; }
  .ser-list__text .ser-list__tit { font-size: 1.25rem; }
  .ser-list__text .ser-list__tit span { font-size: 0.85rem; }
  .ser-list__text > p { font-size: 0.88rem; line-height: 1.7; }
  .ser-list__imgs { gap: 10px; margin-top: 1.25rem; }
  .ser-list__imgbox img { aspect-ratio: 16 / 11; }
  .more-btn { min-width: 150px; height: 38px; font-size: 0.9rem; line-height: 36px; }

  /* 新闻卡（保持单列，信息多） */
  .news-card__body { padding: 1.1rem 1.15rem 1.25rem; }
  .news-card h3 { font-size: 1.02rem; }
  .news-card p { font-size: 0.84rem; line-height: 1.6; }

  /* director（院长寄语）：照片区放大、介绍文字收紧、签名优化 */
  .director { border-radius: var(--radius-lg); }
  .director__media { aspect-ratio: 4/3; }
  .director__media .ph { font-size: 0.85rem; padding: var(--space-3); }
  .director__body { padding: 1.4rem 1.35rem 1.7rem; }
  .director__body .qmark { font-size: 2.4rem; line-height: 0.5; display: block; margin-bottom: 0.2rem; }
  .director__body h3 { font-size: 1.15rem; margin: 0.25rem 0 0.6rem; }
  .director__body p { font-size: 0.82rem; line-height: 1.7; }
  .director__sign { margin-top: 1.1rem; gap: 0.75rem; }
  .director__sign .line { flex: 0 0 28px; }
  .director__sign .name { font-size: 0.98rem; }
  .director__sign .role { font-size: 0.7rem; }

  /* split 保持单列 */
  .split__media--frame { margin-bottom: 0; }

  /* 功能区 zone 保持单列，压缩 */
  .zone { padding: 1rem; }
  .zone .ico { width: 38px; height: 38px; }
  .zone .ico svg { width: 20px; height: 20px; }
  .zone h4 { font-size: 0.95rem; }
  .zone p { font-size: 0.78rem; line-height: 1.55; }

  /* core-triad（品牌核心三要素） */
  .core-triad .item { padding: 1.25rem 0.5rem; }
  .core-triad .item .ch { font-size: 1.15rem; }
  .core-triad .item .en { font-size: 0.68rem; }

  /* 统计带 */
  .stat__num { font-size: 1.7rem; }
  .stat__label { font-size: 0.72rem; }

  /* ================================================================
     模块 7：页脚
     ================================================================ */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-brand { grid-column: auto; }
  .footer-col h4 { font-size: 0.85rem; letter-spacing: 0.05em; }
  .footer-col ul li { font-size: 0.82rem; }
  .footer-desc { font-size: 0.82rem; line-height: 1.6; }
  .footer-qr { gap: 1rem; }
  .footer-qr .qr-box { width: 88px; height: 88px; }
  .footer-qr span { font-size: 0.72rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .footer-legal { font-size: 0.74rem; }
  .footer-risk { font-size: 0.66rem; line-height: 1.55; }

  /* ================================================================
     模块 8：浮动工具 / 表单 / 联系页
     ================================================================ */
  /* float-btn / back-top 已在 components.css 768px 缩到 48px，保持 */
  .float-btn__tip { display: none; } /* 触屏无 hover，隐藏 tooltip */

  /* 联系页表单 */
  .field input,
  .field textarea,
  .field select { font-size: 16px; } /* 防 iOS 缩放，必须 ≥16px */
  .form-note { font-size: 0.78rem; line-height: 1.6; }

  /* 地图与 VR 卡 */
  .map-box { min-height: 280px; }
  .vr-card .play { width: 56px; height: 56px; }
  .vr-card .lbl h4 { font-size: 1.05rem; }

  /* info-row（联系信息行） */
  .info-row { gap: 0.85rem; padding-block: 0.65rem; }
  .info-row .ico { width: 38px; height: 38px; }
  .info-row .v { font-size: 0.86rem; line-height: 1.5; }
  .info-row .tel { font-size: 1.05rem; }

  /* member 页 coming */
  .coming { padding: 2rem 1.35rem; border-radius: var(--radius-lg); }
  .coming .perks { gap: 0.5rem; }
  .coming .perk { font-size: 0.78rem; padding: 0.4em 0.85em; }

  /* ================================================================
     模块：clinic 院内实景图集（移动端隐藏，桌面端正常显示）
     图集由三块组成：标题块(.sec-head) + 筛选条 + 图集网格。
     :has() 精准选中「后面跟着筛选条」的那个标题块，
     连同筛选条、网格一起在移动端隐藏。上方「诊疗环境」标题与
     七大功能区卡片不受影响，仍正常显示。
     ================================================================ */
  #environment .sec-head:has(~ [data-gallery-filter]),
  [data-gallery-filter],
  [data-gallery] { display: none; }

}