/* ============================================================
   PAGE — Community index (feed)
   หน้า: pages/community/index.php
   โฟกัส: ตรึง sidebar ซ้าย (หมวด) + ขวา (ฮอตสัปดาห์นี้)
          ให้ค้างไว้ ส่วนฟีดตรงกลางเลื่อนสไลด์ได้
   ------------------------------------------------------------
   ทำไม sticky เดิมไม่ทำงาน:
   core/reset.css ตั้ง `html, body { overflow-x: hidden; }`
   ซึ่งตาม spec CSS จะกลายเป็น `overflow: hidden auto` = สร้าง
   scroll container ครอบทั้งหน้า → ทำให้ position:sticky ของลูก
   "ใช้ไม่ได้เงียบ ๆ" (ทั้ง sidebar ซ้าย-ขวา และ search bar กลาง)

   วิธีแก้ (scope เฉพาะหน้านี้):
   เปลี่ยนเป็น `overflow-x: clip` — กันเลื่อนแนวนอนได้เหมือนเดิม
   แต่ "ไม่สร้าง scroll container" → sticky กลับมาทำงานตามปกติ
   (โหลดหลัง reset.css จึง override ได้ ไม่ต้องใช้ !important)
   ============================================================ */

html, body { overflow-x: clip; }

/* ตรึง sidebar ซ้าย-ขวา (align-self:start กันไม่ให้ grid ยืดเต็ม
   ความสูงแถว ไม่งั้น sticky จะไม่มีที่ให้ขยับ) */
#feedRegion .comm-sticky-side {
  position: sticky;
  top: 16px;
  align-self: start;
}

/* ============================================================
   Responsive layout ของ #feedRegion
   (ย้ายออกจาก inline style เดิม `grid-template-columns:240px 1fr 300px`
    ที่ inline ชนะ media query → มือถือค้าง 3 คอลัมน์ล้นจอ)
   display:grid + gap:24px มาจาก class .grid อยู่แล้ว
   ============================================================ */
#feedRegion { grid-template-columns: 240px 1fr 300px; }

/* กัน grid item ล้น: ค่าเริ่มต้น min-width:auto ทำให้ item ไม่ยอมหด
   ต่ำกว่าความกว้าง content (รูป/ข้อความ nowrap) → คอลัมน์ดันกว้างเกินจอ
   แล้วโดน overflow-x:clip ตัดขอบขวาหาย. min-width:0 ให้หดพอดีจอได้ */
#feedRegion > * { min-width: 0; }

/* แท็บเล็ต: เหลือ หมวด + ฟีด, ดัน "ฮอตสัปดาห์นี้" ลงเต็มความกว้างด้านล่าง */
@media (max-width: 1000px) {
  #feedRegion { grid-template-columns: 200px 1fr; }
  #feedRegion > aside:last-child { grid-column: 1 / -1; }
}

/* มือถือ: กองเป็นคอลัมน์เดียว + ปิด sticky (ซ้อนกันแล้วไม่ต้องตรึง) */
@media (max-width: 560px) {
  #feedRegion { grid-template-columns: 1fr; }
  #feedRegion > aside:last-child { grid-column: auto; }
  #feedRegion .comm-sticky-side { position: static; top: auto; }
}