/* ==========================================================================
   Poetize 前台 · 移动端观感优化
   站点：https://baby.9k.beer
   生成：2026-11-02
   --------------------------------------------------------------------------
   作用范围：仅 @media (max-width: 768px) 内生效，桌面端（>768px）表现完全不变。
   实现方式：纯 CSS 覆盖层，不改动任何前端 JS 逻辑、不改动语料库与接口地址。

   为什么整段使用 !important：
   Poetize 前端是 Vue2 + webpack，主题样式（chunk-*.css）由 JS 在运行时注入
   <style> 标签，插入位置晚于本文件在 <head> 中的静态 <link>，同特异度下会
   覆盖本文件；部分主题规则特异度也更高（例如
   .playful[data-v-71606692]{font-size:40px} 为 (0,2,0)，主题自带的
   @media(max-width:768px) h1[data-v-71606692]{font-size:35px} 为 (0,1,1)，
   这正是手机端大标题没有被主题降级、仍然以 40px 渲染的直接原因）。
   因此本文件作为"最后一道覆盖层"统一使用 !important，
   所有规则都限定在 768px 及以下，不会影响桌面端。

   每条规则的 :root 注释里写明「实测根因」，方便后续维护时对照。
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* ---------- 1. 顶部导航条：站点名 + 菜单图标收紧 ----------
     实测：站点名 24px、左侧留白 30px，菜单图标 30px（图标外框 44px），
     在 360–390px 窄屏上显得又挤又重。 */
  .toolbar-title {
    margin-left: 16px !important;
  }
  .toolbar-title h2 {
    font-size: 19px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  .toolbar-mobile-menu {
    font-size: 24px !important;
    margin-right: 14px !important;
  }

  /* ---------- 2. Hero 大标题 ----------
     实测根因：40px 在 390px 宽被折成两行（"…优质资 / 源分享平台"），
     且 h1 满幅出血（x=0, w=390），右边贴边。
     主题 .signature-wall 带 .myCenter（flex + align-items:center），
     h1 宽度为 fit-content；标题整行在 40px 下实测 566px 宽（约 14.15em），
     降到 24px 后约 340px，在 360–390px 视口里都是单行并自动左右居中。 */
  .playful {
    font-size: 24px !important;
    line-height: 1.32 !important;
    margin: 10px 0 !important;
    text-align: center !important;
  }

  /* ---------- 3. 顶部提示语（.printer） ----------
     实测根因：提示语由 printer 组件插槽渲染成 <h3>，主题没给 h3 设字号，
     浏览器默认 h3 = 1.17em = 18.72px，并带 18.72px 上下外边距；
     20 个字 × 18.72px ≈ 374px 正好把 .printer 的 369px 内容框顶满，
     光标" | "被挤到右边缘 → 出现截断/贴边。
     降到 14px 后文字约 280px，.printer 按 fit-content 收缩并居中。 */
  .printer {
    margin: 0 12px !important;
    padding: 9px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }
  .printer h3 {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-align: center !important;
    word-break: break-word !important;
  }
  .printer .cursor {
    font-size: 14px !important;
  }

  /* ---------- 4. Hero 向下箭头 ---------- */
  .el-icon-arrow-down {
    font-size: 26px !important;
    bottom: 44px !important;
  }

  /* ---------- 5. 内容列容器 ----------
     实测：.page-container 是 width:90% + padding:0 20px，窄屏下总宽 391px
     比视口还多 1px（被 overflow-x:hidden 裁掉）。改成 100% + border-box。 */
  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 14px 32px !important;
  }
  .recent-posts,
  .aside-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .aside-content {
    margin: 20px 0 0 !important;
  }

  /* ---------- 6. 公告条（notices） ---------- */
  .announcement {
    padding: 12px 14px !important;
    margin: 18px 0 !important;
    line-height: 1.7 !important;
  }
  .announcement i {
    font-size: 18px !important;
  }
  .announcement div div {
    margin-left: 10px !important;
    line-height: 1.7 !important;
  }

  /* ---------- 7. 侧栏搜索框 ----------
     实测：输入框只有 30px 高，窄屏上比例失调、点按目标过小。 */
  .ais-SearchBox-input {
    height: 40px !important;
    font-size: 15px !important;
  }
  .ais-SearchBox-submit {
    height: 40px !important;
  }
  .card-content2-title {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  .myAside-container > div:not(:last-child) {
    margin-bottom: 22px !important;
  }

  /* ---------- 8. 侧栏「推荐文章」列表 ----------
     实测根因：缩略图 .aside-post-image 只有 40% 宽（约 120px），
     里面塞的是 960×1280 的竖版宣传图，object-fit:cover 把它裁成一条横带，
     图里烤死的标题文字被切成一堆没有层级的大字条 → 手机端完全读不出内容。
     手机端改成纯文字列表：标题两行截断、日期更小、行距更松。 */
  .aside-post-image {
    display: none !important;
  }
  .aside-post-title {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .aside-post-date {
    margin: 4px 0 14px !important;
    font-size: 12px !important;
  }

  /* ---------- 9. 文章列表卡片 ----------
     实测根因 a：卡片标题是没有任何字号规则的 <h3>（浏览器默认 18.72px），
     比 13px 的摘要还大 → 层级倒挂，看着像把 PC 端标题样式堆了下来。
     实测根因 b：竖版封面（960×1280）被塞进 330×170 的横幅框，
     object-fit:cover 只截到中间一条带子，封面里的大标题被拦腰截断。
     处理：标题 16px 两行截断；封面框加高并 object-position:top，露出封面顶部的大标题区。 */
  .recent-post-item {
    width: 100% !important;
    margin: 8px 0 !important;
  }
  .recent-post-item-image {
    height: 220px !important;
  }
  .recent-post-item-image .el-image__inner {
    object-position: center top !important;
  }
  .recent-post-item-post {
    height: auto !important;
    padding: 12px 14px 16px !important;
  }
  .recent-post-item-post h3 {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    margin: 0 0 6px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .recent-post-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* ---------- 10. 文章详情页 ---------- */
  .article-container {
    padding: 18px 14px 36px !important;
  }
  .article-title {
    font-size: 21px !important;
    line-height: 1.4 !important;
  }
  .my-content {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
  }
  .my-content p {
    font-size: 16px !important;
    line-height: 1.85 !important;
  }
  .my-content h1,
  .my-content h2,
  .my-content h3,
  .my-content h4 {
    line-height: 1.5 !important;
  }
  .article-info-container {
    left: 14px !important;
    right: 56px !important;
    max-width: none !important;
  }
  .article-info-news {
    right: 14px !important;
  }

  /* ---------- 11. 分页 ----------
     实测：Element 的 .el-pagination 是 white-space:nowrap，
     内部 ul.page-content 宽 420px、起点 x=-15 → 左侧第一个页码被裁掉半截。 */
  .el-pagination {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 !important;
  }
  .el-pagination .page-content {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- 12. 右侧悬浮按钮 ----------
     实测根因：主题齿轮钮 .toolButton（right:.5vh; bottom:3vh; 30×31）
     与 duhs.js 注入的蓝色「中」按钮 #duhs-langfab（right:12px; bottom:14px; 44×44）
     几乎完全重叠；#duhs-fab（投稿/申请/审核台）又叠在 langfab 正上方，
     三者挤在右下角 60×150 的小块里，压住正文。
     处理：自下而上分成三段——「中」按钮 12~56px、齿轮钮 62~98px、
     投稿/申请/审核台 106px 以上；每颗按钮触控区不小于 40px。 */
  #duhs-langfab {
    right: 12px !important;
    bottom: 12px !important;
  }
  .toolButton {
    right: 14px !important;
    bottom: 62px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #toc-button {
    right: 12px !important;
    bottom: 104px !important;
    width: 30px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #duhs-fab {
    right: 12px !important;
    bottom: 140px !important;
    gap: 12px !important;
  }
  #duhs-fab a {
    min-width: 54px !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ---------- 13. 561–768px（平板竖屏）：只收敛悬浮按钮尺寸 ---------- */
@media screen and (min-width: 561px) and (max-width: 768px) {
  #duhs-langfab {
    right: 16px !important;
    bottom: 16px !important;
  }
  .toolButton {
    right: 18px !important;
    bottom: 70px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }
  #toc-button {
    right: 16px !important;
    bottom: 116px !important;
  }
  #duhs-fab {
    right: 16px !important;
    bottom: 154px !important;
    gap: 12px !important;
  }
  #duhs-fab a {
    min-height: 42px !important;
  }
}