/* css/mobile.css
   目的：在小屏幕（<=420px）下修正布局，让页面在真实移动设备或 DevTools 仿真下更友好。
*/

/* 针对较窄设备的常用调整 */
@media (max-width: 420px) {
  /* 可调参数：整体缩放与下移 */
  :root {
    /* 为了在设备仿真与电脑端保持一致：默认不缩放、不整体下移 */
  --mobile-scale: 0.94;          /* 设备仿真时略微缩小以容纳更多内容（选项 A） */
  --mobile-offset: 64px;       /* 增大下移，让搜索行在仿真视口中可见（选项 A） */
    --top-row-offset: 0px;      /* 顶部地址/搜索行单独下移距离（0 = 不额外移动） */
    --rows-offset: 28px;        /* 在移动端将 .quick-actions/.tabs/.top-search-row 一起下移的偏移量 */
    --global-nudge: 3px;        /* 全局微调：在移动端整体下移（用于将内容整体下移 3px，不影响 fixed 元素） */
  --recipe-nudge: 5px;        /* 单独用于食谱推荐区域的下移（仅移动端生效） - 已从 3px 增加 2px */
  --recipe-title-nudge: 3.5px;  /* 食谱推荐标题下移（仅移动端生效） - 增加 1.5px */
  --search-row-nudge: -10px;   /* 绝对上移 10px（移动媒体查询下生效） */
    --above-topics-nudge: 4px;  /* 将“热门话题”上方所有内容（状态栏/搜索栏/四圆/食谱）整体下移 */
    --tabs-nudge: -5px; /* 将顶部标签（校园/推荐/...）在移动仿真下上移 5px */
  /* 仅上移标签文字的微调量（不移动整行），默认上移 3px，可按需微调 */
  --tabs-text-nudge: 3px;
  }

  /* 让画布在小屏下水平居中，以便缩放后仍对齐 */
  body { display: flex; justify-content: center; }

  /* 兼容 project/* 页面：把 .app 视为画布（与 .canvas 行为一致），便于统一仿真下的整体下移和宽度限制 */
  .app {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    box-sizing: border-box;
    /* 原页面可能设置了 overflow: hidden; 在移动仿真下会裁切顶部搜索栏，强制覆盖为可见 */
    overflow: visible !important;
  /* 校园页：再上移 1px（总计上移 14px） */
  --tabs-nudge: -14px;
    transform-origin: top center;
    transform: translateY(var(--mobile-offset)) scale(var(--mobile-scale));
    -webkit-transform: translateY(var(--mobile-offset)) scale(var(--mobile-scale));
    will-change: transform;
  }

  /* 画布自适应宽度并占满视口高度 */
  .canvas {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    box-sizing: border-box;
    transform-origin: top center;
    transform: translateY(var(--mobile-offset)) scale(var(--mobile-scale));
    -webkit-transform: translateY(var(--mobile-offset)) scale(var(--mobile-scale));
    will-change: transform;
  }

  /* 在移动端对可滚动内容整体下移一个小像素值，保证搜索行可见（不会影响 fixed 底栏） */
  .frame {
    transform: translateY(var(--global-nudge));
    -webkit-transform: translateY(var(--global-nudge));
  }

  /* 保证滚动区域下方留出 TabBar 空间 */
  .scroll-area {
    padding-bottom: 80px !important;
  }

  /* Tabs 可水平滚动；移动端字体缩小、禁止换行并上移以在一行内显示 */
  .tabs {
    padding: 12px 14px 0 !important;
    gap: 28px !important; /* 略微减小间距以便更多标签在一行展示 */
    font-size: 14px !important; /* 缩小字体以确保在一行内 */
    white-space: nowrap !important; /* 强制单行 */
    transform: translateY(calc(var(--rows-offset) + var(--above-topics-nudge) + var(--tabs-nudge)));
    -webkit-transform: translateY(calc(var(--rows-offset) + var(--above-topics-nudge) + var(--tabs-nudge)));
  }

  /* 仅校园页：让标签左右居中、等分均匀分布（不换行），更便于触达 */
  .app .tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 左右均匀分布 */
    gap: 0 !important; /* 通过等分宽度让视觉更整齐 */
    width: 100% !important;
    flex-wrap: nowrap !important; /* 单行显示 */
    white-space: nowrap !important; /* 保持单行 */
    overflow: visible !important;
  }
  .app .tabs .tab {
    flex: 1 1 0 !important; /* 等分每个项目 */
    text-align: center !important;
    /* 仅上移文字：减少上内边距、增加下内边距，总高度不变 */
    padding-top: calc(8px - var(--tabs-text-nudge)) !important;
    padding-bottom: calc(8px + var(--tabs-text-nudge)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important; /* 维持左右为 0 */
  }

  /* 非 .app 页面（如主页面使用 .canvas）也应用同样的“仅文字上移”规则，基线为 6px */
  .tabs .tab {
    padding-top: calc(6px - var(--tabs-text-nudge)) !important;
    padding-bottom: calc(6px + var(--tabs-text-nudge)) !important;
  }

  /* 校园页：将活动标签的下划线变细并上移，避免遮挡下方圆形入口 */
  .app .tabs .tab.current::after,
  .app .tabs .tab.active::after {
    height: 1px !important;      /* 再变细，避免遮挡下方图标 */
    bottom: 1px !important;      /* 再上移 1px，进一步远离下方图标 */
    border-radius: 1px !important;
  }
  /* 若使用边框形式作为下划线，也一并收窄 */
  .app .tabs .tab.current,
  .app .tabs .tab.active {
    border-bottom-width: 1px !important; /* 与伪元素厚度保持一致 */
  }

  /* 顶部行内按钮适当缩小 */
  .top-search-row .icon-btn { padding: 6px !important; }
  .top-search-row .search-pill { min-width: 140px; }

  /* 快捷按钮：在移动端将四个圆平均分布并垂直排列文字（不横向滚动） */
  .quick-actions {
    display: flex;
    justify-content: space-between; /* 四项均匀分布 */
    gap: 0; /* 通过 space-between 控制间距 */
    padding: 14px;
    overflow-x: visible;
    align-items: flex-start;
    transform: translateY(calc(var(--rows-offset) + var(--above-topics-nudge)));
    -webkit-transform: translateY(calc(var(--rows-offset) + var(--above-topics-nudge)));
  }

  /* 每个快捷项垂直居中显示：图标在上、标签在下；允许等分宽度 */
  .qa {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0 6px; /* 小内边距以避免挤到边缘 */
  }

  /* 保证圆形图标在项内水平居中 */
  .qa-circle { margin: 0 auto; }

  /* 图片、缩略图适应容器宽度
     注意：背景图容器需要明确高度，height: auto 会导致背景元素高度为 0 进而无法显示。
     在移动端为常见容器设定合适的宽高以保证图像可见。 */
  .big-img, .thumb, .circle-img {
    background-size: cover !important;
    background-position: center !important;
    max-width: 100% !important;
  }

  /* 食谱大图（左侧） */
  .big-img {
    width: 116px;
    height: 84px;
    border-radius: 10px;
    flex: 0 0 auto;
    background-repeat: no-repeat !important;
  }

  /* 话题缩略图（右侧卡片小图） - 已有值作备份 */
  .thumb {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    background-repeat: no-repeat !important;
    flex: 0 0 auto;
  }

  /* 圆形小图（列表左侧小头像/图标） */
  .circle-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-repeat: no-repeat !important;
    flex: 0 0 auto;
  }

  /* 话题卡片布局压缩 */
  .topic-card { display:flex; gap:12px; padding:12px 14px; }
  /* 放大移动端的话题缩略图以便在小屏仿真中更清晰可见 */
  .topic-card .thumb { width:140px; height:96px; border-radius:12px; }
  .topic-info { flex:1; min-width:0; }
  .topic-title { font-size:16px; }
  .topic-desc { font-size:13px; color:#666; }

  /* 将食谱推荐区域及其子模块整体下移 3px（仅移动媒体查询下生效），包括左侧大图、右侧两行（减肥/健身食谱）等 */
  .section-recipes,
  .section-recipes .recipes,
  .section-recipes .recipe-left,
  .section-recipes .recipe-left .big-img,
  .section-recipes .recipe-right,
  .section-recipes .recipe-right .row,
  .section-recipes .recipe-right .circle-img {
    transform: translateY(var(--recipe-nudge));
    -webkit-transform: translateY(var(--recipe-nudge));
  }

  /* 将“食谱推荐”标题下移（仅移动端） */
  .section-recipes .section-title {
    transform: translateY(var(--recipe-title-nudge));
    -webkit-transform: translateY(var(--recipe-title-nudge));
  }

  /* 固定底部 TabBar：保持在视口底部并受限于 max-width */
  .tabbar {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
    padding: 8px 10px;
    /* 使用浅蓝色背景（参考桌面色）并支持安全区 */
    background: #EAF4FF;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    border-top: 1px solid rgba(10,30,80,0.06);
    z-index: 9999;
  }

  /* 调整 tab 内文字与图标大小 */
  .tabbar .tab { padding:6px 8px; font-size:12px; }
  .tabbar .tab .tab-icon { width:20px; height:20px; }

  /* 适配状态栏和工具栏的垂直间距 */
  .status-bar { padding: 6px 12px; }
  .top-search-row {
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    /* 使用 rows-offset + search-row-nudge 将搜索行及其右侧图标整体下移 */
    transform: translateY(calc(var(--top-row-offset) + var(--rows-offset) + var(--search-row-nudge) + var(--above-topics-nudge)));
    -webkit-transform: translateY(calc(var(--top-row-offset) + var(--rows-offset) + var(--search-row-nudge) + var(--above-topics-nudge)));
    will-change: transform;
  }

  /* 同时兼容 project 下的顶部工具栏 .topbar：在仿真设备下把整行下移并保证内部元素垂直居中 */
  .topbar {
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    transform: translateY(calc(var(--top-row-offset) + var(--rows-offset) + var(--search-row-nudge) + var(--above-topics-nudge)));
    -webkit-transform: translateY(calc(var(--top-row-offset) + var(--rows-offset) + var(--search-row-nudge) + var(--above-topics-nudge)));
    will-change: transform;
  }

  /* 顶部工具栏内控件对齐（与 .top-search-row 相同规则） */
  .topbar .icon-btn,
  .topbar .ios-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }

  .topbar .search-pill {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    min-width: 140px !important;
  }

  .topbar .icon-btn svg,
  .topbar .ios-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* 在移动仿真下增强搜索胶囊可视性：白底、圆角、内边距和轻微阴影 */
  .topbar .search-pill,
  .top-search-row .search-pill {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 0 12px !important;
    box-shadow: 0 6px 18px rgba(10,30,80,0.06) !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    z-index: 10 !important;
  }

  /* 防止某些元素因固定高度溢出 */
  .frame, .scroll-area { min-height: 0; }
}