/* แกลเลอรีรูปภาพท้ายบทความ (article / news / about-us)
   ใช้ CSS multi-column แบบ masonry รูปคงสัดส่วนเดิม ไม่ถูก crop */
.article-media {
	margin-top: 20px;
	column-count: 4;
	column-gap: 15px;
}

.article-media-item {
	display: block;
	margin: 0 0 15px;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	overflow: hidden;
}

.article-media-item > a {
	display: block;
}

.article-media-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

@media (max-width: 991px) {
	.article-media { column-count: 3; }
}

@media (max-width: 767px) {
	.article-media { column-count: 2; column-gap: 10px; }
	.article-media-item { margin-bottom: 10px; }
}

/* ── ล้าง font ที่ติดมาจาก MS Word ในเนื้อหาบทความ ─────────────────────────
   บทความที่ paste เข้ามาใหม่ถูกกรอง inline style ทิ้งตั้งแต่ใน editor แล้ว
   (ดู paste_preprocess ใน admin/public/js/articles.js) แต่บทความเก่าที่บันทึกไว้
   ก่อนหน้านั้นยังมี style ของ Word ฝังอยู่ใน DB — กันไว้ที่ CSS อีกชั้น
   ครอบ .big-font ซึ่งเป็น wrapper ของ content ทั้ง article-item / news-info / about-us */
.big-font * {
	font-family: inherit !important;
}

/* คืนขนาด/ระยะบรรทัดให้ตามธีม (.big-font = 18px/30px) เฉพาะก้อนที่มาจาก Word เท่านั้น
   ไม่รวม h1-h6 และ sup/sub เพื่อให้หัวข้อกับตัวยก-ตัวห้อยยังมีขนาดของตัวเอง

   เดิมบล็อกนี้รีเซ็ตทุก element ทำให้ขนาดตัวอักษรที่ตั้งเองจากปุ่ม Font size ใน editor
   (เขียนออกมาเป็น style="font-size: 10pt") ไม่มีผลไปด้วย จึงเปลี่ยนมาจับเฉพาะ "ลายเซ็น" ของ Word คือ
     - font-family อยู่ในแท็ก style เดียวกัน (Word ระบุฟอนต์คู่กับขนาดเสมอ เช่น font-size:16.0pt;font-family:"Cordia New")
     - property ขึ้นต้นด้วย mso- (มีเฉพาะใน HTML ที่ Word พ่นออกมา)
     - ขนาดแบบทศนิยม .0pt (Word เขียน 16.0pt ส่วน editor เขียน 16pt)
   ส่วน style="font-size: 10pt" เดี่ยว ๆ ที่มาจาก editor จะไม่เข้าเงื่อนไข จึงแสดงผลตามที่ตั้งไว้ */
.big-font p[style*="font-family"],
.big-font div[style*="font-family"],
.big-font span[style*="font-family"],
.big-font font[style*="font-family"],
.big-font li[style*="font-family"],
.big-font td[style*="font-family"],
.big-font th[style*="font-family"],
.big-font a[style*="font-family"],
.big-font b[style*="font-family"],
.big-font strong[style*="font-family"],
.big-font i[style*="font-family"],
.big-font em[style*="font-family"],
.big-font u[style*="font-family"],
.big-font p[style*="mso-"],
.big-font div[style*="mso-"],
.big-font span[style*="mso-"],
.big-font font[style*="mso-"],
.big-font li[style*="mso-"],
.big-font td[style*="mso-"],
.big-font th[style*="mso-"],
.big-font a[style*="mso-"],
.big-font b[style*="mso-"],
.big-font strong[style*="mso-"],
.big-font i[style*="mso-"],
.big-font em[style*="mso-"],
.big-font u[style*="mso-"],
.big-font p[style*=".0pt"],
.big-font div[style*=".0pt"],
.big-font span[style*=".0pt"],
.big-font font[style*=".0pt"],
.big-font li[style*=".0pt"],
.big-font td[style*=".0pt"],
.big-font th[style*=".0pt"],
.big-font a[style*=".0pt"],
.big-font b[style*=".0pt"],
.big-font strong[style*=".0pt"],
.big-font i[style*=".0pt"],
.big-font em[style*=".0pt"],
.big-font u[style*=".0pt"] {
	font-size: inherit !important;
	line-height: inherit !important;
}

/* ── ขนาดหัวข้อ h1-h6 ที่เขียนในเนื้อหาบทความ ──────────────────────────────
   ธีม (bootstrap.css) ตั้ง h3 ไว้ที่ 30px และบังคับ text-transform:uppercase กับ h1-h6 ทุกตัว
   ซึ่งเหมาะกับหัวข้อระดับหน้า แต่พอ editor สร้าง <h3> ไว้กลางเนื้อหาบทความจะกลายเป็นตัวใหญ่
   30px เกือบเท่าชื่อหน้า (32px) ทั้งที่ตัวเนื้อหารอบ ๆ แค่ 18px — หัวข้อย่อยเลยดูใหญ่ผิดสัดส่วน
   บล็อกนี้ตั้งสเกลของหัวข้อ "ในเนื้อหา" ใหม่ให้ไล่ลงมาจากตัวอักษร 18px อย่างเป็นระบบ
   scope อยู่ใต้ .big-font เท่านั้น จึงไม่กระทบหัวข้อระดับหน้า (h1 ชื่อหน้า / h2 ชื่อส่วน / h3 sidebar)

   ตัด uppercase ออกด้วย เพราะหัวข้อในเนื้อหามักมีชื่อผลิตภัณฑ์ปนอยู่ (Oncotype DX®) การบังคับ
   ตัวพิมพ์ใหญ่ทั้งหมดทำให้ชื่อแบรนด์ผิดรูป และภาษาไทยไม่ได้อะไรจาก uppercase อยู่แล้ว

   font-weight ตั้ง 600 ชัดเจนแทนค่า 500 ของธีม เพราะฟอนต์ Prompt มีเฉพาะน้ำหนัก 300/400/600
   ค่า 500 จะถูก browser ปัดเป็น 400 หรือ 600 แล้วแต่ตัว ทำให้หัวข้อหนาไม่เท่ากันข้ามเบราว์เซอร์ */
.big-font h1,
.big-font h2,
.big-font h3,
.big-font h4,
.big-font h5,
.big-font h6 {
	text-transform: none;
	line-height: 1.4;
	font-weight: 600;
}
.big-font h1 { font-size: 28px; }
.big-font h2 { font-size: 24px; }
.big-font h3 { font-size: 21px; }
.big-font h4,
.big-font h5,
.big-font h6 { font-size: 19px; }