/* ==========================================================================
   Poetize 前台 · 文章头图与首页轮播图「完整显示」修复
   站点：https://baby.9k.beer        生成：2026-11-03
   --------------------------------------------------------------------------
   实测成因（不是视觉错觉，是容器尺寸与图片比例不匹配）：
   1) 文章页头图：主题把封面放进 .article-head 里固定 360px 高、整宽的条带，
      图片 object-fit:cover 裁剪，标题再绝对定位（top:243）压在条带上。
      站内封面多为 960×1280 竖版海报（正文首图会被 autocover 脚本取来当封面），
      竖版海报塞进 1280×360 的横条只露出约 21% 的高度 → 海报上的大字被放大并截断，
      白色标题又正好压在这些字上 → 封面看不全、标题也读不清。
   2) 首页顶部轮播：.ppb-stage 固定 desktopHeight（默认 280px）高，图片 object-fit:cover，
      同一张竖版海报被裁掉约 73% 的高度，卡片底部那行字被切掉一半。
   修法：两处都改成「图片按原始比例完整显示（contain）+ 容器高度自适应」，
   文章标题从头图条带上移出来、放到封面下方独立的暗色信息条，互不遮挡。
   只覆盖样式，不动打包产物与渲染脚本；轮播尺寸仍由 pinned-promo/banner.json 决定。
   ========================================================================== */

/* ---------- 一、文章页头图：封面完整显示，标题移到封面下方 ---------- */
div.article-head {
  height: auto !important;
  min-height: 0 !important;
  background: #14161c !important;
  overflow: visible !important;
}
div.article-head .el-image.article-image {
  position: static !important;
  height: auto !important;
  /* 关键：el-image 带 lazy，容器高度为 0 时懒加载判定“不可见”，图片永远不加载；
     给一个占位高度让懒加载触发，图片到位后容器自然被撑到图片实际高度。 */
  min-height: 340px !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f1115 !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
div.article-head .el-image.article-image img.el-image__inner {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 62vh !important;
  object-fit: contain !important;
  object-position: center center !important;
}
div.article-head .article-info-container {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  padding: 16px 18px 18px !important;
  background: #14161c !important;
}
div.article-head .article-info-container .article-title {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5) !important;
}

/* ---------- 二、首页顶部轮播：海报完整显示，两侧用同图模糊铺底（不留黑边） ---------- */
.ppb-stage {
  height: auto !important;
  max-height: 460px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
.ppb-track {
  width: 100% !important;
  height: auto !important;
  align-items: center !important;
}
.ppb-slide {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* 同图模糊铺底：整条轮播与页面底色自然衔接，不再是左右两块纯黑 */
.ppb-slide .ppb-bg {
  position: absolute !important;
  left: -30px !important;
  right: -30px !important;
  top: -30px !important;
  bottom: -30px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(26px) saturate(1.06) brightness(0.92) !important;
  transform: scale(1.05) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.ppb-slide img {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 460px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35) !important;
}

/* ---------- 三、手机端略收一点高度，避免海报占满整屏 ---------- */
@media screen and (max-width: 768px) {
  .ppb-slide img { max-height: 56vh !important; }
  div.article-head .el-image.article-image { min-height: 260px !important; }
  div.article-head .el-image.article-image img.el-image__inner { max-height: 54vh !important; }
}