/* ============================================================
   PAGE — Worksheet / คลังสื่อการสอน index
   หน้า: pages/worksheet/index.php
   โฟกัส: layout "ตัวกรอง (sidebar) + การ์ดสื่อ" ให้ responsive
   ------------------------------------------------------------
   ปัญหาเดิม: ใช้ inline `grid-template-columns: 240px 1fr`
   ซึ่ง inline ชนะ media query → มือถือค้าง 2 คอลัมน์
   (sidebar 240px กินพื้นที่จนคอลัมน์การ์ดเหลือ ~63px การ์ดแตก)
   ย้ายมาเป็น class เพื่อให้ media query ยุบได้
   display:grid + gap:24px มาจาก class .grid อยู่แล้ว
   ============================================================ */

.ws-grid { grid-template-columns: 240px 1fr; }
/* กัน grid item ล้น: รูป/ข้อความ nowrap ไม่ให้ดันคอลัมน์เกินจอ */
.ws-grid > * { min-width: 0; }

/* แท็บเล็ต/มือถือ: กองเป็นคอลัมน์เดียว (ตัวกรองบน · การ์ดล่าง) */
@media (max-width: 1000px) {
  .ws-grid { grid-template-columns: 1fr; }
}