/**
 * results.css — เลย์เอาต์หน้าผลการค้นหา (/search/) โฉมใหม่ (27 ก.ย. 69)
 * อิงดีไซน์ที่อนุมัติแล้วใน Claude Design canvas
 * "CAMPHUB หน้าผลลัพธ์การค้นหา (/search/) — ออกแบบใหม่"
 *
 * หลักการ:
 *  - การ์ดทุกใบกว้างคงที่ 380px (เท่ากับ max-width การ์ดค่ายจริงของหน้าแรก) ใช้ grid-template-columns
 *    เป็นค่า px ตายตัว (ไม่ใช้ fr/minmax) เพื่อให้คอลัมน์ align ตรงกันทุกส่วนของหน้า
 *  - แถวแรก: กล่อง search/summary/แบนเนอร์ A/การ์ดคู่ 2 ใบ ทั้งหมดจับคู่กับแบนเนอร์ C sticky sidebar
 *    ด้านขวาเป็นบล็อกเดียว (.chsf-split) ตามด้วยกริด 3 คอลัมน์เต็มความกว้างสำหรับผลลัพธ์ที่เหลือ (v1.1.22)
 *  - การ์ดเป็นการ์ดใหญ่ (layout-b.php, chub-card-big) ไม่ใช่การ์ดกระชับ (layout-d.php) ตามต้นแบบ (v1.1.23)
 *  - pagination จริง (เลขหน้า, ปุ่มก่อนหน้า/ถัดไป — สีส้ม CI หลัก #f15a29 ไม่ใช่ส้มรอง #f7951e) แทนปุ่ม
 *    "โหลดเพิ่มอีก" (AJAX) เดิม (v1.1.31)
 */

.chsf-results-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}

.chsf-results-title {
	font-size: 26px;
	font-weight: 700;
	color: #3b3733;
	margin: 0 0 20px;
}

.chsf-empty-state {
	padding: 60px 20px;
	text-align: center;
	color: #72716a;
}

/* 27 ก.ย. 69 (v1.1.24 → ลบใน v1.1.26) — เคยเพิ่มป้าย "พื้นที่โฆษณา" (.chsf-ad-label) เหนือแบนเนอร์
   A/C ไว้ตรงนี้ พี่บอสขอให้เอาออกหลังเห็นว่าตอนกล่องโฆษณายังไม่มี creative จริงมาลง (โชว์แค่ไอคอน
   placeholder ของ GAM) ป้ายจะดูค้างเก้อ — ลบคลาสนี้ทิ้งแล้ว (ดู includes/results-template.php) */

/* แบนเนอร์ A — จัดกึ่งกลางตรงกับความกว้างกล่อง search ด้านบน — โฆษณาจริงจาก GAM
   (unit เดียวกับที่ใช้อยู่แล้วทั่วเว็บ Lead-A-Desktop/Lead-A-Mobile — ดู camphub-theme-code-map.md)
   27 ก.ย. 69 (v1.1.27) — feedback "แบนเนอร์ a ชิดติดขอบกล่องด้านบนมากเกินไป" ตรวจสดพบว่าชิดขอบล่างของ
   กล่อง search (.chsf-shell) พอดี 0px — เพิ่ม margin-top:20px ให้มีช่องว่าง */
.chsf-banner-a {
	max-width: 728px;
	min-height: 90px;
	margin: 20px auto 30px;
	text-align: center;
}
/* แสดงเฉพาะขนาดที่ตรงกับจอ — คู่กับ isDesktop (min-width:768px) ในปลั๊กอิน camphub-gpt-tag */
.chsf-adA-d { display: block; }
.chsf-adA-m { display: none; }

/* แบนเนอร์ C — โฆษณาจริง unit เดียวกับ sticky sidebar ของทั้งเว็บ (Banner-C-desktop, 2 ขนาด) */
.chsf-adC-d { display: block; }
.chsf-adC-m { display: none; }

/* 27 ก.ย. 69 (v1.1.22) — บล็อกบนทั้งหมด (กล่อง search/summary/แบนเนอร์ A/การ์ดคู่ อยู่ใน
   .chsf-split-main) จับคู่กับแบนเนอร์ C เป็น sidebar เดียวกันทั้งบล็อก ตามต้นแบบที่อนุมัติไว้
   (ก่อนหน้านี้กล่อง search อยู่นอกแถวนี้ทำให้ขยายเต็มความกว้างหน้าจอ ไม่แบ่งพื้นที่กับแบนเนอร์ C) —
   ใช้ CSS Grid (minmax(0,1fr) 300px) แบบเดียวกับต้นแบบเป๊ะ ไม่ใช้ flex+space-between เดิม (ของเดิมถ้า
   ความกว้างจริงของ container ไม่ตรง 790+30+300 เป๊ะ ช่องว่างตรงกลางจะบวมเกิน 30px เพราะ space-between
   ดันของเหลือทั้งหมดไปไว้ที่ gap เดียว) */
.chsf-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	column-gap: 32px;
	align-items: start;
	margin-bottom: 30px;
}

.chsf-split-main {
	min-width: 0;
}

.chsf-hero-main {
	display: grid;
	grid-template-columns: repeat(2, 380px);
	gap: 30px;
}

.chsf-hero-sidebar {
	min-width: 0;
}

.chsf-banner-c {
	position: sticky;
	top: 20px;
	width: 300px;
	min-height: 250px;
	text-align: center;
}

/* 27 ก.ย. 69 (v1.1.23) — เปลี่ยนมาใช้การ์ดใหญ่ (template-parts/loops/layout-b.php, class
   chub-card-big/vce-lay-b) แทนการ์ดกระชับ (layout-d.php, vce-lay-d) เดิม ตามฟีดแบ็ก "มันเป็นการ์ด
   กระชับ แทนที่จะเป็นการ์ดใหญ่" — ตรวจสดบนเว็บจริงยืนยันแล้วว่าการ์ดใหญ่มี "กรอบการ์ด" (border-radius/
   เงา/พื้นหลังขาว) ฝังเป็น inline style ในตัว markup ของ layout-b.php เองอยู่แล้ว (ดู
   camphub_search_render_cards() ใน results-batch.php) จึงไม่ต้องเติม CSS กรอบการ์ดเองอีกต่อไปเหมือน
   ตอนใช้การ์ดกระชับ — เหลือแค่แก้บั๊กความกว้างชนกับกฎ inline ของธีมด้านล่างนี้เท่านั้น */

/* กริดผลลัพธ์ที่เหลือ — 3 คอลัมน์ กว้างคงที่ 380px ต่อใบ align ตรงกับแถวฮีโร่ด้านบน */
.chsf-results-grid {
	display: grid;
	grid-template-columns: repeat(3, 380px);
	gap: 30px;
	justify-content: start;
}

/* 27 ก.ย. 69 — ตรวจสดบนเว็บจริงพบว่าธีมมีกฎ inline
   `article.chub-card-big, article.chub-card-compact { max-width: calc(33.3333% - 14.6667px)
   !important; flex: 1 1 calc(33.3333% - 14.6667px) !important; }` ที่ specificity เท่ากับกฎเดิม
   ตรงนี้ (0,0,1,1) และมาทีหลังใน DOM จึงชนะแม้ทั้งคู่มี !important — เพิ่ม .chub-card-big ต่อท้าย
   selector ให้ specificity สูงกว่า (0,0,2,1) ชนะแน่นอนไม่ว่าลำดับใน DOM จะเป็นยังไง (ตรวจสดยืนยันแล้ว
   ด้วยการฉีด <style> ทดสอบเข้าหน้าเว็บจริงก่อนแก้ไฟล์นี้ ตอนใช้การ์ดกระชับ — หลักการเดียวกันใช้ได้กับ
   การ์ดใหญ่เพราะธีมเขียนกฎรวม 2 class ไว้ด้วยกัน) */
.chsf-hero-main > article.chub-card-big,
.chsf-results-grid > article.chub-card-big {
	width: 380px !important;
	max-width: 380px !important;
	min-width: 0 !important;
	flex: none !important;
}

/* 27 ก.ย. 69 (v1.1.31) — pagination จริงแทนปุ่ม "โหลดเพิ่มอีก" เดิม (ดู changelog เต็มใน
   camphub-search-filter.php + includes/results-template.php) — คลาส .page-numbers/.current/.dots/
   .prev/.next มาจาก paginate_links() ของ WordPress เอง (ชื่อคลาสมาตรฐาน ไม่ได้ตั้งเอง) ครอบด้วย
   .chsf-pagination เพื่อ scope สไตล์เฉพาะหน้านี้ */
.chsf-pagination-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
}

.chsf-pagination-status {
	font-size: 13.5px;
	color: #72716a;
}

.chsf-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.chsf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: #f2f1ee;
	color: #3b3733;
	font-family: 'Noto Sans Thai', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}
.chsf-pagination a.page-numbers:hover { background: #e5e3dd; }
.chsf-pagination .page-numbers.current {
	background: #3b3733;
	color: #ffffff;
}
.chsf-pagination .page-numbers.dots {
	background: none;
	color: #a6a196;
}
.chsf-pagination .page-numbers.prev,
.chsf-pagination .page-numbers.next {
	background: #f15a29;
	color: #ffffff;
	padding: 0 22px;
}
.chsf-pagination a.page-numbers.prev:hover,
.chsf-pagination a.page-numbers.next:hover { background: #d94a1d; }

/* 27 ก.ย. 69 (v1.1.24→v1.1.25) — feedback "ตรงแคปซูลเลือกประเภทย่อยของการแข่งขัน พี่ว่ามันจม" (.chsf-
   chip-contest ดูจมกับพื้นหลัง ไม่มีเส้นขอบ) เดิมรอบ v1.1.24 แก้ด้วย override เฉพาะหน้า /search/ ไว้ที่
   ไฟล์นี้ — พอพี่บอสสั่งให้แก้หน้าแรกด้วย (v1.1.25) ย้ายจุดแก้ไปแนบผ่าน wp_add_inline_style() เข้า handle
   'camphub-search-filter' ใน camphub-search-filter.php แทน (ใช้ได้ทั้งหน้าแรก+หน้า /search/ ในจุดเดียว
   ไม่ต้องซ้ำ 2 ที่) — ดู camphub_search_chip_style_fix() ในไฟล์นั้น */

/* ===== Mobile ===== */
@media (max-width: 782px) {
	.chsf-results-page { padding: 20px 16px 50px; }
	.chsf-results-title { font-size: 20px; }

	.chsf-banner-a { max-width: 320px; min-height: 100px; }

	.chsf-split { grid-template-columns: 1fr; row-gap: 20px; }
	.chsf-hero-main { grid-template-columns: 1fr; }
	.chsf-banner-c { position: static; width: 100%; min-height: 250px; }

	.chsf-results-grid { grid-template-columns: 1fr; justify-content: stretch; }
	.chsf-hero-main > article.chub-card-big,
	.chsf-results-grid > article.chub-card-big { width: 100% !important; max-width: 100% !important; }

	/* 27 ก.ย. 69 (v1.1.31) — เลขหน้าย่อขนาดลงบนมือถือ กันแถวเลขหน้าล้นจอ/ตกบรรทัดรก */
	.chsf-pagination { gap: 6px; }
	.chsf-pagination .page-numbers {
		min-width: 34px;
		height: 34px;
		padding: 0 8px;
		font-size: 13px;
	}
	.chsf-pagination .page-numbers.prev,
	.chsf-pagination .page-numbers.next { padding: 0 14px; }
}

/* สลับขนาดโฆษณาจริง — ใช้ breakpoint เดียวกับ isDesktop (min-width:768px) ใน
   ปลั๊กอิน camphub-gpt-tag เป๊ะ (แยกจาก breakpoint 782px ที่ใช้กับเลย์เอาต์ส่วนอื่นของหน้านี้
   เพื่อกันโฆษณาขอผิดขนาด/ผิด div ในช่วงจอ 768-782px) */
@media (max-width: 767px) {
	.chsf-adA-d { display: none; }
	.chsf-adA-m { display: block; }
	.chsf-adC-d { display: none; }
	.chsf-adC-m { display: block; }
}
