/* ============================================================
 * ShowOS 首页 · 右侧图片面板放大（独立样式）
 * 仅作用于首页 index.html 的右侧轮换图区（.visual-h 及其面板）。
 * 通过 transform:scale 等比放大整块面板（含图片），
 * 不改变 hero-grid 列宽，不影响左侧文字逗、不裁切图片，
 * 不影响其他任何页面与布局结构。
 * 如需调整大小，改下面的 scale 值即可。
 * ============================================================ */
.hero-h .visual-h {
  /* 不再用 scale 放大：transform 放大会被 body 的 overflow-x:hidden 裁掉，
     且视觉提升微弱。改为直接放大右列占比实现，见下方 .hero-grid-h */
  overflow: visible;
}
/* 上方一层容器都保持可见，避免放大后边缘被裁掉 */
.hero-h,
.hero-h .wrap,
.hero-h .hero-grid-h,
.hero-h .visual-h .stage-h {
  overflow: visible;
}

/* ============================================================
 * 首页首屏容器放宽（只影响首页 hero 区）：大屏自适应 + 封顶
 * 容器在常规大屏随视口变宽、图片更大；带鱼屏等超宽屏时
 * 封顶在1500px并居中，避免全屏图片过大显不全。
 * 仅作用于首页 hero 区。
 * ============================================================ */
.hero-h .wrap {
  max-width: 1500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 50px;
  box-sizing: border-box;
}
.hero-h .hero-grid-h {
  max-width: 1500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* 右列（图片区）占比加大：0.7fr/2.6fr，屏越大右侧面板越大 */
  grid-template-columns: 0.7fr 2.6fr;
}
/* 小屏（<960px）恢复单列堆叠，避免图片区过宽挤压左列文字 */
@media (max-width: 960px) {
  .hero-h .hero-grid-h {
    grid-template-columns: 1fr;
  }
}
/* 手机：首屏占满屏宽，左右只留小空隙（替换大屏 50px 留白） */
@media (max-width: 560px) {
  .hero-h .wrap { padding: 0 14px; }
}