/* ═══════════════════════════════════════════════════════════════
   نجوم الحفلات — نفس شكل الرئيسية (home.css + browse.css + map.css) + الإضافات الصغيرة هنا
   ═══════════════════════════════════════════════════════════════ */

/* ─── صفحة نجوم الحفلات ─── */
.hf .hf-h1 { text-wrap: balance; }
/* سطر واحد قصير — مو مثل مقدمة الرئيسية (مضبوطة على ثلاث أسطر كاملة) */
.hf .hf-intro { max-width: 36ch; text-align: start; text-align-last: auto; font-size: clamp(16px, 1.6vw, 20px); }
/* بدون قلم (pen.js): لونها من الثيم — بالميكس/الليلي البداية غامقة والرمادي الثابت ما يبين */
.hf .hf-intro { color: color-mix(in srgb, var(--text) 74%, transparent); animation: none; }

.hf-bundle { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #ffd43b 22%, var(--surface)); font-size: 13.5px; font-weight: 600; }
.hf-bundle .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #b07d00; }
.hf-joinkinds { display: grid; gap: 8px; }
.hf-joinkinds a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: inherit; text-decoration: none; font-weight: 800; }
.hf-joinkinds a:hover { background: rgba(255, 255, 255, .22); }
.hf-joinkinds a span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; }
.hf-joinkinds a span .ic { width: 19px; height: 19px; }
.hf-joinkinds a small { display: block; font-weight: 500; opacity: .85; }