/* แถบหัวเรื่องของหน้าย่อย (pages/*.php) — โหลดทุกหน้าจาก includes/header.php
 * โครง HTML:
 *   <div class="container-fluid px-0">
 *     <div class="page-hero <ชื่อหน้า>-hero position-relative overflow-hidden">
 *       <div class="hero-bg-pattern"></div>
 *       <div class="container text-center py-3 position-relative">
 *         <div class="hero-icon mb-2"><i class="fas fa-…"></i></div>
 *         <h2 class="fw-bold mb-2 text-white">หัวเรื่อง</h2>
 *         <p class="lead opacity-75 mb-0 text-white page-hero-subtitle">English subtitle</p>
 *         <div class="hero-line mx-auto mt-2"></div>
 *       </div>
 *     </div>
 *   </div>
 * คลาส <ชื่อหน้า>-hero ใช้เป็นจุดปรับเฉพาะหน้า (ดูท้ายไฟล์) — อย่าคัดลอกกฎด้านล่างไปไว้ในหน้าอีก
 */

/* ── พื้นหลัง ───────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, #003366 0%, #001a33 50%, #0a1628 100%);
    color: white;
    padding: 15px 0;
    margin-bottom: 30px;
}
.hero-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,215,0,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,215,0,0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* ── ไอคอนวงกลมทอง ───────────────────────────────────────── */
.hero-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(255,215,0,0.3);
    animation: iconPulse 3s ease-in-out infinite;
}
.hero-icon i {
    font-size: 1.6rem;
    color: #003366;
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 40px rgba(255,215,0,0.3); }
    50% { transform: scale(1.05); box-shadow: 0 15px 50px rgba(255,215,0,0.5); }
}

/* ── คำบรรยายใต้หัวเรื่อง (ไม่ใช้ .hero-subtitle — ชื่อนั้นเป็นของ hero หน้าแรกใน style.css) ── */
.page-hero-subtitle { font-size: 1rem; }

/* ── เส้นทองใต้หัวเรื่อง ─────────────────────────────────── */
.hero-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    border-radius: 2px;
    animation: lineGlow 2s ease-in-out infinite;
}
@keyframes lineGlow {
    0%, 100% { opacity: 0.7; width: 80px; }
    50% { opacity: 1; width: 120px; }
}

/* ── ปรับเฉพาะหน้า ──────────────────────────────────────── */
/* เกี่ยวกับเรา: ชิดแท็บด้านล่าง ไม่มีแอนิเมชัน (about-staff.css ปรับ padding ต่อ) */
.about-hero { margin-bottom: 0; }
.about-hero .hero-icon,
.about-hero .hero-line { animation: none; }

/* สร้าง QR Code: hero สูงกว่า ไอคอนใหญ่กว่า ไม่มีแอนิเมชัน */
.qr-hero { padding: 20px 0; margin-bottom: 40px; }
.qr-hero .hero-icon { width: 70px; height: 70px; animation: none; }
.qr-hero .hero-icon i { font-size: 2rem; }
.qr-hero .hero-line { animation: none; }