/* ===========================================================================
 * mes789-system / assets/css/legacy-compat.css
 * ---------------------------------------------------------------------------
 * ทำให้โพสต์เก่าที่ย้ายมาจาก WordPress แสดงผลถูกต้อง
 *
 * ===========================================================================
 * ทำไมต้องมีไฟล์นี้ — ต้นเหตุที่โพสต์เก่า "เพี้ยน"
 * ===========================================================================
 * ผมไล่เนื้อหาโพสต์เก่าทั้ง 121 รายการในไฟล์ฐานข้อมูลแล้ว พบว่าข้างในมี
 * HTML ที่อ้างถึงคลาส CSS ของระบบเดิมฝังอยู่ในตัวเนื้อหาเลย เช่น
 *
 *     <div class="csb-locked-image-wrap" style="...">      13 ครั้ง
 *     <div class="mes-theme-card-wrapper mes-theme-midnight">  8 ครั้ง
 *     <div class="mes-quote-inserted-card">                 8 ครั้ง
 *     <div class="csb-yt-embed">                            6 ครั้ง
 *     <div class="mes-inserted-media-card">                 4 ครั้ง
 *     <div class="mes-news-slider-wrapper">                 3 ครั้ง
 *
 * คลาสพวกนี้เคยมีนิยามอยู่ใน CSS ของปลั๊กอินเดิม แต่ v5 ไม่มี
 * โพสต์จึงกลายเป็นกล่องเปล่า ๆ ไม่มีสี ไม่มีกรอบ รูปหลุดขนาด
 *
 * ⭐ ทางแก้ที่ "ไม่ควร" ทำ: ไปแก้เนื้อหาโพสต์ในฐานข้อมูลให้เปลี่ยนคลาส
 *    เพราะเป็นการเขียนทับข้อมูลจริงของสมาชิก ถ้าแก้พลาดกู้กลับไม่ได้
 *
 * ทางแก้ที่ทำจริง: เขียน CSS รองรับคลาสเก่าไว้ที่นี่
 * เนื้อหาในฐานข้อมูลไม่ถูกแตะเลยแม้แต่ตัวอักษรเดียว
 *
 * ---------------------------------------------------------------------------
 * ทั้งหมดปรับให้เข้ากับโทนทอง-ดำของ v5 แล้ว ไม่ได้ก๊อปสีเดิมมาดิบ ๆ
 * =========================================================================== */

/* ===========================================================================
   1. การ์ดธีม (mes-theme-*)  — พบ 8 โพสต์
   =========================================================================== */
.post-body .mes-theme-card-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 26px 22px;
    border-radius: 16px;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    line-height: 1.75;
}

/* ชั้นมืดทับพื้นหลังรูป เพื่อให้ตัวอักษรอ่านออกเสมอ */
.post-body .mes-theme-card-wrapper[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    pointer-events: none;
}
.post-body .mes-theme-card-wrapper[style*="background-image"] > * {
    position: relative;
    z-index: 1;
}

/* ธีมสีที่โพสต์เก่าใช้จริง — ไล่เฉดให้เข้ากับโทนทอง-ดำของ v5 */
.post-body .mes-theme-midnight {
    background: linear-gradient(150deg, #0f1830, #1a2547 55%, #0b1020);
    color: #dbe4ff;
}
.post-body .mes-theme-crimson {
    background: linear-gradient(150deg, #2a0d12, #5a1520 55%, #1a0709);
    color: #ffdfe2;
}
.post-body .mes-theme-emerald {
    background: linear-gradient(150deg, #0a2018, #14402f 55%, #061410);
    color: #d5f3e5;
}
.post-body .mes-theme-g-blood {
    background: linear-gradient(150deg, #3a0a0a, #7a1414 50%, #1f0505);
    color: #ffe3e3;
}
.post-body .mes-theme-g-sunset {
    background: linear-gradient(150deg, #3d1a05, #8a4410 45%, #241004);
    color: #ffeeda;
}

/* ===========================================================================
   2. รูปที่มีการป้องกัน (csb-locked-image)  — พบ 13 โพสต์
   ---------------------------------------------------------------------------
   ระบบเดิมใช้ครอบรูปเพื่อกันคลิกขวาบันทึก
   คงพฤติกรรมเดิมไว้ แต่ทำให้รูปแสดงเต็มความกว้างการ์ดตามดีไซน์ใหม่
   =========================================================================== */
.post-body .csb-locked-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
    width: 100% !important;
    margin: 10px 0 !important;
    line-height: 0;
}
.post-body .csb-locked-image,
.post-body .csb-locked-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    /* กันลากรูปออกไปและกดค้างเพื่อบันทึกบนมือถือ */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

/* ===========================================================================
   3. การ์ดคำคม (mes-quote-inserted-card)  — พบ 8 โพสต์
   =========================================================================== */
.post-body .mes-quote-inserted-card {
    border-left: 3px solid var(--gold-dim, #8a7128);
    background: rgba(212, 175, 55, .07);
    border-radius: 0 10px 10px 0;
    padding: 16px 18px;
    margin: 14px 0;
    font-style: italic;
    line-height: 1.85;
    color: var(--gold-soft, #f0d98a);
}
.post-body .mes-quote-inserted-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ===========================================================================
   4. วิดีโอ YouTube ที่ฝังไว้ (csb-yt-embed)  — พบ 6 โพสต์
   =========================================================================== */
.post-body .csb-yt-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.post-body .csb-yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===========================================================================
   5. การ์ดสื่อและ GIF ที่แทรกไว้
   =========================================================================== */
.post-body .mes-inserted-media-card,
.post-body .mes-inserted-gif-card,
.post-body .mes-myt-inserted-card {
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line, #2e2323);
    line-height: 0;
}
.post-body .mes-inserted-media-card img,
.post-body .mes-inserted-gif-card img,
.post-body .mes-myt-inserted-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* แถบเพลง/สื่อ */
.post-body .mes-myt-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-2, #221a1a);
    border-radius: 999px;
    margin: 10px 0;
    font-size: .85rem;
    color: var(--text-dim, #a1938c);
    line-height: 1.5;
}

/* ===========================================================================
   6. สไลด์ข่าว (mes-news-slider-wrapper)  — พบ 3 โพสต์
   ---------------------------------------------------------------------------
   ระบบเดิมใช้ JavaScript เลื่อนสไลด์ ซึ่ง v5 ยังไม่ได้พอร์ตมา
   จึงทำให้เลื่อนดูด้วยนิ้ว/เมาส์แทน — ใช้งานได้จริงโดยไม่ต้องมี JS เลย
   และบนมือถือใช้ง่ายกว่าปุ่มลูกศรด้วยซ้ำ
   =========================================================================== */
.post-body .mes-news-slider-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 12px 0;
    scrollbar-width: thin;
}
.post-body .mes-news-slider-wrapper > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line, #2e2323);
}
.post-body .mes-news-slider-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===========================================================================
   7. คลาสค้างจากระบบการ์ดเดิม (mpp-*)
   ---------------------------------------------------------------------------
   ระบบใหม่ใช้ชื่อขึ้นต้นด้วย mpc- แต่โพสต์เก่าบางอันมี mpp- ฝังอยู่ในเนื้อหา
   เพราะตอนนั้น JavaScript เขียนคลาสลงไปในตัวข้อความก่อนบันทึก
   ตรงนี้ทำให้ทั้งสองชื่อใช้ได้เหมือนกัน
   =========================================================================== */
.post-body .mpp-cover-preview {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.post-body .mpp-cover-preview-headline {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--text, #ece5e0);
}
.post-body .mpp-cover-preview-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: #000;
    border-radius: 10px;
}
/* ปุ่มเก่าที่ค้างในเนื้อหา — ซ่อนทิ้ง เพราะระบบใหม่สร้างปุ่มของตัวเองแล้ว
   ถ้าปล่อยไว้จะมีปุ่ม "อ่านต่อ" ซ้อนกันสองปุ่ม */
.post-body .mpp-read-more-btn,
.post-body .mpp-collapse-btn {
    display: none !important;
}

/* ===========================================================================
   8. ตัวอักษรที่โพสต์เก่ากำหนดเอง
   ---------------------------------------------------------------------------
   โพสต์เก่าใส่ inline style มากับเนื้อหา ซึ่ง SafeHtml อนุญาตให้ผ่าน
   ตรงนี้แค่กันไม่ให้ล้นกรอบการ์ดเวลาตั้งขนาดตัวอักษรใหญ่มาก
   =========================================================================== */
.post-body [style*="font-size"] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.post-body img { max-width: 100%; height: auto; }