/* ===========================================================================
   วารสารที่ดินชัวร์ — หน้า journal.html · journal/<slug>/ · บล็อกบนหน้าแรก
   สร้างหน้าด้วย build/journal.js จาก GET /api/journal ของระบบหลังบ้าน

   ⚠️ สีทั้งหมดมาจาก token ชุด --nj-journal-* ใน tokens.css — ห้ามใส่รหัสสีดิบในไฟล์นี้
   ⚠️ ไฟล์นี้ใช้ทั้งหน้าที่โหลด marketplace.css และหน้าแรกที่ใช้ home.css
      จึงห้ามพึ่งตัวแปรของสองไฟล์นั้น (--navy · --line ฯลฯ) — ใช้ token กลางเท่านั้น
   =========================================================================== */

/* ---------- หัวหน้ารายการ ---------- */
.jr-head{background:var(--nj-journal-paper);padding:34px 0 26px;border-bottom:3px solid var(--nj-journal-green)}
.jr-head h1{margin:0 0 8px;font-size:var(--nj-fs-h1);line-height:var(--nj-lh-head);color:var(--nj-journal-green)}
.jr-head p{margin:0;max-width:var(--nj-measure);color:var(--nj-text-muted);line-height:var(--nj-lh-body)}
.jr-wrap{padding:26px 0 44px}
.jr-crumb{margin:0 0 14px;font-size:var(--nj-fs-sm);color:var(--nj-text-muted)}
.jr-crumb a{color:var(--nj-link)}

/* ---------- การ์ดฉบับ (ใช้ร่วมกันทั้งหน้ารายการและหน้าแรก) ---------- */
.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:18px;margin:0;padding:0;list-style:none}
.jr-card{display:flex;flex-direction:column;background:var(--nj-surface);border:1px solid var(--nj-border);border-radius:var(--nj-radius-lg);overflow:hidden;min-width:0}
.jr-cover{position:relative;aspect-ratio:16/9;background:var(--nj-journal-green-soft);overflow:hidden}
.jr-cover img{display:block;width:100%;height:100%;object-fit:cover}
/* ไม่มีรูปปก = พื้นสีวารสาร + ชื่อหัวหนังสือ (ไม่ใช้รูปสต็อก — กติกาข้อ 9 ของเว็บ) */
.jr-cover-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:16px;text-align:center;
  color:var(--nj-journal-green);font-weight:var(--nj-fw-bold);font-size:var(--nj-fs-h4);line-height:var(--nj-lh-head)}
.jr-cover-blank small{display:block;margin-top:4px;font-weight:var(--nj-fw-normal);font-size:var(--nj-fs-xs);color:var(--nj-text-muted)}
.jr-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1;min-width:0}
.jr-issue{align-self:flex-start;background:var(--nj-journal-green);color:var(--nj-white);font-size:var(--nj-fs-xs);
  font-weight:var(--nj-fw-semi);padding:3px 10px;border-radius:var(--nj-radius-pill)}
.jr-title{margin:0;font-size:var(--nj-fs-h4);line-height:var(--nj-lh-head);color:var(--nj-journal-ink);overflow-wrap:anywhere}
.jr-title a{color:inherit;text-decoration:none}
.jr-title a:hover{text-decoration:underline}
.jr-excerpt{margin:0;color:var(--nj-text-muted);font-size:var(--nj-fs-sm);line-height:var(--nj-lh-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-date{color:var(--nj-text-muted);font-size:var(--nj-fs-xs)}
.jr-read{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  border-radius:var(--nj-radius-md);background:var(--nj-journal-green);color:var(--nj-white);font-weight:var(--nj-fw-semi);
  font-size:var(--nj-fs-sm);text-decoration:none}
.jr-read:hover{filter:brightness(1.1)}
.jr-empty,.jr-note{color:var(--nj-text-muted);line-height:var(--nj-lh-body);max-width:var(--nj-measure)}

/* ---------- แบ่งหน้า ---------- */
.jr-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.jr-pager a,.jr-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--nj-border);border-radius:var(--nj-radius-md);color:var(--nj-journal-green);text-decoration:none}
.jr-pager [aria-current="page"]{background:var(--nj-journal-green);border-color:var(--nj-journal-green);color:var(--nj-white)}

/* ---------- หน้าอ่านฉบับเต็ม ---------- */
.jr-page{padding:22px 0 44px}
.jr-top{max-width:760px;margin:0 auto;padding:0 16px}
.jr-meta{margin:0 0 12px;color:var(--nj-text-muted);font-size:var(--nj-fs-sm)}
.jr-video{position:relative;aspect-ratio:16/9;margin:0 0 18px;background:var(--nj-journal-ink);border-radius:var(--nj-radius-lg);overflow:hidden}
.jr-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jr-video-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 18px;padding:10px 18px;
  border-radius:var(--nj-radius-md);background:var(--nj-journal-ink);color:var(--nj-white);text-decoration:none;font-weight:var(--nj-fw-semi)}
.jr-share{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.jr-share a,.jr-share button{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--nj-border);
  border-radius:var(--nj-radius-md);background:var(--nj-surface);color:var(--nj-journal-ink);font:inherit;font-size:var(--nj-fs-sm);
  text-decoration:none;cursor:pointer}
.jr-share a:hover,.jr-share button:hover{border-color:var(--nj-journal-green);color:var(--nj-journal-green)}
.jr-share-msg{min-height:1.4em;margin:0 0 10px;color:var(--nj-journal-green);font-size:var(--nj-fs-sm)}

/* ตัววารสาร — ⚠️ CSS ของวารสารถูกขังไว้ใต้ .jr-article ตอนสร้างหน้าแล้ว (build/journal.js scopeCss)
   ส่วนนี้แค่กันตาราง/รูป/ลิงก์ยาวไม่ให้ล้นจอ 375px */
/* ⚠️ ใช้ break-word ไม่ใช่ anywhere — anywhere ทำให้ความกว้างขั้นต่ำของกล่อง flex เหลือตัวอักษรเดียว ข้อความจะเรียงลงเป็นแนวตั้ง */
.jr-article{max-width:760px;margin:0 auto;min-width:0;overflow-wrap:break-word}
/* จัดกลาง + กรอบการ์ด — body{margin:0} ของวารสารถูก scope เป็น .jr-article{margin:0} (มาทีหลังใน <style>)
   ทับ margin:0 auto ข้างบน เนื้อหาจึงชิดซ้าย ต้องใช้ตัวเลือกที่แรงกว่า (29 ก.ย. 2569) */
.jr-page .jr-article{margin:8px auto 0;border:1px solid var(--nj-border);border-radius:var(--nj-radius-lg);box-shadow:var(--nj-shadow-sm)}
@media (max-width:791px){ .jr-page .jr-article{border-left:0;border-right:0;border-radius:0;box-shadow:none} }
/* กันกฎ .eyebrow span ของ marketplace.css (วงกลม 23px แบบ display:grid) รั่วเข้าป้ายหมวด/เลขเรื่องของวารสาร
   — ถ้าไม่กัน ป้าย "กรมที่ดิน / ..." กับ "เรื่องที่ 1/3" จะถูกบีบเป็นคอลัมน์ตัวอักษรทีละตัว */
.jr-article .eyebrow{font-weight:var(--nj-fw-normal)}
.jr-article .eyebrow span{display:inline-block;width:auto;height:auto;place-items:normal;line-height:1.6}
.jr-article .eyebrow .num{background:none;border-radius:0;color:inherit;font-variant-numeric:tabular-nums}
.jr-article img,.jr-article video,.jr-article iframe{max-width:100%;height:auto}
.jr-article table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.jr-article pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}

.jr-cta{max-width:760px;margin:10px auto 0;padding:0 16px}
.jr-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.jr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:var(--nj-radius-md);
  font-weight:var(--nj-fw-semi);text-decoration:none;border:1.5px solid var(--nj-journal-green)}
.jr-btn-main{background:var(--nj-journal-green);color:var(--nj-white)}
.jr-btn-alt{background:var(--nj-surface);color:var(--nj-journal-green)}
.jr-btn-amber{border-color:var(--nj-journal-amber);background:var(--nj-surface);color:var(--nj-journal-amber)}
.jr-prev{max-width:1100px;margin:34px auto 0;padding:0 16px}
.jr-prev h2{margin:0 0 14px;font-size:var(--nj-fs-h3);color:var(--nj-journal-green)}

/* ---------- บล็อกบนหน้าแรก (#วารสาร) ---------- */
.jr-home{background:var(--nj-journal-paper);border-top:3px solid var(--nj-journal-green)}
.jr-home-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.jr-home-head h2{margin:4px 0 0;color:var(--nj-journal-green)}
.jr-home-head p{margin:6px 0 0;color:var(--nj-text-muted);max-width:520px}
.jr-home-eyebrow{font-size:var(--nj-fs-xs);font-weight:var(--nj-fw-semi);letter-spacing:1.5px;color:var(--nj-journal-amber)}
.jr-home-more{margin-top:16px}
/* หน้าแรก: การ์ดแนวนอน ปกเป็นแถบเล็กด้านซ้าย (เจ้าของสั่งย่อ 27 ก.ย. 2569 — ปก 16:9 ว่างๆ กินที่ทั้งจอ)
   ⚠️ ขังไว้ใต้ .jr-home เท่านั้น หน้ารวมวารสาร (journal.html) ยังใช้การ์ดแนวตั้งตามเดิม */
.section.jr-home{padding:40px 0}
.jr-home .jr-grid{grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:14px}
.jr-home .jr-card{flex-direction:row}
.jr-home .jr-cover{flex:0 0 132px;aspect-ratio:auto}
.jr-home .jr-cover-blank{padding:10px;font-size:var(--nj-fs-sm)}
.jr-home .jr-body{gap:6px;padding:12px 16px 14px}
.jr-home .jr-title{font-size:var(--nj-fs-body)}
.jr-home .jr-read{padding:8px 14px}
@media (max-width:1023px){ .jr-home .jr-grid{grid-template-columns:1fr} }
@media (max-width:767px){ .section.jr-home{padding:32px 0} }
@media (max-width:479px){ .jr-home .jr-cover{flex-basis:96px} .jr-home .jr-cover-blank small{display:none} }