/* ===========================================================================
   board-digest.css — การ์ดย่อของลานสนทนา
   [สร้าง 13 ก.ย. 2569 — แม่บทแชท 3 · ตามม็อคอัพ board-card-mockup.html ที่เจ้าของเคาะ]

   ทำไมต้องมีไฟล์นี้: การ์ดในลานสนทนาเป็นบทความยาวสลับรูป/คลิป ต่างจากหน้าฟีด
   ที่เป็น "รูป + คำบรรยายสั้น" — กติกาย่อจึงคนละชุด แยกไฟล์ไว้เพื่อให้รู้ชัดว่า
   แก้ตรงนี้กระทบเฉพาะลานสนทนา ไม่ลามไปทั้งเว็บ

   ทุกคลาสขึ้นต้น .bdg- และอยู่ใต้ .mpc-digest เท่านั้น
   =========================================================================== */

/* ---------- ข้อความ: หนีบ 2 บรรทัดด้วย CSS ล้วน ----------
   ใช้ -webkit-line-clamp เพราะทำงานตั้งแต่เฟรมแรก ไม่มีจังหวะการ์ดยาวแวบก่อนหุบ
   (เบราว์เซอร์ทุกตัวที่เว็บรองรับใช้ได้หมด รวม Firefox ตั้งแต่รุ่น 68) */
.post-body.mpc-digest { position: relative; }

.bdg-text {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.75;
    word-break: break-word;
}

/* "ดูเพิ่มเติม" เกาะมุมขวาล่างของบรรทัดที่ 2 — แถบไล่สีบังด้านซ้ายไม่ให้ทับ
   ตัวหนังสือจนอ่านไม่ออก (แพทเทิร์นเดียวกับ .mpc-more ของการ์ดกลาง
   เพื่อให้คนใช้เจอภาษาเดียวกันทั้งเว็บ) */
.bdg-more {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 0 0 34px;
    border: 0;
    font: inherit;
    cursor: pointer;
    background: linear-gradient(to right,
        transparent 0,
        var(--surface, #141013) 26px,
        var(--surface, #141013) 100%);
    color: var(--gold, #d4af37);
    font-size: .82rem;
    text-decoration: none;
}
.bdg-more:hover { text-decoration: underline; }

/* ---- กางในที่ (ข้อ 5) ----
   [รอบ 2] เดิมปุ่มนี้เป็นลิงก์เด้งไปหน้าโพสต์ = ผิดคอนเซ็ปต์ที่เจ้าของวางไว้
   ตอนนี้กางตรงนั้นเหมือนหน้าฟีด ปุ่มเปลี่ยนเป็น "ย่อกลับ" */
.bdg-text.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
/* [14 ก.ย.] กางแล้วปุ่มหายไปเลย (ไม่มีคำว่า "ย่อกลับ" — หุบด้วยการจิ้มข้อความเหมือนฟีด) */
.bdg-text.is-open .bdg-more { display: none; }
.bdg-text.is-open { cursor: pointer; }

/* ---------- กริดสื่อรวม ----------
   ครอบ 1:1 ทุกช่อง (เจ้าของเคาะข้อ ง-2: "ครอบมาให้พอดีดีกว่า")
   ต้นฉบับไม่ถูกแตะ — หน้าโพสต์เต็มยังเต็มสัดส่วนเหมือนเดิม */
.bdg-grid {
    display: grid;
    gap: 3px;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}

.bdg-cell {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #0b0f14;
}
/* เจาะจงด้วย .post-body.mpc-digest นำหน้า เพื่อให้ชนะกฎเก่าที่เจาะจงกว่า .bdg-cell
   โดยเฉพาะ .post-body.mpc-image-only img { height:auto } — เคยทำให้รูปไม่เต็มช่อง
   (กันไว้สองชั้น: JS ไม่ติดคลาสนั้นให้การ์ดย่ออยู่แล้ว แต่ถ้าหลุดมาก็ยังไม่พัง) */
.post-body.mpc-digest .bdg-cell img,
.bdg-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* ครอบเต็มกรอบ ไม่เหลือแถบดำ */
    display: block;
    margin: 0;
    border-radius: 0;
}

.bdg-grid.count-1 { grid-template-columns: 1fr; }

/* ---- สื่อชิ้นเดียว: 3 ทรง สลับได้จากหลังบ้าน ----
   [รอบ 2 · เจ้าของเคาะ 13 ก.ย.] ค่าเริ่มต้นคือ native = ไม่ตัดเลย

   ⛔ ห้ามใช้ object-fit: contain เด็ดขาด — นั่นคือ "ยัดรูปเข้ากล่องคงที่"
   ซึ่งทำให้เกิดแถบดำรอบรูป (เคยพลาดมาแล้วรอบแรก) วิธีที่ถูกคือ
   ให้กล่องยืดตามรูปแทน: ปล่อย height:auto แล้วไม่ล็อก aspect-ratio */
.bdg-grid.count-1.is-native { background: none; }
.bdg-grid.count-1.is-native .bdg-cell {
    aspect-ratio: auto;
    height: auto;
    background: none;
    max-height: var(--bdg-maxvh, 70vh);   /* รูปยาวเวอร์ (อินโฟกราฟิก) ตัดท้าย ไม่ใช่ย่อ */
}
.post-body.mpc-digest .bdg-grid.count-1.is-native .bdg-cell img,
.bdg-grid.count-1.is-native .bdg-cell img { height: auto; object-fit: cover; }

.bdg-grid.count-1.is-square .bdg-cell { aspect-ratio: 1 / 1; }
.bdg-grid.count-1.is-portrait .bdg-cell { aspect-ratio: 4 / 5; }

.bdg-grid.count-2 { grid-template-columns: 1fr 1fr; }

/* 3 ชิ้น: ใบใหญ่ซ้ายกินสองแถว + 2 ใบเล็กขวา
   ล็อกสัดส่วนทั้งกริดไว้ 3:2 แล้วสั่ง height:100% ทุกช่อง ไม่ให้เหลือพื้นที่ดำ */
.bdg-grid.count-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
}
.bdg-grid.count-3 .bdg-cell { aspect-ratio: auto; height: 100%; }
.bdg-grid.count-3 .bdg-lead { grid-row: span 2; }

.bdg-grid.count-4 { grid-template-columns: 1fr 1fr; }

/* ---------- ป้ายบนช่อง ---------- */
.bdg-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.bdg-kind {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: .62rem;
    background: rgba(0, 0, 0, .6);
    color: var(--gold-soft, #f0d98a);
    padding: 2px 6px;
    border-radius: 999px;
    pointer-events: none;
}
.bdg-more-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ---------- ช่องที่ไม่มีรูปให้ดึง ----------
   การ์ดคำคม/โดมตัวหนังสือ → วาดเป็นช่องตัวหนังสือย่อ
   สื่อที่หาปกไม่ได้เลย → ป้ายเฉย ๆ · ทั้งคู่ห้ามปล่อยเป็นช่องดำเปล่า */
.bdg-cell.is-textcard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    background: linear-gradient(140deg, #221a12, #0b0f14);
    text-decoration: none;
}
.bdg-tc-mark { font-size: 1.6rem; color: var(--gold, #d4af37); line-height: .6; }
.bdg-tc-text {
    font-size: .72rem;
    color: var(--text-dim, #c9c2b8);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bdg-cell.is-chip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    background: #14100f;
    border: 1px dashed var(--gold-dim, #8a7128);
    text-decoration: none;
}
.bdg-chip-ico { font-size: 1.5rem; }
.bdg-chip-lbl { font-size: .66rem; color: var(--text-mute, #8b8378); text-align: center; }


/* ===========================================================================
   [รอบ 2 — 13 ก.ย. 2569] ของที่เพิ่มตามที่เจ้าของสั่งแก้ 7 ข้อ
   =========================================================================== */

/* ---- ข้อ 1: รูปชนขอบซ้าย-ขวาของการ์ด (ตามตัวอย่าง EX ที่ส่งมา) ----
   .card มี padding 1rem อยู่ จึงต้องดึงกริดออกมาให้เต็มความกว้างพื้นที่ทำงาน */
.post-body.mpc-digest .bdg-grid {
    margin-left: -1rem;
    margin-right: -1rem;
    width: auto;
    border-radius: 0;
}

/* ---- ข้อ 2: การ์ดข้อความ 4:3 (ข้อความล้วน ไม่เกินเกณฑ์คำ) ----
   ไม่มีปุ่มดูเพิ่มเติม เพราะไม่มีอะไรถูกซ่อน — กดไปก็ไม่มีอะไรเพิ่ม */
.bdg-card43 {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(150deg, #241b12 0%, #0f0c0b 70%);
    border: 1px solid var(--line, #2a2420);
}
.bdg-card43 p {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--text, #ece6dd);
    overflow: hidden;
}
/* ข้อความยาวใกล้เพดาน → ตัวเล็กลงและชิดซ้าย ไม่งั้นล้นกรอบ */
.bdg-card43.is-dense p { font-size: .84rem; line-height: 1.7; text-align: left; }

/* ---- ข้อ 3: ไม่มีพื้นที่ว่างเด็ดขาด ----
   ช่องที่รูปโหลดไม่ขึ้นถูกยุบทิ้งด้วย JS (board-digest.js) — ตรงนี้กันซ้ำ
   เผื่อ JS ไม่ทำงาน: กล่องที่ไม่มีรูปข้างในเลยจะไม่กินพื้นที่ */
.bdg-cell.is-dead { display: none !important; }
.bdg-grid.is-dead { display: none !important; }

/* ---- ข้อ 7: กด ▶ แล้วเล่นคลิปในการ์ดเลย ----
   ปุ่มจริง (กดได้) ต่างจาก span เดิมที่เป็นแค่ไอคอน */
button.bdg-play {
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
}
button.bdg-play:hover { background: rgba(0, 0, 0, .75); }

/* ช่องที่กำลังเล่นคลิป — iframe ถูกสร้างตอนกดเท่านั้น หน้ารายการจึงยังเบา */
.bdg-cell.is-playing { aspect-ratio: 16 / 9; max-height: none; }
.bdg-cell.is-playing iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.bdg-cell.is-playing .bdg-play,
.bdg-cell.is-playing .bdg-kind,
.bdg-cell.is-playing img { display: none; }

/* ---- ข้อ 4: หัวโพสต์กดได้ทั้งแถบ ---- */
article.post:has(.post-body.mpc-digest) .post-head,
article.post:has(.post-body.mpc-digest) .post-title { cursor: pointer; }

/* ช่องคลิปที่รูปปกโหลดไม่ขึ้น — ยังกด ▶ เล่นได้ ไม่ยุบทิ้ง
   (ยุบทิ้ง = สื่อหายไปจากโพสต์ทั้งที่คลิปยังดูได้) */
.bdg-cell.is-noposter {
    background: linear-gradient(140deg, #221a12, #0b0f14);
    border: 1px dashed var(--gold-dim, #8a7128);
}

/* [14 ก.ย.] บนมือถือ fullbleed.css ถอด padding ของ .card ออกแล้วให้ .post-body
   มีระยะขอบ 12px แทน (ไม่ใช่ 1rem) — ต้องดึงกริดออกเท่ากันพอดี ไม่งั้นเกินขอบจอ 4px
   ใช้ breakpoint เดียวกับ fullbleed.css (1199px) ไม่ใช่เดาเอง */
@media (max-width: 1199px) {
    .shell-center .post-body.mpc-digest .bdg-grid {
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* ===========================================================================
   [14 ก.ย. 2569 — แม่บทแชท 3] แผ่นคอมเมนต์ของลานสนทนา (post-overlay.js โหมด sheet)
   โครงเดียวกับแผ่นเม้นของฟีด (comment-sheet.css) แต่เนื้อในเป็น iframe ของ
   หน้าโพสต์ ?embed=1&sheet=1 — เครื่องยนต์ต้นไม้ยังเป็น comment-box.php ตัวเดิม
   =========================================================================== */

/* กล่องห่อที่เพิ่มเข้ามา — โหมดเต็มจอเดิมต้องหน้าตาเหมือนเดิมเป๊ะ */
.post-ov-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }

/* โหมดแผ่น */
.post-ov.is-sheet { background: transparent; justify-content: flex-end; animation: none; }  /* .post-ov เป็น flex คอลัมน์ — ชิดล่างต้องใช้ justify ไม่ใช่ align (เทสจับได้) */
.post-ov-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.post-ov.is-sheet .post-ov-panel {
    position: relative;
    flex: 0 0 auto;                 /* ห้ามยืดเต็มจอ — กฎ flex:1 ของโหมดเต็มทับอยู่ (เทสจับได้: สูง 844 แทน 88vh) */
    width: 100%;
    max-width: 620px;               /* ตัวเลขเดียวกับ .cmt-sheet ของฟีด */
    height: 88vh;
    height: 88dvh;                  /* หดตามแป้นพิมพ์ (บทเรียน 12 ก.ย. แม่บท 4/2) */
    margin: 0 auto;
    background: var(--surface, #141013);
    border: 1px solid var(--gold-dim, #8a7128);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    animation: post-ov-in .22s ease;
}
.post-ov-grip {
    display: flex; justify-content: center; padding: 10px 0 4px;
    cursor: grab; touch-action: none;
}
.post-ov-grip span { width: 44px; height: 4px; border-radius: 99px; background: #4a4038; display: block; }
.post-ov.is-sheet .post-ov-head { border-bottom-color: var(--line); }