/* ============================================================
 * 91爆料 2026 视觉优化覆写样式
 * 用途：在 mirages.min.css / common.css 之后引入，覆写帖子封面
 * 卡片、热门/广告角标、分类页顶部 banner、H5 卡片导航等样式
 * 注意：禁止直接修改 mirages.min.css，本文件为唯一覆写入口
 * ============================================================ */

/* ---------- 零、无障碍工具类 ---------- */

/**
 * .visually-hidden / .sr-only
 * 视觉隐藏：元素从视觉上不可见，但保留在 DOM 中供屏幕阅读器和搜索引擎使用。
 * 不使用 display:none / visibility:hidden，不占用页面高度，不影响布局。
 * 适用于 H1/H2 等语义标签的视觉隐藏。
 */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- 壹、首屏 Banner 文案区（PC 可见 / H5 sr-only） ---------- */

/**
 * PC 端：正常展示 H1 + H2，样式参考 cgw666.com（居中、白色文字）
 * H5 端：整个 .site-banner 用 sr-only 方案视觉隐藏，不占布局高度
 */
.site-banner {
  text-align: center;
  padding: 24px 16px 20px;
  /* 让 banner 与下方卡片列表同宽 */
  max-width: 1024px;
  margin: 0 auto;
}
.site-banner__title {
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.4;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
}
.site-banner__desc {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* H5：整个 banner 块视觉隐藏，保留 DOM，不占页面高度 */
@media (max-width: 767px) {
  .site-banner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ---------- 一、帖子封面卡片优化（PC + H5 通用） ---------- */

/* 列表封面图：禁用 zoom 放大镜光标，点击由外层 <a> 跳转文章页 */
body.card #index article .post-card img,
body.card #archive article .post-card img {
  cursor: pointer !important;
}

/* 1. 隐藏作者 / 分类 / 时间信息（DOM 保留，仅前端隐藏） */
body.card #index article .post-card-info,
body.card #archive article .post-card-info {
  display: none !important;
}

/* 2. 隐藏标题中旧的斜飘带"热搜 HOT" 字面量，改用 JS 注入右上角小角标 */
body.card #index article .post-card-title .wrap,
body.card #archive article .post-card-title .wrap {
  display: none !important;
}

/* 3. 封面图底部黑灰色半透明渐变遮罩（由下向上透明过渡，约占图片高度 20%） */
body.card #index article .post-card,
body.card #archive article .post-card {
  position: relative;
  overflow: hidden;
}
body.card #index article .post-card::after,
body.card #archive article .post-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* 4. 标题：加粗 + 底部水平居中 + 最多 2 行省略 */
body.card #index article .post-card-mask,
body.card #archive article .post-card-mask {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  background: transparent !important;
  padding: 0 16px 14px !important;
  z-index: 2 !important;
  opacity: 1 !important;
  /* 让 mask 高度由内容决定，贴紧卡片底部 */
  height: auto !important;
}
body.card #index article .post-card-container,
body.card #archive article .post-card-container {
  padding: 1rem 1rem 0;
  text-align: center;
  transform: translateY(10px);
}
body.card #index article .post-card-title,
body.card #archive article .post-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  margin: 0;
  max-height: 64px; /* 2行 × 32px */
  word-break: break-word;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* H5 端标题字号微调 */
@media (max-width: 767px) {
  body.card #index article .post-card-container,
  body.card #archive article .post-card-container {
    padding: 1rem 0 0;
    text-align: left;
    transform: translateY(0.625rem);
  }
  body.card #index article .post-card-title,
  body.card #archive article .post-card-title {
    font-size: 0.9rem;
    line-height: 1.375rem;
    max-height: 2.75rem;
    text-align: left;
  }
  body.card #index article .post-card-mask,
  body.card #archive article .post-card-mask {
    padding: 0 0.75rem 0.625rem;
  }
}

/* ---------- 二、右上角小角标（热门 / 广告） ---------- */

/* 角标基础：黑色半透明 + 1px 渐变白描边 + 背景毛玻璃模糊（按 Figma 标注） */
.corner-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  pointer-events: none;
  border: 1px solid transparent;
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: absolute;
}
/* 用伪元素实现"渐变 1px 边框"效果（Figma 是 linear-gradient stroke） */
.corner-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 热：宽 40×24，圆角 2px，文字 12px 粉色 #FF7A8C，背景 rgba(0,0,0,.3) */
.corner-badge--hot {
  width: 40px;
  height: 24px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #FF7A8C;
  font-size: 12px;
}

/* 广告：宽 60×32，圆角 5.7px，文字 14px 白色，背景 rgba(0,0,0,.4) */
.corner-badge--ad {
  width: 60px;
  height: 32px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
  font-size: 14px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* H5 端等比缩小（卡片小） */
@media (max-width: 767px) {
  .corner-badge {
    top: 6px;
    right: 6px;
  }
  .corner-badge--hot {
    width: 32px;
    height: 20px;
    font-size: 11px;
  }
  .corner-badge--ad {
    width: 48px;
    height: 26px;
    font-size: 12px;
  }
}

/* ---------- 三、首页/分类页/详情页顶部文案区优化 ---------- */
/* PC/H5 分类页保留标题；H5 首页/文章/赛事页隐藏标题/描述，保留内容直接上移 */
body.is-category-page #masthead {
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px 0 12px !important;
}
body.is-category-page #masthead .blog-background {
  display: none !important;
}
body.is-category-page #masthead .blog-title {
  color: #fff;
}
body.is-category-page #masthead .blog-description {
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 767px) {
  body.is-index-page #masthead,
  body.is-post-page #masthead,
  body.is-world-cup-game-page #masthead {
    background: transparent !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  body.is-index-page #masthead .inner,
  body.is-index-page #masthead .container,
  body.is-index-page #masthead .blog-title,
  body.is-index-page #masthead .blog-description,
  body.is-post-page #masthead .blog-background,
  body.is-post-page #masthead .lazyload-container,
  body.is-post-page #masthead .inner,
  body.is-post-page #masthead .container,
  body.is-post-page #masthead .blog-title,
  body.is-post-page #masthead .blog-description,
  body.is-world-cup-game-page #masthead .blog-background,
  body.is-world-cup-game-page #masthead .lazyload-container,
  body.is-world-cup-game-page #masthead .inner,
  body.is-world-cup-game-page #masthead .container,
  body.is-world-cup-game-page #masthead .blog-title,
  body.is-world-cup-game-page #masthead .blog-description {
    display: none !important;
  }
}

/* ---------- 四、H5 侧边栏（对齐 123/search.css 展示样式，保留 nav-cards 结构与内容） ---------- */

/* 侧边栏展开时隐藏原 "导航" 按钮（#toggle-nav）和 Bootstrap navbar-toggler */
#wrap.display-nav #toggle-nav,
body.display-nav #toggle-nav,
#wrap.display-nav .navbar-toggler,
body.display-nav .navbar-toggler {
  display: none !important;
}

#site-navigation.sidebar.nav-cards #menu-menu-1 {
  display: none !important;
}

@media (max-width: 767.98px) {
  #site-navigation.sidebar.nav-cards {
    background: #191919 !important;
  }

  #site-navigation.sidebar.nav-cards #nav {
    padding: 0 0 3.85rem !important;
    box-sizing: border-box;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: 0 1.405625rem;
    padding: 1.25rem 0;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-header > a {
    display: block;
    margin: 0 auto;
    flex: 1;
    text-align: center;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-header img {
    width: auto;
    height: clamp(3rem, 10vw, 3.875rem);
    max-width: none;
    object-fit: contain !important;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1.59375rem;
    height: 1.59375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.59375rem;
    line-height: 1.59375rem;
    cursor: pointer;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14.0625rem;
    margin: 0 auto 0.625rem;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-search form {
    width: 100%;
    margin: 0;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-search input {
    width: 100%;
    height: 2.1125rem;
    padding: 0 2rem 0 0.8rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: #222222;
    color: #888888;
    font-size: 0.875rem;
    outline: none;
    box-sizing: border-box;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-search .nav-cards-search-icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #888888;
    font-size: 0.875rem;
    pointer-events: none;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid {
    width: 14.0625rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li {
    list-style: none;
    margin: 0;
    background-color: #222222;
    border-radius: 0;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li:last-child {
    margin: 0 0 0.625rem;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li:first-child {
    border-top-left-radius: 0.6875rem;
    border-top-right-radius: 0.6875rem;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li:last-child {
    border-bottom-left-radius: 0.6875rem;
    border-bottom-right-radius: 0.6875rem;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid--category li:first-child {
    margin: 0 0 0.625rem;
    border-radius: 0.6875rem;
    background-color: #222222;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid--category li:first-child a,
  #site-navigation.sidebar.nav-cards .nav-cards-grid--category li:first-child.is-active a,
  body.desktop #site-navigation.sidebar.nav-cards .nav-cards-grid--category li:first-child a:hover,
  body.mobile #site-navigation.sidebar.nav-cards .nav-cards-grid--category li:first-child a:active {
    background-color: #222222 !important;
    background-image: none !important;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid--category li:nth-child(2) {
    border-top-left-radius: 0.6875rem;
    border-top-right-radius: 0.6875rem;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid--other li {
    margin: 0 0 0.625rem;
    border-radius: 0.6875rem;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    padding: 0 0.75rem 0 1.25rem;
    border-radius: inherit;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    font-size: 1.03125rem;
    font-weight: 600;
    line-height: 2.5rem;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s linear;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid--category li a::before {
    display: none;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li a span {
    position: static;
    z-index: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    padding: 0;
    color: #ffffff;
    font-size: 1.03125rem;
    font-weight: 600;
    line-height: 2.5rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #site-navigation.sidebar.nav-cards .nav-cards-grid li.is-active a {
    outline: none;
    background-color: #2c2a2a !important;
  }

  body.desktop #site-navigation.sidebar.nav-cards .nav-cards-grid li a:hover,
  body.mobile #site-navigation.sidebar.nav-cards .nav-cards-grid li a:active {
    background-color: #2c2a2a !important;
    border-radius: inherit;
  }

  body.theme-dark #site-navigation.sidebar.nav-cards .nav-cards-grid li a,
  body.theme-dark #site-navigation.sidebar.nav-cards .nav-cards-grid li a span {
    color: #ffffff !important;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .wc-header-user-menu {
    display: none !important;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .side-toolbar .side-toolbar-list li a {
    height: initial !important;
    width: initial !important;
    line-height: initial !important;
    border-radius: initial !important;
    font-size: 0.625rem !important;
    background: initial !important;
    color: #ccc !important;
    vertical-align: middle;
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .side-toolbar .side-toolbar-list li a .icon {
    width: 1.5625rem;
    height: 1.5625rem;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .side-toolbar .side-toolbar-list li a .text {
    color: #ffffff;
    margin: 0.3125rem 0 0 0;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .side-toolbar {
    background: #161616 !important;
    border-right: 0 !important;
    box-shadow: 0 -0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117);
    padding-top: 0.9375rem;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .side-toolbar .side-toolbar-list li a:hover {
    background: #161616 !important;
    color: #ccc !important;
  }

  #site-navigation.sidebar.nav-cards #nav-toolbar .side-toolbar .side-toolbar-list li a i {
    font-size: 0.9rem !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ---------- 4b、H5 横向分类 Tab ---------- */

.h5-category-tabs {
  display: none;
}

@media (max-width: 767.98px) {
  body.use-navbar .h5-category-tabs {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #212322;
    padding-bottom: 0.25rem;
  }

  body.use-navbar .h5-category-tabs .list {
    display: flex;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0.35rem 0.75rem 0.5rem 1rem;
  }

  body.use-navbar .h5-category-tabs .list::-webkit-scrollbar {
    display: none;
  }

  body.use-navbar .h5-category-tabs .list li {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0 0.6rem 0 0;
    padding: 0.4rem 0.2rem;
    font-size: 1rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  body.use-navbar .h5-category-tabs .list li:last-child {
    margin-right: 0;
    padding-right: 0.75rem;
  }

  body.use-navbar .h5-category-tabs .list li a {
    color: #979797;
    text-decoration: none;
    font-weight: 400;
  }

  body.use-navbar .h5-category-tabs .list li.active a {
    color: #fff;
    font-weight: 600;
  }
}

/* ---------- 七、Header 移动端顶栏 / PC Logo / 搜索框 ---------- */

.header-top .logo img,
.navbar-brand > img,
.login_dialog .logo img,
.wc-live-login-dialog .logo img {
  object-fit: contain !important;
  width: auto !important;
  max-width: none;
}

.header-top .logo img {
  display: block;
  margin: 0.625rem auto;
  width: auto;
}

@media (max-width: 749px) {
  .header-top .logo img {
    height: clamp(3rem, 10vw, 3.875rem);
  }
}

@media (min-width: 750px) {
  .header-top .logo img {
    height: clamp(48px, 3vw, 56px);
  }
}

.navbar-brand {
  max-width: none;
}

@media (min-width: 750px) {
  .navbar-brand > img {
    height: clamp(55.58px, 3vw, 56px);
  }
}

.header-top-search-box {
  padding-left: calc(0.75rem + 0.45vw) !important;
  padding-right: calc(0.75rem + 0.45vw) !important;
}

.header-top-search-box .search-box {
  border-radius: 0.3125rem !important;
}

header .header-top-search-box .search-box .search,
.header-top-search-box .search-box .search {
  height: 2.375rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

header .header-top-search-box .search-box .search-btn {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ---------- 五、文章详情页顶部间距优化 ---------- */
/* 问题：面包屑、标题、元信息之间留白过大，首屏内容被拉散 */

/* 面包屑容器 padding 从 1rem 收窄为 0.375rem */
.xqbj-breadcrumb-container {
  padding: 0.375rem 0 !important;
}

/* 文章区域顶部 margin 从 1.875rem 收窄为 0.5rem */
#post article {
  margin-top: 0.5rem !important;
}

/* 文章标题底部间距从 0.9375rem 收窄为 0.5rem */
#post .post-title {
  margin-bottom: 0.5rem !important;
}

/* 元信息（作者/日期/分类）底部间距从 1.25rem 收窄为 0.5rem */
#post .post-meta {
  margin-bottom: 0.5rem !important;
}

/* H5：覆盖 archives 静态页内联的 margin-top: 2.6rem，与 mirages.min.css 保持一致 */
@media screen and (max-width: 40rem) {
  #post article {
    margin-top: 0.5rem !important;
  }
}

@media (max-width: 767px) {
  body.is-post-page #body > .container.pt35 {
    padding-top: 0.375rem !important;
  }
  body.is-post-page .xqbj-breadcrumb-container {
    margin-top: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}

/* ---------- 六、H5 卡片列表上下间距优化 ---------- */
/* 注意：H5 卡片间距由 index.php 内联 style 控制（3601行），已在 index.php 中直接修改 */
/* 原值 padding: 0.9375rem 0 1.25rem（上15px+下20px=35px间距）→ 修改为 0.375rem 0（约12px）*/