/*
 * หน้าแรก — แบนเนอร์ภาพเต็มแถบแบบต้นแบบ (มติ 339 · เจ้าของเลือก 28 ก.ย. 2569 · รูปจากเจ้าของ)
 *
 * ภาพพื้นหลังไม่มีมาสคอตและตัวหนังสือ (`hero-parts-bg.webp` · `hero-fence-bg.webp` 2000×542)
 * มาสคอตวางทับทีหลังด้วยไฟล์เดิม (`parts-mascot.png` · `fence-mascot.png`) — เจ้าของเลือกแยกไฟล์
 * ⚠ สลับภาพตาม `data-hero` ที่ `home.js` ตั้งให้อยู่แล้ว — ไม่ต้องแก้สคริปต์
 * ⚠ รูปสินค้าเล็ก (`hero-detail`) ซ่อนบนจอกว้าง เพราะของอยู่ในภาพพื้นหลังแล้ว
 * ⚠ เฉพาะจอกว้าง ≥ 1101 px — จอแคบและมือถือคงแบบเดิมของ `compact.css`
 * ⚠ ชื่อไฟล์ภาพใหม่ ไม่ทับชื่อเดิม (มติ 195 — กันแคชลูกค้าค้างรูปเก่า)
 */
@media (min-width: 1101px) {
  .hero { background: #20272f url('/ui/assets/hero-parts-bg.webp') center / cover no-repeat; }
  .hero[data-hero=fence] { background: #edf2f5 url('/ui/assets/hero-fence-bg.webp') center / cover no-repeat; }
  /* ข้อความฝั่งซ้ายต้องอ่านออก — ไล่เงาทับภาพเฉพาะฝั่งหัวข้อ */
  .hero-main { background: linear-gradient(90deg, #14191fe6 0%, #14191fb3 30%, transparent 55%); }
  .hero[data-hero=fence] .hero-main { background: linear-gradient(90deg, #ffffffeb 0%, #ffffffb3 30%, transparent 55%); }
  .hero-main { grid-template-columns: 42% 58%; min-height: clamp(360px, 25vw, 470px); }
  /* รูปยืนชิดขอบล่าง — `.hero-main` เว้นล่าง 42px ไว้ให้ปุ่มสลับ (compact.css) ซึ่งย้ายไปมุมขวาล่างแล้ว */
  .hero-art { overflow: visible; margin-bottom: -42px; }
  .hero-detail { display: none; }
  .hero-mascot { width: 52%; height: 100%; left: -4%; bottom: 0; object-position: bottom center; z-index: 1; }
  /* ปุ่มสลับแบนเนอร์ย้ายไปมุมขวาล่าง — ตำแหน่งเดิม (กึ่งกลาง) ทับตัวการ์ตูนที่ใหญ่ขึ้น */
  .hero-switch { left: auto; right: 16px; top: auto; bottom: 12px; transform: none; }
  /* มติ 445 — Frame Builder ไม่มีภาพพื้นหลังเต็มแถบ: ใช้รูปโต๊ะ (`hero-detail`) แทน · พื้นขาวล้วน (รูปโต๊ะพื้นขาว) */
  .hero[data-hero=frame] { background: #fff; }
  .hero[data-hero=frame] .hero-main { background: none; }
  .hero[data-hero=frame] .hero-detail { display: block; right: 4%; bottom: 54px; width: 88%; height: calc(100% - 72px); }
}