/**
 * 首页四栏目弹窗插画补丁（About / Products / Blog / Resources）
 *
 * - 四张真透明 PNG（1254×1254，1:1）：object-fit:contain，保持比例，
 *   完整显示头部 / 手 / 道具，不裁切、不拉伸。
 * - 容器沿用各栏目既有浅色底（浅蓝 / 浅金 / 浅玫瑰 / 浅青绿），内边距留白。
 * - 晴雨两种模式共用同一套插画：本文件不做任何 filter / hue-rotate / 混合模式，
 *   并用 !important 兜住父级可能出现的整体染色。
 * - 仅作用于这四个栏目弹窗；teaching / contact 弹窗维持原有样式。
 *
 * 加载顺序：依赖 angus-inst-main，排在主样式表之后（见 front-page.php）。
 */

.room-preview .rpv-avatar-about,
.room-preview .rpv-avatar-products,
.room-preview .rpv-avatar-blog,
.room-preview .rpv-avatar-resources {
  width: 84px;
  height: 84px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
  flex: none;
  /* 保色：任何天气主题 / 父容器滤镜都不得作用于插画 */
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
}

/* 各栏目浅色底，取值与 main.css 中 .rpv-<key> 的 --rpv-accent-soft 一致 */
.room-preview .rpv-avatar-about     { background: #e4eef6; } /* 浅蓝   About */
.room-preview .rpv-avatar-products  { background: #f4ead9; } /* 浅金   Products */
.room-preview .rpv-avatar-blog      { background: #f7e3e7; } /* 浅玫瑰 Blog */
.room-preview .rpv-avatar-resources { background: #e2edf2; } /* 浅青绿 Resources */

/* 窄屏：缩小插画并让正文可换行，避免挤压文案 */
@media (max-width: 600px) {
  .room-preview .rpv-avatar-about,
  .room-preview .rpv-avatar-products,
  .room-preview .rpv-avatar-blog,
  .room-preview .rpv-avatar-resources {
    width: 62px;
    height: 62px;
    padding: 6px;
  }
}