/*
 * FALCON PRO EA · ส่วนประกอบกลาง (inc/components.php)
 * โหลดหลัง style.css · ใช้ token ใน :root ของ style.css เท่านั้น (ห้าม gradient/glow สี)
 */

/* ---------- หัวบท "01 / 09 · KICKER" ---------- */
.ch-head {
	max-width: 760px;
	margin: 0 auto 48px;
}

.ch-head--center {
	text-align: center;
}

.ch-head--left {
	margin-left: 0;
	text-align: left;
}

.ch-index {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	margin-bottom: 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: var(--flare);
}

.ch-num {
	font-size: 1rem;
}

.ch-total {
	color: var(--ash-2);
}

.ch-kicker {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--ember);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ch-head h2 {
	margin: 0 0 12px;
}

.ch-sub {
	margin: 0;
	color: var(--ash);
}

.is-dark .ch-index,
.phero .ch-index {
	color: var(--mint);
}

.is-dark .ch-total {
	color: rgba(255, 255, 255, 0.4);
}

.is-dark .ch-sub {
	color: var(--on-black-2);
}

/* ---------- ช่องรูป ---------- */
.media-frame {
	position: relative;
	margin: 0;
}

.media-open {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid var(--border);
	background: #F4F6F8;
	box-shadow: var(--shadow-lift);
	cursor: zoom-in;
}

.media-open img,
.media-open picture {
	display: block;
	width: 100%;
	height: auto;
}

.media-open-hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--btn-radius-sm);
	background: rgba(16, 24, 27, 0.82);
	color: #FFFFFF;
	font-size: 0.74rem;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ป้ายที่เหลือเฉพาะไอคอน (ช่อง "ป้ายบนรูปที่กดเปิดขนาดเต็มได้" ใน Customizer ถูกเว้นว่าง · คลาสมาจาก fenix_media_open) = สี่เหลี่ยมมุมมนเล็ก */
.media-open-hint--icon {
	gap: 0;
	padding: 7px;
}

.media-open:hover .media-open-hint,
.media-open:focus-visible .media-open-hint {
	opacity: 1;
	transform: none;
}

/* จอสัมผัส (ไม่มี hover): ป้ายต้องเห็นตลอด แต่ห้ามลอยทับภาพ เพราะเคยบังข้อความที่อยู่ในตัวภาพ
   (ประโยคเตือนความเสี่ยงของแผนภาพหน้าแรก · บรรทัด "ภาพจำลอง" ของภาพ iPhone) → เป็นแถบใต้ภาพ อยู่ในลิงก์เดียวกัน
   แบบเหลือแต่ไอคอน (ช่องป้ายถูกเว้นว่าง) ไม่มีข้อความให้อ่าน จึงไม่แสดงบนจอสัมผัส · ภาพยังแตะเปิดได้เหมือนเดิม */
@media (hover: none) {
	.media-open-hint {
		position: static;
		display: flex;
		justify-content: center;
		padding: 9px 12px;
		border-radius: 0;
		background: var(--black-deep);
		opacity: 1;
		transform: none;
		transition: none;
	}

	.media-open-hint--icon {
		display: none;
	}
}

/* รูปที่ไฟล์จริงไม่กว้างกว่าขนาดที่แสดงอยู่บนจอใหญ่: เปิด lightbox แล้วได้ภาพเท่าเดิม
   main.js จึงถอดลิงก์ออกและใส่ .is-actual → ไม่มีเคอร์เซอร์ซูม ไม่มีป้ายชวนกด รูปไม่ขยับตอนชี้ · กรอบและคำบรรยายคงเดิม
   จอมือถือ (≤760px) ไม่ได้คลาสนี้ ลิงก์เปิดไฟล์ในแท็บใหม่ตามเดิม */
.media-open.is-actual {
	cursor: default;
}

.media-open.is-actual .media-open-hint {
	display: none;
}

.media-open.is-actual:hover img {
	transform: none;
}

.media-cap {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 10px;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--ash-2);
}

.media-cap-label {
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--flare);
}

.is-dark .media-open {
	border-color: var(--border-dark);
	background: var(--black-2);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.is-dark .media-cap {
	color: var(--on-black-2);
}

.is-dark .media-cap-label {
	color: var(--mint);
}

/* ช่องว่างรอรูป (เห็นเฉพาะแอดมิน) */
.media-slot-empty {
	display: grid;
	place-items: center;
	gap: 10px;
	min-height: 220px;
	padding: 24px;
	border-radius: 18px;
	border: 2px dashed rgba(178, 108, 9, 0.45);
	background: #FFFBF3;
	color: var(--warn);
	text-align: center;
	font-size: 0.86rem;
}

.media-slot-empty .icon {
	width: 32px;
	height: 32px;
}

.media-slot-note strong {
	display: block;
	margin-bottom: 4px;
}

.admin-hint {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px dashed rgba(178, 108, 9, 0.5);
	background: #FFFBF3;
	color: var(--warn);
	font-size: 0.82rem;
}

/* ---------- ตารางจาก fenix_rich_text: จอแคบเรียงเป็นการ์ด ---------- */
@media (max-width: 640px) {
	.table-wrap--stack {
		overflow: visible;
		border: 0;
		background: none;
	}

	.table-wrap--stack .data-table {
		min-width: 0;
	}

	.table-wrap--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.table-wrap--stack tr {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var(--border);
		border-radius: 14px;
		background: #FFFFFF;
		overflow: hidden;
	}

	/* ช่องของการ์ด = ตารางย่อยสองคอลัมน์: ป้าย (::before เป็น table-cell) ทางซ้าย · เนื้อหาทั้งช่องทางขวา
	   เดิมเป็น grid: ช่องที่มีข้อความ ลิงก์ แล้วข้อความต่อ ถูกแยกเป็นชิ้น grid ทีละท่อน ประโยคท้ายจึงตกไปอยู่ในคอลัมน์ป้ายแคบ ๆ
	   แบบตาราง: ทุกอย่างที่ไม่ใช่ table-cell ถูกเบราว์เซอร์รวมเป็นช่องเดียวเอง (anonymous table-cell) ไม่ว่าข้างในมีแท็กอะไร
	   border-collapse: separate เพราะค่า collapse ที่รับมาจาก .data-table ทำให้ padding ของช่องหาย */
	.table-wrap--stack td {
		display: table;
		table-layout: fixed;
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border-bottom: 1px solid var(--border);
		overflow-wrap: break-word;
	}

	/* คอลัมน์ป้ายกว้าง 42% ของช่อง (รวมช่องไฟ 10px) · ป้ายมาจากแอตทริบิวต์ จึงห่อคำด้วย span ไม่ได้:
	   balance เกลี่ยป้ายที่ยาวเกินหนึ่งบรรทัดให้สองบรรทัดยาวพอกัน ไม่เหลือพยางค์เดียวค้างบรรทัดล่าง */
	.table-wrap--stack td::before {
		content: attr(data-label);
		display: table-cell;
		width: 42%;
		padding-right: 10px;
		font-weight: 600;
		font-size: 0.8rem;
		color: var(--ash-2);
		text-wrap-style: balance;
	}

	/* ช่องที่ไม่มีป้าย: ไม่จองคอลัมน์ว่างไว้ทางซ้าย */
	.table-wrap--stack td:not([data-label])::before {
		content: none;
	}

	/* พื้นของการ์ดใบคู่ (ล้างลายสลับแถวของจอใหญ่) อยู่ที่ assets/css/pages.css หัวข้อ 9 ทั้งโทนสว่างและโทนเข้ม:
	   กฎที่เคยอยู่ตรงนี้ (.table-wrap--stack tr:nth-child(even) td · ความเจาะจง 0,2,2) แพ้กฎลายสลับแถวใน style.css (0,2,3) จึงไม่เคยมีผล
	   ตัวล้างต้องเจาะจงไม่เกิน 0,2,3 ไม่งั้นจะทับสีหัวการ์ดของ .table-wrap--cards (0,3,2 ใน pages.css) */

	/* การ์ดใบสุดท้ายของตาราง: กฎจอใหญ่ .data-table tbody tr:last-child td ลบเส้นใต้ของทุกช่องในแถวท้าย
	   การ์ดใบท้ายจึงไม่มีเส้นคั่นระหว่างช่องเหมือนใบอื่น · ใส่เส้นกลับ (สีตามโทนพื้น) แล้วให้ช่องสุดท้ายของทุกการ์ดไม่มีเส้นตามเดิม */
	.table-wrap--stack .data-table tbody tr:last-child td {
		border-bottom: 1px solid var(--border);
	}

	.is-dark .table-wrap--stack .data-table tbody tr:last-child td {
		border-bottom-color: var(--border-dark);
	}

	.table-wrap--stack td:last-child,
	.table-wrap--stack .data-table tbody tr td:last-child {
		border-bottom: 0;
	}

	/* พื้นเข้ม: กฎ .is-dark .table-wrap (assets/css/pages.css) ใส่พื้นและขอบกลับให้กรอบนอก จึงเห็นแถบสีของกรอบโผล่ใต้การ์ดใบสุดท้าย
	   (ช่องไฟ 12px ใต้การ์ด) · จอแคบกรอบนอกไม่มีหน้าตา มีแต่การ์ด */
	.is-dark .table-wrap.table-wrap--stack {
		border: 0;
		background: none;
	}
}

/* ---------- หัวข้อเนื้อหาจาก Customizer ---------- */
.doc-section + .doc-section {
	margin-top: 2.2em;
}

/* ---------- อื่น ๆ ---------- */
.nobr {
	white-space: nowrap;
}

/* ---------- ปุ่มที่พาไป LINE OA ----------
   ทั้งเว็บเป็นเขียวสด var(--line-green) #00FF1D ตัวอักษร #03240F (เจ้าของสั่ง 15 ต.ค. 2026) ให้แยกจากปุ่มเขียวของธีม (--ember)
   คลาส .is-line-btn ใส่โดย PHP เฉพาะปุ่มที่ปลายทางเป็น LINE OA (ไปหน้า /go/ แทน = สีเดิม) · ปุ่มเส้นขอบ (.btn-ghost) คงเป็นปุ่มรอง
   ปุ่ม LINE ที่ใช้ var(--line-green) อยู่แล้ว (หน้า /go ปุ่ม LINE ลอย .btn-line) เปลี่ยนตามค่าใน :root · ช่อง LINE ในบาร์ล่างมือถือเป็นปุ่มธรรมดาตามที่เจ้าของสั่ง */
a.btn.is-line-btn:not(.btn-ghost) {
	border-color: var(--line-green);
	background: var(--line-green);
	color: #03240F;
}

a.btn.is-line-btn:not(.btn-ghost):hover,
a.btn.is-line-btn:not(.btn-ghost):focus-visible {
	border-color: var(--line-green-dark);
	background: var(--line-green-dark);
	color: #03240F;
}