/* ══ 移动端适配 ═════════════════════════════════════════════
   这个文件必须最后被引入（layout.ejs 里放 <link> 的最后一个）。
   media query 本身不加权重，靠的就是"排在后面"覆盖前面的规则，
   所以引入顺序错了这里全部失效。

   三档断点：
     1024px  平板       —— 只收间距，结构不动
      768px  手机(竖屏) —— 左右分栏改成上下，整页交给 body 滚
      420px  小屏手机   —— 再压一轮字号和内边距
   ──────────────────────────────────────────────────────────── */
/* iOS Safari 横屏时会自作主张放大正文，关掉 */
html {
  -webkit-text-size-adjust: 100%;
}
/* ── 平板：结构不变，只收一收留白 ─────────────────────────── */
@media (max-width: 1024px) {
  .leftBar {
    width: 32%;
  }
  .rightPageInner {
    padding: 1.5rem;
  }
  .post {
    padding: 36px 28px;
  }
  .pageCard {
    padding: 32px 26px;
  }
  .userDetail {
    margin: 40px 14px 0;
  }
  .category {
    width: 88%;
  }
}
/* ── 手机：主战场 ──────────────────────────────────────────
   桌面那套是「100vh 左右分栏 + 两块各自内部滚动」。
   手机上视口又矮，左右分栏后右边只剩一条缝，必须先拆掉它：
   改成上下两块、高度 auto，滚动交还给 body。
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .leftBar {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    overflow: visible /* 放二维码往下弹，理由见下面的 .wechatQr */;
  }
  .leftBar::before {
    inset: 0;
  }
  .leftBar br {
    display: none;
  }
  .leftBarAvatar {
    position: static;
    transform: none;
    float: left;
    width: 76px;
    height: 76px;
    margin: 2px 22px 4px 0 /* 右边这 22px 就是头像和名字之间的距离，想让文字再往右就调它 */;
  }
  .userDetail {
    width: 100%;
    max-width: 420px;
    overflow: hidden /* 包住浮动头像。缺这行卡片高度算不到它，头像会溢出卡片外 */;
    margin: 14px auto 0;
    padding: 12px;
    text-align: left;
  }
  .userDetail p:first-of-type {
    font-size: 20px;
  }
  .userDetail p:not(:first-of-type) {
    font-size: 14px;
  }
  .socialBar {
    margin: 14px 0 0;
  }
  .wechatQr {
    top: 52px /* 弹在按钮下方（桌面端的 bottom: 52px 要抵掉） */;
    bottom: auto;
    width: 130px;
    z-index: 10 /* .rightPage 是排在后面的定位元素，
                                  不加这行二维码会被右栏整个盖住 */;
  }
  .category {
    width: 100%;
    max-width: 420px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px auto;
    padding: 0;
    background-color: transparent;
    border: none;
  }
  .categoryItem {
    padding: 8px 14px;
    font-size: 14px;
    background-color: rgba(179,18,63,0.28);
    border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  }
  .leftNar {
    flex-direction: row;
    gap: 4px;
    padding: 8px 10px;
    margin-top: 0;
  }
  .navItem {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    font-size: 16px;
    letter-spacing: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .navItem:hover {
    transform: none;
    border-bottom-color: #b3123f /* 主强调：领带的酒红 */;
  }
  .navItem.active {
    border-left-color: transparent;
    border-bottom-color: #d99846 /* 次强调：齿轮数字的琥珀金 */;
  }
  .rightPage {
    flex: 1 0 auto;
    width: 100%;
  }
  .rightPage::before {
    filter: blur(3px) /* 手机 GPU 上 6px 模糊很吃性能，砍一半看不出差别 */;
  }
  .rightPageInner {
    padding: 16px 14px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) /* 避开 iPhone 底部横条 */;
    overflow: visible;
  }
  .post {
    max-width: 100%;
    padding: 24px 18px;
    border-radius: 12px;
  }
  .post .postTitle {
    font-size: 22px;
  }
  .postHeader {
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
  .postContent {
    font-size: 15px;
    line-height: 1.85;
  }
  .postContent h2 {
    font-size: 19px;
    margin: 1.6em 0 0.7em;
    padding-left: 10px;
    border-left-width: 3px;
  }
  .postContent h3 {
    font-size: 16px;
  }
  .postContent blockquote {
    padding: 10px 12px;
  }
  .postContent pre {
    padding: 12px;
    font-size: 12.5px;
    border-radius: 6px;
  }
  .postContent img {
    border-radius: 6px;
  }
  .postNav {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    margin-top: 20px;
  }
  .postNavItem {
    padding: 12px 14px;
  }
  .postNavNext {
    text-align: left;
  }
  .postList {
    gap: 16px;
  }
  .postItem {
    padding: 18px 16px;
    border-left-width: 3px;
  }
  .postTitle {
    font-size: 19px;
  }
  .postExcerpt {
    font-size: 14px;
    line-height: 1.75;
  }
  .postMeta {
    font-size: 12px;
  }
  .readMore {
    font-size: 13px;
  }
  .pageCard {
    max-width: 100%;
    padding: 24px 16px;
    border-radius: 12px;
  }
  .listHeader {
    padding-left: 12px;
    border-left-width: 4px;
    margin-bottom: 20px;
  }
  .listTitle {
    font-size: 21px;
  }
  .emptyState {
    padding: 48px 12px;
    font-size: 14px;
  }
  .pager {
    gap: 12px;
    margin-top: 24px;
  }
  .pager a {
    padding: 8px 14px;
    font-size: 13px;
  }
  .archiveTree {
    padding-left: 0;
  }
  .treeYear {
    margin-bottom: 26px;
  }
  .treeYearTitle {
    font-size: 20px;
  }
  .treeMonth {
    margin: 0 0 16px 8px;
    padding-left: 10px;
  }
  .treeItem {
    flex-wrap: wrap /* 标题长了一行放不下，让日期和标题换行而不是溢出 */;
    gap: 8px;
    padding: 5px 0;
  }
  .treeDay {
    font-size: 12px;
  }
  .treeLink {
    font-size: 14px;
  }
  .tagCloud {
    gap: 8px;
  }
  .tagCloudItem {
    padding: 5px 12px;
    font-size: 13px;
  }
}
/* ── 小屏手机：再压一轮 ─────────────────────────────────── */
@media (max-width: 420px) {
  .rightPageInner {
    padding: 12px 10px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  .post {
    padding: 20px 14px;
  }
  .post .postTitle {
    font-size: 20px;
  }
  .postContent {
    font-size: 14.5px;
  }
  .postContent pre {
    padding: 10px;
    font-size: 11.5px;
  }
  .navItem {
    font-size: 13px;
    padding: 9px 2px;
  }
  .categoryItem {
    padding: 7px 10px;
    font-size: 13px;
  }
  .pageCard {
    padding: 20px 13px;
  }
  .listTitle {
    font-size: 19px;
  }
  .postItem {
    padding: 16px 13px;
  }
  .postTitle {
    font-size: 18px;
  }
}
/* ── 触屏设备：干掉会"粘住"的 hover 位移 ────────────────────
   手机上点一下卡片，:hover 会一直保持到点别处为止，
   于是卡片永远浮在那里。位移类效果在触屏上没有意义，统一取消。
   ──────────────────────────────────────────────────────── */
@media (hover: none) {
  .userDetail:hover {
    transform: none;
  }
  .postItem:hover {
    transform: none;
  }
  .socialItem:hover {
    transform: none;
  }
  .tagCloudItem:hover {
    transform: none;
  }
  .statItem:hover {
    transform: none;
  }
  .navItem:hover {
    transform: none;
  }
  .navItem:not(.active):hover {
    background-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  .categoryItem:hover {
    transform: none;
  }
  .categoryItem:not(.active):hover {
    background-color: rgba(179,18,63,0.28);
  }
}