/* 搜索结果页 — 对齐设计稿 Frame 1686556718 / Frame 24
 * 注意：common.css 是预编译 Tailwind（无运行时 JIT），
 * size-12 / grid-cols-5 / md:grid-cols-3 等类并不存在，
 * 因此本文件用原生 CSS 自建栅格与尺寸，勿再依赖未编译的 Tailwind 类。
 */

/* ---------------- 页面容器 ----------------
 * H5 端内容区左右各 12px，与设计稿一致；
 * PC 端不额外加，交给 index-content 控制。 */
@media (max-width: 767px) {
  .search-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* tab 行改为横向滚动，不换行。
   * common.css 在 H5 下给 .dx-tab-list 加了 padding-right:30%，
   * 只剩 70% 宽度；而 .dx-tab 是 flex:1（可无限收缩、基准 0），
   * 五个「名称+数量」的 tab 会被压扁到名称与数量分成两行。
   * 这里取消右侧留白，并让每个 tab 按内容宽度排布。 */
  .search-page .dx-tab-list {
    padding-right: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .search-page .dx-tab-list::-webkit-scrollbar {
    display: none;
  }

  .search-page .dx-tab-list .dx-tab {
    flex: 0 0 auto;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }

  .search-page .dx-tab-list .dx-tab:first-child {
    padding-left: 0;
  }
}

/* 吸顶 tab 栏必须有不透明背景。
 * 模板上的 bg-white 在本暗色主题中并无对应样式定义，
 * 吸顶后整条是透明的，下方内容会直接透上来造成重叠。
 * （博主页 author.blade.php 早前已用同样方式修复过） */
.search-page .dx-tab-list.is-sticky {
  background-color: #111010;
}

/* ---------------- 栅格 ---------------- */
.search-grid {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 博主：H5 1列 / PC 2列 */
.search-grid--authors {
  grid-template-columns: 1fr;
}

/* 用户：双端 3列 */
.search-grid--users {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 文章：双端单列，封面比例由 post_cover_thumbs 决定
 * （单图 690:296 banner / 三图 222:296），与设计稿一致 */
.search-grid--posts {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 标签：H5 2列 / PC 5列 */
.search-grid--tags {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .search-grid--authors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-grid--tags {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------------- 区块标题 ---------------- */
.search-section {
  margin-bottom: 20px;
}

.search-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* 设计稿：标题 PingFang SC Medium 16px / 行高 100% / #ffffff */
.search-section__title {
  margin: 0;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  text-transform: capitalize;
  vertical-align: middle;
}

/* 设计稿：数量 PingFang SC Regular 14px / 行高 100% / #999999 */
.search-section__title span {
  margin-left: 6px;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #999999;
  text-transform: capitalize;
  vertical-align: middle;
}

.search-section__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: #888787;
}

.search-section__more:hover {
  color: #f7a93a;
}

.search-summary {
  margin: 0 0 10px;
  font-size: 13px;
  color: #888787;
}

/* ---------------- 博主 / 用户卡片 ---------------- */
/* 设计稿：bg #161513，border 1px #272727，radius 4px，padding 12px，gap 10px */
.search-card {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 12px;
  border: 1px solid #272727;
  border-radius: 4px;
  background: #161513;
  transition: border-color 0.2s ease;
}

.search-card:hover {
  border-color: #4a412c;
}

.search-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 头像：必须显式定尺寸，Tailwind 的 size-12 未编译进 CSS
 * 设计稿头像带一圈金色描边 */
.search-card__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid #b78d4a;
  border-radius: 50%;
  object-fit: cover;
  background: #272727;
}

.search-card__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.search-card__name {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 粉丝/获赞：数字白色，单位灰色（设计稿 8.5k 粉丝  3.9k 获赞） */
.search-card__stat {
  margin-top: 6px;
  font-size: 13px;
  color: #999999;
  white-space: nowrap;
}

.search-card__stat b {
  margin-right: 4px;
  font-weight: 400;
  color: #ffffff;
}

.search-card__stat i {
  margin: 0 10px;
  font-style: normal;
  color: transparent;
}

/* 签名：「签名：」标签灰色，内容文字白色 */
.search-card__slogan {
  overflow: hidden;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #ffffff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-card__slogan span {
  color: #999999;
}

/* 用户卡片：纵向居中布局 */
.search-card--user {
  text-align: center;
}

.search-card--user .search-card__avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
}

.search-card--user .search-card__name {
  font-size: 14px;
}

.search-card--user .search-card__stat {
  margin-bottom: 10px;
}

/* ---------------- 订阅按钮 ---------------- */
/* 设计稿：52×28 hug，radius 100px，padding 4px 12px，gap 4px，fill #F7A93A */
.search-subscribe {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 28px;
  padding: 4px 12px;
  border: 0;
  border-radius: 100px;
  background: #f7a93a;
  color: #1a1408;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.search-subscribe:hover {
  filter: brightness(1.06);
}

.search-subscribe:active {
  filter: brightness(0.94);
}

/* 已订阅态：JS 通过 btn-disabled 类切换 */
.search-subscribe.btn-disabled {
  background: #4a412c;
  color: #a89a7a;
  cursor: default;
}

.search-subscribe.btn-disabled:hover {
  filter: none;
}

/* ---------------- 文章卡片 ---------------- */
.search-post__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-post__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #888787;
  white-space: nowrap;
}

.search-post__author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #888787;
}

.search-post__author img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: #272727;
}

.search-post__author span {
  overflow: hidden;
  max-width: 90px;
  text-overflow: ellipsis;
}

/* 浏览量：图标与数字需同一基线。
 * .dx-icon 是 display:inline-block 且固定 24px，直接塞进本行会比 12px 的
 * 文字高出一截、且不会自动居中；这里改为 inline-flex 居中，并把图标缩到
 * 与本行字号相称的 14px（首页那行是 text-sm，24px 才协调）。 */
.search-post__spacer {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-post__spacer .dx-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

/* ---------------- 标签卡片 ---------------- */
/* 设计稿：bg #272727，border 0.5px #F7A93A，radius 4px，padding 8px，gap 4px */
.search-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 100%;
  min-height: 57px;
  padding: 8px;
  border: 0.5px solid #f7a93a;
  border-radius: 4px;
  background: #272727;
  text-align: center;
  transition: background-color 0.2s ease;
}

.search-tag:hover {
  background: #322f2b;
}

.search-tag__name {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #f7a93a;
  word-break: break-all;
}

.search-tag__count {
  font-size: 12px;
  line-height: 1;
  color: #826843;
}

/* ---------------- 无结果占位居中 ---------------- */
.search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 320px;
}