/* ============================================================
   DyingInTheSun · 移动端优化层（Mobile Refinement）
   ------------------------------------------------------------
   加载顺序：style.min.css → widgets.min.css → yyds-layout.css
             → hh-pages.css → mobile.css（本文件，最后加载）
   设计原则：
   1. 桌面端零影响：全部规则包在 ≤991 / ≤767 / ≤359 断点内
   2. 先修硬缺陷：横向溢出、图片撑破、点击区过小
   3. 再收紧排版：Hero / 卡片 / 页脚在窄屏重排为「紧凑但呼吸」
   4. 统一 44px 触控最小尺寸 + iOS 安全区
   版本：m20261020a
   ============================================================ */

/* ---------- 0. 全局基线 ---------- */
@media (max-width: 991.98px) {
  /* 注意：这里刻意不用 overflow-x:hidden —— 它会让 html/body 成为滚动容器，
     导致吸顶导航 position:sticky 失效。横向溢出已从根因（.row 负边距）修掉，
     仅保留 clip 作为兜底（clip 不创建滚动容器，不影响 sticky）。 */
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  a,
  button,
  .nav-top-item {
    touch-action: manipulation;
  }

  main > .container {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  /* 关键修复：Bootstrap .row 的 -15px 负边距在 .no-gutters 容器内会溢出右侧
     导致整页可横向拖动、卡片被裁切。窄屏统一收窄为 .3rem 内缩 */
  .row.post-list,
  .yyds-links > .row {
    margin-left: -.3rem !important;
    margin-right: -.3rem !important;
  }

  .row.post-list > [class*="col-"],
  .yyds-links > .row > [class*="col-"] {
    padding-left: .3rem !important;
    padding-right: .3rem !important;
  }

  img {
    max-width: 100%;
  }
}

/* ---------- 1. 顶部导航 ---------- */
@media (max-width: 767.98px) {
  .navbar {
    padding: .2rem .4rem !important;
  }

  .navbar .navbar-box {
    padding: .1rem .2rem !important;
    min-height: 44px;
  }

  .navbar-logo {
    min-width: 0;
    overflow: hidden;
  }

  .navbar-logo img {
    height: 32px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
  }

  .navbar-logo span {
    font-size: 1.2rem;
    white-space: nowrap;
  }

  /* 图标区：44px 触控区，间距收紧，避免挤掉 logo */
  .navbar-icon {
    gap: 0 !important;
    align-items: center;
  }

  .navbar-icon > div,
  #search-btn,
  #menu-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .navbar-icon > div:active,
  #search-btn:active,
  #menu-line:active {
    background: var(--bg-color-primary);
  }

  .navbar-icon .iconfont {
    font-size: 1.3rem;
  }

  /* 顶栏「回到顶部」浮层在窄屏无需显示（已有专用悬浮按钮） */
  .navbar .back-to-top {
    display: none !important;
  }
}

/* ---------- 2. 首页 Hero 搜索区 ---------- */
@media (max-width: 767.98px) {
  .yyds-hero {
    padding: 34px 0 28px;
  }

  .yyds-hero-inner {
    padding: 0 .85rem;
  }

  .yyds-hero-title {
    font-size: 20px;
    letter-spacing: .5px;
    margin-bottom: 8px;
    line-height: 1.35;
  }

  .yyds-hero-desc {
    font-size: 12.5px;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 0 .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .yyds-hero-search {
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  }

  /* 分类下拉：固定窄宽度，避免被最长分类名撑开挤扁输入框 */
  .yyds-hero-cat {
    height: 48px;
    width: 80px;
    min-width: 0;
    max-width: 80px;
    font-size: 13px;
    padding: 0 4px 0 12px;
    border-radius: 12px 0 0 12px;
    text-overflow: ellipsis;
  }

  .yyds-hero-input {
    height: 48px;
    padding: 0 10px;
    font-size: 13.5px;
    min-width: 0;
  }

  .yyds-hero-input::placeholder {
    font-size: 13px;
    color: #9aa0a6;
  }

  .yyds-hero-btn {
    height: 48px;
    width: 52px;
    border-radius: 0 12px 12px 0;
    font-size: 17px;
  }

  .yyds-hotsearch {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 12px;
    padding: 0 .2rem;
    text-align: left;
  }

  .yyds-hotsearch-label {
    display: inline-block;
    margin-bottom: 2px;
  }
}

/* ---------- 3. 区块标题 ---------- */
@media (max-width: 767.98px) {
  .yyds-sec-head {
    margin: 1rem .15rem .65rem;
    gap: .4rem;
  }

  .yyds-sec-title {
    font-size: 1.05rem;
    gap: .45rem;
  }

  .yyds-sec-bar {
    width: 4px;
    height: 1rem;
    border-radius: 2px;
  }

  .yyds-sec-cats {
    gap: .35rem;
  }

  .yyds-sec-cats .yyds-cat-chip {
    padding: .2rem .6rem;
    font-size: .75rem;
  }
}

/* ---------- 4. 资源卡片（2 列紧凑版） ---------- */
@media (max-width: 767.98px) {
  .post-list .post-grid {
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }

  /* 触屏无 hover，取消位移/放大，避免点击时错位 */
  .post-list .post-grid:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }

  .post-list .post-grid:hover .entry-media .placeholder img {
    transform: none;
  }

  .post-list .entry-media .placeholder {
    padding-top: 62%;
    border-radius: 10px 10px 0 0;
  }

  .entry-wrapper {
    padding: 8px 9px 10px;
  }

  .entry-header .entry-meta {
    gap: 8px;
    font-size: 10.5px;
    margin-bottom: 3px;
  }

  .entry-header .entry-meta .meta-category .dot {
    width: 5px;
    height: 5px;
    margin-right: 4px;
  }

  .entry-title {
    font-size: 13.5px;
    line-height: 18px;
    height: 36px;
    margin-bottom: 3px;
    font-weight: 700;
  }

  .post-list .top-tag {
    font-size: 10px;
    margin-right: 2px !important;
  }

  .entry-excerpt {
    font-size: 11.5px;
    line-height: 16px;
    height: 32px;
    color: #9aa0a6;
  }

  .post-badge {
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 5px;
  }

  .yyds-featured-grid {
    gap: 10px;
  }
}

/* 超窄屏（≤359px，如 320px 老机型）：卡片改单列，避免文字挤压 */
@media (max-width: 359.98px) {
  .post-list > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .post-list .entry-media .placeholder {
    padding-top: 56%;
  }

  .entry-title {
    font-size: 14px;
    height: auto;
    -webkit-line-clamp: 2;
  }

  .yyds-hero-title {
    font-size: 18px;
  }
}

/* ---------- 5. 分页 ---------- */
@media (max-width: 767.98px) {
  .yyds-pagination {
    gap: 6px;
    margin-top: 1rem !important;
  }

  .yyds-pagination .yyds-page-count {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
  }

  .yyds-pagination .yyds-page-list {
    gap: 6px;
  }

  .yyds-pagination .yyds-page-list .page-item .page-link,
  .yyds-pagination .yyds-page-list .page-item > span {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .yyds-pagination .yyds-page-list .page-item.prev .page-link,
  .yyds-pagination .yyds-page-list .page-item.next .page-link {
    padding: 0 11px;
    font-size: 12px;
    min-width: 0;
    white-space: nowrap;
  }
}

/* 小屏只留「当前页 / 上一页 / 下一页 / 首末页」，中间页码隐藏，减少换行 */
@media (max-width: 575.98px) {
  .yyds-pagination .yyds-page-list .page-item:not(.prev):not(.next):not(.active) {
    display: none;
  }
}

/* ---------- 6. 首页双栏导读 ---------- */
@media (max-width: 767.98px) {
  .yyds-links {
    margin: 1rem .15rem 0;
  }

  .yyds-links-card {
    padding: 12px 12px 4px;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .yyds-links-head {
    padding-bottom: 8px;
  }

  .yyds-links-title {
    font-size: 14.5px;
    gap: 7px;
  }

  .yyds-links-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
  }

  .yyds-links-list {
    padding: 4px 0 8px;
  }

  .yyds-links-list li {
    padding: 6px 0;
    font-size: 13px;
  }
}

/* ---------- 7. 首页大尾（品牌 / 目录三列 / 技术栈 / 友链 / 版权） ---------- */
@media (max-width: 767.98px) {
  .yyds-foot {
    padding: 22px 0 18px;
    margin-top: .6rem;
  }

  .yyds-foot .container {
    padding-left: .9rem;
    padding-right: .9rem;
  }

  /* 品牌区独占一行，目录区改为等宽三列网格（不再出现「第三列掉行」） */
  .yyds-foot-top {
    display: block;
  }

  .yyds-foot-brand {
    flex: 1 1 100%;
    min-width: 0;
  }

  .yyds-foot-logo {
    font-size: 21px;
    letter-spacing: .5px;
  }

  .yyds-foot-desc {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.75;
  }

  .yyds-foot-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
    margin-top: 16px;
  }

  .yyds-foot-col {
    flex: none;
    min-width: 0;
  }

  .yyds-foot-col-title {
    font-size: 12.5px;
    margin-bottom: 6px;
    white-space: nowrap;
  }

  .yyds-foot-col-list li {
    padding: 2px 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .yyds-foot-col-list li::before {
    margin-right: 5px;
    font-size: 6px;
  }

  .yyds-foot-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 16px;
  }

  .yyds-tile {
    height: 30px;
    border-radius: 6px;
    font-size: 11px;
  }

  .yyds-foot-friends {
    margin-top: 16px;
    padding-top: 12px;
    font-size: 12px;
    line-height: 1.8;
  }

  .yyds-foot-friends-label {
    display: inline-block;
    margin-bottom: 6px;
  }

  .yyds-foot-friend {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 2px 9px;
    font-size: 11.5px;
    background: var(--bg-color-primary);
    border-radius: 999px;
  }

  .yyds-foot-copy {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.8;
  }

  .yyds-foot-note {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.7;
    padding: 0 2px;
  }
}

@media (max-width: 359.98px) {
  .yyds-foot-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 8. 文章 / 独立页 ---------- */
@media (max-width: 767.98px) {
  .yyds-post-hero {
    padding: 1.1rem 0 !important;
  }

  /* 面包屑：白字 + 可换行，长分类名不撑破 */
  .hh-hero-crumb {
    font-size: 11.5px;
    flex-wrap: wrap;
    row-gap: 2px;
    margin-bottom: .5rem;
  }

  /* 资源信息卡：封面收敛为固定高横图，避免首屏被大图占满 */
  .hh-hero-card {
    padding: .75rem;
    gap: .7rem;
    border-radius: 12px;
  }

  .hh-hero-cover {
    max-height: 178px;
    overflow: hidden;
    border-radius: 10px;
  }

  .hh-hero-cover img,
  .hh-hero-cover-empty {
    width: 100% !important;
    height: 178px !important;
    max-height: 178px !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    border-radius: 10px;
  }

  .hh-corner-badge {
    right: 8px;
    bottom: 8px;
    padding: .3rem .8rem;
    font-size: .8rem;
    border-radius: 6px;
  }

  .hh-hero-title {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .hh-hero-meta {
    font-size: 11.5px;
    gap: .5rem .9rem;
  }

  .yyds-post-hero-title {
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .yyds-post-hero-meta {
    font-size: 11px;
  }

  .yyds-post-hero-meta > span + span {
    margin-left: 10px;
  }

  /* 下载面板：邮箱/密码/按钮一律整行，避免挤压成两字宽 */
  .hh-dl-panel {
    padding: .75rem;
    border-radius: 10px;
  }

  .hh-dl-mail,
  .hh-dlg-row {
    flex-direction: column;
    gap: .45rem;
  }

  .hh-dl-mail-input,
  .hh-dl-mail-btn,
  .hh-dlg-input,
  .hh-dlg-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: 42px;
  }

  .download-buttons {
    padding: .7rem .6rem .8rem;
    gap: .5rem;
  }

  .download-buttons .cloud-download-btn .cdb-main,
  .download-buttons .cloud-download-btn.cdb-full {
    padding: .6rem .7rem;
    font-size: .85rem;
  }

  .download-buttons .cloud-download-btn .cdb-pass {
    padding: .6rem .6rem;
    font-size: .78rem;
  }

  .hh-dl-front {
    font-size: .8rem;
  }

  #post.card {
    border-radius: 10px;
  }

  #post.card .card-body {
    padding: 1rem .9rem;
  }

  .post-title {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .post-content {
    font-size: 15px;
    line-height: 1.85;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 全局 img{width:100%;height:100%} 会把正文小图拉满并变形，窄屏按内容宽度自适应 */
  .post-content img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    border-radius: 8px;
  }

  .post-content pre,
  .post-content .code-toolbar {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .post-content pre code {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .post-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .post-content iframe,
  .post-content video {
    max-width: 100%;
  }

  .post-content blockquote {
    margin: .8rem 0;
    padding: .55rem .8rem;
  }

  .post-content h2 {
    font-size: 1.15rem;
  }

  .post-content h3 {
    font-size: 1.05rem;
  }

  /* 下载/操作区：按钮两列铺满，长按钮不再溢出 */
  .hh-hero-actions {
    gap: .4rem !important;
  }

  .hh-hero-actions .hh-hero-btn,
  .hh-hero-actions .hh-btn-dl {
    flex: 1 1 46%;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: center;
    padding: .5rem .6rem;
    font-size: .85rem;
  }

  .hh-dl-panel {
    padding: .7rem;
    border-radius: 10px;
  }

  .hh-post-sticky {
    max-height: none;
    overflow: visible;
  }

  .yyds-page-card {
    min-height: 54px;
    margin-bottom: 12px;
  }

  .yyds-page-icon {
    width: 44px;
  }

  .yyds-page-title {
    font-size: 13px;
  }

  .yyds-crumb {
    font-size: 11.5px;
  }
}

/* ---------- 9. 移动端菜单（底部弹层） ---------- */
@media (max-width: 991.98px) {
  #nav-components.mobile-aside,
  .mobile-aside.open {
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    /* 内容少时贴合内容高度，内容多时到 88vh 内部滚动，避免大片空白 */
    min-height: 0;
    max-height: 88vh;
  }

  #nav-components .back-box {
    margin-bottom: .4rem;
  }

  #nav-components .mobile-close-btn {
    top: .55rem;
    right: .55rem;
    width: 32px;
    height: 32px;
  }

  #nav-components .nav-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .1rem .2rem .5rem;
  }

  #nav-components .nav-menu > .nav-item {
    padding-bottom: .35rem !important;
  }

  #nav-components .nav-menu > .nav-item > .nav-a {
    display: block;
    padding: .6rem .55rem;
    font-size: 15px;
    border-radius: 10px;
    line-height: 1.4;
  }

  #nav-components .nav-menu > .nav-item > .nav-a:active {
    background: var(--bg-color-primary);
  }

  #nav-components .nav-menu .sub-menu > ul > li {
    font-size: 13px;
    padding: .35rem .3rem !important;
  }
}

/* ---------- 10. 全站搜索弹层 ---------- */
@media (max-width: 767.98px) {
  .main-search .search-box {
    width: 92vw;
    max-width: 92vw;
    margin: 0 auto;
    padding: .9rem !important;
  }

  .main-search .search-box .search-name h5 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  /* 关闭按钮：贴右上角但做成 40px 触控块，避免小圆点难点中 */
  .main-search .search-box .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0 10px 0 10px;
  }

  .main-search .search-box .close-btn .iconfont {
    font-size: 1.1rem;
  }

  .main-search .search-form input {
    height: 44px;
    font-size: 14px;
  }

  .main-search .post-tags a {
    font-size: 12px;
    padding: 3px 9px;
    margin: 0 6px 6px 0;
  }
}

/* ---------- 11. 通用细节 ---------- */
@media (max-width: 767.98px) {
  /* 锚点跳转留出吸顶导航高度，避免标题被导航遮住 */
  .post-content h1[id],
  .post-content h2[id],
  .post-content h3[id],
  .post-content h4[id] {
    scroll-margin-top: 64px;
  }

  /* iOS 底部安全区：避免悬浮按钮贴边被误触 */
  .hh-backtop {
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* 长英文/URL 不撑破容器 */
  .entry-title,
  .entry-excerpt,
  .yyds-page-title {
    word-break: break-word;
  }
}