/* ===========================================================================
   assets/css/slideshow.css — 🎞️ สไลด์โชว์
   ---------------------------------------------------------------------------
   [เพิ่ม 9 ก.ย. 2569 — เลนแป้นพิมพ์] แยกจาก composer.css (ไฟล์กลาง) โดยตั้งใจ
   ส่วนโมดัล  → โหลดจาก app/partials/slideshow.php เท่านั้น
   ส่วนการ์ด (.mes-slideshow-embed) → ต้องมีตอน "อ่านโพสต์" ด้วย
   จึงถูกโหลดจาก layout-foot.php ทุกหน้าคู่กับ mes-slideshow-viewer.js
   =========================================================================== */

/* ── โมดัลเครื่องมือ (เฉพาะตอนสร้าง) ───────────────────────────────── */
.mes-slideshow-box {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
}
.mes-slideshow-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;      /* สำคัญ: ไม่ใส่ iframe จะดันกล่องจนล้นจอ */
    border-radius: 10px;
    overflow: hidden;
    background: #0d0d10;
}
.mes-slideshow-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── การ์ดในโพสต์ (ต้องมีตอนอ่านด้วย) ─────────────────────────────── */
.mes-slideshow-embed {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line, #2e3138);
    margin: 8px 0;
}
/* ป้ายก่อน viewer ทำงาน — ถ้า JS ไม่โหลดยังเห็นว่ามีสไลด์อยู่ ไม่ใช่กล่องเปล่า */
.mes-slideshow-embed .ss-ph {
    padding: 26px 14px;
    text-align: center;
    color: var(--text-mute, #9a938d);
    font-size: 13px;
}
.mes-slideshow-embed.is-ready .ss-ph { display: none; }

.mes-slideshow-embed .ss-stage { position: relative; width: 100%; aspect-ratio: 1/1; background: #000; }
.mes-slideshow-embed .ss-stage > div { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.mes-slideshow-embed .ss-stage > div.on { opacity: 1; }
.mes-slideshow-embed .ss-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mes-slideshow-embed .ss-bars {
    position: absolute; top: 6px; left: 7px; right: 7px;
    display: flex; gap: 3px; z-index: 4;
}
.mes-slideshow-embed .ss-bar {
    flex: 1; height: 2.5px; border-radius: 2px;
    background: rgba(255,255,255,.28); overflow: hidden;
}
.mes-slideshow-embed .ss-bar > i { display: block; height: 100%; width: 0; background: #fff; }

.mes-slideshow-embed .ss-cover {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.4); z-index: 5; cursor: pointer;
}
.mes-slideshow-embed .ss-cover span {
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(0,0,0,.6); border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; color: #fff;
}
.mes-slideshow-embed .ss-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px 11px; font-size: 12px; color: #fff; z-index: 3;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.mes-slideshow-embed .ss-bot {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 8px; font-size: 12px;
    background: var(--surface, #16181d);
    border-top: 1px solid var(--line, #2e3138);
    color: var(--text-mute, #9a938d);
}
.mes-slideshow-embed .ss-bot button {
    background: transparent; border: 1px solid var(--line, #2e3138);
    color: inherit; border-radius: 8px; padding: 4px 9px;
    font: inherit; font-size: 12px; cursor: pointer;
}