/*
 * แถว "ตัวช่วยเลือกสินค้า" บนหน้าแรก (เจ้าของเลือก 18 ก.ย. 2569)
 *
 * ⚠ ไฟล์แยกโดยตั้งใจ — ไม่แก้ทับ `home.css` ของชุดออกแบบ
 *   แบบเดียวกับ `language.css` ที่แยกไว้ตอนมติ 92
 *
 * ⚠ ใช้ token ของชุดออกแบบเท่านั้น ห้ามใส่ค่าสีดิบลงที่นี่
 */

.guides { padding-top: 28px; padding-bottom: 4px; }

.guides .category-filters { margin-bottom: 14px; }

.guide-grid { margin-bottom: 8px; }

/*
 * ⚠⚠⚠ **`flex-direction` กับ `align-content` ต้องประกาศที่นี่ ห้ามถอดออก** (มติ 203 · 23 ก.ย. 2569)
 *
 *    `.category-card` ใน `home.css` ของชุดออกแบบเป็น `display:flex; flex-direction:column`
 *    ไฟล์นี้เขียนทับแค่ `display:flex` มาตั้งแต่ต้น **จึงยังเป็นแนวตั้งมาตลอด**
 *    ทั้งที่ทุกกฎข้างล่างเขียนไว้สำหรับแนวนอน — รูป `flex:1 0 100%` ที่แปลว่า
 *    "กินเต็มความกว้างแล้วขึ้นบรรทัดใหม่" · `guide-count` ที่ `nowrap` ไว้ยืนข้างชื่อ
 *
 *    ตอนการ์ดยังไม่มีรูป (ก่อนมติ 196) ไม่มีใครเห็น เพราะของทุกชิ้นเป็นข้อความ
 *    เรียงลงมาบรรทัดละอันอยู่แล้ว · **พอมติ 196 ใส่รูปเข้ามา `flex-basis:100%`
 *    กลายเป็นความสูง** รูปกินการ์ดทั้งใบ (วัดได้ 220px จากการ์ดสูง 231px)
 *    แล้ว `flex-wrap` ผลักชื่อ · จำนวน · บรรทัด "กรองไม่เจอ" ไปขึ้น**คอลัมน์ถัดไปทางขวา**
 *    ซึ่งอยู่นอกการ์ด แล้วโดน `overflow:hidden` ของ `.category-card` ตัดทิ้ง
 *
 *    ⚠ **ของยังอยู่ครบใน DOM ทุกตัว** ข้อสอบที่อ่านข้อความจากหน้าจึงเขียวตลอด
 *      เรื่องนี้วัดได้ที่เดียวคือ **กรอบของกล่องบนหน้าที่เบราว์เซอร์แปลแล้ว** (กับดัก 13)
 *      ตัวเฝ้า: `tests/browser/guide-cards.test.mjs`
 *
 *    ⚠⚠ `align-content: flex-start` ไม่ใช่ของประดับ — `flex-wrap: wrap` ทำให้
 *      บรรทัดถูก "ยืด" เต็มความสูงการ์ดตามค่าปริยาย รูปของแต่ละใบจึงลอยอยู่คนละระดับ
 *      ตามจำนวนบรรทัดข้อความที่ใบนั้นมี · เจ้าของทักเรื่องรูปไม่เท่ากันมาแล้วครั้งหนึ่ง (มติ 186)
 */
.guide-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

/*
 * รูปบนการ์ด (มติ 196 · เจ้าของสั่ง 23 ก.ย. 2569 ว่า "การ์ดตัวช่วยเลือกสินค้า รูปไม่ขึ้น")
 *
 * ⚠⚠ **ชุดออกแบบเดิมไม่เคยมีช่องรูปบนการ์ดนี้เลยสักใบ — ไม่ใช่รูปเสีย ไม่ใช่รูปหาย**
 *    ของที่ไม่เคยมี กับของที่มีแล้วพัง แก้คนละทางสิ้นเชิง · ถ้าอ่านว่า "พัง"
 *    จะเสียเวลาไปไล่หาว่ารูปหายไปไหน ทั้งที่ไม่เคยมีใครใส่เข้ามา
 *
 * ⚠ กินเต็มความกว้างของการ์ดแล้วขึ้นบรรทัดใหม่ · `margin` ติดลบเท่ากับ `padding`
 *   ของ `.category-card` ใน `home.css` เป๊ะ (10px) รูปจึงชนขอบการ์ดเหมือนการ์ดหมวด
 *   **ผูกกับเลขในไฟล์ของชุดออกแบบ** — วันที่ `padding` ตรงนั้นเปลี่ยน รูปจะเบี้ยว
 */
.guide-card .category-image { flex: 1 0 100%; margin: 0 -10px 4px; }

/*
 * ⚠⚠ ชื่อการ์ดต้องตัดคำได้ ไม่ใช่ล้นออกนอกกล่อง
 *    การ์ดถูก `overflow:hidden` อยู่แล้วจาก `.category-card` → ตัวหนังสือที่ล้น
 *    **ถูกตัดหายไปเงียบๆ ไม่มีแถบเลื่อน ไม่มีอะไรฟ้อง** ลูกค้าอ่านได้ครึ่งคำ
 */
.guide-card .category-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.guide-count { opacity: .6; font-size: .86rem; white-space: nowrap; }

/*
 * ⚠ บรรทัด "กรองไม่เจอ N รหัส" (มติ 131) — ขึ้นบรรทัดเต็มความกว้างของไทล์
 *   **ห้ามซ่อนบนจอเล็กเหมือน `.guide-count`** เพราะอันนั้นเป็นข้อมูลประกอบ
 *   ส่วนอันนี้เป็นคำเตือนว่าไทล์นี้พาไปไม่ครบ ซึ่งคนบนมือถือต้องรู้เท่ากัน
 */
.guide-note { flex: 1 0 100%; font-size: .76rem; opacity: .62; min-width: 0; overflow-wrap: anywhere; }

/*
 * ⚠⚠ ไทล์ที่ยังไม่พร้อม — เซิร์ฟเวอร์ไม่ส่งที่อยู่มาให้ หน้าเว็บจึงวาดเป็น <span> ไม่ใช่ <a>
 *    สถานะนี้จึงไม่ใช่แค่หน้าตา มันคือ "ไม่มีที่ให้ไป" จริงๆ
 *    ห้ามทำให้กดได้ด้วย CSS หรือ JavaScript โดยไม่แก้ที่เซิร์ฟเวอร์ก่อน
 */
.guide-card[data-ready="false"] { cursor: default; opacity: .62; }

.guide-badge {
    font-size: .74rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: .85;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .guide-count { display: none; }
}

/* มติ 451 (เจ้าของสั่ง 5 ต.ค. 2569) — การ์ดแท็บ «โซลูชันและงานโครงสร้าง» ใช้ `.category-grid` + `.guide-card` ตัวเดียวกับการ์ดตัวช่วย
   ขนาดจึงเท่าการ์ดอื่นเอง (แทนการ์ดใหญ่ 16:9 ของมติ 446) · การซ่อนใช้ `[hidden]{display:none!important}` ของ home.css (ไม่ต้องมีกฎที่นี่) */