/* Hallmark · genre: editorial · theme: Garden — หน้าเนื้อหา: ข่าว · เอกสาร · กระบวนการมาตรฐาน */

/* ═══════════ หัวหน้าเนื้อหา ═══════════ */

.pagehead { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.pagehead__inner { padding-block: var(--space-xl) var(--space-lg); }
.pagehead h1 { font-size: var(--text-3xl); max-width: 24ch; }
.pagehead p { margin-top: var(--space-xs); max-width: 62ch; color: var(--color-muted); font-size: var(--text-sm); }

/* ═══════════ การ์ดข่าว ═══════════ */

.newsgrid {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.ncard {
  display: flex; flex-direction: column;
  border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  overflow: hidden;
  transition: transform var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.ncard:hover {
  transform: translateY(-3px);
  border-color: var(--color-rule);
  box-shadow: 0 10px 24px oklch(22% 0.02 132 / 0.07);
}
/* ภาพปกเป็น <button> เพื่อให้กดอ่านต่อจากภาพได้ จึงต้องล้างสไตล์ปุ่มของเบราว์เซอร์ทิ้งก่อน */
.ncard__cover {
  position: relative;
  display: block; width: 100%; padding: 0;
  border: 0; font: inherit; color: inherit; text-align: start;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--color-paper-3);
  cursor: pointer;
}

/*
 * ภาพปกข่าวมาจากคนละแหล่ง สัดส่วนไม่เคยเหมือนกัน — จัตุรัสจากเฟซบุ๊ก แนวตั้งจากมือถือ
 * แบนเนอร์ยาวจากงานพิธี ถ้าครอบด้วย object-fit: cover ให้เต็มกรอบ 16/10 ภาพจัตุรัส
 * จะโดนเฉือนหัวท้ายไปข้างละ ~20% ซึ่งพอดีตำแหน่งหน้าคนกับข้อความบนภาพประชาสัมพันธ์
 *
 * จึงแสดง "ทั้งภาพ" ด้วย contain แล้วเติมพื้นที่ว่างด้วยภาพเดิมที่เบลอเป็นฉากหลัง
 * — ได้กรอบขนาดเท่ากันทุกใบเพื่อให้กริดเรียงตรง โดยไม่ต้องตัดเนื้อภาพทิ้งเลย
 */
.ncard__cover img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
}
.ncard__cover img.ncard__cover-bg {
  position: absolute; inset: 0; z-index: 0;
  object-fit: cover;
  filter: blur(1.25rem) saturate(1.4);
  transform: scale(1.2);          /* ขยายกลบขอบจาง ๆ ที่ blur ทิ้งไว้ริมกรอบ */
  opacity: 0.5;
}
.ncard__cover:focus-visible { outline: var(--rule-bold) solid var(--color-accent); outline-offset: -3px; }
.ncard__cover--none {
  display: grid; place-items: center;
  font-size: var(--text-3xl);
  background: linear-gradient(135deg, var(--color-paper-3), var(--color-accent-tint));
}
.ncard__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); flex: 1; }
.ncard__meta { font-family: var(--font-mono); font-size: var(--text-3xs); color: var(--color-neutral); }
.ncard__title { font-size: var(--text-lg); line-height: var(--leading-snug); }
.ncard__excerpt { font-size: var(--text-sm); color: var(--color-muted); flex: 1; }
.ncard .tlink { align-self: flex-start; background: none; border: 0; border-bottom: var(--rule-hair) solid var(--color-accent); cursor: pointer; padding: 0 0 1px; }

/* ═══════════ modal อ่านข่าว ═══════════ */

.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-md);
  background: oklch(18% 0.02 132 / 0.55);
  animation: fade var(--dur-short) var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }
.modal__panel {
  position: relative;
  width: min(46rem, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px oklch(18% 0.02 132 / 0.3);
  animation: pop var(--dur-long) var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: scale(0.96); } }
.modal__close {
  position: absolute; inset-inline-end: var(--space-sm); top: var(--space-sm);
  z-index: 2; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper); cursor: pointer;
}
.modal__close:hover { background: var(--color-paper-3); }
/*
 * ในหน้าต่างอ่านข่าวไม่มีเหตุผลต้องบังคับสัดส่วน — ให้ภาพสูงเท่าที่มันเป็นจริง
 * (จำกัดไว้ที่ 60vh เพื่อไม่ให้ภาพแนวตั้งดันหัวข้อข่าวตกจอไปหมด)
 */
.modal__cover {
  display: block; width: 100%;
  max-height: 60vh; object-fit: contain;
  background: var(--color-paper-3);
}
.modal__acts { margin-top: var(--space-lg); }
.modal__inner { padding: var(--space-xl); }

.prose { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.prose p { max-width: 68ch; color: var(--color-ink-soft); }

/* ── รูปแบบที่ผู้ดูแลใส่ได้จาก editor หลังบ้าน ──────────────────────────── */
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-sm); }
.prose h4 { font-size: var(--text-lg); margin-top: var(--space-sm); }
.prose ul, .prose ol { max-width: 68ch; padding-inline-start: var(--space-lg); color: var(--color-ink-soft); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2xs); }
.prose blockquote {
  max-width: 68ch; margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-bold) solid var(--color-accent);
  color: var(--color-muted); font-style: italic;
}
.prose a { color: var(--color-accent-deep); }
.prose figure { margin: 0; }
.prose img { border-radius: var(--radius-md); }
.prose figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--text-2xs); color: var(--color-muted);
}
.prose hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  text-align: start;
}
.prose th { font-weight: 600; background: var(--color-paper-2); }

/* ── ไฟล์แนบ ───────────────────────────────────────────────────────────── */

.attach { margin-top: var(--space-lg); }
.attach__label {
  font-family: var(--font-mono); font-size: var(--text-3xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-xs);
}
.attach__list { display: grid; gap: var(--space-2xs); }
.attach__item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}
.attach__item:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.attach__type {
  flex: none; min-width: 3.4rem; text-align: center;
  padding: 2px var(--space-2xs); border-radius: var(--radius-xs);
  background: var(--tone); color: oklch(98% 0.01 145);
  font-family: var(--font-mono); font-size: var(--text-3xs);
}
.attach__name { flex: 1; min-width: 0; font-size: var(--text-sm); }
.attach__size {
  flex: none; font-size: var(--text-2xs); color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ═══════════ เอกสารที่เกี่ยวข้อง ═══════════ */

.resgroup + .resgroup { margin-top: var(--space-2xl); }
.resgroup__title {
  font-size: var(--text-xl);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-bold) solid var(--color-accent);
}
.reslist { margin-top: var(--space-md); }
.resitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-md); align-items: center;
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.resitem__type {
  display: grid; place-items: center;
  min-width: 3.25rem; padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--tone) 15%, transparent);
  color: var(--tone);
  font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: 500;
}
.resitem__title { font-size: var(--text-md); }
.resitem__desc { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }
.resitem__note { color: var(--color-neutral); font-size: var(--text-xs); }
@media (max-width: 40rem) {
  .resitem { grid-template-columns: auto minmax(0, 1fr); }
  .resitem .btn, .resitem__note { grid-column: 1 / -1; justify-self: start; }
}

/* ═══════════ กระบวนการมาตรฐาน ═══════════ */

.steps { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.step:last-child { border-bottom: 0; }
.step__no {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  color: var(--color-accent); line-height: 1;
  min-width: 2.5rem;
}
.step__title { font-size: var(--text-lg); }
.step__body { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); max-width: 68ch; }
@media (max-width: 40rem) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* ═══════════ คำถามที่พบบ่อย ═══════════ */

/* แถบค้นหาและตัวกรอง — ค้างไว้บนสุดเมื่อเลื่อนอ่าน เพราะรายการคำถามยาวกว่าหนึ่งหน้าจอเสมอ
   ต่ำกว่าแถบเมนูหนึ่งชั้น (--z-sticky) เพื่อไม่ให้บังเมนูหลักตอนเลื่อน */
.faqbar {
  position: sticky; top: 0; z-index: calc(var(--z-sticky) - 1);
  display: grid; gap: var(--space-xs);
  padding-block: var(--space-sm);
  margin-bottom: var(--space-xl);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.faqbar__row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.faqbar__search {
  flex: 1; min-width: min(22rem, 100%);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper-2); color: inherit; font: inherit; font-size: var(--text-sm);
}
.faqbar__search:focus-visible { outline: var(--rule-bold) solid var(--color-accent); outline-offset: 1px; }
.faqbar__count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-neutral); }
.faqbar__chips { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

.faqgroup + .faqgroup { margin-top: var(--space-2xl); }
.faqgroup__title { font-size: var(--text-xl); display: flex; align-items: center; gap: var(--space-2xs); }
.faqgroup__icon { font-size: 1.1em; }
.faqgroup__desc { margin-top: 2px; font-size: var(--text-xs); color: var(--color-muted); max-width: 62ch; }
.faqlist { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-soft); }

.faq { border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm) 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent-deep); }
.faq__q:focus-visible { outline: var(--rule-bold) solid var(--color-accent); outline-offset: 2px; }
.faq__qtext { flex: 1; min-width: 0; }
/* เครื่องหมายบอกสถานะกาง/ปิด วาดด้วย CSS ไม่ใช่ตัวอักษร — ตัวช่วยอ่านหน้าจอประกาศสถานะ
   ของ details ให้อยู่แล้ว ถ้าใส่เป็นข้อความจะถูกอ่านซ้ำสองครั้ง */
.faq__mark {
  flex: none; width: 0.6rem; height: 0.6rem; margin-top: 0.4rem;
  border-right: var(--rule-bold) solid var(--color-accent);
  border-bottom: var(--rule-bold) solid var(--color-accent);
  transform: rotate(45deg); transition: transform 150ms ease;
}
.faq[open] .faq__mark { transform: rotate(-135deg); }
.faq__body { padding-bottom: var(--space-lg); max-width: 74ch; }
.faq__answer { margin-top: 0; }
.faq__answer table { margin-top: var(--space-xs); }
/* ตารางในคำตอบกว้างเกินจอเล็กได้ — ให้เลื่อนในกรอบของตัวเอง ไม่ใช่ดันทั้งหน้าให้เลื่อนแนวนอน */
.faq__answer > table { display: block; overflow-x: auto; }
.faq__link { margin-top: var(--space-md); }
.faq__tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg); padding-top: var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule-soft);
}
.faq__vote { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.faq__votelabel { font-size: var(--text-2xs); color: var(--color-muted); }
.faq__links { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-sm); }

/* สั่งพิมพ์ = ต้องการอ่านทุกคำตอบ — ตัวคำตอบถูกกางด้วย JS ตอน beforeprint
   เพราะ details ที่ปิดอยู่ ซ่อนเนื้อหาด้วยกลไกภายในเบราว์เซอร์ ไม่ใช่ด้วย CSS ที่เขียนทับได้ */
@media print {
  .faqbar,
  .faq__tools { display: none; }
}