/* ══════════════════════════════════════════════════════════════
   mobile-polish.css — กฎมือถือกลาง (Bhoon Kharn)
   ฉีดเข้าทุกหน้าอัตโนมัติผ่าน after_request → ยกระดับมือถือทั้งเว็บในที่เดียว
   ออกแบบให้ "ปลอดภัย/ตั้งรับ" — ไม่รื้อ layout เดิม แค่กันพัง + แตะง่ายบนจอเล็ก
   ══════════════════════════════════════════════════════════════ */

/* กันรูป/วิดีโอ/ตาราง/โค้ด ล้นออกนอกจอ */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
table, pre { max-width: 100%; }
pre { overflow-x: auto; }

/* ปุ่ม/ลิงก์-ปุ่ม แตะง่าย (>=44px) บนมือถือ ตามมาตรฐาน touch target */
@media (max-width: 640px) {
  button, .btn, a.btn, .side-item, .bnav-item,
  input[type="submit"], input[type="button"], [role="button"] {
    min-height: 44px;
  }
  /* ชิปที่เป็นลิงก์ (เช่น ตัวกรองหมวดใน /materials) — เดิมกฎ button ไม่ครอบ ทำให้แตะยากบนมือถือ
     หมายเหตุ: `.chip` ไม่ match `type-chip` ซึ่งเป็นแค่ป้ายกำกับ (ไม่ใช่ปุ่ม) จึงไม่กระทบ */
  a.chip, .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* อินพุต >=16px กัน iOS ซูมอัตโนมัติเวลาแตะช่องกรอก */
  input, select, textarea { font-size: max(16px, 1em); }
}

/* grid คอลัมน์เยอะ (inline style) → ยุบลงเมื่อจอแคบ กันล้น/บีบจนอ่านไม่ออก
   หมายเหตุ: เว้น auto-fill/auto-fit ไว้ (พวกนั้น responsive อยู่แล้ว) */
@media (max-width: 600px) {
  [style*="1fr 1fr 1fr 1fr"],
  [style*="repeat(4,"], [style*="repeat(5,"], [style*="repeat(6,"],
  [style*="repeat(7,"], [style*="repeat(8,"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  [style*="repeat(3,"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 400px) {
  [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="130px"]):not([style*="155px"]):not([style*="170px"]) {
    grid-template-columns: 1fr !important;
  }
}

/* กันเลื่อนแนวนอนทั้งหน้าจากอิลิเมนต์กว้างเกิน (ตั้งรับ ไม่ตัดเนื้อหา) */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}