/* 图文橱窗-89 (poster_20): 全宽 banner —— 背景图 + 叠加层 + 居中标题/正文 + 整块链接
   (还原自 UEESHOP mode_89, D:/desktop/blogList.html 顶部板块)。
   实例级样式全部走模板内联 CSS 变量 (见 poster_20.html), 这里只放结构样式。
   标题/正文字体走 deco-title/deco-content 公共类全局继承, 此处不写 font-family。 */
.ly_poster_20 .wide { margin: 0 auto; padding: 0; box-sizing: border-box; }
.ly_poster_20 .wide.module_width_1440 { width: 1440px; max-width: 100%; }
.ly_poster_20 .wide.module_width_full { width: 100%; }
.ly_poster_20 .wide.module_width_global { width: var(--deco-module-width, 1440px); max-width: 100%; }

.ly_poster_20 .section { width: 100%; }

.ly_poster_20 .p89_box { position: relative; overflow: hidden; }

/* ---- 背景图: adapt=padding-top 撑比例 + img 绝对铺满; fixed=img 正常流原图高 ---- */
.ly_poster_20 .p89_img_box { position: relative; }

.ly_poster_20 .p89_box.mode_adapt .p89_img_box { height: 0; padding-top: var(--p89-pc-ratio, 21.35%); }
.ly_poster_20 .p89_box.mode_adapt .p89_img_box img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: var(--p89-pc-img-fit, cover);
  object-position: var(--p89-pc-img-pos, center center);
}

.ly_poster_20 .p89_box.mode_fixed .p89_img_box { height: auto; padding-top: 0; }
.ly_poster_20 .p89_box.mode_fixed .p89_img_box img {
  display: block;
  width: 100%; max-width: 100%; height: auto;
  object-fit: var(--p89-pc-img-fit, cover);
  object-position: var(--p89-pc-img-pos, center center);
}

/* 移动端图: 有 mobileImage 才渲染, PC 态隐藏 */
.ly_poster_20 .p89_img_mob { display: none; }

/* ---- 叠加层: 铺满图片区, 颜色含透明度(8 位 hex) ---- */
.ly_poster_20 .p89_img_box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background-color: var(--p89-overlay, #095ac399);
}

/* ---- 文字层: absolute z-index:2, 九宫方位类定位(边距 50px) ---- */
.ly_poster_20 .p89_text {
  position: absolute;
  z-index: 2;
  width: 70%;
  box-sizing: border-box;
}

.ly_poster_20 .p89_text.p89_pos_center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ly_poster_20 .p89_text.p89_pos_left { left: 50px; top: 50%; transform: translateY(-50%); }
.ly_poster_20 .p89_text.p89_pos_right { right: 50px; top: 50%; transform: translateY(-50%); }
.ly_poster_20 .p89_text.p89_pos_top { left: 50%; top: 50px; transform: translateX(-50%); }
.ly_poster_20 .p89_text.p89_pos_bottom { left: 50%; bottom: 50px; transform: translateX(-50%); }
.ly_poster_20 .p89_text.p89_pos_lefttop { left: 50px; top: 50px; }
.ly_poster_20 .p89_text.p89_pos_righttop { right: 50px; top: 50px; }
.ly_poster_20 .p89_text.p89_pos_leftbottom { left: 50px; bottom: 50px; }
.ly_poster_20 .p89_text.p89_pos_rightbottom { right: 50px; bottom: 50px; }

.ly_poster_20 .p89_text.p89_align_left { text-align: left; }
.ly_poster_20 .p89_text.p89_align_center { text-align: center; }
.ly_poster_20 .p89_text.p89_align_right { text-align: right; }

.ly_poster_20 .p89_title {
  margin: 0;
  color: var(--p89-title-color, #ffffff);
  font-size: var(--p89-pc-title-size, 60px);
  line-height: 1.2;
}

.ly_poster_20 .p89_content {
  margin-top: 20px;
  color: var(--p89-content-color, #ffffff);
  font-size: var(--p89-pc-content-size, 20px);
  line-height: 1.2;
}

/* ---- 整块链接: 铺满模块, font-size:0 不占排版, 同层叠放在文字层之后(DOM 顺序保证盖在上面) ---- */
.ly_poster_20 .p89_link {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: block;
  font-size: 0;
}

/* ---- 移动端 <=1000px: 换图/换比例/换字号 ---- */
@media screen and (max-width: 1000px) {
  .ly_poster_20 .p89_box.mob_adapt .p89_img_box { height: 0; padding-top: var(--p89-mob-ratio, 66.67%); }
  .ly_poster_20 .p89_box.mob_adapt .p89_img_box img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: var(--p89-mob-img-fit, cover);
    object-position: var(--p89-mob-img-pos, center center);
  }

  .ly_poster_20 .p89_box.mob_fixed .p89_img_box { height: auto; padding-top: 0; }
  .ly_poster_20 .p89_box.mob_fixed .p89_img_box img {
    display: block;
    width: 100%; max-width: 100%; height: auto;
    object-fit: var(--p89-mob-img-fit, cover);
    object-position: var(--p89-mob-img-pos, center center);
  }

  .ly_poster_20 .p89_box.p89_has_mob .p89_img_pc { display: none; }
  .ly_poster_20 .p89_box.p89_has_mob .p89_img_mob { display: block; }

  .ly_poster_20 .p89_title { font-size: var(--p89-mob-title-size, 30px); }
  .ly_poster_20 .p89_content { font-size: var(--p89-mob-content-size, 16px); }
}