/* =============================================================
   หัวหน้าเครื่องมือในคลังข้อสอบ /exam-* (pali/app/inc/exam-hero.php) — แบบเดียวกับหน้าปก /handbook/
   การ์ดครามเข้ม · ภาพวาดทางขวาจางเข้าพื้นทางซ้าย · บรรทัดนำสีวิชา (แปล = ทอง · ไวยากรณ์ = ฟ้าคราม)
   หน้าเหล่านี้คนละไฟล์ CSS กัน จึงตั้งค่าทุกอย่างเองที่นี่ (prefix xh-) ไม่พึ่งตัวแปรของหน้า
   ============================================================= */
.xh-hero {
	--xh-bg: #0d1330;
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center; min-height: 300px;
	margin: 18px 0 24px; border-radius: 22px;
	background: var(--xh-bg);
	box-shadow: 0 18px 40px -24px rgba(13, 19, 48, .7);
	font-family: Sarabun, system-ui, sans-serif;
}
/* ภาพวาดทางขวา — ขอบซ้ายจางหายเข้าพื้น ไม่เห็นรอยตัด (แบบหัวหมวดใน /exam-bank) */
.xh-hero::before {
	content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(64%, 720px);
	background: var(--xh-art) 60% center / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%);
}
.xh-tone-transl { --xh-kick: #f5d27a; --xh-accent: #fde68a; }
.xh-tone-gram { --xh-kick: #a5b4fc; --xh-accent: #c7d2fe; }

.xh-card { max-width: min(560px, 60%); padding: 30px 40px 32px; color: #f3f6ff; text-shadow: 0 1px 12px rgba(13, 19, 48, .85); }
.xh-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.xh-crumb a {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);
	color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important;
	transition: background-color .15s ease;
}
.xh-crumb a:hover { background: rgba(255, 255, 255, .18); }
.xh-crumb a:focus-visible { outline: 3px solid #f5bf45; outline-offset: 2px; }
.xh-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--xh-kick); font-size: 15px; font-weight: 700; }

.xh-hero h1 {
	margin: 14px 0 8px; color: #fff !important;
	font-size: clamp(30px, 4vw, 44px); line-height: 1.2; font-weight: 800; letter-spacing: 0;
}
.xh-hero h1 span { display: block; margin-top: 2px; color: var(--xh-accent); font-size: .62em; font-weight: 700; }
.xh-lead { margin: 0; color: #d7defa; font-size: 16px; line-height: 1.7; }
.xh-lead b, .xh-lead strong { color: #fff; }

/* ปุ่มของหน้า (เช่น ตัวอักษรใหญ่ · เปิด ebook) ปรับให้อยู่บนพื้นเข้มได้ */
.xh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.xh-actions > a, .xh-actions > button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
	border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);
	color: #fff !important; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none !important; cursor: pointer;
	transition: background-color .15s ease;
}
.xh-actions > a:hover, .xh-actions > button:hover { background: rgba(255, 255, 255, .18); }
.xh-actions > .xh-primary { background: #f5bf45; border-color: #f5bf45; color: #1b1505 !important; }
.xh-actions > .xh-primary:hover { background: #ffcc55; }
.xh-actions > [aria-pressed="true"] { background: #f5bf45; border-color: #f5bf45; color: #1b1505 !important; }

/* หน้าเครื่องมือ (ออกข้อสอบ · ติว ฯลฯ) — หัวเตี้ยลง เครื่องมือขึ้นมาเร็ว */
.xh-hero.is-compact { min-height: 236px; }
.xh-hero.is-compact .xh-card { padding: 24px 36px 26px; }

@media (max-width: 760px) {
	.xh-hero, .xh-hero.is-compact { min-height: 0; align-items: flex-end; margin: 12px 0 18px; border-radius: 18px; padding-top: 170px; }
	.xh-hero::before {
		left: 0; bottom: auto; width: auto; height: 230px; background-position: 70% top;
		-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
	}
	.xh-card, .xh-hero.is-compact .xh-card { max-width: none; padding: 0 18px 22px; }
	/* หน้าเครื่องมือ: ภาพเตี้ยลง ให้ตัวเครื่องมือขึ้นมาในจอแรก */
	.xh-hero.is-compact { padding-top: 112px; }
	.xh-hero.is-compact::before { height: 170px; }
	.xh-hero h1 { margin-top: 10px; }
}
@media print { .xh-hero { display: none !important; } }