/* =============================================================================
   archive-review.css — หน้ารวมผลงาน (category-105.php)
   mobile-first · ใช้ชุดสี/ฟอนต์เดียวกับหน้ารีวิวรายเคส เพื่อให้ต่อเนื่องกัน
   ⚠️ แก้ไฟล์นี้ต้องขยับ KF_CHILD_VER
   ============================================================================= */

body.kf-rlist {
	--rl-brand: #00AEEF;
	--rl-ink: #1c2126;
	--rl-muted: #767676;
	--rl-line: #e8ebed;
	--rl-soft: #f6f9fb;
}

body.kf-rlist .kf-rl {
	max-width: 1180px;
	margin: 0 auto;
	padding: 26px 16px 64px;
	font-family: var(--kf-font-body);
}

/* ---------- แถบแท็บกรอง ----------
   🔴 แต่ละแท็บเป็น <a> ที่มี href จริง ไม่ใช่ JS
      -> คนปิด JS ก็ใช้ได้ · กด back ได้ · ส่งลิงก์ให้กันได้ */
body.kf-rlist .kf-rl-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rl-line);
	margin-bottom: 24px;
}
body.kf-rlist .kf-rl-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}
body.kf-rlist .kf-rl-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	/* 🔴 กฎห้องนี้: tap target >= 40px — วัดแล้วของเดิมได้ ~35px */
	min-height: 40px;
	border: 1px solid var(--rl-line);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--rl-ink);
	text-decoration: none;
	background: #fff;
	transition: border-color .15s, background .15s;
}
body.kf-rlist .kf-rl-tab:hover { border-color: #cfd6da; }
body.kf-rlist .kf-rl-tab b { font-weight: 400; color: var(--rl-muted); font-size: 13px; }
body.kf-rlist .kf-rl-tab[aria-current="true"] {
	background: var(--rl-brand);
	border-color: var(--rl-brand);
	color: #fff;
}
body.kf-rlist .kf-rl-tab[aria-current="true"] b { color: rgba(255, 255, 255, .72); }
body.kf-rlist .kf-rl-total { font-size: 13.5px; color: var(--rl-muted); white-space: nowrap; }

/* ---------- กริดการ์ด ---------- */
body.kf-rlist .kf-rl-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr);
}
body.kf-rlist .kf-rl-card {
	position: relative;   /* ฐานให้ลิงก์ชื่อเรื่องแผ่คลุมทั้งใบ (ดูกฎ ::after ด้านล่าง) */
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rl-line);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s, transform .18s;
}
body.kf-rlist .kf-rl-card:hover {
	box-shadow: 0 8px 26px rgba(16, 31, 51, .09);
	transform: translateY(-2px);
}
body.kf-rlist .kf-rl-thumb {
	position: relative;
	display: block;
	background: var(--rl-soft);
	line-height: 0;
}
body.kf-rlist .kf-rl-thumb img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
/* ป้าย "วิดีโอ" — บอกว่าเคสนี้มีคลิปให้ดู (243 จาก 259 เคสมี) */
body.kf-rlist .kf-rl-vid {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(18, 22, 26, .78);
	color: #fff;
	font-size: 11.5px;
	line-height: 1;
}
body.kf-rlist .kf-rl-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
body.kf-rlist .kf-rl-eyebrow { font-size: 12.5px; color: var(--rl-brand); line-height: 1.2; }
body.kf-rlist .kf-rl-title {
	margin: 0;
	font-family: var(--kf-font-head);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
}
body.kf-rlist .kf-rl-title a { color: var(--rl-ink); text-decoration: none; }
/* 🔴 ชื่อเคสที่พอดี 1 บรรทัดสูงแค่ 20px — ต่ำกว่ากฎ tap target 40px
   (เจอตอนไล่ iPad 768 ที่คอลัมน์กว้างพอให้ชื่อจบบรรทัดเดียว)
   -> ให้ลิงก์แผ่คลุมทั้งใบ · ทรัมเนลเป็น aria-hidden อยู่แล้ว ชิป/eyebrow เป็น span ไม่ชนกัน */
body.kf-rlist .kf-rl-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
body.kf-rlist .kf-rl-title a:hover { color: var(--rl-brand); }
body.kf-rlist .kf-rl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
body.kf-rlist .kf-rl-chip {
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--rl-soft);
	color: #4a5359;
}

/* ---------- ไม่พบผลลัพธ์ ---------- */
body.kf-rlist .kf-rl-empty {
	padding: 44px 20px;
	text-align: center;
	color: var(--rl-muted);
	border: 1px dashed var(--rl-line);
	border-radius: 14px;
}

/* ---------- แบ่งหน้า ----------
   ใช้ the_posts_pagination() ของ WP -> ได้ <a href> จริงทุกหน้า
   Google ไต่เข้าถึงผลงานได้ครบ 259 เคส (ของเดิมเป็นปุ่ม Load More ที่เป็น JS) */
body.kf-rlist .navigation.pagination { margin-top: 34px; }
body.kf-rlist .nav-links { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
body.kf-rlist .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--rl-line);
	border-radius: 8px;
	font-size: 14px;
	color: var(--rl-ink);
	text-decoration: none;
	background: #fff;
}
body.kf-rlist .page-numbers:hover { border-color: #cfd6da; }
body.kf-rlist .page-numbers.current {
	background: var(--rl-brand);
	border-color: var(--rl-brand);
	color: #fff;
}
body.kf-rlist .page-numbers.dots { border-color: transparent; background: none; }
body.kf-rlist .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (min-width: 620px) {
	body.kf-rlist .kf-rl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	body.kf-rlist .kf-rl { padding: 32px 20px 76px; }
	body.kf-rlist .kf-rl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
	body.kf-rlist .kf-rl-title { font-size: 16.5px; }
}

/* สถานะ "กำลังอยู่หน้านี้" เป็นตัวอักษรขาวบนพื้นฟ้า — ต้องยืนยันสีตอน hover ด้วย
   ไม่งั้นกฎลิงก์ทั่วเว็บ (body.kf-site a:where(:hover)) จะเปลี่ยนเป็นฟ้าเข้มบนฟ้า = อ่านไม่ออก
   (JoJho แจ้ง 3 ต.ค. 2026 "hover ทุกปุ่มใน content สีมันจม") */
body.kf-rlist .kf-rl-tab[aria-current="true"]:hover,
body.kf-rlist .page-numbers.current:hover { color: #fff; }