/* ==========================================================================
   slides.css — โครงสไลด์ แถบหัวสไลด์ หน้าปก หน้าปิด และ layout หลัก
   ========================================================================== */

.deck{display:flex;flex-direction:column;align-items:center;gap:28px;padding:36px 20px 80px}

.slide{
  width:100%;max-width:var(--slide-w);aspect-ratio:16/9;
  background:var(--white);border-radius:var(--radius-slide);padding:var(--slide-pad);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 3px rgba(10,10,18,.06),0 18px 44px -28px rgba(43,2,244,.28);
}
@media (max-width:860px){
  .slide{aspect-ratio:auto;padding:34px 26px;border-radius:16px}
}

/* ---- Logo ---- */
.logo{
  display:block;background-image:var(--logo);
  background-size:cover;background-position:center;border-radius:7px;
}

/* ---- Rail: แถบหัวสไลด์ (สร้างอัตโนมัติโดย deck.js) ---- */
.rail{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex:0 0 auto}
.rail .logo{width:26px;height:26px;flex:0 0 auto}
.rail .num{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--indigo);background:var(--mist);border-radius:99px;padding:5px 12px;
}
.rail .chap{
  font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.rail .dots{margin-left:auto;display:flex;gap:5px;align-items:center}
.rail .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}
.rail .dots i.on{background:var(--lime);width:20px;border-radius:99px}

/* ---- Layout helpers ---- */
.body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;flex:1 1 auto;min-height:0;align-items:start}
.two.wide-left{grid-template-columns:1.15fr .85fr}
.two.wide-right{grid-template-columns:.85fr 1.15fr}
@media (max-width:860px){
  .two,.two.wide-left,.two.wide-right{grid-template-columns:1fr;gap:22px}
}
.stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.scroll{overflow-x:auto;min-width:0}
.footer-note{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:12px}

/* ---- Title slide ----
   ใช้ flex สามแถว brand / เนื้อหา / meta แทน position:absolute
   เพื่อไม่ให้ซ้อนกันเมื่อสไลด์เตี้ยลงตามอัตราส่วน 16:9 */
.title-slide{background:var(--indigo);justify-content:space-between;gap:20px}
.title-slide h1{color:var(--white);font-size:clamp(32px,calc(4.6 * var(--vw)),64px)}
.title-slide .lead{color:#C7CEFF;font-size:clamp(15px,calc(1.5 * var(--vw)),19px);margin-top:16px}
.title-slide .brand{
  display:flex;align-items:center;gap:14px;flex:0 0 auto;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);font-weight:600;
}
.title-slide .brand .logo{width:40px;height:40px;border-radius:10px}
.title-main{
  flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center;
}
.title-logo{width:clamp(96px,calc(14 * var(--vw)),180px);aspect-ratio:1;border-radius:24px}
@media (max-width:860px){
  .title-main{grid-template-columns:1fr}
  .title-logo{display:none}
}

/* ---- Closing slide ---- */
.close-slide{background:var(--ink);justify-content:space-between;align-items:stretch;gap:20px}
.close-slide h1{color:var(--white);font-size:clamp(30px,calc(4.2 * var(--vw)),58px)}
.close-slide .lead{color:#9DA2C4;margin-top:16px}
.close-main{
  flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center;
}
.close-slide .sig{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);font-weight:600;
}
.close-slide .sig .logo{width:38px;height:38px;border-radius:10px}
.close-mark{width:clamp(120px,calc(16 * var(--vw)),200px);height:auto}
@media (max-width:860px){
  .close-main{grid-template-columns:1fr}
  .close-mark{display:none}
}

/* ---- Entrance ---- */
@media (prefers-reduced-motion:no-preference){
  .slide{animation:rise .5s ease-out both}
  @keyframes rise{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---- Chapter divider ----
   หน้าคั่นบท พื้นสีแบรนด์เต็มแผ่น ทำหน้าที่บอกผู้ฟังว่ากำลังเปลี่ยนเรื่อง
   ยังมีแถบหัวสไลด์ตามปกติ แค่ปรับสีให้อ่านออกบนพื้นเข้ม */
.chapter-slide{background:var(--indigo);justify-content:space-between}
.chapter-slide .rail .num{background:rgba(255,255,255,.16);color:var(--white)}
.chapter-slide .rail .chap{color:#A8B2F5}
.chapter-slide .rail .dots i{background:rgba(255,255,255,.28)}
.chapter-slide .rail .dots i.on{background:var(--lime)}

.ch-main{
  flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;
}
.ch-eyebrow{
  display:block;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);margin-bottom:14px;
}
.chapter-slide h1{color:var(--white)}
.chapter-slide .lead{color:#C7CEFF;margin-top:16px;max-width:52ch}

/* ตัวเลขบทขนาดใหญ่ อ่านเป็นพื้นหลัง ไม่ใช่ข้อความที่ต้องอ่าน */
.ch-num{
  font-family:var(--mono);font-weight:500;line-height:.8;
  font-size:clamp(110px,calc(19 * var(--vw)),230px);
  color:rgba(203,244,2,.17);user-select:none;
}

.ch-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ch-tags span{
  font-size:13px;font-weight:500;color:var(--white);
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.45);
  border-radius:99px;padding:6px 14px;
}
@media (max-width:860px){
  .ch-main{grid-template-columns:1fr}
  .ch-num{display:none}
}