/* ui/layout.css — layout primitives ชุดเดียวของทั้ง 2 เว็บ
 * ทุกหน้าใช้ class เหล่านี้จัดวาง · ห้ามเขียน display:grid / คอลัมน์เองในหน้าใดหน้าหนึ่ง
 * ถ้าต้องการรูปแบบใหม่ เพิ่มที่นี่ (มีชื่อ + ตัวอย่างใน ui/styleguide.html) แล้วค่อยใช้
 * ปรับระยะได้ด้วยตัวแปร (--gap --min --sidebar) แทนการเขียน CSS ใหม่ */

/* ความกว้างหน้า */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ช่วงของหน้า (ระยะบนล่าง) */
.section { padding: var(--ui-section) 0; }
.section-tight { padding: calc(var(--ui-section) * .65) 0; }
.section-white { background: var(--c-surface); }
@media (max-width: 640px) { .section { padding: calc(var(--ui-section) * .65) 0; } }

/* stack: เรียงแนวตั้ง ระยะเท่ากัน (ค่าเริ่มต้น --sp-3 · .stack-lg = --sp-5) */
.stack { --gap: var(--sp-3); }
.stack-lg { --gap: var(--sp-5); }
.stack > * + *, .stack-lg > * + * { margin-top: var(--gap); }

/* cluster: เรียงแนวนอน ขึ้นบรรทัดใหม่เอง (.row = ชื่อเดิมในม็อกอัป ใช้แทนกันได้) */
.cluster, .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-3)); }
.between { justify-content: space-between; }

/* grid คอลัมน์คงที่ ยุบเองตามจอ: 5/4/3 → 2 คอลัมน์ที่ ≤960px → 1 คอลัมน์ที่ ≤640px */
.grid, .grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: var(--gap, var(--ui-gap)); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(var(--cols-md, 2), 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(var(--cols-sm, 1), 1fr); } }
/* จำนวนคอลัมน์ตอนจอแคบปรับได้ต่อจุด: --cols-md (≤960 ค่าเริ่ม 2) · --cols-sm (≤640 ค่าเริ่ม 1) เช่น แถวสถิติ style="--cols-sm:2" */

/* grid-auto: จำนวนคอลัมน์ตามความกว้าง (การ์ดกว้างอย่างน้อย --min) · ไม่ต้องมี breakpoint */
.grid-auto { display: grid; gap: var(--gap, var(--ui-gap)); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); }

/* sidebar-layout: แถบข้างกว้าง --sidebar + เนื้อหา · ยุบเป็นแนวตั้งที่ ≤960px (.sidebar-right = แถบอยู่ขวา) */
.sidebar-layout { display: grid; gap: var(--gap, var(--sp-5)); grid-template-columns: var(--sidebar, 260px) minmax(0, 1fr); align-items: start; }
.sidebar-layout.sidebar-right { grid-template-columns: minmax(0, 1fr) var(--sidebar, 380px); }
@media (max-width: 960px) { .sidebar-layout, .sidebar-layout.sidebar-right { grid-template-columns: 1fr; } }

/* split: ซ้าย-ขวาเท่ากัน (หรือ --split เช่น 1.05fr 1fr) · ยุบที่ ≤960px */
.split { display: grid; gap: var(--gap, var(--sp-7)); grid-template-columns: var(--split, 1fr 1fr); align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }

/* scroll-row: แถวเลื่อนแนวนอน (แทน carousel) · ช่องกว้าง --item · มือถือปัดได้ */
.scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--item, 220px); gap: var(--gap, var(--sp-4)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); scrollbar-width: thin; }
.scroll-row > * { scroll-snap-align: start; }

/* ลูกของ grid ย่อได้ต่ำกว่าเนื้อหา (ตาราง / คำยาว) */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .grid-auto > *, .sidebar-layout > *, .split > * { min-width: 0; }
/* ลูกตรงของ grid ไม่มี margin-top (กัน .panel + .panel / .stack ดันช่องที่สองให้ต่ำกว่าช่องแรก) */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .grid-auto > *, .sidebar-layout > *, .split > * { margin-top: 0; }