/*
 * samgler-mobile.css
 * ใช้เฉพาะจอแคบ (มือถือ) — บนคอมพิวเตอร์หน้าตาเหมือนเดิมทุกอย่าง
 * class sg-head / sg-nav / sg-issue / sg-main ใส่โดย tools/mobilize.py
 */

@media (max-width: 640px) {

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body {
    margin: 8px;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  /* รูปทั่วไปย่อให้พอดีจอ (ยกเว้นตัวเว้นช่องว่าง blank.gif) */
  img:not([src*="blank.gif"]) { max-width: 100%; height: auto; }
  table { max-width: 100%; }

  /* ตาราง/เส้นคั่น/ช่อง ที่กำหนดความกว้างเป็น px (เช่น 600) ให้ย่อตามจอ
     ตัวที่กำหนดเป็น % ไม่ต้องแตะ */
  table[width]:not([width$="%"]),
  td[width]:not([width$="%"]),
  hr[width]:not([width$="%"]) { width: auto; }
  pre { white-space: pre-wrap; }

  /* ตัวอักษรที่เคยเล็กเกินไป */
  font[size="-2"], font[size="1"] { font-size: 13px; }
  font[size="-1"], font[size="2"] { font-size: 14px; }

  /* ---------- ส่วนหัว: โลโก้ + แถบปุ่ม ---------- */
  .sg-head { width: 100%; }
  .sg-head > tbody > tr > td { width: auto; vertical-align: top; }
  .sg-head > tbody > tr > td:first-child { width: 64px; }
  .sg-head img[src*="samglerlogo"] { width: 64px; height: auto; }

  .sg-nav { width: 100%; table-layout: fixed; }
  .sg-nav img { width: 100%; height: auto; display: block; }
  /* สัดส่วนตามความกว้างรูปปุ่มเดิม 80/46/62/75/79/48/60/50 จากรวม 500 */
  .sg-nav td:nth-child(1) { width: 16%; }
  .sg-nav td:nth-child(2) { width: 9.2%; }
  .sg-nav td:nth-child(3) { width: 12.4%; }
  .sg-nav td:nth-child(4) { width: 15%; }
  .sg-nav td:nth-child(5) { width: 15.8%; }
  .sg-nav td:nth-child(6) { width: 9.6%; }
  .sg-nav td:nth-child(7) { width: 12%; }
  .sg-nav td:nth-child(8) { width: 10%; }

  /* ---------- แถบ "ปีที่ ... ฉบับที่ ..." ---------- */
  .sg-issue { width: 100%; }
  .sg-issue td { width: auto; padding: 2px 4px; }

  /* ---------- หน้านิตยสาร: 3 คอลัมน์ -> เรียงลงมา ---------- */
  .sg-main,
  .sg-main > tbody,
  .sg-main > tbody > tr,
  .sg-main > tbody > tr > td {
    display: block;
    width: auto;
  }
  .sg-main { border-spacing: 0; }
  .sg-main > tbody > tr > td { padding: 0 0 16px; }
  .sg-main img[src*="verbar"] { display: none; }

  /* ตารางย่อยในคอลัมน์ให้กว้างเต็ม */
  .sg-main td { width: auto; }
  .sg-main > tbody > tr > td > table { width: 100%; }

  /* หัวคอลัมน์รูปภาพ (col1.gif ...) ให้อยู่บรรทัดของตัวเอง */
  .sg-main img[src*="/col"] { display: block; }

  /* รูปการ์ตูนประกอบข้างเนื้อหา */
  .sg-main img[src*="sidecol"] { width: 64px; height: auto; margin: 0 8px 4px; }

  /* แถบข้าง: กล่อง fact file / ค้นหา / ปุ่มรูป จัดกลาง */
  .sg-main td[bgcolor] { padding: 8px; }
  .sg-main > tbody > tr > td:last-child,
  .sg-main > tbody > tr > td:last-child td { text-align: center; }
  .sg-main > tbody > tr > td:last-child table { margin-left: auto; margin-right: auto; }
  /* รูปทุกรูปในแถบข้างอยู่บรรทัดของตัวเองและจัดกลาง (เช่น samgler poll) */
  .sg-main > tbody > tr > td:last-child img { display: block; margin: 0 auto 4px; }
  .sg-main input[type="text"] { width: 100%; max-width: 260px; font-size: 16px; }

  /* ---------- หน้า archive: กล่องเนื้อหาเดิมเว้นขอบ 10% ---------- */
  div[style*="10%"] { margin-left: 0 !important; margin-right: 0 !important; }
}