/* ===========================================================================
 * 图片板块 · 三个 MAX 子页的介绍 banner（2026-09-19 · 开发员13号）
 * ---------------------------------------------------------------------------
 * 🔴 为什么要做（用户反馈）：
 *   图片板块 18 个功能里，**只有 3 个打开后没有任何介绍** ——
 *   文生图MAX / 图生图MAX / 详情图MAX，偏偏还是主力功能：
 *   点进去直接是一张表单（"💡 创意描述""📷 参考图片"），很突兀。
 *   其余 15 个都有 `xx-banner` / `xx-hero` 介绍条。
 *
 * 🔴 为什么单开一个 css：改样式不动 style.css（项目铁律），
 *   而且这三个 banner 的配色是**刻意各自一色**的：
 *   现有的 banner 几乎清一色用品牌橙 `var(--grad)`
 *   （ix / ic / rp 全一样，用户反馈"看不出区别、不够醒目"）。
 *   所以这里给三个功能各配一套高饱和渐变，彼此色相拉开：
 *
 *     文生图MAX   玫红 → 珊瑚 → 橙     （热情、创造，与品牌橙同族但更亮）
 *     图生图MAX   天蓝 → 青   → 翠绿   （焕新、改造）
 *     详情图MAX   靛蓝 → 紫            （专业、电商，沉稳）
 *
 *   ⚠️ 与已有 banner 不撞：od-banner 是深棕金、gc-banner 是紫→蓝→青（流光卡片）。
 *
 * ⚠️ 铁律：含 `position:absolute` 装饰物（-glow 光斑）→ 容器**必须** `position:relative`
 *    且 `overflow:hidden`，否则会撑宽 document，**手机端整页被缩成 77%**（桌面看不出来）。
 * =========================================================================== */

/* ===================== ① 文生图MAX ===================== */
.t2i-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius); margin-bottom: 14px; color: #fff;
  background: linear-gradient(135deg, #f43f5e 0%, #fb7185 46%, #fb923c 100%);
  box-shadow: 0 10px 24px rgba(244, 63, 94, .28);
}
.t2i-banner-glow {
  position: absolute; right: -28px; top: -34px; width: 116px; height: 116px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 68%);
}
.t2i-banner-ico { position: relative; font-size: 30px; line-height: 1; }
.t2i-banner-tx { position: relative; min-width: 0; }
.t2i-banner-t { font-size: 16.5px; font-weight: 800; letter-spacing: .3px; }
.t2i-banner-s { margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: .95; }
.t2i-banner-s b { font-weight: 800; }

/* ===================== ② 图生图MAX ===================== */
.i2i-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius); margin-bottom: 14px; color: #fff;
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 46%, #10b981 100%);
  box-shadow: 0 10px 24px rgba(6, 132, 180, .28);
}
.i2i-banner-glow {
  position: absolute; right: -28px; top: -34px; width: 116px; height: 116px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 68%);
}
.i2i-banner-ico { position: relative; font-size: 30px; line-height: 1; }
.i2i-banner-tx { position: relative; min-width: 0; }
.i2i-banner-t { font-size: 16.5px; font-weight: 800; letter-spacing: .3px; }
.i2i-banner-s { margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: .95; }
.i2i-banner-s b { font-weight: 800; }

/* ===================== ③ 详情图MAX ===================== */
.df-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius); margin-bottom: 14px; color: #fff;
  background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 48%, #7c3aed 100%);
  box-shadow: 0 10px 24px rgba(67, 56, 202, .30);
}
.df-banner-glow {
  position: absolute; right: -28px; top: -34px; width: 116px; height: 116px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 68%);
}
.df-banner-ico { position: relative; font-size: 30px; line-height: 1; }
.df-banner-tx { position: relative; min-width: 0; }
.df-banner-t { font-size: 16.5px; font-weight: 800; letter-spacing: .3px; }
.df-banner-s { margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: .95; }
.df-banner-s b { font-weight: 800; }

/* 🔴 `<b>` 里的短语整块不许拆行 —— 否则「5 种尺寸」会在数字后被断开，
 *    变成"…自动补全细节；5 / 种尺寸，头像…"（2026-09-19 截图实测踩到）。 */
.t2i-banner-s b, .i2i-banner-s b, .df-banner-s b { white-space: nowrap; }

/* 窄屏（iPhone SE 一类）：主标题缩一号，别让它折成两行占高度 */
@media (max-width: 359px) {
  .t2i-banner-t, .i2i-banner-t, .df-banner-t { font-size: 15.5px; }
  .t2i-banner-s, .i2i-banner-s, .df-banner-s { font-size: 11.5px; }
}