/*
 * Ocean 主题 · 手机端适配优化
 * 在主题默认样式之后加载，仅作用于窄屏/触屏设备。
 * 文件位置：templates/assets/styles/ocean-mobile.css
 */

/* iPhone 刘海屏安全区 */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ==============================
   1. 触屏交互优化
   ============================== */
@media (max-width: 768px) {
  a,
  button,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
  /* 触屏设备禁用悬停位移动画，避免点击时卡片抖动 */
  .group:hover,
  .group:hover img {
    transform: none !important;
  }
  /* 防止 iOS 聚焦输入框时页面自动放大 */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ==============================
   2. 顶部导航：手机端固定 + Logo 尺寸
   ============================== */
@media (max-width: 640px) {
  #header-menu {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  /* 站点 Logo 在手机上限制最大尺寸，防止挤压右侧图标 */
  #header-menu a[href="/"] img {
    width: auto !important;
    height: auto !important;
    max-width: min(45vw, 150px);
    max-height: 2rem;
  }
}

/* ==============================
   3. 首页 Banner 高度压缩
   ============================== */
@media (max-width: 640px) {
  #header-menu ~ .h-96 {
    height: 15rem;
  }
}

/* ==============================
   4. 文章/资源列表卡片：手机端两列网格
   （≤640px 改为一行两张：封面上置、标题紧凑，快速浏览更多内容）
   ============================== */
@media (max-width: 640px) {
  #post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  /* 单条布局左侧缩略图卡片 → 上图下文 */
  #post-list > .flex-row {
    flex-direction: column;
    align-items: stretch;
  }
  #post-list > .flex-row > [class*="shrink-0"] {
    width: 100%;
    padding: 0.5rem 0.5rem 0;
  }
  #post-list > .flex-row > [class*="shrink-0"] img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    border-radius: 0.4rem;
  }
  /* 文字部分紧凑：缩小内边距与标题字号 */
  #post-list > .flex-row > [class*="min-w-0"] {
    padding: 0.5rem;
    gap: 0.3rem;
  }
  #post-list > .flex-row h1 {
    font-size: 0.9375rem;
    line-height: 1.35;
  }
  /* 窄卡片下隐藏摘要、标签、统计数字，突出封面与标题 */
  #post-list > .flex-row p.truncate { display: none; }
  #post-list a[class*="bg-zinc-100"] { display: none; }
  #post-list [class*="justify-between"] > [class*="shrink-0"] { display: none; }
  /* 分页与空状态占满整行 */
  #post-pagination,
  #post-empty {
    grid-column: 1 / -1;
  }
}

/* 分类筛选胶囊，手机上略微加大点击范围 */
@media (max-width: 640px) {
  .cat-pill {
    padding: 0.45rem 0.85rem;
  }
}

/* ==============================
   5. 分页：手机端紧凑按钮 + 整齐换行，避免横向溢出
   （含首页「最新推荐」挖件页选，其 ul 紧随 #post-list）
   ============================== */
@media (max-width: 640px) {
  #post-pagination {
    max-width: 100%;
  }
  #post-pagination ul,
  #post-list + div ul {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.35rem;
    row-gap: 0.8rem;
  }
  /* 缩小页码按钮，减少换行错落 */
  #post-pagination a,
  #post-pagination span {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.25;
  }
}

/* ==============================
   6. 移动端弹出的下拉菜单面板
   ============================== */
@media (max-width: 640px) {
  header .fixed.inset-x-4 {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

/* ==============================
   7. 文章正文（Tailwind prose 渲染）移动端容错
   ============================== */
@media (max-width: 768px) {
  article#content,
  article.prose {
    overflow-wrap: break-word;
    word-break: normal;
  }
  article img,
  article video {
    max-width: 100%;
    height: auto;
  }
  article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  article pre,
  article pre code {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ==============================
   8. 文章元信息行：窄屏折行
   ============================== */
@media (max-width: 480px) {
  div.my-2.flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
}

/* ==============================
   9. 手机端「更多内容」（侧边栏组件折叠面板）
   ============================== */
.mobile-sidebar-arrow {
  transition: transform 0.2s ease;
}
.mobile-sidebar-box summary {
  list-style: none;
}
.mobile-sidebar-box summary::-webkit-details-marker {
  display: none;
}
.mobile-sidebar-box[open] .mobile-sidebar-arrow {
  transform: rotate(180deg);
}