/* content-blocks.css — สไตล์ตรงจาก Homepage-Desktop.dc.html ตอนที่ 5 (articles) / ตอนที่ 7 (PR news) */

/* 25 ก.ย. 69 (รอบ 3) — เจอหัวข้อซ้ำ: โมดูล "บทความน่าสนใจ" และ "ข่าวประชาสัมพันธ์" ยังมีค่าอยู่ในช่อง
   "Title" ของ wp-admin (ธีมพิมพ์ .main-box-title ของตัวเองเสมอถ้าช่องนี้ไม่ว่าง) ซ้ำกับหัวข้อ h2 ที่
   shortcode พิมพ์เอง (.chcb-articles-title / .chcb-pr-title) — เหมือนบั๊กเดียวกับ tagbar (ข้อ 8) ที่
   เคยแก้ไปแล้วที่ render.php แต่ตรงนี้แก้ที่ render.php ไม่ได้เพราะ .main-box-title เป็นของธีม ไม่ใช่
   ของปลั๊กอินนี้ — ใช้ CSS :has() ซ่อนเฉพาะตอนที่โมดูลนั้นมี shortcode ของปลั๊กอินนี้อยู่ข้างใน แทนที่จะ
   ให้พี่บอสต้องไปลบข้อความในช่อง Title เอง (ลบก็ได้เหมือนกัน แต่ทำแบบนี้กันเผื่อมีคนอื่นแก้ Title กลับมา) */
.main-box:has(> .main-box-inside .chcb-articles) > .main-box-title,
.main-box:has(> .main-box-inside .chcb-pr) > .main-box-title {
	display: none;
}

/* 25 ก.ย. 69 (รอบ 4) — feedback พี่บอสข้อ 3: "บทความน่าสนใจ" ไม่ควรมีกล่องเทาล้อมรอบ ต้นแบบคือการ์ด
   ลอยอยู่เหนือพื้นหลังสีขาวเฉยๆ — ใช้เทคนิคเดียวกับ :has() ด้านบน (ไม่ต้องให้พี่บอสไปเพิ่ม class
   "chub-flat" เองใน wp-admin) ลอกค่าที่ chub-flat ใช้จริงมาเป๊ะจาก template-modules.php:
   .main-box.chub-flat{border-color:transparent;border-width:0;background:none;box-shadow:none}
   .main-box.chub-flat .main-box-inside{padding:0} — ใช้เฉพาะกับโมดูล "บทความน่าสนใจ" เท่านั้น
   (ไม่แตะ "ข่าวประชาสัมพันธ์" เพราะ mockup ตอนที่ 7 ยังโชว์เป็นกล่องขาวมีเงาอยู่ตามปกติ) */
.main-box:has(> .main-box-inside .chcb-articles) {
	border-color: transparent;
	border-width: 0;
	background: none;
	box-shadow: none;
}
.main-box:has(> .main-box-inside .chcb-articles) > .main-box-inside {
	padding: 0;
}

/* 25 ก.ย. 69 (รอบ 4) — เจอบั๊กจริง: .chcb-articles-scroll (flex, nowrap โดย default) ข้างในมีการ์ด
   8 ใบ รวมกว้าง ~1950px ซึ่งกลายเป็น "min-width: auto" ของ flex item ทุกชั้นที่ห่อมันอยู่ (นี่คือ
   .chcb-articles เอง ที่เป็น flex item ของ .main-box-inside ของธีมอีกที) ผลคือทั้งกล่องไม่ยอมหด
   เหลือ 810px ตามคอลัมน์จริง เลยทะลุกรอบออกไปแทนที่จะโดน overflow-x:auto ตัด/เลื่อนตามที่ตั้งใจไว้
   (.chcb-art-fade ที่ทำเงาไล่สีไว้แล้วก็เลยไม่มีผลอะไร เพราะไม่มี overflow จริงเกิดขึ้น) แก้ที่ต้นตอ
   ชั้นนอกสุดพอ (min-width:0) ก็พอแล้ว ไม่ต้องไล่ใส่ทุกชั้นข้างใน */
.chcb-articles {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Noto Sans Thai', sans-serif;
}
.chcb-pr {
	font-family: 'Noto Sans Thai', sans-serif;
}

/* ===== Section 5: บทความน่าสนใจ ===== */
.chcb-articles-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
}
.chcb-articles-title {
	/* 25 ก.ย. 69 (รอบ 7) — พี่บอสขอ font-family ตรงๆ สำหรับหัวข้อ section ทุกจุด (AnantasonWeb แทน
	   Noto Sans Thai ที่ inherit มาจาก .chcb-articles) */
	font-family: 'AnantasonWeb', 'Sukhumvit Set', 'Tahoma';
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #3b3733;
	line-height: 1.5em;
}
.chcb-articles-headright {
	display: flex;
	align-items: center;
	gap: 10px;
}
.chcb-articles-viewall {
	font-size: 13.5px;
	color: #f15a29;
	font-weight: 600;
	text-decoration: none;
}
/* 25 ก.ย. 69 (รอบ 6) — เอาปุ่มลูกศร .chcb-arrows/.chcb-arrow ออกตามที่พี่บอสขอ (ดู articles-row.php)
   เปลี่ยนเป็นลากเมาส์เลื่อนแทน (ดู content-blocks.js) */

/* 25 ก.ย. 69 (รอบ 8.2) — feedback พี่บอส: "เอาเมาส์ชี้แล้วมีขีดเส้นใต้ขึ้นทุกจุด" — ต้นตอคือกฎ
   a:hover{text-decoration:underline} ระดับธีมที่ครอบคลุมทุกลิงก์ทั่วเว็บ ของเดิมตั้ง
   text-decoration:none ไว้แค่สถานะปกติ ไม่เคย override สถานะ :hover เลย พอ hover กฎธีมเลยชนะ —
   ใส่ !important คลุมทั้งตัวลิงก์และ element ลูกทุกตัวข้างในกันเผื่อธีมเจาะจงลูกอีกที */
.chcb-artcard, .chcb-artcard:hover, .chcb-artcard:hover * ,
.chcb-pr-row, .chcb-pr-row:hover, .chcb-pr-row:hover * ,
.chcb-articles-viewall:hover {
	text-decoration: none !important;
}

.chcb-articles-scrollwrap { position: relative; }
.chcb-articles-scroll {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.chcb-articles-scroll::-webkit-scrollbar { display: none; height: 0; }
.chcb-articles-scroll.chcb-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}
/* 25 ก.ย. 69 (รอบ 8.3) — feedback พี่บอส: fade ต้องเปลี่ยนตามตำแหน่งเลื่อนจริง (ซ้ายสุด = fade ขวา
   อย่างเดียว, กลาง = fade ทั้งสองข้าง, ขวาสุด = fade ซ้ายอย่างเดียว) — เดิมมี fade ขวาตายตัวจุดเดียว
   เพิ่ม fade ซ้ายเข้ามา แล้วคุมการโชว์/ซ่อนด้วย class `chcb-fade-visible` ที่ content-blocks.js
   toggle ตามตำแหน่ง scroll จริง (ไม่ใช้ CSS ล้วนเพราะต้องรู้ scrollLeft/scrollWidth จริงตอนรัน) */
.chcb-art-fade-left,
.chcb-art-fade-right {
	position: absolute;
	top: 0; bottom: 0;
	width: 120px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.chcb-art-fade-left.chcb-fade-visible,
.chcb-art-fade-right.chcb-fade-visible {
	opacity: 1;
}
.chcb-art-fade-right {
	right: 0;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, #FFFFFF 100%);
}
.chcb-art-fade-left {
	left: 0;
	background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, #FFFFFF 100%);
}

.chcb-artcard {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 0 0 228px;
	scroll-snap-align: start;
	/* 25 ก.ย. 69 (รอบ 8.2) — feedback พี่บอส: คลิกลากแล้วเหมือนกลายเป็น "ลากเนื้อหา" (native drag)
	   ไม่ใช่เลื่อน scroll แบบลื่นไหล — ต้นตอคือเบราว์เซอร์เริ่ม native drag ของรูปภาพ/ลิงก์เองเมื่อกด
	   ค้างแล้วลากมือ (ก่อน mousemove ของเราจะทันจับ) ปิดด้วย -webkit-user-drag:none ที่การ์ดทั้งใบ
	   + ที่ <img> ข้างใน (ดูด้านล่าง) คู่กับ preventDefault() บน dragstart ใน content-blocks.js */
	-webkit-user-drag: none;
	user-drag: none;
}
.chcb-art-thumb {
	width: 100%;
	aspect-ratio: 1200 / 630;
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
	background: #F2F1EE;
}
.chcb-art-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
	user-drag: none;
}
.chcb-art-tag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	background: #f15a29;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 700;
	/* 25 ก.ย. 69 (รอบ 8.2) — feedback พี่บอส: แคปซูลสูงเกิน ระยะข้อความถึงขอบล่างมากกว่าขอบบน — เดิม
	   วินิจฉัยว่าเป็นเพราะไม่เคยตั้ง line-height ตรงๆ เลย ใส่ line-height:1 แก้ไป
	   26 ก.ย. 69 (รอบ 20) — พี่บอสเจอบั๊กเดิมกลับมาอีก แก้ด้วย padding: 5px 10px 2px (บนมากกว่าล่าง)
	   โดยเข้าใจว่าฟอนต์ Noto Sans Thai ทำให้ตัวอักษร "ลอย" สูงกว่ากึ่งกลางกล่องเสมอ — พี่บอสรีวิวจริงแล้ว
	   บอกว่า "ติดด้านล่างจนน่าเกลียด" คือกลับกัน ผิดทิศทาง
	   26 ก.ย. 69 (รอบ 21) — วัดจริงด้วย canvas measureText().actualBoundingBoxAscent/Descent ของ
	   ข้อความนี้ที่ font จริง (700 10.5px Noto Sans Thai) เทียบกับกล่องบรรทัด (line-height:1 = 10.5px
	   ซึ่ง "บีบ" กว่าค่าธรรมชาติของฟอนต์นี้ที่ ~16px มาก) พบว่าเมื่อบีบ line-height ขนาดนี้ ตัวอักษรจริงกลับ
	   ลอย "ต่ำ" กว่ากึ่งกลาง ไม่ใช่สูงกว่า (คนละทิศกับสมมติฐานรอบ 20 ที่อิงจากเคสแคปซูลวันหมดเขต ซึ่งใช้
	   line-height:1.3 ไม่ใช่ 1) — padding รอบ 20 (5px บน / 2px ล่าง) เลยยิ่งซ้ำเติมให้ช่องว่างใต้ตัวอักษร
	   แคบลงไปอีก ทำให้ดูติดขอบล่าง ตามที่พี่บอสทัก — คำนวณค่าที่สมดุลจริง (ช่องว่างเหนือ/ใต้ตัวอักษรเท่ากัน
	   พอดี 4.25px ทั้งคู่) ได้ padding: 4px 10px 3px (คงความสูงรวมเท่าเดิม 17.5px ไม่ได้ทำให้แคปซูลใหญ่ขึ้น)
	   verify สดบน camphub-sample แล้วว่าสมดุลดี ไม่ใช่แค่เดาจากตา */
	line-height: 1;
	padding: 4px 10px 3px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.chcb-art-title {
	font-size: 14.5px;
	font-weight: 700;
	color: #3b3733;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.chcb-artcard { flex-basis: 78vw; }

	/* 26 ก.ย. 69 (มือถือ รอบ 1) — feedback พี่บอส: fade กว้าง 120px (ค่าเดิมของเดสก์ท็อป) บนจอมือถือ
	   (~360-440px) กินพื้นที่การ์ดไปเกือบครึ่งใบ (การ์ดกว้างแค่ 78vw ~280-343px) ทับป้าย/ชื่อกิจกรรม
	   ของการ์ดที่โผล่มาครึ่งใบจนอ่านไม่ออก — ลดเหลือ 32px พอให้เห็นเป็น "สัญญาณว่ายังเลื่อนได้อีก"
	   แบบเดียวกับ carousel ทั่วไป โดยไม่บังเนื้อหา (ไม่ได้เอาออกทั้งหมดตามที่พี่บอสถาม เพราะยังอยากให้มี
	   สัญญาณบอกว่าเลื่อนได้ — ถ้าดูแล้วไม่ชอบ ลบ 3 บรรทัดนี้แล้วเพิ่ม display:none บน
	   .chcb-art-fade-left/.chcb-art-fade-right แทนได้เลย) */
	.chcb-art-fade-left,
	.chcb-art-fade-right {
		width: 32px;
	}
}

/* ===== Section 7: ข่าวประชาสัมพันธ์ ===== */
.chcb-pr-title {
	/* 25 ก.ย. 69 (รอบ 7) — หัวข้อ section เหมือนกัน ใช้ AnantasonWeb เหมือนหัวข้ออื่น (ไซส์เล็ก/จางกว่า
	   ตามดีไซน์เดิม เพราะเป็นหัวข้อรองของ section นี้โดยเฉพาะ)
	   25 ก.ย. 69 (รอบ 8.5) — พี่บอสถามว่าสีเข้ม/อ่อนต่างจากหัวข้ออื่นตั้งใจหรือเปล่า — ตรวจแล้วตรงตาม
	   mockup เป๊ะ (ไม่ใช่บั๊ก) แต่พี่บอสตัดสินใจว่าไซส์เล็กกว่าหัวข้ออื่นได้ (เก็บ font-size 16px ไว้เหมือน
	   เดิม) แต่สีควรใช้สีเดียวกับหัวข้อ section อื่นๆ (#3b3733) เพื่อความสม่ำเสมอ — เปลี่ยนเฉพาะ color
	   จาก #72716a เป็น #3b3733 ตามที่พี่บอสอนุมัติ เป็นการตัดสินใจดีไซน์ ไม่ใช่การแก้ตาม mockup */
	font-family: 'AnantasonWeb', 'Sukhumvit Set', 'Tahoma';
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #3b3733;
	line-height: 1.5em;
}
.chcb-pr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	column-gap: 32px;
}
.chcb-pr-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid #F0EEE7;
	text-decoration: none;
	color: inherit;
}
.chcb-pr-thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	flex: 0 0 auto;
	overflow: hidden;
	background: #F2F1EE;
}
.chcb-pr-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
	user-drag: none;
}
.chcb-pr-text { min-width: 0; }
.chcb-pr-headline {
	font-size: 13.5px;
	font-weight: 600;
	color: #3b3733;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chcb-pr-cat {
	font-size: 12px;
	color: #A6A196;
	margin-top: 2px;
}

@media (max-width: 640px) {
	/* 25 ก.ย. 69 (รอบมือถือ) — เจอบั๊กจริง: ของเดิมตั้ง grid-template-columns เป็น 1fr เฉยๆ (ไม่มี
	   minmax(0, ...) เหมือนกฎเดสก์ท็อปด้านบน "repeat(2, minmax(0,1fr))") — 1fr เปล่าๆ เทียบเท่า
	   minmax(auto,1fr) ซึ่งไม่บังคับให้ track หดตาม container จริง พอเนื้อหาข้างใน (.chcb-pr-headline
	   ที่ white-space:nowrap) มีความกว้างขั้นต่ำ (min-content) มากกว่าจอมือถือ ทั้งกริด/แถว/หัวข้อเลย
	   ดันกว้างเกินจอ (~1338px บนจอ 390px) ข้อความล้นขอบจอไปเลยแทนที่จะโดนตัดด้วย ellipsis ตามที่ตั้งใจ —
	   แก้เป็น minmax(0,1fr) เหมือนกฎเดสก์ท็อป ก็พอแล้ว (เทียบเท่าบั๊ก .chcb-articles รอบ 4 แต่เกิดจุดนี้) */
	.chcb-pr-grid { grid-template-columns: minmax(0, 1fr); }
}