/* css/style.css */
:root {
  --primary-color: #FFD54F;
  --text-color: #333;
  --bg-light: #f9f9f9;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; color: var(--text-color); background: var(--bg-light); line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.site-header { background: #fff; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 50px; }
.nav ul { list-style: none; display: flex; gap: 1rem; flex-direction: row; }
.nav a { text-decoration: none; color: var(--text-color); padding: 0.75rem 1rem; }
.nav a.active, .nav a:hover { color: var(--primary-color); }
.hero.small-hero { position: relative; overflow: hidden; height: 40vh; }
.hero.small-hero img { width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
/* .hero-text h1 { margin: 0; color: #000; } */
.hero { width: 100%; padding: 2rem 1rem; text-align: center; }
.hero-image { width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 12px; }
.hero-title { font-size: 2rem; margin-top: 1rem; color: #111; }
.event-date { font-size: 1.25rem; color: #000; }
/* .hero-image fit to size*/
.intro { text-align: center; background: var(--primary-color); color: #000; padding: 2rem 1rem; font-size: 28px; }
.videos { padding: 2rem 0; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.video-wrapper iframe { width: 100%; aspect-ratio: 16/9; }
.support { text-align: center; padding: 2rem 1rem; background: #000; color: #fff; }
.schedule-content { text-align: center; }
.schedule-content h2, .schedule-content p, .schedule-content h3, .schedule-content ul, .schedule-content .btn { margin: 0 auto; }
.schedule-content ul { list-style: none; padding: 0; margin: 1rem 0; }
.open-session, .set, .break { margin: 1rem 0; }
.playlist-link { margin: 1.5rem 0; }
.schedule-content .set li { font-weight: bold; }
.schedule-content .composer { color: #666; font-style: italic; font-weight: normal; }
.site-footer { background: #fff; padding: 1rem 0; border-top: 1px solid #ddd; text-align: center; }
.social { margin-bottom: 1rem; }
.social a { margin: 0 0.5rem; text-decoration: none; color: var(--text-color); }
.social a.fb-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #1877F2; color: #fff; padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: bold; font-size: 1.05rem; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.social a.fb-btn:hover { background: #0f5ecb; color: #fff; }
.fb-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.event-listing { padding: 2rem 0; }
.event-card { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.event-logo { height: 60px; vertical-align: middle; margin-right: 1rem; }
.event-card h3 { display: inline; vertical-align: middle; margin: 0; }
.event-card > h3 { display: block; margin-bottom: 0.5rem; }
.event-card h4 { margin: 1.5rem 0 0.25rem; font-size: 1.15rem; }
.event-card ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.event-card li { margin: 0.15rem 0; }
.event-origin { font-weight: normal; color: #555; }
.btn { display: inline-block; background: var(--primary-color); color: #000; text-decoration: none; padding: 0.6rem 1.25rem; border-radius: 6px; font-weight: bold; }
.btn:hover { background: #ffca28; }
.event-card .btn-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.event-card li a, .event-card h4 a { color: #0b6; text-decoration: underline; }
.event-card h4 a { font-size: 0.95rem; font-weight: normal; }
@media (max-width: 768px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .nav ul { flex-direction: row; }
}