BIFA+ Hub – News, Events & Updates<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 - \u0421\u041e\u0412\u041c\u0415\u0421\u0422\u0418\u041c\u041e\u0421\u0422\u042c \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n.bifa-hub-wrapper {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ========= RESET ========= *\/\n.bifa-hub-wrapper * {\n box-sizing: border-box;\n}<\/p>\n<p>\/* ========= MAIN WRAPPER ========= *\/\n.bifa-hub-wrapper {\n min-height: 100vh;\n position: relative;\n background: #FFFFFF;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 0;\n}<\/p>\n<p>\/* ========= HERO SECTION WITH SLIDER ========= *\/\n.bifa-hero-section {\n position: relative;\n height: 70vh;\n min-height: 600px;\n background: var(--bifa-deep-navy);\n overflow: hidden;\n}<\/p>\n<p>.bifa-hero-slider {\n position: relative;\n width: 100%;\n height: 100%;\n}<\/p>\n<p>.bifa-hero-slides {\n position: relative;\n width: 100%;\n height: 100%;\n}<\/p>\n<p>.bifa-hero-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1.5s ease, transform 1s ease;\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-hero-slide.active {\n opacity: 1;\n transform: scale(1);\n}<\/p>\n<p>.bifa-hero-slide-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n filter: brightness(0.6);\n}<\/p>\n<p>.bifa-hero-slide-bg::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.7) 0%, \n rgba(10, 31, 68, 0.3) 50%,\n rgba(212, 175, 55, 0.1) 100%\n );\n}<\/p>\n<p>\/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 *\/\n.bifa-hero-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n z-index: 2;\n max-width: 1200px;\n width: 90%;\n height: 75%;\n max-height: 550px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n opacity: 0;\n animation: heroContentIn 1s ease 0.5s forwards;\n}<\/p>\n<p>@keyframes heroContentIn {\n from {\n opacity: 0;\n transform: translate(-50%, -45%);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n}<\/p>\n<p>\/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 *\/\n.bifa-hero-scrollable {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px 20px 20px;\n margin-bottom: 15px;<\/p>\n<p> \/* \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 *\/\n scrollbar-width: thin;\n scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.1);\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar {\n width: 6px;\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar-thumb {\n background: rgba(212, 175, 55, 0.5);\n border-radius: 10px;\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar-thumb:hover {\n background: rgba(212, 175, 55, 0.7);\n}<\/p>\n<p>.bifa-hero-badge {\n display: inline-block;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 10px 30px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 30px;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n flex-shrink: 0;\n}<\/p>\n<p>.bifa-hero-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 900;\n color: var(--bifa-bright-white);\n margin-bottom: 25px;\n line-height: 1.2;\n text-shadow: 2px 4px 20px rgba(0, 0, 0, 0.3);\n flex-shrink: 0;\n}<\/p>\n<p>.bifa-hero-excerpt {\n font-family: var(--bifa-font-body);\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n color: rgba(255, 255, 255, 0.9);\n line-height: 1.6;\n margin-bottom: 40px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n flex-shrink: 1;\n}<\/p>\n<p>.bifa-hero-meta {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n margin-bottom: 30px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}<\/p>\n<p>.bifa-hero-meta-item {\n display: flex;\n align-items: center;\n gap: 10px;\n color: rgba(255, 255, 255, 0.8);\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n}<\/p>\n<p>.bifa-hero-meta-item svg {\n width: 20px;\n height: 20px;\n stroke: var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u043d\u0438\u0437\u0443 *\/\n.bifa-hero-cta {\n display: inline-flex;\n align-items: center;\n gap: 15px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1.1rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n flex-shrink: 0;\n margin-top: auto;\n border: none;\n cursor: pointer;\n}<\/p>\n<p>.bifa-hero-cta::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-hero-cta:hover {\n transform: translateY(-3px);\n box-shadow: 0 30px 70px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-hero-cta:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-hero-cta svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-hero-cta:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>\/* Slider Navigation *\/\n.bifa-slider-nav {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 15px;\n z-index: 3;\n}<\/p>\n<p>.bifa-slider-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n border: 2px solid rgba(255, 255, 255, 0.5);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n}<\/p>\n<p>.bifa-slider-dot.active {\n background: var(--bifa-heritage-gold);\n border-color: var(--bifa-heritage-gold);\n transform: scale(1.2);\n}<\/p>\n<p>.bifa-slider-dot:hover {\n background: rgba(255, 255, 255, 0.5);\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-slider-progress {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n width: 0;\n z-index: 4;\n transition: width 5s linear;\n}<\/p>\n<p>.bifa-slider-progress.active {\n width: 100%;\n}<\/p>\n<p>\/* Slider Arrows *\/\n.bifa-slider-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 60px;\n height: 60px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 2px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n z-index: 3;\n opacity: 0.8;\n}<\/p>\n<p>.bifa-slider-arrow:active {\n transform: translateY(-50%) scale(0.95);\n}<\/p>\n<p>.bifa-slider-arrow:hover {\n background: rgba(212, 175, 55, 0.2);\n border-color: var(--bifa-heritage-gold);\n transform: translateY(-50%) scale(1.1);\n}<\/p>\n<p>.bifa-slider-arrow.prev {\n left: 50px;\n}<\/p>\n<p>.bifa-slider-arrow.next {\n right: 50px;\n}<\/p>\n<p>.bifa-slider-arrow svg {\n width: 24px;\n height: 24px;\n stroke: var(--bifa-bright-white);\n stroke-width: 2.5;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ========= *\/\n.hub-bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n top: 0;\n left: 0;\n pointer-events: none;\n}<\/p>\n<p>.hub-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatHub 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n}<\/p>\n<p>@keyframes floatHub {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.2; }\n 90% { opacity: 0.2; }\n 100% {\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* ========= MAIN CONTENT ========= *\/\n.bifa-hub-main {\n position: relative;\n z-index: 10;\n padding: 100px 0;\n}<\/p>\n<p>.bifa-hub-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>\/* ========= SEARCH SECTION ========= *\/\n.bifa-hub-search-section {\n background: #FFFFFF;\n padding: 40px 0;\n margin-bottom: 80px;\n border-radius: 30px;\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.08);\n}<\/p>\n<p>.bifa-hub-search-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>.bifa-hub-search-wrapper {\n position: relative;\n}<\/p>\n<p>.bifa-hub-search-input {\n width: 100%;\n padding: 20px 60px 20px 30px;\n border: 3px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n background: #F8F9FA;\n transition: var(--bifa-transition);\n outline: none;\n}<\/p>\n<p>.bifa-hub-search-input:focus {\n border-color: var(--bifa-heritage-gold);\n box-shadow: 0 12px 35px rgba(212, 175, 55, 0.2);\n background: #FFFFFF;\n}<\/p>\n<p>.bifa-hub-search-btn {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-hub-search-btn:hover {\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-hub-search-btn svg {\n width: 22px;\n height: 22px;\n stroke: var(--bifa-deep-navy);\n stroke-width: 3;\n}<\/p>\n<p>.bifa-search-results {\n margin-top: 20px;\n text-align: center;\n font-family: var(--bifa-font-body);\n color: var(--bifa-gray);\n font-size: 0.95rem;\n}<\/p>\n<p>.bifa-search-results.active {\n color: var(--bifa-deep-navy);\n font-weight: 600;\n}<\/p>\n<p>\/* ========= SECTION HEADERS ========= *\/\n.bifa-section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n}<\/p>\n<p>.bifa-section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n}<\/p>\n<p>.bifa-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n}<\/p>\n<p>.bifa-section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n color: #4a5568;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= NEWS SECTION ========= *\/\n.bifa-news-section {\n margin-bottom: 100px;\n}<\/p>\n<p>.bifa-news-preview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 50px;\n}<\/p>\n<p>\/* ========= EVENTS SECTION ========= *\/\n.bifa-events-section {\n background: #FFFFFF;\n padding: 100px 0;\n margin: 0 calc(-50vw + 50%);\n width: 100vw;\n position: relative;\n}<\/p>\n<p>.bifa-events-preview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 50px;\n}<\/p>\n<p>\/* ========= PREVIEW CARDS (Shared Styles) ========= *\/\n.bifa-preview-card {\n background: #FFFFFF;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n opacity: 0;\n animation: fadeInUpHub 1.2s ease forwards;\n}<\/p>\n<p>.bifa-preview-card:nth-child(1) { animation-delay: 0.1s; }\n.bifa-preview-card:nth-child(2) { animation-delay: 0.2s; }\n.bifa-preview-card:nth-child(3) { animation-delay: 0.3s; }<\/p>\n<p>.bifa-preview-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-preview-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-preview-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-preview-image {\n position: relative;\n height: 200px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-preview-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 60%, \n rgba(10, 31, 68, 0.8) 100%\n );\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-preview-card:hover .bifa-preview-image::before {\n opacity: 0.9;\n}<\/p>\n<p>\/* Hot\/Trending Indicator *\/\n.bifa-hot-indicator {\n position: absolute;\n top: 15px;\n left: 15px;\n background: linear-gradient(135deg, #ff4757, #ff6348);\n color: white;\n padding: 6px 16px;\n border-radius: 20px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: 6px;\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n animation: hotPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes hotPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-hot-indicator::before {\n content: '\ud83d\udd25';\n font-size: 12px;\n}<\/p>\n<p>.bifa-preview-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-preview-status {\n position: absolute;\n top: 15px;\n left: 15px;\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n backdrop-filter: blur(10px);\n}<\/p>\n<p>.bifa-preview-status.upcoming {\n background: rgba(219, 234, 254, 0.9);\n color: #1e40af;\n border: 1px solid rgba(30, 64, 175, 0.2);\n}<\/p>\n<p>.bifa-preview-status.ongoing {\n background: rgba(220, 252, 231, 0.9);\n color: #166534;\n border: 1px solid rgba(22, 101, 52, 0.2);\n}<\/p>\n<p>.bifa-preview-content {\n padding: 25px;\n}<\/p>\n<p>.bifa-preview-date {\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}<\/p>\n<p>.bifa-preview-date::before {\n content: '';\n width: 5px;\n height: 5px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-preview-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 15px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-preview-card:hover .bifa-preview-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-preview-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: #4a5568;\n line-height: 1.6;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 0;\n}<\/p>\n<p>\/* ========= VIEW ALL BUTTONS ========= *\/\n.bifa-view-all-container {\n text-align: center;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-view-all-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-view-all-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-view-all-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-view-all-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>\/* ========= LOADING STATES ========= *\/\n.bifa-hub-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 400px;\n}<\/p>\n<p>.bifa-hub-loader {\n width: 60px;\n height: 60px;\n border: 4px solid rgba(212, 175, 55, 0.2);\n border-top-color: var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: spinHub 1s linear infinite;\n}<\/p>\n<p>@keyframes spinHub {\n to { transform: rotate(360deg); }\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInUpHub {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .bifa-news-preview-grid,\n .bifa-events-preview-grid {\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 30px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 30px;\n }\n}<\/p>\n<p>\/* Tablet optimizations *\/\n@media (max-width: 992px) {\n .bifa-hero-section {\n height: 65vh;\n min-height: 550px;\n max-height: 700px;\n }<\/p>\n<p> .bifa-hero-content {\n height: 70%;\n max-height: 500px;\n }<\/p>\n<p> .bifa-hero-badge {\n padding: 6px 20px;\n font-size: 0.75rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: clamp(1.8rem, 4vw, 2.5rem);\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: clamp(0.9rem, 2vw, 1.1rem);\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-hero-meta {\n gap: 20px;\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-hero-meta-item {\n font-size: 0.85rem;\n }<\/p>\n<p> .bifa-hero-meta-item svg {\n width: 16px;\n height: 16px;\n }<\/p>\n<p> .bifa-hero-cta {\n padding: 12px 28px;\n font-size: 0.9rem;\n gap: 10px;\n }<\/p>\n<p> .bifa-hero-cta svg {\n width: 16px;\n height: 16px;\n }<\/p>\n<p> .bifa-slider-nav {\n bottom: 50px;\n gap: 12px;\n }<\/p>\n<p> .bifa-slider-dot {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> .bifa-hub-main {\n padding: 70px 0;\n }<\/p>\n<p> .bifa-events-section {\n padding: 70px 0;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-hero-slide-bg {\n filter: brightness(0.7);\n }<\/p>\n<p> .bifa-hero-slide-bg::after {\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.6) 0%, \n rgba(10, 31, 68, 0.2) 50%,\n rgba(212, 175, 55, 0.05) 100%\n );\n }<\/p>\n<p> .bifa-hero-section {\n height: 50vh;\n min-height: 400px;\n }<\/p>\n<p> .bifa-hero-content {\n height: 70%;\n max-height: 450px;\n }<\/p>\n<p> .bifa-hero-meta {\n gap: 20px;\n }<\/p>\n<p> .bifa-news-preview-grid,\n .bifa-events-preview-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }<\/p>\n<p> .bifa-hub-main {\n padding: 50px 0;\n }<\/p>\n<p> .bifa-events-section {\n padding: 50px 0;\n }<\/p>\n<p> .bifa-slider-arrow {\n width: 45px;\n height: 45px;\n background: rgba(0, 0, 0, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }<\/p>\n<p> .bifa-slider-arrow:hover {\n transform: translateY(-50%) scale(1.05);\n background: rgba(0, 0, 0, 0.8);\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 20px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 20px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-hero-section {\n height: 60vh;\n min-height: 450px;\n max-height: 600px;\n }<\/p>\n<p> .bifa-hero-content {\n width: 85%;\n height: 75%;\n max-height: 500px;\n }<\/p>\n<p> .bifa-hero-badge {\n padding: 6px 18px;\n font-size: 0.7rem;\n letter-spacing: 1px;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.5rem;\n margin-bottom: 12px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.85rem;\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-hero-meta {\n gap: 15px;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-meta-item {\n font-size: 0.75rem;\n gap: 6px;\n }<\/p>\n<p> .bifa-hero-meta-item svg {\n width: 14px;\n height: 14px;\n }<\/p>\n<p> .bifa-hero-cta {\n padding: 10px 20px;\n font-size: 0.75rem;\n gap: 8px;\n letter-spacing: 0.5px;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);\n }<\/p>\n<p> .bifa-hero-cta svg {\n width: 12px;\n height: 12px;\n }<\/p>\n<p> .bifa-slider-nav {\n bottom: 30px;\n gap: 10px;\n }<\/p>\n<p> .bifa-slider-dot {\n width: 8px;\n height: 8px;\n border-width: 1px;\n }<\/p>\n<p> .bifa-slider-arrow {\n width: 40px;\n height: 40px;\n background: rgba(0, 0, 0, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }<\/p>\n<p> .bifa-slider-arrow svg {\n width: 18px;\n height: 18px;\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 10px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 10px;\n }<\/p>\n<p> .bifa-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-preview-content {\n padding: 25px;\n }\n}<\/p>\n<p>@media (max-width: 360px) {\n .bifa-hero-section {\n min-height: 450px;\n max-height: 550px;\n }<\/p>\n<p> .bifa-hero-content {\n height: 70%;\n max-height: 450px;\n }<\/p>\n<p> .bifa-hero-badge {\n padding: 5px 15px;\n font-size: 0.65rem;\n margin-bottom: 12px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.3rem;\n margin-bottom: 10px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.8rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-meta {\n margin-bottom: 12px;\n }<\/p>\n<p> .bifa-hero-cta {\n padding: 9px 18px;\n font-size: 0.7rem;\n gap: 6px;\n }<\/p>\n<p> .bifa-hero-cta svg {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> .bifa-slider-arrow {\n width: 36px;\n height: 36px;\n }<\/p>\n<p> .bifa-slider-arrow svg {\n width: 14px;\n height: 14px;\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 8px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 8px;\n }<\/p>\n<p> .bifa-slider-nav {\n bottom: 25px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-hub-wrapper\">\n <\/p>\n<div class=\"hub-bg-animation\">\n \n <\/div>\n<p> <\/p>\n<section class=\"bifa-hero-section\">\n<div class=\"bifa-hero-slider\">\n<div class=\"bifa-hero-slides\" id=\"heroSlides\">\n \n <\/div>\n<p> <\/p>\n<div class=\"bifa-slider-nav\" id=\"sliderNav\">\n \n <\/div>\n<p> <\/p>\n<div class=\"bifa-slider-progress\" id=\"sliderProgress\"><\/div>\n<p> <br \/>\n <button class=\"bifa-slider-arrow prev\" id=\"sliderPrev\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <button class=\"bifa-slider-arrow next\" id=\"sliderNext\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/section>\n<p> <br \/>\n <main class=\"bifa-hub-main\"><\/p>\n<div class=\"bifa-hub-container\">\n <\/p>\n<section class=\"bifa-hub-search-section\">\n<div class=\"bifa-hub-search-container\">\n<div class=\"bifa-hub-search-wrapper\">\n <input \n type=\"text\" \n class=\"bifa-hub-search-input\" \n placeholder=\"Search news and events...\" \n id=\"hubSearchInput\"\n ><br \/>\n <button class=\"bifa-hub-search-btn\" id=\"hubSearchBtn\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n <path d=\"m21 21-4.35-4.35\"><\/path>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<div class=\"bifa-search-results\" id=\"searchResults\"><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section class=\"bifa-news-section\">\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Latest News<\/h2>\n<p class=\"bifa-section-subtitle\">Stay updated with the latest BIFA+ news and announcements<\/p>\n<\/p><\/div>\n<div id=\"newsPreviewGrid\" class=\"bifa-news-preview-grid\">\n <\/p>\n<div class=\"bifa-hub-loading\">\n<div class=\"bifa-hub-loader\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-view-all-container\">\n <a href=\"\/news\" class=\"bifa-view-all-btn\"><br \/>\n <span>View All News<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/section><\/div>\n<p> <\/main><\/p>\n<p> <\/p>\n<section class=\"bifa-events-section\">\n<div class=\"bifa-hub-container\">\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Upcoming Events<\/h2>\n<p class=\"bifa-section-subtitle\">Join our international tournaments and conferences<\/p>\n<\/p><\/div>\n<div id=\"eventsPreviewGrid\" class=\"bifa-events-preview-grid\">\n <\/p>\n<div class=\"bifa-hub-loading\">\n<div class=\"bifa-hub-loader\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-view-all-container\">\n <a href=\"https:\/\/bifa.ai\/events-2\/\" class=\"bifa-view-all-btn\"><br \/>\n <span>View All Events<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Hub Module\nconst BifaHub = {\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events',\n sliderInterval: null,\n currentSlide: 0,\n autoPlayDelay: 5000,\n slides: [],\n allPosts: [],\n searchQuery: '',\n searchResults: []\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.loadHeroSlides();\n this.loadNewsPreviews();\n this.loadEventsPreviews();\n this.setupSliderControls();\n this.setupSearch();\n },<\/p>\n<p> \/\/ Setup search functionality\n setupSearch() {\n const searchInput = document.getElementById('hubSearchInput');\n const searchBtn = document.getElementById('hubSearchBtn');\n const searchResults = document.getElementById('searchResults');<\/p>\n<p> if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n this.config.searchQuery = e.target.value.toLowerCase();\n if (this.config.searchQuery.length >= 3) {\n this.performSearch();\n } else {\n searchResults.textContent = '';\n this.loadNewsPreviews();\n this.loadEventsPreviews();\n }\n });<\/p>\n<p> searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n this.performSearch();\n }\n });\n }<\/p>\n<p> if (searchBtn) {\n searchBtn.addEventListener('click', () => {\n this.performSearch();\n });\n }\n },<\/p>\n<p> \/\/ Perform search\n performSearch() {\n const searchResults = document.getElementById('searchResults');<\/p>\n<p> if (!this.config.searchQuery || this.config.searchQuery.length < 2) {\n searchResults.textContent = '';\n return;\n }\n \n this.config.searchResults = this.config.allPosts.filter(post => {\n const title = post.title.rendered.toLowerCase();\n const excerpt = this.stripHtml(post.excerpt.rendered).toLowerCase();\n const location = (post._bifa_location || '').toLowerCase();<\/p>\n<p> return title.includes(this.config.searchQuery) || \n excerpt.includes(this.config.searchQuery) ||\n location.includes(this.config.searchQuery);\n });<\/p>\n<p> \/\/ Update results text\n if (this.config.searchResults.length > 0) {\n searchResults.textContent = `Found ${this.config.searchResults.length} results for \"${this.config.searchQuery}\"`;\n searchResults.classList.add('active');\n } else {\n searchResults.textContent = `No results found for \"${this.config.searchQuery}\"`;\n searchResults.classList.remove('active');\n }<\/p>\n<p> \/\/ Update previews with search results\n this.updatePreviewsWithSearch();\n },<\/p>\n<p> \/\/ Update previews with search results\n updatePreviewsWithSearch() {\n const newsContainer = document.getElementById('newsPreviewGrid');\n const eventsContainer = document.getElementById('eventsPreviewGrid');<\/p>\n<p> \/\/ Clear existing content\n if (newsContainer) newsContainer.innerHTML = '';\n if (eventsContainer) eventsContainer.innerHTML = '';<\/p>\n<p> \/\/ Separate search results into news and events\n const newsResults = this.config.searchResults.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return !eventDate || eventDate === '';\n });<\/p>\n<p> const eventsResults = this.config.searchResults.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return eventDate && eventDate !== '';\n });<\/p>\n<p> \/\/ Display news results\n if (newsContainer) {\n if (newsResults.length > 0) {\n newsResults.slice(0, 6).forEach((post, index) => {\n const card = this.createPreviewCard(post, 'news', index);\n newsContainer.appendChild(card);\n });\n } else {\n newsContainer.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray); grid-column: 1 \/ -1;\">No news found<\/p>\n<p>';\n }\n }<\/p>\n<p> \/\/ Display events results\n if (eventsContainer) {\n if (eventsResults.length > 0) {\n eventsResults.slice(0, 6).forEach((post, index) => {\n const card = this.createPreviewCard(post, 'event', index);\n eventsContainer.appendChild(card);\n });\n } else {\n eventsContainer.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray); grid-column: 1 \/ -1;\">No events found<\/p>\n<p>';\n }\n }\n },<\/p>\n<p> \/\/ Check if post is hot\/trending\n isHotPost(post) {\n \/\/ Logic to determine if a post is hot\/trending\n \/\/ More strict criteria to avoid marking all posts as hot<\/p>\n<p> \/\/ 1. Posts from last 24 hours (not 3 days)\n const postDate = new Date(post.date);\n const oneDayAgo = new Date();\n oneDayAgo.setDate(oneDayAgo.getDate() - 1);<\/p>\n<p> \/\/ 2. Must have urgent badge or priority\n const badge = (post._bifa_badge_text || '').toLowerCase();\n const hasUrgentBadge = badge.includes('urgent') || \n badge.includes('hot') || \n badge.includes('breaking') ||\n badge.includes('\u0432\u0430\u0436\u043d\u043e\u0435');<\/p>\n<p> \/\/ 3. Check priority flag\n const hasHighPriority = post._bifa_priority === 'urgent' || \n post._bifa_priority === 'high';<\/p>\n<p> \/\/ Post must be recent AND have urgent badge\/priority\n if (postDate > oneDayAgo && (hasUrgentBadge || hasHighPriority)) {\n return true;\n }<\/p>\n<p> \/\/ 4. For events - check if starting within 48 hours\n if (post._bifa_event_date) {\n const eventDate = new Date(post._bifa_event_date);\n const twoDaysFromNow = new Date();\n twoDaysFromNow.setDate(twoDaysFromNow.getDate() + 2);<\/p>\n<p> if (eventDate > new Date() && eventDate < twoDaysFromNow) {\n return true;\n }\n }\n \n return false;\n },\n\n \/\/ Create background particles\n createParticles() {\n const container = document.querySelector('.hub-bg-animation');\n if (!container) return;\n\n for (let i = 0; i < 20; i++) {\n const particle = document.createElement('div');\n particle.className = 'hub-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 25 + 's';\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n container.appendChild(particle);\n }\n },\n\n \/\/ Load hero slides (latest 3 posts)\n async loadHeroSlides() {\n try {\n const response = await fetch(`${this.config.apiUrl}?_embed&per_page=50&orderby=date&order=desc`);\n const posts = await response.json();\n \n this.config.allPosts = posts;\n \n \/\/ Get latest 3 posts for slider\n this.config.slides = posts.slice(0, 3);\n \n \/\/ \u0414\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430\n if (this.config.slides.length > 0) {\n const firstPost = this.config.slides[0];\n console.log('\ud83d\udcca First post data:');\n console.log(' - ID:', firstPost.id);\n console.log(' - Title:', firstPost.title.rendered);\n console.log(' - Slug:', firstPost.slug);\n console.log(' - Link:', firstPost.link);\n console.log(' - Type:', firstPost.type);\n console.log(' - Status:', firstPost.status);\n if (firstPost.guid) {\n console.log(' - GUID:', firstPost.guid.rendered);\n }\n }<\/p>\n<p> this.renderHeroSlides();\n this.createSliderDots();\n this.startAutoPlay();<\/p>\n<p> } catch (error) {\n console.error('Error loading hero slides:', error);\n }\n },<\/p>\n<p> \/\/ Render hero slides\n renderHeroSlides() {\n const slidesContainer = document.getElementById('heroSlides');\n if (!slidesContainer || this.config.slides.length === 0) return;<\/p>\n<p> slidesContainer.innerHTML = '';<\/p>\n<p> this.config.slides.forEach((post, index) => {\n const media = post._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/hero-placeholder.jpg`;\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';\n const badge = isEvent ? 'Event' : 'News';\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 150) + '...';<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 URL \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0438\n const postUrl = this.getPostUrl(post);<\/p>\n<p> const slide = document.createElement('div');\n slide.className = `bifa-hero-slide ${index === 0 ? 'active' : ''}`;<\/p>\n<p> \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430\n slide.innerHTML = `<\/p>\n<div class=\"bifa-hero-slide-bg\" style=\"background-image: url('${imageUrl}')\"><\/div>\n<div class=\"bifa-hero-content\">\n<div class=\"bifa-hero-scrollable\">\n<div class=\"bifa-hero-badge\">${badge}<\/div>\n<h1 class=\"bifa-hero-title\">${post.title.rendered}<\/h1>\n<p class=\"bifa-hero-excerpt\">${excerpt}<\/p>\n<div class=\"bifa-hero-meta\">\n ${isEvent ? `<\/p>\n<div class=\"bifa-hero-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>${this.formatDate(post._bifa_event_date)}<\/span>\n <\/div>\n<p> ${post._bifa_location ? `<\/p>\n<div class=\"bifa-hero-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n <\/svg>\n <span>${post._bifa_location}<\/span>\n <\/div>\n<p> ` : ''}\n ` : `<\/p>\n<div class=\"bifa-hero-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>${this.formatDate(post.date)}<\/span>\n <\/div>\n<p> `}\n <\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"bifa-hero-cta\" data-post-url=\"${postUrl}\" data-post-id=\"${post.id}\">\n <span>Read More<\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/button>\n <\/div>\n<p> `;<\/p>\n<p> slidesContainer.appendChild(slide);\n });<\/p>\n<p> \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043d\u043e\u043f\u043e\u043a - \u0431\u0435\u0440\u0451\u0442 URL \u0438\u0437 \u0410\u041a\u0422\u0418\u0412\u041d\u041e\u0413\u041e \u0441\u043b\u0430\u0439\u0434\u0430\n slidesContainer.addEventListener('click', (e) => {\n const clickedButton = e.target.closest('.bifa-hero-cta');\n if (!clickedButton) return;<\/p>\n<p> \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0410\u041a\u0422\u0418\u0412\u041d\u042b\u0419 \u0441\u043b\u0430\u0439\u0434\n const activeSlide = slidesContainer.querySelector('.bifa-hero-slide.active');\n if (!activeSlide) {\n console.error('\u274c No active slide found!');\n return;\n }<\/p>\n<p> \/\/ \u0411\u0435\u0440\u0451\u043c URL \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430\n const activeButton = activeSlide.querySelector('.bifa-hero-cta');\n const url = activeButton ? activeButton.getAttribute('data-post-url') : null;<\/p>\n<p> if (!url) {\n console.error('\u274c No URL found in active slide!');\n return;\n }<\/p>\n<p> console.log('\ud83d\udd17 Hero CTA clicked!');\n console.log('\ud83d\udd17 Active slide URL:', url);\n console.log('\ud83d\udd17 Navigating to:', url);<\/p>\n<p> \/\/ \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n window.location.href = url;\n });\n },<\/p>\n<p> \/\/ Get correct post URL\n getPostUrl(post) {\n \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 1: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 link \u0438\u0437 API\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\n return post.link;\n }<\/p>\n<p> \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 2: \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 post type, \u0441\u0442\u0440\u043e\u0438\u043c URL \u0432\u0440\u0443\u0447\u043d\u0443\u044e\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0435\u0441\u0442\u044c \u043b\u0438 slug\n if (post.slug) {\n const baseUrl = 'https:\/\/bifa.ai';<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u0438\u043f \u0437\u0430\u043f\u0438\u0441\u0438\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b URL \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b\n \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442 1: \/news-events\/slug\/\n return `${baseUrl}\/news-events\/${post.slug}\/`;\n }<\/p>\n<p> \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 3: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c guid \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c\n if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\n return post.guid.rendered;\n }<\/p>\n<p> \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 4: \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c ID, \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u044f\u043c\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443\n if (post.id) {\n return `https:\/\/bifa.ai\/?p=${post.id}`;\n }<\/p>\n<p> \/\/ \u0412 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n console.error('\u26a0\ufe0f Cannot determine URL for post:', post);\n return 'https:\/\/bifa.ai\/';\n },<\/p>\n<p> \/\/ Create slider dots\n createSliderDots() {\n const navContainer = document.getElementById('sliderNav');\n if (!navContainer) return;<\/p>\n<p> navContainer.innerHTML = '';<\/p>\n<p> this.config.slides.forEach((_, index) => {\n const dot = document.createElement('button');\n dot.className = `bifa-slider-dot ${index === 0 ? 'active' : ''}`;\n dot.addEventListener('click', () => this.goToSlide(index));\n navContainer.appendChild(dot);\n });\n },<\/p>\n<p> \/\/ Setup slider controls\n setupSliderControls() {\n const prevBtn = document.getElementById('sliderPrev');\n const nextBtn = document.getElementById('sliderNext');<\/p>\n<p> if (prevBtn) {\n prevBtn.addEventListener('click', () => this.prevSlide());\n }<\/p>\n<p> if (nextBtn) {\n nextBtn.addEventListener('click', () => this.nextSlide());\n }\n },<\/p>\n<p> \/\/ Go to specific slide\n goToSlide(index) {\n const slides = document.querySelectorAll('.bifa-hero-slide');\n const dots = document.querySelectorAll('.bifa-slider-dot');\n const progress = document.getElementById('sliderProgress');<\/p>\n<p> \/\/ Remove active classes\n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => dot.classList.remove('active'));<\/p>\n<p> \/\/ Add active class to current\n if (slides[index]) slides[index].classList.add('active');\n if (dots[index]) dots[index].classList.add('active');<\/p>\n<p> \/\/ Reset progress bar\n if (progress) {\n progress.classList.remove('active');\n void progress.offsetWidth; \/\/ Force reflow\n progress.classList.add('active');\n }<\/p>\n<p> this.config.currentSlide = index;<\/p>\n<p> \/\/ Reset autoplay\n this.startAutoPlay();\n },<\/p>\n<p> \/\/ Previous slide\n prevSlide() {\n const newIndex = this.config.currentSlide === 0 \n ? this.config.slides.length - 1 \n : this.config.currentSlide - 1;\n this.goToSlide(newIndex);\n },<\/p>\n<p> \/\/ Next slide\n nextSlide() {\n const newIndex = (this.config.currentSlide + 1) % this.config.slides.length;\n this.goToSlide(newIndex);\n },<\/p>\n<p> \/\/ Start autoplay\n startAutoPlay() {\n \/\/ Clear existing interval\n if (this.config.sliderInterval) {\n clearInterval(this.config.sliderInterval);\n }<\/p>\n<p> \/\/ Start progress bar\n const progress = document.getElementById('sliderProgress');\n if (progress) {\n progress.classList.add('active');\n }<\/p>\n<p> \/\/ Set new interval\n this.config.sliderInterval = setInterval(() => {\n this.nextSlide();\n }, this.config.autoPlayDelay);\n },<\/p>\n<p> \/\/ Load news previews\n async loadNewsPreviews() {\n const container = document.getElementById('newsPreviewGrid');\n if (!container) return;<\/p>\n<p> try {\n \/\/ Wait for main data if not loaded\n if (this.config.allPosts.length === 0) {\n await this.loadHeroSlides();\n }<\/p>\n<p> \/\/ Filter only news (no event date)\n const news = this.config.allPosts.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return !eventDate || eventDate === '';\n }).slice(0, 3);<\/p>\n<p> if (news.length === 0) {\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray);\">No news available<\/p>\n<p>';\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> news.forEach((post, index) => {\n const card = this.createPreviewCard(post, 'news', index);\n container.appendChild(card);\n });<\/p>\n<p> } catch (error) {\n console.error('Error loading news:', error);\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: #dc2626;\">Failed to load news<\/p>\n<p>';\n }\n },<\/p>\n<p> \/\/ Load events previews\n async loadEventsPreviews() {\n const container = document.getElementById('eventsPreviewGrid');\n if (!container) return;<\/p>\n<p> try {\n \/\/ Wait for main data if not loaded\n if (this.config.allPosts.length === 0) {\n await this.loadHeroSlides();\n }<\/p>\n<p> \/\/ Filter only events (with event date)\n const events = this.config.allPosts.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return eventDate && eventDate !== '';\n }).slice(0, 3);<\/p>\n<p> if (events.length === 0) {\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray);\">No events available<\/p>\n<p>';\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> events.forEach((post, index) => {\n const card = this.createPreviewCard(post, 'event', index);\n container.appendChild(card);\n });<\/p>\n<p> } catch (error) {\n console.error('Error loading events:', error);\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: #dc2626;\">Failed to load events<\/p>\n<p>';\n }\n },<\/p>\n<p> \/\/ Create preview card\n createPreviewCard(post, type, index) {\n const card = document.createElement('div');\n card.className = 'bifa-preview-card';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> const media = post._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/${type}-placeholder.jpg`;\n const isHot = this.isHotPost(post);<\/p>\n<p> \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 URL\n const postUrl = this.getPostUrl(post);<\/p>\n<p> let contentHtml = '';<\/p>\n<p> if (type === 'news') {\n const date = this.formatDate(post.date);\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 100) + '...';\n const badge = this.getBadgeText(post);<\/p>\n<p> contentHtml = `<\/p>\n<div class=\"bifa-preview-image\" style=\"background-image: url('${imageUrl}')\">\n ${isHot ? '<\/p>\n<div class=\"bifa-hot-indicator\">HOT<\/div>\n<p>' : ''}\n ${badge ? `<span class=\"bifa-preview-badge\">${badge}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-preview-content\">\n<div class=\"bifa-preview-date\">${date}<\/div>\n<h3 class=\"bifa-preview-title\">${post.title.rendered}<\/h3>\n<p class=\"bifa-preview-excerpt\">${excerpt}<\/p>\n<\/p><\/div>\n<p> `;\n } else {\n \/\/ Event card\n const eventDate = post._bifa_event_date;\n const eventEndDate = post._bifa_event_end_date;\n const location = post._bifa_location || 'Location TBA';\n const status = this.getEventStatus(eventDate, eventEndDate);\n const statusText = this.getStatusText(status);\n const dateDisplay = this.formatEventDates(eventDate, eventEndDate);<\/p>\n<p> contentHtml = `<\/p>\n<div class=\"bifa-preview-image\" style=\"background-image: url('${imageUrl}')\">\n ${isHot ? '<\/p>\n<div class=\"bifa-hot-indicator\">HOT<\/div>\n<p>' : ''}\n ${status !== 'unknown' ? `<span class=\"bifa-preview-status ${status}\">${statusText}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-preview-content\">\n<div class=\"bifa-preview-date\">${dateDisplay}<\/div>\n<h3 class=\"bifa-preview-title\">${post.title.rendered}<\/h3>\n<p class=\"bifa-preview-excerpt\">\ud83d\udccd ${location}<\/p>\n<\/p><\/div>\n<p> `;\n }<\/p>\n<p> card.innerHTML = contentHtml;<\/p>\n<p> \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u043d\u043e\u0432\u043e\u0441\u0442\u044c\/\u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c URL\n card.addEventListener('click', () => {\n window.location.href = postUrl;\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Format event dates\n formatEventDates(startDate, endDate) {\n if (!startDate) return '';<\/p>\n<p> const start = this.formatDate(startDate);<\/p>\n<p> if (endDate && startDate !== endDate) {\n const end = this.formatDate(endDate);\n return `${start} - ${end}`;\n }<\/p>\n<p> return start;\n },<\/p>\n<p> \/\/ Get event status\n getEventStatus(startDate, endDate) {\n if (!startDate) return 'unknown';<\/p>\n<p> const now = new Date();\n const start = new Date(startDate);\n const end = endDate ? new Date(endDate) : start;<\/p>\n<p> now.setHours(0, 0, 0, 0);\n start.setHours(0, 0, 0, 0);\n end.setHours(23, 59, 59, 999);<\/p>\n<p> if (now > end) {\n return 'past';\n } else if (now >= start && now <= end) {\n return 'ongoing';\n } else {\n return 'upcoming';\n }\n },\n\n \/\/ Get status text\n getStatusText(status) {\n switch(status) {\n case 'upcoming': return 'Upcoming';\n case 'ongoing': return 'Live Now';\n case 'past': return 'Past Event';\n default: return '';\n }\n },\n\n \/\/ Get badge text\n getBadgeText(post) {\n if (post._bifa_badge_text) {\n return post._bifa_badge_text;\n }\n \n const category = post._embedded?.['wp:term']?.[0]?.[0];\n return category?.name || '';\n },\n\n \/\/ Format date\n formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n },\n\n \/\/ Strip HTML\n stripHtml(html) {\n const temp = document.createElement('div');\n temp.innerHTML = html;\n return temp.textContent || temp.innerText || '';\n }\n};\n\n\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaHub.init();\n});\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Events Calendar<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= OFFICIAL BIFA+ BRAND VARIABLES ========= *\/\n:root {\n \/* Official BIFA+ Colors *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* Official BIFA+ Typography *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* Premium Effects *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* Reset *\/\n.bifa-calendar-wrapper * {\n box-sizing: border-box;\n}<\/p>\n<p>\/* ========= MAIN CALENDAR WRAPPER ========= *\/\n.bifa-calendar-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n padding: 60px 0 80px 0;\n background: transparent;\n overflow: hidden;\n font-family: var(--bifa-font-body);\n}<\/p>\n<p>\/* ========= CONTENT CONTAINER ========= *\/\n.bifa-calendar-content {\n position: relative;\n z-index: 10;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>\/* ========= SECTION HEADER ========= *\/\n.bifa-calendar-header {\n text-align: center;\n margin-bottom: 50px;\n animation: fadeInUp 1.2s ease;\n}<\/p>\n<p>.bifa-title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-gold-line {\n width: 80px;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n animation: lineGlow 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes lineGlow {\n 0%, 100% { opacity: 0.7; }\n 50% { opacity: 1; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }\n}<\/p>\n<p>.bifa-calendar-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 2px;\n position: relative;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-calendar-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-calendar-title:hover {\n transform: translateY(-3px);\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-calendar-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-calendar-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 1.5px;\n margin: 0 0 15px 0;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-calendar-description {\n max-width: 700px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\n line-height: 1.7;\n color: var(--bifa-gray);\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= NAVIGATION ========= *\/\n.bifa-calendar-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 40px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n padding: 25px 35px;\n border-radius: 25px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n animation: slideInDown 1.2s ease 0.2s both;\n}<\/p>\n<p>.bifa-nav-btn {\n background: transparent;\n border: 2px solid rgba(212, 175, 55, 0.3);\n color: var(--bifa-deep-navy);\n width: 55px;\n height: 55px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-nav-btn::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-nav-btn:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-nav-btn:hover {\n border-color: transparent;\n color: var(--bifa-deep-navy);\n transform: scale(1.1);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-nav-btn svg {\n width: 24px;\n height: 24px;\n stroke-width: 3;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-nav-btn:hover svg {\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-current-month {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.8rem, 3vw, 2.2rem);\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin: 0;\n text-align: center;\n position: relative;\n}<\/p>\n<p>.bifa-current-month::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 2px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 2px;\n}<\/p>\n<p>\/* ========= CALENDAR GRID ========= *\/\n.bifa-calendar-grid {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 30px;\n padding: 40px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n animation: slideInUp 1.2s ease 0.4s both;\n}<\/p>\n<p>.bifa-weekdays {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 15px;\n margin-bottom: 25px;\n padding-bottom: 20px;\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-weekday {\n text-align: center;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.9rem;\n color: var(--bifa-deep-navy);\n text-transform: uppercase;\n letter-spacing: 1.5px;\n padding: 12px 0;\n position: relative;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-weekday::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 2px;\n background: var(--bifa-heritage-gold);\n border-radius: 2px;\n opacity: 0.5;\n}<\/p>\n<p>.bifa-calendar-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 12px;\n}<\/p>\n<p>.bifa-calendar-day {\n aspect-ratio: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n background: rgba(255, 255, 255, 0.8);\n border: 2px solid transparent;\n border-radius: 18px;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n padding: 10px;\n overflow: hidden;\n}<\/p>\n<p>.bifa-calendar-day::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 18px;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-calendar-day:hover::before {\n opacity: 0.1;\n}<\/p>\n<p>.bifa-calendar-day:hover {\n transform: translateY(-5px);\n box-shadow: var(--bifa-shadow-hover);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-calendar-day.other-month {\n opacity: 0.3;\n cursor: default;\n}<\/p>\n<p>.bifa-calendar-day.other-month:hover {\n transform: none;\n box-shadow: none;\n border-color: transparent;\n}<\/p>\n<p>.bifa-calendar-day.other-month:hover::before {\n opacity: 0;\n}<\/p>\n<p>.bifa-calendar-day.today {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n font-weight: 800;\n box-shadow: var(--bifa-shadow-gold);\n border-color: transparent;\n}<\/p>\n<p>.bifa-calendar-day.today::before {\n opacity: 0;\n}<\/p>\n<p>.bifa-calendar-day.has-events {\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.05) 0%, \n rgba(29, 97, 67, 0.08) 100%);\n border-color: rgba(29, 97, 67, 0.3);\n}<\/p>\n<p>\/* Event day background slider *\/\n.bifa-day-bg-slider {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 16px;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.bifa-day-bg-track {\n display: flex;\n width: 100%;\n height: 100%;\n transition: transform 0.5s ease;\n}<\/p>\n<p>.bifa-day-bg-slide {\n flex: 0 0 100%;\n width: 100%;\n height: 100%;\n position: relative;\n}<\/p>\n<p>.bifa-day-bg-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: brightness(0.7) saturate(1.2);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-calendar-day:hover .bifa-day-bg-image {\n filter: brightness(0.5) saturate(1.4);\n transform: scale(1.05);\n}<\/p>\n<p>\/* Content overlay *\/\n.bifa-day-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.3) 0%, \n rgba(10, 31, 68, 0.1) 50%, \n rgba(29, 97, 67, 0.2) 100%);\n z-index: 1;\n border-radius: 16px;\n}<\/p>\n<p>.bifa-day-content {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n}<\/p>\n<p>.bifa-day-number {\n font-family: var(--bifa-font-heading);\n font-size: 1.4rem;\n font-weight: 800;\n line-height: 1;\n color: var(--bifa-deep-navy);\n text-shadow: 2px 2px 4px rgba(255,255,255,0.8);\n margin-top: 4px;\n}<\/p>\n<p>.bifa-calendar-day.has-events .bifa-day-number {\n color: var(--bifa-bright-white);\n text-shadow: 2px 2px 4px rgba(0,0,0,0.7);\n}<\/p>\n<p>.bifa-calendar-day.today .bifa-day-number {\n color: var(--bifa-deep-navy);\n text-shadow: 2px 2px 4px rgba(255,255,255,0.5);\n}<\/p>\n<p>.bifa-event-count {\n font-family: var(--bifa-font-body);\n font-size: 0.7rem;\n color: var(--bifa-bright-white);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\n padding: 2px 8px;\n border-radius: 12px;\n text-shadow: none;\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\n margin-bottom: 4px;\n letter-spacing: 0.5px;\n}<\/p>\n<p>\/* Slider dots for multiple events *\/\n.bifa-day-slider-dots {\n position: absolute;\n bottom: 4px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 3px;\n z-index: 3;\n}<\/p>\n<p>.bifa-day-slider-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: rgba(255,255,255,0.5);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-day-slider-dot.active {\n background: var(--bifa-heritage-gold);\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);\n}<\/p>\n<p>\/* ========= SELECTED EVENTS PANEL ========= *\/\n.bifa-selected-events {\n margin-top: 40px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 25px;\n padding: 35px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n display: none;\n animation: slideInUp 0.5s ease;\n}<\/p>\n<p>.bifa-selected-events.show {\n display: block;\n}<\/p>\n<p>.bifa-events-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n padding-bottom: 20px;\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-events-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0;\n}<\/p>\n<p>.bifa-close-events {\n background: transparent;\n border: 2px solid rgba(212, 175, 55, 0.3);\n font-size: 1.5rem;\n color: var(--bifa-gray);\n cursor: pointer;\n width: 45px;\n height: 45px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-close-events::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, #ff4757, #ff3742);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-close-events:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-close-events:hover {\n color: var(--bifa-bright-white);\n border-color: transparent;\n transform: rotate(90deg) scale(1.1);\n}<\/p>\n<p>.bifa-events-list {\n display: flex;\n flex-direction: column;\n gap: 25px;\n}<\/p>\n<p>\/* ========= EVENT ITEMS ========= *\/\n.bifa-event-item {\n background: rgba(255, 255, 255, 0.9);\n border: 2px solid rgba(212, 175, 55, 0.1);\n border-radius: 20px;\n padding: 0;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n display: flex;\n gap: 25px;\n min-height: 130px;\n}<\/p>\n<p>.bifa-event-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-event-item:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-event-item:hover {\n transform: translateX(10px);\n box-shadow: var(--bifa-shadow-hover);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-event-image {\n width: 150px;\n height: 130px;\n flex-shrink: 0;\n background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);\n overflow: hidden;\n position: relative;\n border-radius: 20px 0 0 20px;\n}<\/p>\n<p>.bifa-event-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-event-item:hover .bifa-event-image img {\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-event-badge {\n position: absolute;\n top: 12px;\n left: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 5px 12px;\n border-radius: 15px;\n font-family: var(--bifa-font-heading);\n font-size: 0.7rem;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}<\/p>\n<p>.bifa-event-details {\n flex: 1;\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}<\/p>\n<p>.bifa-event-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.3rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 12px;\n line-height: 1.3;\n}<\/p>\n<p>.bifa-event-time {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n color: var(--bifa-heritage-gold);\n font-weight: 600;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}<\/p>\n<p>.bifa-event-location {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: var(--bifa-gray);\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n}<\/p>\n<p>.bifa-event-status {\n font-family: var(--bifa-font-heading);\n font-size: 0.8rem;\n padding: 5px 15px;\n border-radius: 20px;\n display: inline-block;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n background: var(--bifa-civic-green);\n color: var(--bifa-bright-white);\n}<\/p>\n<p>.bifa-event-status.urgent {\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>.bifa-no-events {\n text-align: center;\n padding: 60px;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-no-events-icon {\n font-size: 3rem;\n margin-bottom: 15px;\n filter: grayscale(1);\n}<\/p>\n<p>\/* ========= CALENDAR LEGEND ========= *\/\n.bifa-calendar-legend {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 30px;\n margin-top: 40px;\n padding: 25px;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.05);\n animation: fadeInUp 1.2s ease 0.8s both;\n}<\/p>\n<p>.bifa-legend-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: var(--bifa-gray);\n font-weight: 500;\n}<\/p>\n<p>.bifa-legend-dot {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}<\/p>\n<p>.bifa-legend-dot.today {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n}<\/p>\n<p>.bifa-legend-dot.has-event {\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\n}<\/p>\n<p>.bifa-legend-dot.selected {\n background: rgba(212, 175, 55, 0.2);\n border: 3px solid var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* ========= LOADING STATE ========= *\/\n.bifa-loading {\n text-align: center;\n padding: 80px;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-spinner {\n width: 50px;\n height: 50px;\n border: 3px solid rgba(212, 175, 55, 0.2);\n border-top: 3px solid var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: bifaSpin 1s linear infinite;\n margin: 0 auto 25px;\n}<\/p>\n<p>@keyframes bifaSpin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes slideInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE DESIGN ========= *\/\n@media (max-width: 768px) {\n .bifa-calendar-wrapper {\n padding: 40px 0 60px 0;\n }<\/p>\n<p> .bifa-calendar-content {\n padding: 0 15px;\n }<\/p>\n<p> .bifa-calendar-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-calendar-grid {\n padding: 25px;\n }<\/p>\n<p> .bifa-weekday {\n font-size: 0.75rem;\n padding: 8px 0;\n }<\/p>\n<p> .bifa-day-number {\n font-size: 1.1rem;\n }<\/p>\n<p> .bifa-event-count {\n display: none;\n }<\/p>\n<p> .bifa-event-item {\n flex-direction: column;\n min-height: auto;\n }<\/p>\n<p> .bifa-event-image {\n width: 100%;\n height: 180px;\n border-radius: 20px 20px 0 0;\n }<\/p>\n<p> .bifa-event-details {\n padding: 20px;\n }<\/p>\n<p> .bifa-calendar-nav {\n padding: 20px 25px;\n }<\/p>\n<p> .bifa-nav-btn {\n width: 50px;\n height: 50px;\n }<\/p>\n<p> .bifa-current-month {\n font-size: 1.5rem;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-calendar-wrapper {\n padding: 30px 0 50px 0;\n }<\/p>\n<p> .bifa-calendar-content {\n padding: 0 10px;\n }<\/p>\n<p> .bifa-calendar-title {\n font-size: 1.8rem;\n }<\/p>\n<p> .bifa-calendar-subtitle {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-calendar-grid {\n padding: 20px;\n }<\/p>\n<p> .bifa-weekday {\n font-size: 0.7rem;\n }<\/p>\n<p> .bifa-day-number {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-calendar-nav {\n padding: 18px 20px;\n }<\/p>\n<p> .bifa-nav-btn {\n width: 45px;\n height: 45px;\n }<\/p>\n<p> .bifa-current-month {\n font-size: 1.3rem;\n }<\/p>\n<p> .bifa-legend-item {\n font-size: 0.85rem;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-calendar-wrapper\">\n <\/p>\n<div class=\"bifa-calendar-bg\">\n<div class=\"calendar-shape shape-calendar-1\"><\/div>\n<div class=\"calendar-shape shape-calendar-2\"><\/div>\n<div class=\"calendar-shape shape-calendar-3\"><\/div>\n<p> \n <\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-content\">\n <\/p>\n<div class=\"bifa-calendar-header\">\n<div class=\"bifa-title-decoration\">\n<div class=\"bifa-gold-line\"><\/div>\n<h2 class=\"bifa-calendar-title\">BIFA+ Events Calendar<\/h2>\n<div class=\"bifa-gold-line\"><\/div>\n<\/p><\/div>\n<p class=\"bifa-calendar-subtitle\">Upcoming International Events & Initiatives<\/p>\n<p class=\"bifa-calendar-description\">\n Explore our comprehensive schedule of international football events, diplomatic meetings,<br \/>\n youth programs, and alliance initiatives designed to foster global cooperation through sport.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-nav\">\n <button class=\"bifa-nav-btn\" id=\"bifaPrevMonth\" aria-label=\"Previous Month\"><br \/>\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M15 18l-6-6 6-6\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<h3 class=\"bifa-current-month\" id=\"bifaCurrentMonth\">Loading…<\/h3>\n<p> <button class=\"bifa-nav-btn\" id=\"bifaNextMonth\" aria-label=\"Next Month\"><br \/>\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 18l6-6-6-6\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-grid\">\n<div class=\"bifa-weekdays\" id=\"bifaWeekdays\"><\/div>\n<div class=\"bifa-calendar-days\" id=\"bifaCalendarDays\">\n<div class=\"bifa-loading\">\n<div class=\"bifa-spinner\"><\/div>\n<div>Loading Events Calendar…<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-selected-events\" id=\"bifaSelectedEvents\">\n<div class=\"bifa-events-header\">\n<h4 class=\"bifa-events-title\" id=\"bifaEventsTitle\">\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/h4>\n<p> <button class=\"bifa-close-events\" id=\"bifaCloseEvents\" aria-label=\"Close Events\">\u00d7<\/button>\n <\/div>\n<div class=\"bifa-events-list\" id=\"bifaEventsList\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-legend\">\n<div class=\"bifa-legend-item\">\n <span class=\"bifa-legend-dot today\"><\/span><br \/>\n <span>Today<\/span>\n <\/div>\n<div class=\"bifa-legend-item\">\n <span class=\"bifa-legend-dot has-event\"><\/span><br \/>\n <span>Has Events<\/span>\n <\/div>\n<div class=\"bifa-legend-item\">\n <span class=\"bifa-legend-dot selected\"><\/span><br \/>\n <span>Selected Date<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n(function() {\n 'use strict';<\/p>\n<p> \/\/ BIFA+ Calendar System\n let bifaCurrentDate = new Date();\n let bifaSelectedDate = null;\n let bifaEventsData = [];<\/p>\n<p> \/\/ Utility Functions\n function formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n const options = { month: 'long', day: 'numeric', year: 'numeric' };\n return date.toLocaleDateString('en-US', options);\n }<\/p>\n<p> function formatTime(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n const options = { hour: '2-digit', minute: '2-digit' };\n return date.toLocaleTimeString('en-US', options);\n }<\/p>\n<p> function getMonthYearString(date) {\n const options = { month: 'long', year: 'numeric' };\n return date.toLocaleDateString('en-US', options);\n }<\/p>\n<p> function getDaysInMonth(date) {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\n }<\/p>\n<p> function getFirstDayOfMonth(date) {\n return new Date(date.getFullYear(), date.getMonth(), 1).getDay();\n }<\/p>\n<p> function isSameDay(date1, date2) {\n return date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate();\n }<\/p>\n<p> function hasEventsOnDate(date) {\n const dateStr = date.toISOString().split('T')[0];\n return bifaEventsData.some(event => {\n const eventDate = event._bifa_event_date;\n if (!eventDate) return false;<\/p>\n<p> const eventStartDate = new Date(eventDate);\n const eventEndDate = event._bifa_event_end_date;\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;<\/p>\n<p> const checkDate = new Date(dateStr);\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \n checkDate <= new Date(endDate.toISOString().split('T')[0]);\n });\n }\n \n function getEventsOnDate(date) {\n const dateStr = date.toISOString().split('T')[0];\n return bifaEventsData.filter(event => {\n const eventDate = event._bifa_event_date;\n if (!eventDate) return false;<\/p>\n<p> const eventStartDate = new Date(eventDate);\n const eventEndDate = event._bifa_event_end_date;\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;<\/p>\n<p> const checkDate = new Date(dateStr);\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \n checkDate <= new Date(endDate.toISOString().split('T')[0]);\n });\n }\n \n \/\/ Create animated background particles\n function createParticles() {\n const particlesContainer = document.querySelector('.bifa-calendar-bg');\n const particleCount = 12;\n\n for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'calendar-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 8) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n }\n \n \/\/ Create weekdays header\n function createWeekdays() {\n const weekdaysContainer = document.getElementById('bifaWeekdays');\n const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n \n weekdaysContainer.innerHTML = '';\n days.forEach(day => {\n const dayElement = document.createElement('div');\n dayElement.className = 'bifa-weekday';\n dayElement.textContent = day;\n weekdaysContainer.appendChild(dayElement);\n });\n }<\/p>\n<p> \/\/ Render calendar\n function renderCalendar() {\n const calendarDays = document.getElementById('bifaCalendarDays');\n const currentMonthElement = document.getElementById('bifaCurrentMonth');<\/p>\n<p> currentMonthElement.textContent = getMonthYearString(bifaCurrentDate);\n calendarDays.innerHTML = '';<\/p>\n<p> const daysInMonth = getDaysInMonth(bifaCurrentDate);\n const firstDay = getFirstDayOfMonth(bifaCurrentDate);\n const today = new Date();<\/p>\n<p> \/\/ Previous month days\n const prevMonthDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth() - 1);\n const daysInPrevMonth = getDaysInMonth(prevMonthDate);<\/p>\n<p> for (let i = firstDay - 1; i >= 0; i--) {\n const dayElement = document.createElement('div');\n dayElement.className = 'bifa-calendar-day other-month';<\/p>\n<p> const dayContent = document.createElement('div');\n dayContent.className = 'bifa-day-content';<\/p>\n<p> const dayNumber = document.createElement('div');\n dayNumber.className = 'bifa-day-number';\n dayNumber.textContent = daysInPrevMonth - i;\n dayContent.appendChild(dayNumber);<\/p>\n<p> dayElement.appendChild(dayContent);\n calendarDays.appendChild(dayElement);\n }<\/p>\n<p> \/\/ Current month days\n for (let day = 1; day <= daysInMonth; day++) {\n const dayDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth(), day);\n const dayElement = document.createElement('div');\n let classes = ['bifa-calendar-day'];\n \n if (isSameDay(dayDate, today)) {\n classes.push('today');\n }\n \n if (hasEventsOnDate(dayDate)) {\n classes.push('has-events');\n }\n \n dayElement.className = classes.join(' ');\n \n if (hasEventsOnDate(dayDate)) {\n const events = getEventsOnDate(dayDate);\n const eventsWithImages = events.filter(event => \n event._embedded?.['wp:featuredmedia']?.[0]?.source_url\n );<\/p>\n<p> if (eventsWithImages.length > 0) {\n \/\/ Create background image slider\n const bgSlider = document.createElement('div');\n bgSlider.className = 'bifa-day-bg-slider';<\/p>\n<p> const bgTrack = document.createElement('div');\n bgTrack.className = 'bifa-day-bg-track';<\/p>\n<p> eventsWithImages.forEach(event => {\n const media = event._embedded['wp:featuredmedia'][0];\n const slide = document.createElement('div');\n slide.className = 'bifa-day-bg-slide';<\/p>\n<p> const bgImage = document.createElement('img');\n bgImage.className = 'bifa-day-bg-image';\n bgImage.src = media.source_url;\n bgImage.alt = event.title.rendered;\n bgImage.loading = 'lazy';<\/p>\n<p> slide.appendChild(bgImage);\n bgTrack.appendChild(slide);\n });<\/p>\n<p> bgSlider.appendChild(bgTrack);\n dayElement.appendChild(bgSlider);<\/p>\n<p> \/\/ Add overlay\n const overlay = document.createElement('div');\n overlay.className = 'bifa-day-overlay';\n dayElement.appendChild(overlay);<\/p>\n<p> \/\/ Create slider dots if multiple images\n if (eventsWithImages.length > 1) {\n const dotsContainer = document.createElement('div');\n dotsContainer.className = 'bifa-day-slider-dots';<\/p>\n<p> for (let i = 0; i < eventsWithImages.length; i++) {\n const dot = document.createElement('div');\n dot.className = `bifa-day-slider-dot ${i === 0 ? 'active' : ''}`;\n dotsContainer.appendChild(dot);\n }\n \n dayElement.appendChild(dotsContainer);\n \n \/\/ Auto-rotate slides\n let currentSlide = 0;\n setInterval(() => {\n currentSlide = (currentSlide + 1) % eventsWithImages.length;\n bgTrack.style.transform = `translateX(-${currentSlide * 100}%)`;<\/p>\n<p> \/\/ Update dots\n dotsContainer.querySelectorAll('.bifa-day-slider-dot').forEach((dot, index) => {\n dot.classList.toggle('active', index === currentSlide);\n });\n }, 3000);\n }\n }\n }<\/p>\n<p> \/\/ Create day content\n const dayContent = document.createElement('div');\n dayContent.className = 'bifa-day-content';<\/p>\n<p> \/\/ Day number\n const dayNumber = document.createElement('div');\n dayNumber.className = 'bifa-day-number';\n dayNumber.textContent = day;\n dayContent.appendChild(dayNumber);<\/p>\n<p> if (hasEventsOnDate(dayDate)) {\n const events = getEventsOnDate(dayDate);<\/p>\n<p> \/\/ Event count\n const eventCount = document.createElement('div');\n eventCount.className = 'bifa-event-count';\n eventCount.textContent = `${events.length} event${events.length > 1 ? 's' : ''}`;\n dayContent.appendChild(eventCount);\n }<\/p>\n<p> dayElement.appendChild(dayContent);<\/p>\n<p> if (!dayElement.classList.contains('other-month')) {\n dayElement.addEventListener('click', () => selectDate(dayDate));\n }<\/p>\n<p> calendarDays.appendChild(dayElement);\n }<\/p>\n<p> \/\/ Next month days\n const totalCells = calendarDays.children.length;\n const remainingCells = 42 - totalCells;\n for (let i = 1; i <= remainingCells; i++) {\n const dayElement = document.createElement('div');\n dayElement.className = 'bifa-calendar-day other-month';\n \n const dayContent = document.createElement('div');\n dayContent.className = 'bifa-day-content';\n \n const dayNumber = document.createElement('div');\n dayNumber.className = 'bifa-day-number';\n dayNumber.textContent = i;\n dayContent.appendChild(dayNumber);\n \n dayElement.appendChild(dayContent);\n calendarDays.appendChild(dayElement);\n }\n }\n \n \/\/ Select date\n function selectDate(date) {\n bifaSelectedDate = date;\n showSelectedDayEvents(date);\n }\n \n \/\/ Show selected day events\n function showSelectedDayEvents(date) {\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\n const eventsTitle = document.getElementById('bifaEventsTitle');\n const eventsList = document.getElementById('bifaEventsList');\n \n eventsTitle.textContent = `Events on ${formatDate(date)}`;\n \n const events = getEventsOnDate(date);\n \n eventsList.innerHTML = '';\n \n if (events.length === 0) {\n eventsList.innerHTML = `\n \n\n<div class=\"bifa-no-events\">\n<div class=\"bifa-no-events-icon\">\ud83d\udcc5<\/div>\n<div>No events scheduled for this date<\/div>\n<\/p><\/div>\n<p> `;\n } else {\n events.forEach(event => {\n \/\/ Get event image\n const media = event._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || 'https:\/\/via.placeholder.com\/320x180\/0A1F44\/D4AF37?text=BIFA+Event';<\/p>\n<p> \/\/ Get additional data\n const badgeText = event._bifa_badge_text || 'Event';\n const priority = event._bifa_priority || 'normal';<\/p>\n<p> \/\/ Create event item\n const eventElement = document.createElement('div');\n eventElement.className = 'bifa-event-item';<\/p>\n<p> \/\/ Image container\n const imageContainer = document.createElement('div');\n imageContainer.className = 'bifa-event-image';<\/p>\n<p> const img = document.createElement('img');\n img.src = imageUrl;\n img.alt = event.title.rendered;\n img.loading = 'lazy';\n imageContainer.appendChild(img);<\/p>\n<p> \/\/ Badge\n if (badgeText && badgeText.trim()) {\n const badge = document.createElement('div');\n badge.className = 'bifa-event-badge';\n badge.textContent = badgeText;\n imageContainer.appendChild(badge);\n }<\/p>\n<p> \/\/ Details container\n const detailsContainer = document.createElement('div');\n detailsContainer.className = 'bifa-event-details';<\/p>\n<p> \/\/ Title\n const title = document.createElement('div');\n title.className = 'bifa-event-title';\n title.textContent = event.title.rendered;\n detailsContainer.appendChild(title);<\/p>\n<p> \/\/ Time\n if (event._bifa_event_date) {\n const timeElement = document.createElement('div');\n timeElement.className = 'bifa-event-time';\n timeElement.innerHTML = `\ud83d\udd50 ${formatTime(event._bifa_event_date)}`;\n detailsContainer.appendChild(timeElement);\n }<\/p>\n<p> \/\/ Location\n if (event._bifa_location) {\n const locationElement = document.createElement('div');\n locationElement.className = 'bifa-event-location';\n locationElement.innerHTML = `\ud83d\udccd ${event._bifa_location}`;\n detailsContainer.appendChild(locationElement);\n }<\/p>\n<p> \/\/ Status\n const statusElement = document.createElement('div');\n statusElement.className = `bifa-event-status ${priority}`;\n statusElement.textContent = priority === 'urgent' ? 'Priority Event' : 'Regular Event';\n detailsContainer.appendChild(statusElement);<\/p>\n<p> \/\/ Assemble event item\n eventElement.appendChild(imageContainer);\n eventElement.appendChild(detailsContainer);<\/p>\n<p> \/\/ Add click handler\n eventElement.addEventListener('click', () => {\n window.open(event.link, '_blank');\n });<\/p>\n<p> eventsList.appendChild(eventElement);\n });\n }<\/p>\n<p> selectedEventsContainer.classList.add('show');\n selectedEventsContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }<\/p>\n<p> \/\/ Close selected day events\n function closeSelectedDayEvents() {\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\n selectedEventsContainer.classList.remove('show');\n bifaSelectedDate = null;\n }<\/p>\n<p> \/\/ Load events from API\n function loadEvents() {\n const apiUrl = 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events?_embed&per_page=100&acf_format=standard';<\/p>\n<p> fetch(apiUrl)\n .then(response => {\n if (!response.ok) throw new Error('Network response was not ok');\n return response.json();\n })\n .then(posts => {\n \/\/ Filter only events with dates\n const events = posts.filter(post => {\n const itemTypes = post.bifa_item_type || [];\n const classNames = post.class_list || [];<\/p>\n<p> \/\/ Check taxonomy ID (event = 3)\n const hasEventId = itemTypes.some(typeId => typeId == 3 || typeId == 'event');<\/p>\n<p> \/\/ Check CSS classes\n const hasEventClass = classNames.some(className => \n className.includes('bifa_item_type-event')\n );<\/p>\n<p> \/\/ Check for event date\n const hasEventDate = post._bifa_event_date;<\/p>\n<p> return (hasEventId || hasEventClass) && hasEventDate;\n });<\/p>\n<p> bifaEventsData = events;\n createWeekdays();\n renderCalendar();\n })\n .catch(err => {\n console.error('Error loading events:', err);\n const calendarDays = document.getElementById('bifaCalendarDays');\n calendarDays.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 60px 20px; color: #dc2626;\">\n<div>Error loading events. Please try again later.<\/div>\n<\/p><\/div>\n<p> `;\n });\n }<\/p>\n<p> \/\/ Initialize calendar\n function initCalendar() {\n \/\/ Create animated background\n createParticles();<\/p>\n<p> \/\/ Navigation event listeners\n document.getElementById('bifaPrevMonth').addEventListener('click', () => {\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() - 1);\n renderCalendar();\n });<\/p>\n<p> document.getElementById('bifaNextMonth').addEventListener('click', () => {\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() + 1);\n renderCalendar();\n });<\/p>\n<p> \/\/ Close events handler\n document.getElementById('bifaCloseEvents').addEventListener('click', closeSelectedDayEvents);<\/p>\n<p> \/\/ Load events\n loadEvents();\n }<\/p>\n<p> \/\/ Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initCalendar);\n } else {\n initCalendar();\n }\n})();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"ru\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Media Gallery<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* \u0412\u0421\u0415 \u0412\u0410\u0428\u0418 \u0421\u0422\u0418\u041b\u0418 \u041e\u0421\u0422\u0410\u0412\u041b\u042f\u0415\u041c \u0411\u0415\u0417 \u0418\u0417\u041c\u0415\u041d\u0415\u041d\u0418\u0419 - \u041e\u041d\u0418 \u0418\u0414\u0415\u0410\u041b\u042c\u041d\u042b *\/\n.bifa-media-wrapper {\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>.bifa-media-wrapper * { box-sizing: border-box; }<\/p>\n<p>.bifa-media-wrapper {\n background: #FFFFFF;\n padding: 100px 0;\n margin: 0 calc(-50vw + 50%);\n width: 100vw;\n position: relative;\n}<\/p>\n<p>.media-bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n top: 0;\n left: 0;\n pointer-events: none;\n}<\/p>\n<p>.media-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatMedia 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n}<\/p>\n<p>@keyframes floatMedia {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.2; }\n 90% { opacity: 0.2; }\n 100% {\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>.bifa-media-main {\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.bifa-media-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>.bifa-section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n}<\/p>\n<p>.bifa-section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n}<\/p>\n<p>.bifa-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n}<\/p>\n<p>.bifa-section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n color: #4a5568;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n}<\/p>\n<p>.bifa-media-filters {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 50px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n padding: 25px;\n border-radius: 25px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n animation: slideInDown 1.2s ease 0.2s both;\n}<\/p>\n<p>.bifa-filter-btn {\n padding: 12px 28px;\n background: transparent;\n border: 2px solid rgba(212, 175, 55, 0.3);\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-filter-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-filter-btn:hover::before,\n.bifa-filter-btn.active::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-filter-btn:hover,\n.bifa-filter-btn.active {\n color: var(--bifa-deep-navy);\n border-color: transparent;\n transform: translateY(-3px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-media-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 30px;\n margin-bottom: 60px;\n}<\/p>\n<p>.bifa-stat-card {\n background: #FFFFFF;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n padding: 30px;\n text-align: center;\n opacity: 0;\n animation: fadeInUpMedia 1.2s ease forwards;\n}<\/p>\n<p>.bifa-stat-card:nth-child(1) { animation-delay: 0.1s; }\n.bifa-stat-card:nth-child(2) { animation-delay: 0.2s; }\n.bifa-stat-card:nth-child(3) { animation-delay: 0.3s; }\n.bifa-stat-card:nth-child(4) { animation-delay: 0.4s; }<\/p>\n<p>.bifa-stat-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-stat-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-stat-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-stat-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n font-size: 1.8rem;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-stat-number {\n font-family: var(--bifa-font-heading);\n font-size: 2.5rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 5px;\n}<\/p>\n<p>.bifa-stat-label {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n color: var(--bifa-gray);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.bifa-media-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 50px;\n}<\/p>\n<p>.bifa-media-item {\n background: #FFFFFF;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n opacity: 0;\n animation: fadeInUpMedia 1.2s ease forwards;\n}<\/p>\n<p>.bifa-media-item:nth-child(1) { animation-delay: 0.1s; }\n.bifa-media-item:nth-child(2) { animation-delay: 0.2s; }\n.bifa-media-item:nth-child(3) { animation-delay: 0.3s; }\n.bifa-media-item:nth-child(4) { animation-delay: 0.4s; }\n.bifa-media-item:nth-child(5) { animation-delay: 0.5s; }\n.bifa-media-item:nth-child(6) { animation-delay: 0.6s; }<\/p>\n<p>.bifa-media-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-media-item:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-media-item:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-media-image {\n position: relative;\n height: 200px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-media-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 60%, \n rgba(10, 31, 68, 0.8) 100%\n );\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-media-item:hover .bifa-media-image::before {\n opacity: 0.9;\n}<\/p>\n<p>.bifa-media-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n}<\/p>\n<p>.bifa-media-item:hover .bifa-media-image img {\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-featured-indicator {\n position: absolute;\n top: 15px;\n left: 15px;\n background: linear-gradient(135deg, #ff4757, #ff6348);\n color: white;\n padding: 6px 16px;\n border-radius: 20px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: 6px;\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n animation: featuredPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes featuredPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-featured-indicator::before {\n content: '\u2b50';\n font-size: 12px;\n}<\/p>\n<p>.bifa-media-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-media-content {\n padding: 25px;\n}<\/p>\n<p>.bifa-media-date {\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}<\/p>\n<p>.bifa-media-date::before {\n content: '';\n width: 5px;\n height: 5px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-media-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 15px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-media-item:hover .bifa-media-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-media-caption {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: #4a5568;\n line-height: 1.6;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 15px;\n}<\/p>\n<p>.bifa-media-meta {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n padding-top: 15px;\n border-top: 1px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-media-type {\n display: flex;\n align-items: center;\n gap: 5px;\n font-weight: 600;\n}<\/p>\n<p>.bifa-media-photographer {\n display: flex;\n align-items: center;\n gap: 5px;\n}<\/p>\n<p>.bifa-view-all-container {\n text-align: center;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-view-all-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-view-all-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-view-all-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-view-all-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>.bifa-media-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 400px;\n}<\/p>\n<p>.bifa-media-loader {\n width: 60px;\n height: 60px;\n border: 4px solid rgba(212, 175, 55, 0.2);\n border-top-color: var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: spinMedia 1s linear infinite;\n}<\/p>\n<p>@keyframes spinMedia {\n to { transform: rotate(360deg); }\n}<\/p>\n<p>@keyframes fadeInUpMedia {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes slideInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@media (max-width: 1200px) {\n .bifa-media-grid {\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n .bifa-media-wrapper {\n padding: 70px 0;\n }\n .bifa-media-stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 25px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-media-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }\n .bifa-media-wrapper {\n padding: 50px 0;\n }\n .bifa-media-filters {\n padding: 20px;\n gap: 10px;\n }\n .bifa-filter-btn {\n padding: 8px 20px;\n font-size: 0.8rem;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-section-title {\n font-size: 2rem;\n }\n .bifa-media-stats {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n .bifa-stat-number {\n font-size: 2rem;\n }\n .bifa-media-content {\n padding: 20px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div id=\"bifa-media-section\" class=\"bifa-media-wrapper\">\n <\/p>\n<div class=\"media-bg-animation\">\n \n <\/div>\n<p> <br \/>\n <main class=\"bifa-media-main\"><\/p>\n<div class=\"bifa-media-container\">\n <\/p>\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Media Gallery<\/h2>\n<p class=\"bifa-section-subtitle\">Visual stories of BIFA+ global initiatives and achievements<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-media-filters\">\n <button class=\"bifa-filter-btn active\" data-filter=\"all\">All Media<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"photo\">Photos<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"video\">Videos<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"gallery\">Galleries<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"infographic\">Infographics<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"bifa-media-stats\">\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83d\udcf8<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Total Media<\/div>\n<\/p><\/div>\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83c\udfa5<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Videos<\/div>\n<\/p><\/div>\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83d\uddbc\ufe0f<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Photo Galleries<\/div>\n<\/p><\/div>\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83d\udcca<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Infographics<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"mediaGrid\" class=\"bifa-media-grid\">\n<div class=\"bifa-media-loading\">\n<div class=\"bifa-media-loader\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-view-all-container\">\n <a href=\"https:\/\/bifa.ai\/media-center\/\" class=\"bifa-view-all-btn\"><br \/>\n <span>View Full Media Gallery<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/main>\n<\/div>\n<p><script>\n\/\/ BIFA+ Media Module - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f \u0414\u041b\u042f MEDIABIFA\nconst BifaMedia = {\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_media',\n taxonomyUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_media_type',\n mediaItems: [],\n mediaTypes: {},\n currentFilter: 'all',\n stats: {\n total: 0,\n photo: 0,\n video: 0,\n gallery: 0,\n infographic: 0\n }\n },<\/p>\n<p> \/\/ Initialize\n async init() {\n this.createParticles();\n await this.loadTaxonomies();\n await this.loadMediaItems();\n this.setupFilters();\n this.updateStatistics();\n this.animateNumbers();\n },<\/p>\n<p> \/\/ Load taxonomies first\n async loadTaxonomies() {\n try {\n const response = await fetch(this.config.taxonomyUrl);\n if (response.ok) {\n const types = await response.json();\n types.forEach(type => {\n this.config.mediaTypes[type.id] = type.slug;\n });\n }\n } catch (error) {\n console.log('Could not load taxonomies, using defaults');\n \/\/ Default mapping based on your setup\n this.config.mediaTypes = {\n 3: 'photo',\n 4: 'gallery',\n 5: 'video',\n 6: 'infographic'\n };\n }\n },<\/p>\n<p> \/\/ Create background particles\n createParticles() {\n const container = document.querySelector('.media-bg-animation');\n if (!container) return;<\/p>\n<p> for (let i = 0; i < 20; i++) {\n const particle = document.createElement('div');\n particle.className = 'media-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 25 + 's';\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n container.appendChild(particle);\n }\n },\n\n \/\/ Load media items with proper meta fields\n async loadMediaItems() {\n const container = document.getElementById('mediaGrid');\n if (!container) return;\n\n try {\n \/\/ Load with embedded data and ACF format\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=12&orderby=date&order=desc&acf_format=standard');\n if (!response.ok) throw new Error('Failed to load media');\n \n const data = await response.json();\n this.config.mediaItems = data;\n \n \/\/ Count items by type\n this.config.stats.total = data.length;\n data.forEach(item => {\n const type = this.getMediaType(item);\n if (this.config.stats[type] !== undefined) {\n this.config.stats[type]++;\n }\n });<\/p>\n<p> this.renderMediaGrid(data);\n } catch (error) {\n console.error('Error loading media:', error);\n container.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 60px 20px; color: #666;\">\n<div style=\"font-size: 3rem; margin-bottom: 15px;\">\ud83d\udcc1<\/div>\n<h3>Loading Media Gallery...<\/h3>\n<p>Please check back in a moment.<\/p>\n<\/p><\/div>\n<p> `;\n }\n },<\/p>\n<p> \/\/ Get media type from item\n getMediaType(item) {\n \/\/ Try from taxonomy\n if (item.bifa_media_type && item.bifa_media_type.length > 0) {\n const typeId = item.bifa_media_type[0];\n return this.config.mediaTypes[typeId] || 'photo';\n }<\/p>\n<p> \/\/ Try from embedded terms\n if (item._embedded && item._embedded['wp:term']) {\n const terms = item._embedded['wp:term'].flat();\n const typeTerm = terms.find(term => term.taxonomy === 'bifa_media_type');\n if (typeTerm) return typeTerm.slug;\n }<\/p>\n<p> \/\/ Default\n return 'photo';\n },<\/p>\n<p> \/\/ Get featured image URL\n getFeaturedImage(item) {\n \/\/ Try featured media\n if (item._embedded && item._embedded['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]) {\n const media = item._embedded['wp:featuredmedia'][0];\n if (media.media_details && media.media_details.sizes) {\n return media.media_details.sizes.medium_large?.source_url || \n media.media_details.sizes.large?.source_url || \n media.source_url;\n }\n return media.source_url;\n }<\/p>\n<p> \/\/ Try ACF fields\n if (item.acf && item.acf.featured_image) {\n return item.acf.featured_image;\n }<\/p>\n<p> \/\/ Placeholder\n return 'https:\/\/via.placeholder.com\/600x400\/0A1F44\/D4AF37?text=BIFA+Media';\n },<\/p>\n<p> \/\/ Get metadata from custom fields\n getMetadata(item) {\n const meta = {\n caption: '',\n photographer: 'BIFA+ Team',\n location: '',\n priority: 'normal',\n date: item.date\n };<\/p>\n<p> \/\/ Try meta fields (our custom fields)\n if (item.meta) {\n meta.caption = item.meta._bifa_media_caption || '';\n meta.photographer = item.meta._bifa_media_photographer || meta.photographer;\n meta.location = item.meta._bifa_media_location || '';\n meta.priority = item.meta._bifa_media_priority || 'normal';\n meta.date = item.meta._bifa_media_date || item.date;\n }<\/p>\n<p> \/\/ Try ACF fields as fallback\n if (item.acf) {\n meta.caption = meta.caption || item.acf.caption || '';\n meta.photographer = meta.photographer || item.acf.photographer || 'BIFA+ Team';\n meta.location = meta.location || item.acf.location || '';\n meta.priority = meta.priority || item.acf.priority || 'normal';\n }<\/p>\n<p> \/\/ Use excerpt if no caption\n if (!meta.caption && item.excerpt) {\n meta.caption = item.excerpt.rendered.replace(\/<[^>]*>\/g, '');\n }<\/p>\n<p> return meta;\n },<\/p>\n<p> \/\/ Render media grid\n renderMediaGrid(items) {\n const container = document.getElementById('mediaGrid');\n if (!container) return;<\/p>\n<p> if (items.length === 0) {\n container.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 60px; color: var(--bifa-gray);\">\n<div style=\"font-size: 3rem; margin-bottom: 15px;\">\ud83d\udced<\/div>\n<h3>No media items found<\/h3>\n<p>Please check back later for updates.<\/p>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> items.slice(0, 12).forEach((item, index) => {\n const card = this.createMediaCard(item, index);\n container.appendChild(card);\n });\n },<\/p>\n<p> \/\/ Create media card with correct data\n createMediaCard(item, index) {\n const card = document.createElement('div');\n card.className = 'bifa-media-item';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> const imageUrl = this.getFeaturedImage(item);\n const title = item.title?.rendered || 'BIFA+ Media';\n const metadata = this.getMetadata(item);\n const mediaType = this.getMediaType(item);<\/p>\n<p> \/\/ Set data-type for filtering\n card.dataset.type = mediaType;<\/p>\n<p> const typeLabels = {\n 'photo': 'Photo',\n 'video': 'Video',\n 'gallery': 'Gallery',\n 'infographic': 'Infographic'\n };<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"bifa-media-image\" style=\"background-image: url('${imageUrl}')\">\n ${metadata.priority === 'featured' || metadata.priority === 'high' ? '<\/p>\n<div class=\"bifa-featured-indicator\">FEATURED<\/div>\n<p>' : ''}\n ${mediaType ? `<span class=\"bifa-media-badge\">${typeLabels[mediaType] || 'Media'}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-media-content\">\n<div class=\"bifa-media-date\">${this.formatDate(metadata.date)}<\/div>\n<h3 class=\"bifa-media-title\">${title}<\/h3>\n<p> ${metadata.caption ? `<\/p>\n<p class=\"bifa-media-caption\">${metadata.caption.substring(0, 120)}${metadata.caption.length > 120 ? '...' : ''}<\/p>\n<p>` : ''}<\/p>\n<div class=\"bifa-media-meta\">\n<div class=\"bifa-media-type\">\n ${this.getTypeIcon(mediaType)} ${typeLabels[mediaType] || 'Media'}\n <\/div>\n<div class=\"bifa-media-photographer\">\n \ud83d\udcf8 ${metadata.photographer}\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> card.addEventListener('click', () => {\n if (item.link) {\n window.open(item.link, '_blank');\n }\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Get type icon\n getTypeIcon(type) {\n const icons = {\n 'photo': '\ud83d\uddbc\ufe0f',\n 'video': '\ud83c\udfa5',\n 'gallery': '\ud83d\udcf8',\n 'infographic': '\ud83d\udcca'\n };\n return icons[type] || '\ud83d\udcc1';\n },<\/p>\n<p> \/\/ Update statistics\n updateStatistics() {\n \/\/ Update stat numbers\n const statElements = document.querySelectorAll('.bifa-stat-number');\n statElements[0]?.setAttribute('data-target', this.config.stats.total);\n statElements[1]?.setAttribute('data-target', this.config.stats.video);\n statElements[2]?.setAttribute('data-target', this.config.stats.gallery);\n statElements[3]?.setAttribute('data-target', this.config.stats.infographic);\n },<\/p>\n<p> \/\/ Setup filters\n setupFilters() {\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');<\/p>\n<p> filterButtons.forEach(button => {\n button.addEventListener('click', () => {\n \/\/ Remove active class from all\n filterButtons.forEach(btn => btn.classList.remove('active'));\n \/\/ Add active to clicked\n button.classList.add('active');<\/p>\n<p> \/\/ Get filter value\n const filter = button.dataset.filter;\n this.config.currentFilter = filter;<\/p>\n<p> \/\/ Filter items\n this.filterMediaItems(filter);\n });\n });\n },<\/p>\n<p> \/\/ Filter media items with animation\n filterMediaItems(filter) {\n const items = document.querySelectorAll('.bifa-media-item');\n let visibleCount = 0;<\/p>\n<p> items.forEach((item, index) => {\n if (filter === 'all' || item.dataset.type === filter) {\n item.style.display = 'block';\n \/\/ Reset animation with stagger\n item.style.animation = 'none';\n setTimeout(() => {\n item.style.animation = `fadeInUpMedia 0.6s ease forwards`;\n item.style.animationDelay = `${visibleCount * 0.1}s`;\n }, 10);\n visibleCount++;\n } else {\n item.style.opacity = '0';\n item.style.transform = 'scale(0.9)';\n setTimeout(() => {\n item.style.display = 'none';\n }, 300);\n }\n });\n },<\/p>\n<p> \/\/ Animate numbers\n animateNumbers() {\n const numbers = document.querySelectorAll('.bifa-stat-number');<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const target = parseInt(entry.target.dataset.target);\n if (target > 0) {\n this.animateNumber(entry.target, target);\n }\n observer.unobserve(entry.target);\n }\n });\n });<\/p>\n<p> numbers.forEach(number => observer.observe(number));\n },<\/p>\n<p> \/\/ Animate single number\n animateNumber(element, target) {\n let current = 0;\n const increment = Math.ceil(target \/ 50);\n const timer = setInterval(() => {\n current += increment;\n if (current >= target) {\n current = target;\n clearInterval(timer);\n }\n element.textContent = current;\n }, 30);\n },<\/p>\n<p> \/\/ Format date\n formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n BifaMedia.init();\n });\n} else {\n BifaMedia.init();\n}\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 - \\u0421\\u041e\\u0412\\u041c\\u0415\\u0421\\u0422\\u0418\\u041c\\u041e\\u0421\\u0422\\u042c \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n.bifa-hub-wrapper {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n\\\/* ========= RESET ========= *\\\/\\n.bifa-hub-wrapper * {\\n box-sizing: border-box;\\n}\\n\\n\\\/* ========= MAIN WRAPPER ========= *\\\/\\n.bifa-hub-wrapper {\\n min-height: 100vh;\\n position: relative;\\n background: #FFFFFF;\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 0;\\n}\\n\\n\\\/* ========= HERO SECTION WITH SLIDER ========= *\\\/\\n.bifa-hero-section {\\n position: relative;\\n height: 70vh;\\n min-height: 600px;\\n background: var(--bifa-deep-navy);\\n overflow: hidden;\\n}\\n\\n.bifa-hero-slider {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.bifa-hero-slides {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.bifa-hero-slide {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n opacity: 0;\\n transition: opacity 1.5s ease, transform 1s ease;\\n transform: scale(1.1);\\n}\\n\\n.bifa-hero-slide.active {\\n opacity: 1;\\n transform: scale(1);\\n}\\n\\n.bifa-hero-slide-bg {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-size: cover;\\n background-position: center;\\n filter: brightness(0.6);\\n}\\n\\n.bifa-hero-slide-bg::after {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.7) 0%, \\n rgba(10, 31, 68, 0.3) 50%,\\n rgba(212, 175, 55, 0.1) 100%\\n );\\n}\\n\\n\\\/* \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u0424\\u0438\\u043a\\u0441\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u0430\\u044f \\u0441\\u0442\\u0440\\u0443\\u043a\\u0442\\u0443\\u0440\\u0430 \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440\\u0430 \\u043a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442\\u0430 *\\\/\\n.bifa-hero-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n z-index: 2;\\n max-width: 1200px;\\n width: 90%;\\n height: 75%;\\n max-height: 550px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: flex-start;\\n opacity: 0;\\n animation: heroContentIn 1s ease 0.5s forwards;\\n}\\n\\n@keyframes heroContentIn {\\n from {\\n opacity: 0;\\n transform: translate(-50%, -45%);\\n }\\n to {\\n opacity: 1;\\n transform: translate(-50%, -50%);\\n }\\n}\\n\\n\\\/* \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440 \\u0441 \\u043f\\u0440\\u043e\\u043a\\u0440\\u0443\\u0442\\u043a\\u043e\\u0439 \\u0434\\u043b\\u044f \\u043a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442\\u0430 *\\\/\\n.bifa-hero-scrollable {\\n flex: 1;\\n overflow-y: auto;\\n overflow-x: hidden;\\n width: 100%;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 10px 20px 20px;\\n margin-bottom: 15px;\\n \\n \\\/* \\u0421\\u0442\\u0438\\u043b\\u0438\\u0437\\u0430\\u0446\\u0438\\u044f \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b\\u0431\\u0430\\u0440\\u0430 *\\\/\\n scrollbar-width: thin;\\n scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.1);\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar-track {\\n background: rgba(255, 255, 255, 0.1);\\n border-radius: 10px;\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar-thumb {\\n background: rgba(212, 175, 55, 0.5);\\n border-radius: 10px;\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar-thumb:hover {\\n background: rgba(212, 175, 55, 0.7);\\n}\\n\\n.bifa-hero-badge {\\n display: inline-block;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 10px 30px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.9rem;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n margin-bottom: 30px;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\\n flex-shrink: 0;\\n}\\n\\n.bifa-hero-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 5vw, 4rem);\\n font-weight: 900;\\n color: var(--bifa-bright-white);\\n margin-bottom: 25px;\\n line-height: 1.2;\\n text-shadow: 2px 4px 20px rgba(0, 0, 0, 0.3);\\n flex-shrink: 0;\\n}\\n\\n.bifa-hero-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1.1rem, 2vw, 1.4rem);\\n color: rgba(255, 255, 255, 0.9);\\n line-height: 1.6;\\n margin-bottom: 40px;\\n max-width: 800px;\\n margin-left: auto;\\n margin-right: auto;\\n flex-shrink: 1;\\n}\\n\\n.bifa-hero-meta {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 30px;\\n margin-bottom: 30px;\\n flex-wrap: wrap;\\n flex-shrink: 0;\\n}\\n\\n.bifa-hero-meta-item {\\n display: flex;\\n align-items: center;\\n gap: 10px;\\n color: rgba(255, 255, 255, 0.8);\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n}\\n\\n.bifa-hero-meta-item svg {\\n width: 20px;\\n height: 20px;\\n stroke: var(--bifa-heritage-gold);\\n}\\n\\n\\\/* \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u0424\\u0438\\u043a\\u0441\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u0430\\u044f \\u043a\\u043d\\u043e\\u043f\\u043a\\u0430 \\u0432\\u043d\\u0438\\u0437\\u0443 *\\\/\\n.bifa-hero-cta {\\n display: inline-flex;\\n align-items: center;\\n gap: 15px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1.1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n white-space: nowrap;\\n flex-shrink: 0;\\n margin-top: auto;\\n border: none;\\n cursor: pointer;\\n}\\n\\n.bifa-hero-cta::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-hero-cta:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 30px 70px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-hero-cta:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-hero-cta svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-hero-cta:hover svg {\\n transform: translateX(5px);\\n}\\n\\n\\\/* Slider Navigation *\\\/\\n.bifa-slider-nav {\\n position: absolute;\\n bottom: 40px;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n gap: 15px;\\n z-index: 3;\\n}\\n\\n.bifa-slider-dot {\\n width: 12px;\\n height: 12px;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n border: 2px solid rgba(255, 255, 255, 0.5);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n position: relative;\\n}\\n\\n.bifa-slider-dot.active {\\n background: var(--bifa-heritage-gold);\\n border-color: var(--bifa-heritage-gold);\\n transform: scale(1.2);\\n}\\n\\n.bifa-slider-dot:hover {\\n background: rgba(255, 255, 255, 0.5);\\n transform: scale(1.1);\\n}\\n\\n.bifa-slider-progress {\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n width: 0;\\n z-index: 4;\\n transition: width 5s linear;\\n}\\n\\n.bifa-slider-progress.active {\\n width: 100%;\\n}\\n\\n\\\/* Slider Arrows *\\\/\\n.bifa-slider-arrow {\\n position: absolute;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 60px;\\n height: 60px;\\n background: rgba(255, 255, 255, 0.1);\\n backdrop-filter: blur(10px);\\n border: 2px solid rgba(255, 255, 255, 0.2);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n z-index: 3;\\n opacity: 0.8;\\n}\\n\\n.bifa-slider-arrow:active {\\n transform: translateY(-50%) scale(0.95);\\n}\\n\\n.bifa-slider-arrow:hover {\\n background: rgba(212, 175, 55, 0.2);\\n border-color: var(--bifa-heritage-gold);\\n transform: translateY(-50%) scale(1.1);\\n}\\n\\n.bifa-slider-arrow.prev {\\n left: 50px;\\n}\\n\\n.bifa-slider-arrow.next {\\n right: 50px;\\n}\\n\\n.bifa-slider-arrow svg {\\n width: 24px;\\n height: 24px;\\n stroke: var(--bifa-bright-white);\\n stroke-width: 2.5;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ========= *\\\/\\n.hub-bg-animation {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n top: 0;\\n left: 0;\\n pointer-events: none;\\n}\\n\\n.hub-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatHub 25s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.15;\\n}\\n\\n@keyframes floatHub {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.2; }\\n 90% { opacity: 0.2; }\\n 100% {\\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* ========= MAIN CONTENT ========= *\\\/\\n.bifa-hub-main {\\n position: relative;\\n z-index: 10;\\n padding: 100px 0;\\n}\\n\\n.bifa-hub-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n\\\/* ========= SEARCH SECTION ========= *\\\/\\n.bifa-hub-search-section {\\n background: #FFFFFF;\\n padding: 40px 0;\\n margin-bottom: 80px;\\n border-radius: 30px;\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.08);\\n}\\n\\n.bifa-hub-search-container {\\n max-width: 800px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n.bifa-hub-search-wrapper {\\n position: relative;\\n}\\n\\n.bifa-hub-search-input {\\n width: 100%;\\n padding: 20px 60px 20px 30px;\\n border: 3px solid rgba(212, 175, 55, 0.2);\\n border-radius: 50px;\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n background: #F8F9FA;\\n transition: var(--bifa-transition);\\n outline: none;\\n}\\n\\n.bifa-hub-search-input:focus {\\n border-color: var(--bifa-heritage-gold);\\n box-shadow: 0 12px 35px rgba(212, 175, 55, 0.2);\\n background: #FFFFFF;\\n}\\n\\n.bifa-hub-search-btn {\\n position: absolute;\\n right: 8px;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 50px;\\n height: 50px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border: none;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n}\\n\\n.bifa-hub-search-btn:hover {\\n transform: translateY(-50%) scale(1.1);\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-hub-search-btn svg {\\n width: 22px;\\n height: 22px;\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 3;\\n}\\n\\n.bifa-search-results {\\n margin-top: 20px;\\n text-align: center;\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-gray);\\n font-size: 0.95rem;\\n}\\n\\n.bifa-search-results.active {\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n}\\n\\n\\\/* ========= SECTION HEADERS ========= *\\\/\\n.bifa-section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n position: relative;\\n}\\n\\n.bifa-section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n}\\n\\n.bifa-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n}\\n\\n.bifa-section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n color: #4a5568;\\n max-width: 600px;\\n margin: 0 auto;\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= NEWS SECTION ========= *\\\/\\n.bifa-news-section {\\n margin-bottom: 100px;\\n}\\n\\n.bifa-news-preview-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 50px;\\n}\\n\\n\\\/* ========= EVENTS SECTION ========= *\\\/\\n.bifa-events-section {\\n background: #FFFFFF;\\n padding: 100px 0;\\n margin: 0 calc(-50vw + 50%);\\n width: 100vw;\\n position: relative;\\n}\\n\\n.bifa-events-preview-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 50px;\\n}\\n\\n\\\/* ========= PREVIEW CARDS (Shared Styles) ========= *\\\/\\n.bifa-preview-card {\\n background: #FFFFFF;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n opacity: 0;\\n animation: fadeInUpHub 1.2s ease forwards;\\n}\\n\\n.bifa-preview-card:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-preview-card:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-preview-card:nth-child(3) { animation-delay: 0.3s; }\\n\\n.bifa-preview-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-preview-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-preview-card:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-preview-image {\\n position: relative;\\n height: 200px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-preview-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 60%, \\n rgba(10, 31, 68, 0.8) 100%\\n );\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-preview-card:hover .bifa-preview-image::before {\\n opacity: 0.9;\\n}\\n\\n\\\/* Hot\\\/Trending Indicator *\\\/\\n.bifa-hot-indicator {\\n position: absolute;\\n top: 15px;\\n left: 15px;\\n background: linear-gradient(135deg, #ff4757, #ff6348);\\n color: white;\\n padding: 6px 16px;\\n border-radius: 20px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 3;\\n display: flex;\\n align-items: center;\\n gap: 6px;\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n animation: hotPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes hotPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-hot-indicator::before {\\n content: '\\ud83d\\udd25';\\n font-size: 12px;\\n}\\n\\n.bifa-preview-badge {\\n position: absolute;\\n top: 15px;\\n right: 15px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-preview-status {\\n position: absolute;\\n top: 15px;\\n left: 15px;\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n backdrop-filter: blur(10px);\\n}\\n\\n.bifa-preview-status.upcoming {\\n background: rgba(219, 234, 254, 0.9);\\n color: #1e40af;\\n border: 1px solid rgba(30, 64, 175, 0.2);\\n}\\n\\n.bifa-preview-status.ongoing {\\n background: rgba(220, 252, 231, 0.9);\\n color: #166534;\\n border: 1px solid rgba(22, 101, 52, 0.2);\\n}\\n\\n.bifa-preview-content {\\n padding: 25px;\\n}\\n\\n.bifa-preview-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n margin-bottom: 12px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n font-weight: 500;\\n}\\n\\n.bifa-preview-date::before {\\n content: '';\\n width: 5px;\\n height: 5px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-preview-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 15px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-preview-card:hover .bifa-preview-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-preview-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: #4a5568;\\n line-height: 1.6;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 0;\\n}\\n\\n\\\/* ========= VIEW ALL BUTTONS ========= *\\\/\\n.bifa-view-all-container {\\n text-align: center;\\n margin-top: 60px;\\n}\\n\\n.bifa-view-all-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-view-all-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-view-all-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-view-all-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-view-all-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-view-all-btn:hover svg {\\n transform: translateX(5px);\\n}\\n\\n\\\/* ========= LOADING STATES ========= *\\\/\\n.bifa-hub-loading {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 400px;\\n}\\n\\n.bifa-hub-loader {\\n width: 60px;\\n height: 60px;\\n border: 4px solid rgba(212, 175, 55, 0.2);\\n border-top-color: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: spinHub 1s linear infinite;\\n}\\n\\n@keyframes spinHub {\\n to { transform: rotate(360deg); }\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInUpHub {\\n from {\\n opacity: 0;\\n transform: translateY(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .bifa-news-preview-grid,\\n .bifa-events-preview-grid {\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 35px;\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 30px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 30px;\\n }\\n}\\n\\n\\\/* Tablet optimizations *\\\/\\n@media (max-width: 992px) {\\n .bifa-hero-section {\\n height: 65vh;\\n min-height: 550px;\\n max-height: 700px;\\n }\\n \\n .bifa-hero-content {\\n height: 70%;\\n max-height: 500px;\\n }\\n \\n .bifa-hero-badge {\\n padding: 6px 20px;\\n font-size: 0.75rem;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-title {\\n font-size: clamp(1.8rem, 4vw, 2.5rem);\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: clamp(0.9rem, 2vw, 1.1rem);\\n margin-bottom: 20px;\\n }\\n \\n .bifa-hero-meta {\\n gap: 20px;\\n margin-bottom: 20px;\\n }\\n \\n .bifa-hero-meta-item {\\n font-size: 0.85rem;\\n }\\n \\n .bifa-hero-meta-item svg {\\n width: 16px;\\n height: 16px;\\n }\\n \\n .bifa-hero-cta {\\n padding: 12px 28px;\\n font-size: 0.9rem;\\n gap: 10px;\\n }\\n \\n .bifa-hero-cta svg {\\n width: 16px;\\n height: 16px;\\n }\\n \\n .bifa-slider-nav {\\n bottom: 50px;\\n gap: 12px;\\n }\\n \\n .bifa-slider-dot {\\n width: 10px;\\n height: 10px;\\n }\\n \\n .bifa-hub-main {\\n padding: 70px 0;\\n }\\n \\n .bifa-events-section {\\n padding: 70px 0;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-hero-slide-bg {\\n filter: brightness(0.7);\\n }\\n \\n .bifa-hero-slide-bg::after {\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.6) 0%, \\n rgba(10, 31, 68, 0.2) 50%,\\n rgba(212, 175, 55, 0.05) 100%\\n );\\n }\\n \\n .bifa-hero-section {\\n height: 50vh;\\n min-height: 400px;\\n }\\n \\n .bifa-hero-content {\\n height: 70%;\\n max-height: 450px;\\n }\\n \\n .bifa-hero-meta {\\n gap: 20px;\\n }\\n \\n .bifa-news-preview-grid,\\n .bifa-events-preview-grid {\\n grid-template-columns: 1fr;\\n gap: 25px;\\n }\\n \\n .bifa-hub-main {\\n padding: 50px 0;\\n }\\n \\n .bifa-events-section {\\n padding: 50px 0;\\n }\\n \\n .bifa-slider-arrow {\\n width: 45px;\\n height: 45px;\\n background: rgba(0, 0, 0, 0.6);\\n border: 1px solid rgba(255, 255, 255, 0.3);\\n }\\n \\n .bifa-slider-arrow:hover {\\n transform: translateY(-50%) scale(1.05);\\n background: rgba(0, 0, 0, 0.8);\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 20px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 20px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-hero-section {\\n height: 60vh;\\n min-height: 450px;\\n max-height: 600px;\\n }\\n \\n .bifa-hero-content {\\n width: 85%;\\n height: 75%;\\n max-height: 500px;\\n }\\n \\n .bifa-hero-badge {\\n padding: 6px 18px;\\n font-size: 0.7rem;\\n letter-spacing: 1px;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.5rem;\\n margin-bottom: 12px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.85rem;\\n margin-bottom: 20px;\\n }\\n \\n .bifa-hero-meta {\\n gap: 15px;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-meta-item {\\n font-size: 0.75rem;\\n gap: 6px;\\n }\\n \\n .bifa-hero-meta-item svg {\\n width: 14px;\\n height: 14px;\\n }\\n \\n .bifa-hero-cta {\\n padding: 10px 20px;\\n font-size: 0.75rem;\\n gap: 8px;\\n letter-spacing: 0.5px;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);\\n }\\n \\n .bifa-hero-cta svg {\\n width: 12px;\\n height: 12px;\\n }\\n \\n .bifa-slider-nav {\\n bottom: 30px;\\n gap: 10px;\\n }\\n \\n .bifa-slider-dot {\\n width: 8px;\\n height: 8px;\\n border-width: 1px;\\n }\\n \\n .bifa-slider-arrow {\\n width: 40px;\\n height: 40px;\\n background: rgba(0, 0, 0, 0.5);\\n border: 1px solid rgba(255, 255, 255, 0.2);\\n }\\n \\n .bifa-slider-arrow svg {\\n width: 18px;\\n height: 18px;\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 10px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 10px;\\n }\\n \\n .bifa-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-preview-content {\\n padding: 25px;\\n }\\n}\\n\\n@media (max-width: 360px) {\\n .bifa-hero-section {\\n min-height: 450px;\\n max-height: 550px;\\n }\\n \\n .bifa-hero-content {\\n height: 70%;\\n max-height: 450px;\\n }\\n \\n .bifa-hero-badge {\\n padding: 5px 15px;\\n font-size: 0.65rem;\\n margin-bottom: 12px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.3rem;\\n margin-bottom: 10px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.8rem;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-meta {\\n margin-bottom: 12px;\\n }\\n \\n .bifa-hero-cta {\\n padding: 9px 18px;\\n font-size: 0.7rem;\\n gap: 6px;\\n }\\n \\n .bifa-hero-cta svg {\\n width: 10px;\\n height: 10px;\\n }\\n \\n .bifa-slider-arrow {\\n width: 36px;\\n height: 36px;\\n }\\n \\n .bifa-slider-arrow svg {\\n width: 14px;\\n height: 14px;\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 8px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 8px;\\n }\\n \\n .bifa-slider-nav {\\n bottom: 25px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-hub-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"hub-bg-animation\\\"\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<section class=\"\\\"bifa-hero-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-slider\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-slides\\\"\" id=\"\\\"heroSlides\\\"\">\\n \\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-slider-nav\\\"\" id=\"\\\"sliderNav\\\"\">\\n \\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-slider-progress\\\"\" id=\"\\\"sliderProgress\\\"\"><\\\/div>\\n \\n \\n <button class=\"\\\"bifa-slider-arrow\" prev\\\" id=\"\\\"sliderPrev\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M15\" 18l9 12l15 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <button class=\"\\\"bifa-slider-arrow\" next\\\" id=\"\\\"sliderNext\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 18l15 12l9 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/section>\\n\\n \\n <main class=\"\\\"bifa-hub-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-container\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-hub-search-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-search-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-search-wrapper\\\"\">\\n <input \\n type=\"\\\"text\\\"\" class =\"\\\"bifa-hub-search-input\\\"\" placeholder=\"\\\"Search\" news and events...\\\" id =\"\\\"hubSearchInput\\\"\\n\" >\\n <button class=\"\\\"bifa-hub-search-btn\\\"\" id=\"\\\"hubSearchBtn\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"11\\\"\" cy=\"\\\"11\\\"\" r=\"\\\"8\\\"\"><\\\/circle>\\n <path d=\"\\\"m21\" 21-4.35-4.35\\\"><\\\/path>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-search-results\\\"\" id=\"\\\"searchResults\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/section>\\n \\n \\n <\/p>\n<section class=\"\\\"bifa-news-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">Latest News<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Stay updated with the latest BIFA+ news and announcements<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div id=\"\\\"newsPreviewGrid\\\"\" class=\"\\\"bifa-news-preview-grid\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-hub-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-loader\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-view-all-container\\\"\">\\n <a href=\"\\\"\\\/news\\\"\" class=\"\\\"bifa-view-all-btn\\\"\">\\n <span>View All News<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/section>\\n <\\\/div>\\n <\\\/main>\\n\\n \\n <\/p>\n<section class=\"\\\"bifa-events-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">Upcoming Events<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Join our international tournaments and conferences<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div id=\"\\\"eventsPreviewGrid\\\"\" class=\"\\\"bifa-events-preview-grid\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-hub-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-loader\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-view-all-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/events-2\\\/\\\"\" class=\"\\\"bifa-view-all-btn\\\"\">\\n <span>View All Events<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Hub Module\\nconst BifaHub = {\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events',\\n sliderInterval: null,\\n currentSlide: 0,\\n autoPlayDelay: 5000,\\n slides: [],\\n allPosts: [],\\n searchQuery: '',\\n searchResults: []\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.loadHeroSlides();\\n this.loadNewsPreviews();\\n this.loadEventsPreviews();\\n this.setupSliderControls();\\n this.setupSearch();\\n },\\n\\n \\\/\\\/ Setup search functionality\\n setupSearch() {\\n const searchInput = document.getElementById('hubSearchInput');\\n const searchBtn = document.getElementById('hubSearchBtn');\\n const searchResults = document.getElementById('searchResults');\\n \\n if (searchInput) {\\n searchInput.addEventListener('input', (e) => {\\n this.config.searchQuery = e.target.value.toLowerCase();\\n if (this.config.searchQuery.length >= 3) {\\n this.performSearch();\\n } else {\\n searchResults.textContent = '';\\n this.loadNewsPreviews();\\n this.loadEventsPreviews();\\n }\\n });\\n \\n searchInput.addEventListener('keypress', (e) => {\\n if (e.key === 'Enter') {\\n this.performSearch();\\n }\\n });\\n }\\n \\n if (searchBtn) {\\n searchBtn.addEventListener('click', () => {\\n this.performSearch();\\n });\\n }\\n },\\n\\n \\\/\\\/ Perform search\\n performSearch() {\\n const searchResults = document.getElementById('searchResults');\\n \\n if (!this.config.searchQuery || this.config.searchQuery.length < 2) {\\n searchResults.textContent = '';\\n return;\\n }\\n \\n this.config.searchResults = this.config.allPosts.filter(post => {\\n const title = post.title.rendered.toLowerCase();\\n const excerpt = this.stripHtml(post.excerpt.rendered).toLowerCase();\\n const location = (post._bifa_location || '').toLowerCase();\\n \\n return title.includes(this.config.searchQuery) || \\n excerpt.includes(this.config.searchQuery) ||\\n location.includes(this.config.searchQuery);\\n });\\n \\n \\\/\\\/ Update results text\\n if (this.config.searchResults.length > 0) {\\n searchResults.textContent = `Found ${this.config.searchResults.length} results for \\\"${this.config.searchQuery}\\\"`;\\n searchResults.classList.add('active');\\n } else {\\n searchResults.textContent = `No results found for \\\"${this.config.searchQuery}\\\"`;\\n searchResults.classList.remove('active');\\n }\\n \\n \\\/\\\/ Update previews with search results\\n this.updatePreviewsWithSearch();\\n },\\n\\n \\\/\\\/ Update previews with search results\\n updatePreviewsWithSearch() {\\n const newsContainer = document.getElementById('newsPreviewGrid');\\n const eventsContainer = document.getElementById('eventsPreviewGrid');\\n \\n \\\/\\\/ Clear existing content\\n if (newsContainer) newsContainer.innerHTML = '';\\n if (eventsContainer) eventsContainer.innerHTML = '';\\n \\n \\\/\\\/ Separate search results into news and events\\n const newsResults = this.config.searchResults.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return !eventDate || eventDate === '';\\n });\\n \\n const eventsResults = this.config.searchResults.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return eventDate && eventDate !== '';\\n });\\n \\n \\\/\\\/ Display news results\\n if (newsContainer) {\\n if (newsResults.length > 0) {\\n newsResults.slice(0, 6).forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'news', index);\\n newsContainer.appendChild(card);\\n });\\n } else {\\n newsContainer.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray); grid-column: 1 \\>No news found<\\\/p>';\\n }\\n }\\n \\n \\\/\\\/ Display events results\\n if (eventsContainer) {\\n if (eventsResults.length > 0) {\\n eventsResults.slice(0, 6).forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'event', index);\\n eventsContainer.appendChild(card);\\n });\\n } else {\\n eventsContainer.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray); grid-column: 1 \\>No events found<\\\/p>';\\n }\\n }\\n },\\n\\n \\\/\\\/ Check if post is hot\\\/trending\\n isHotPost(post) {\\n \\\/\\\/ Logic to determine if a post is hot\\\/trending\\n \\\/\\\/ More strict criteria to avoid marking all posts as hot\\n \\n \\\/\\\/ 1. Posts from last 24 hours (not 3 days)\\n const postDate = new Date(post.date);\\n const oneDayAgo = new Date();\\n oneDayAgo.setDate(oneDayAgo.getDate() - 1);\\n \\n \\\/\\\/ 2. Must have urgent badge or priority\\n const badge = (post._bifa_badge_text || '').toLowerCase();\\n const hasUrgentBadge = badge.includes('urgent') || \\n badge.includes('hot') || \\n badge.includes('breaking') ||\\n badge.includes('\\u0432\\u0430\\u0436\\u043d\\u043e\\u0435');\\n \\n \\\/\\\/ 3. Check priority flag\\n const hasHighPriority = post._bifa_priority === 'urgent' || \\n post._bifa_priority === 'high';\\n \\n \\\/\\\/ Post must be recent AND have urgent badge\\\/priority\\n if (postDate > oneDayAgo && (hasUrgentBadge || hasHighPriority)) {\\n return true;\\n }\\n \\n \\\/\\\/ 4. For events - check if starting within 48 hours\\n if (post._bifa_event_date) {\\n const eventDate = new Date(post._bifa_event_date);\\n const twoDaysFromNow = new Date();\\n twoDaysFromNow.setDate(twoDaysFromNow.getDate() + 2);\\n \\n if (eventDate > new Date() && eventDate < twoDaysFromNow) {\\n return true;\\n }\\n }\\n \\n return false;\\n },\\n\\n \\\/\\\/ Create background particles\\n createParticles() {\\n const container = document.querySelector('.hub-bg-animation');\\n if (!container) return;\\n\\n for (let i = 0; i < 20; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'hub-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 25 + 's';\\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n container.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Load hero slides (latest 3 posts)\\n async loadHeroSlides() {\\n try {\\n const response = await fetch(`${this.config.apiUrl}?_embed&per_page=50&orderby=date&order=desc`);\\n const posts = await response.json();\\n \\n this.config.allPosts = posts;\\n \\n \\\/\\\/ Get latest 3 posts for slider\\n this.config.slides = posts.slice(0, 3);\\n \\n \\\/\\\/ \\u0414\\u0435\\u0442\\u0430\\u043b\\u044c\\u043d\\u043e\\u0435 \\u043b\\u043e\\u0433\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u0435 \\u043f\\u0435\\u0440\\u0432\\u043e\\u0433\\u043e \\u043f\\u043e\\u0441\\u0442\\u0430\\n if (this.config.slides.length > 0) {\\n const firstPost = this.config.slides[0];\\n console.log('\\ud83d\\udcca First post data:');\\n console.log(' - ID:', firstPost.id);\\n console.log(' - Title:', firstPost.title.rendered);\\n console.log(' - Slug:', firstPost.slug);\\n console.log(' - Link:', firstPost.link);\\n console.log(' - Type:', firstPost.type);\\n console.log(' - Status:', firstPost.status);\\n if (firstPost.guid) {\\n console.log(' - GUID:', firstPost.guid.rendered);\\n }\\n }\\n \\n this.renderHeroSlides();\\n this.createSliderDots();\\n this.startAutoPlay();\\n \\n } catch (error) {\\n console.error('Error loading hero slides:', error);\\n }\\n },\\n\\n \\\/\\\/ Render hero slides\\n renderHeroSlides() {\\n const slidesContainer = document.getElementById('heroSlides');\\n if (!slidesContainer || this.config.slides.length === 0) return;\\n\\n slidesContainer.innerHTML = '';\\n\\n this.config.slides.forEach((post, index) => {\\n const media = post._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/hero-placeholder.jpg`;\\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';\\n const badge = isEvent ? 'Event' : 'News';\\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 150) + '...';\\n \\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u044b\\u0439 URL \\u0434\\u043b\\u044f \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0438\\n const postUrl = this.getPostUrl(post);\\n \\n const slide = document.createElement('div');\\n slide.className = `bifa-hero-slide ${index === 0 ? 'active' : ''}`;\\n \\n \\\/\\\/ \\u0414\\u043e\\u0431\\u0430\\u0432\\u043b\\u0435\\u043d \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440 \\u0441 \\u043f\\u0440\\u043e\\u043a\\u0440\\u0443\\u0442\\u043a\\u043e\\u0439 \\u0438 \\u0444\\u0438\\u043a\\u0441\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u0430\\u044f \\u043a\\u043d\\u043e\\u043f\\u043a\\u0430\\n slide.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-hero-slide-bg\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-hero-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-scrollable\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-badge\\\"\">${badge}<\\\/div>\\n <\/p>\n<h1 class=\"\\\"bifa-hero-title\\\"\">${post.title.rendered}<\\\/h1>\\n <\/p>\n<p class=\"\\\"bifa-hero-excerpt\\\"\">${excerpt}<\\\/p>\\n <\/p>\n<div class=\"\\\"bifa-hero-meta\\\"\">\\n ${isEvent ? `\\n <\/p>\n<div class=\"\\\"bifa-hero-meta-item\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M8\" 7v3m16 7v3m7 11h17m5 21h19c20.1046 21 20.1046 19v7c21 5.89543 5 19 5h5c3.89543 3 7v19c3 3.89543 21z\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>${this.formatDate(post._bifa_event_date)}<\\\/span>\\n <\\\/div>\\n ${post._bifa_location ? `\\n <\/p>\n<div class=\"\\\"bifa-hero-meta-item\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M21\" 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 18 0z\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\\\/\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"10\\\"\" r=\"\\\"3\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\\\/\">\\n <\\\/svg>\\n <span>${post._bifa_location}<\\\/span>\\n <\\\/div>\\n ` : ''}\\n ` : `\\n <\/p>\n<div class=\"\\\"bifa-hero-meta-item\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 8v12l15 15m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3c16.9706 12z\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>${this.formatDate(post.date)}<\\\/span>\\n <\\\/div>\\n `}\\n <\\\/div>\\n <\\\/div>\\n <button class=\"\\\"bifa-hero-cta\\\"\" data-post-url=\"\\\"${postUrl}\\\"\" data-post-id=\"\\\"${post.id}\\\"\">\\n <span>Read More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n `;\\n \\n slidesContainer.appendChild(slide);\\n });\\n \\n \\\/\\\/ \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041e\\u0434\\u0438\\u043d \\u043e\\u0431\\u0440\\u0430\\u0431\\u043e\\u0442\\u0447\\u0438\\u043a \\u0434\\u043b\\u044f \\u0432\\u0441\\u0435\\u0445 \\u043a\\u043d\\u043e\\u043f\\u043e\\u043a - \\u0431\\u0435\\u0440\\u0451\\u0442 URL \\u0438\\u0437 \\u0410\\u041a\\u0422\\u0418\\u0412\\u041d\\u041e\\u0413\\u041e \\u0441\\u043b\\u0430\\u0439\\u0434\\u0430\\n slidesContainer.addEventListener('click', (e) => {\\n const clickedButton = e.target.closest('.bifa-hero-cta');\\n if (!clickedButton) return;\\n \\n \\\/\\\/ \\u041d\\u0430\\u0445\\u043e\\u0434\\u0438\\u043c \\u0410\\u041a\\u0422\\u0418\\u0412\\u041d\\u042b\\u0419 \\u0441\\u043b\\u0430\\u0439\\u0434\\n const activeSlide = slidesContainer.querySelector('.bifa-hero-slide.active');\\n if (!activeSlide) {\\n console.error('\\u274c No active slide found!');\\n return;\\n }\\n \\n \\\/\\\/ \\u0411\\u0435\\u0440\\u0451\\u043c URL \\u0438\\u0437 \\u0430\\u043a\\u0442\\u0438\\u0432\\u043d\\u043e\\u0433\\u043e \\u0441\\u043b\\u0430\\u0439\\u0434\\u0430\\n const activeButton = activeSlide.querySelector('.bifa-hero-cta');\\n const url = activeButton ? activeButton.getAttribute('data-post-url') : null;\\n \\n if (!url) {\\n console.error('\\u274c No URL found in active slide!');\\n return;\\n }\\n \\n console.log('\\ud83d\\udd17 Hero CTA clicked!');\\n console.log('\\ud83d\\udd17 Active slide URL:', url);\\n console.log('\\ud83d\\udd17 Navigating to:', url);\\n \\n \\\/\\\/ \\u041f\\u0435\\u0440\\u0435\\u0445\\u043e\\u0434\\u0438\\u043c \\u043d\\u0430 \\u0441\\u0442\\u0440\\u0430\\u043d\\u0438\\u0446\\u0443\\n window.location.href = url;\\n });\\n },\\n\\n \\\/\\\/ Get correct post URL\\n getPostUrl(post) {\\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 1: \\u0418\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c \\u0441\\u0442\\u0430\\u043d\\u0434\\u0430\\u0440\\u0442\\u043d\\u044b\\u0439 link \\u0438\\u0437 API\\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\\n return post.link;\\n }\\n \\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 2: \\u0415\\u0441\\u043b\\u0438 \\u044d\\u0442\\u043e \\u043a\\u0430\\u0441\\u0442\\u043e\\u043c\\u043d\\u044b\\u0439 post type, \\u0441\\u0442\\u0440\\u043e\\u0438\\u043c URL \\u0432\\u0440\\u0443\\u0447\\u043d\\u0443\\u044e\\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c \\u0435\\u0441\\u0442\\u044c \\u043b\\u0438 slug\\n if (post.slug) {\\n const baseUrl = 'https:\\\/\\\/bifa.ai';\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c \\u0442\\u0438\\u043f \\u0437\\u0430\\u043f\\u0438\\u0441\\u0438\\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0431\\u0443\\u0435\\u043c \\u0440\\u0430\\u0437\\u043d\\u044b\\u0435 \\u0432\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442\\u044b URL \\u0441\\u0442\\u0440\\u0443\\u043a\\u0442\\u0443\\u0440\\u044b\\n \\\/\\\/ \\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1: \\\/news-events\\\/slug\\\/\\n return `${baseUrl}\\\/news-events\\\/${post.slug}\\\/`;\\n }\\n \\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 3: \\u0418\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c guid \\u0435\\u0441\\u043b\\u0438 \\u0435\\u0441\\u0442\\u044c\\n if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\\n return post.guid.rendered;\\n }\\n \\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 4: \\u0415\\u0441\\u043b\\u0438 \\u0435\\u0441\\u0442\\u044c ID, \\u043f\\u0440\\u043e\\u0431\\u0443\\u0435\\u043c \\u043f\\u0440\\u044f\\u043c\\u0443\\u044e \\u0441\\u0441\\u044b\\u043b\\u043a\\u0443\\n if (post.id) {\\n return `https:\\\/\\\/bifa.ai\\\/?p=${post.id}`;\\n }\\n \\n \\\/\\\/ \\u0412 \\u043a\\u0440\\u0430\\u0439\\u043d\\u0435\\u043c \\u0441\\u043b\\u0443\\u0447\\u0430\\u0435 \\u0432\\u043e\\u0437\\u0432\\u0440\\u0430\\u0449\\u0430\\u0435\\u043c \\u0433\\u043b\\u0430\\u0432\\u043d\\u0443\\u044e \\u0441\\u0442\\u0440\\u0430\\u043d\\u0438\\u0446\\u0443\\n console.error('\\u26a0\\ufe0f Cannot determine URL for post:', post);\\n return 'https:\\\/\\\/bifa.ai\\\/';\\n },\\n\\n \\\/\\\/ Create slider dots\\n createSliderDots() {\\n const navContainer = document.getElementById('sliderNav');\\n if (!navContainer) return;\\n\\n navContainer.innerHTML = '';\\n \\n this.config.slides.forEach((_, index) => {\\n const dot = document.createElement('button');\\n dot.className = `bifa-slider-dot ${index === 0 ? 'active' : ''}`;\\n dot.addEventListener('click', () => this.goToSlide(index));\\n navContainer.appendChild(dot);\\n });\\n },\\n\\n \\\/\\\/ Setup slider controls\\n setupSliderControls() {\\n const prevBtn = document.getElementById('sliderPrev');\\n const nextBtn = document.getElementById('sliderNext');\\n \\n if (prevBtn) {\\n prevBtn.addEventListener('click', () => this.prevSlide());\\n }\\n \\n if (nextBtn) {\\n nextBtn.addEventListener('click', () => this.nextSlide());\\n }\\n },\\n\\n \\\/\\\/ Go to specific slide\\n goToSlide(index) {\\n const slides = document.querySelectorAll('.bifa-hero-slide');\\n const dots = document.querySelectorAll('.bifa-slider-dot');\\n const progress = document.getElementById('sliderProgress');\\n \\n \\\/\\\/ Remove active classes\\n slides.forEach(slide => slide.classList.remove('active'));\\n dots.forEach(dot => dot.classList.remove('active'));\\n \\n \\\/\\\/ Add active class to current\\n if (slides[index]) slides[index].classList.add('active');\\n if (dots[index]) dots[index].classList.add('active');\\n \\n \\\/\\\/ Reset progress bar\\n if (progress) {\\n progress.classList.remove('active');\\n void progress.offsetWidth; \\\/\\\/ Force reflow\\n progress.classList.add('active');\\n }\\n \\n this.config.currentSlide = index;\\n \\n \\\/\\\/ Reset autoplay\\n this.startAutoPlay();\\n },\\n\\n \\\/\\\/ Previous slide\\n prevSlide() {\\n const newIndex = this.config.currentSlide === 0 \\n ? this.config.slides.length - 1 \\n : this.config.currentSlide - 1;\\n this.goToSlide(newIndex);\\n },\\n\\n \\\/\\\/ Next slide\\n nextSlide() {\\n const newIndex = (this.config.currentSlide + 1) % this.config.slides.length;\\n this.goToSlide(newIndex);\\n },\\n\\n \\\/\\\/ Start autoplay\\n startAutoPlay() {\\n \\\/\\\/ Clear existing interval\\n if (this.config.sliderInterval) {\\n clearInterval(this.config.sliderInterval);\\n }\\n \\n \\\/\\\/ Start progress bar\\n const progress = document.getElementById('sliderProgress');\\n if (progress) {\\n progress.classList.add('active');\\n }\\n \\n \\\/\\\/ Set new interval\\n this.config.sliderInterval = setInterval(() => {\\n this.nextSlide();\\n }, this.config.autoPlayDelay);\\n },\\n\\n \\\/\\\/ Load news previews\\n async loadNewsPreviews() {\\n const container = document.getElementById('newsPreviewGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Wait for main data if not loaded\\n if (this.config.allPosts.length === 0) {\\n await this.loadHeroSlides();\\n }\\n\\n \\\/\\\/ Filter only news (no event date)\\n const news = this.config.allPosts.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return !eventDate || eventDate === '';\\n }).slice(0, 3);\\n\\n if (news.length === 0) {\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray);\\\">No news available<\\\/p>';\\n return;\\n }\\n\\n container.innerHTML = '';\\n \\n news.forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'news', index);\\n container.appendChild(card);\\n });\\n\\n } catch (error) {\\n console.error('Error loading news:', error);\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: #dc2626;\\\">Failed to load news<\\\/p>';\\n }\\n },\\n\\n \\\/\\\/ Load events previews\\n async loadEventsPreviews() {\\n const container = document.getElementById('eventsPreviewGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Wait for main data if not loaded\\n if (this.config.allPosts.length === 0) {\\n await this.loadHeroSlides();\\n }\\n\\n \\\/\\\/ Filter only events (with event date)\\n const events = this.config.allPosts.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return eventDate && eventDate !== '';\\n }).slice(0, 3);\\n\\n if (events.length === 0) {\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray);\\\">No events available<\\\/p>';\\n return;\\n }\\n\\n container.innerHTML = '';\\n \\n events.forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'event', index);\\n container.appendChild(card);\\n });\\n\\n } catch (error) {\\n console.error('Error loading events:', error);\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: #dc2626;\\\">Failed to load events<\\\/p>';\\n }\\n },\\n\\n \\\/\\\/ Create preview card\\n createPreviewCard(post, type, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-preview-card';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n const media = post._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/${type}-placeholder.jpg`;\\n const isHot = this.isHotPost(post);\\n \\n \\\/\\\/ \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u044b\\u0439 URL\\n const postUrl = this.getPostUrl(post);\\n \\n let contentHtml = '';\\n \\n if (type === 'news') {\\n const date = this.formatDate(post.date);\\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 100) + '...';\\n const badge = this.getBadgeText(post);\\n\\n contentHtml = `\\n <\/p>\n<div class=\"\\\"bifa-preview-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n ${isHot ? '<\/p>\n<div class=\"\\\"bifa-hot-indicator\\\"\">HOT<\\\/div>' : ''}\\n ${badge ? `<span class=\"\\\"bifa-preview-badge\\\"\">${badge}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-preview-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-preview-date\\\"\">${date}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-preview-title\\\"\">${post.title.rendered}<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-preview-excerpt\\\"\">${excerpt}<\\\/p>\\n <\\\/div>\\n `;\\n } else {\\n \\\/\\\/ Event card\\n const eventDate = post._bifa_event_date;\\n const eventEndDate = post._bifa_event_end_date;\\n const location = post._bifa_location || 'Location TBA';\\n const status = this.getEventStatus(eventDate, eventEndDate);\\n const statusText = this.getStatusText(status);\\n const dateDisplay = this.formatEventDates(eventDate, eventEndDate);\\n\\n contentHtml = `\\n <\/p>\n<div class=\"\\\"bifa-preview-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n ${isHot ? '<\/p>\n<div class=\"\\\"bifa-hot-indicator\\\"\">HOT<\\\/div>' : ''}\\n ${status !== 'unknown' ? `<span class=\"\\\"bifa-preview-status\" ${status}\\\">${statusText}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-preview-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-preview-date\\\"\">${dateDisplay}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-preview-title\\\"\">${post.title.rendered}<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-preview-excerpt\\\"\">\\ud83d\\udccd ${location}<\\\/p>\\n <\\\/div>\\n `;\\n }\\n\\n card.innerHTML = contentHtml;\\n \\n \\\/\\\/ \\u041e\\u0442\\u043a\\u0440\\u044b\\u0432\\u0430\\u0442\\u044c \\u0441\\u0441\\u044b\\u043b\\u043a\\u0443 \\u043d\\u0430 \\u043f\\u043e\\u043b\\u043d\\u0443\\u044e \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u044c\\\/\\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0435 \\u0441 \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u044b\\u043c URL\\n card.addEventListener('click', () => {\\n window.location.href = postUrl;\\n });\\n \\n return card;\\n },\\n\\n \\\/\\\/ Format event dates\\n formatEventDates(startDate, endDate) {\\n if (!startDate) return '';\\n \\n const start = this.formatDate(startDate);\\n \\n if (endDate && startDate !== endDate) {\\n const end = this.formatDate(endDate);\\n return `${start} - ${end}`;\\n }\\n \\n return start;\\n },\\n\\n \\\/\\\/ Get event status\\n getEventStatus(startDate, endDate) {\\n if (!startDate) return 'unknown';\\n \\n const now = new Date();\\n const start = new Date(startDate);\\n const end = endDate ? new Date(endDate) : start;\\n \\n now.setHours(0, 0, 0, 0);\\n start.setHours(0, 0, 0, 0);\\n end.setHours(23, 59, 59, 999);\\n \\n if (now > end) {\\n return 'past';\\n } else if (now >= start && now <= end) {\\n return 'ongoing';\\n } else {\\n return 'upcoming';\\n }\\n },\\n\\n \\\/\\\/ Get status text\\n getStatusText(status) {\\n switch(status) {\\n case 'upcoming': return 'Upcoming';\\n case 'ongoing': return 'Live Now';\\n case 'past': return 'Past Event';\\n default: return '';\\n }\\n },\\n\\n \\\/\\\/ Get badge text\\n getBadgeText(post) {\\n if (post._bifa_badge_text) {\\n return post._bifa_badge_text;\\n }\\n \\n const category = post._embedded?.['wp:term']?.[0]?.[0];\\n return category?.name || '';\\n },\\n\\n \\\/\\\/ Format date\\n formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n },\\n\\n \\\/\\\/ Strip HTML\\n stripHtml(html) {\\n const temp = document.createElement('div');\\n temp.innerHTML = html;\\n return temp.textContent || temp.innerText || '';\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaHub.init();\\n});\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"en\\\"\">\\n<head>\\n<meta charset=\"\\\"UTF-8\\\"\">\\n<meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n<title>BIFA+ Events Calendar<\\\/title>\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= OFFICIAL BIFA+ BRAND VARIABLES ========= *\\\/\\n:root {\\n \\\/* Official BIFA+ Colors *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* Official BIFA+ Typography *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* Premium Effects *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n\\\/* Reset *\\\/\\n.bifa-calendar-wrapper * {\\n box-sizing: border-box;\\n}\\n\\n\\\/* ========= MAIN CALENDAR WRAPPER ========= *\\\/\\n.bifa-calendar-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n padding: 60px 0 80px 0;\\n background: transparent;\\n overflow: hidden;\\n font-family: var(--bifa-font-body);\\n}\\n\\n\\\/* ========= CONTENT CONTAINER ========= *\\\/\\n.bifa-calendar-content {\\n position: relative;\\n z-index: 10;\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n\\\/* ========= SECTION HEADER ========= *\\\/\\n.bifa-calendar-header {\\n text-align: center;\\n margin-bottom: 50px;\\n animation: fadeInUp 1.2s ease;\\n}\\n\\n.bifa-title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-gold-line {\\n width: 80px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n animation: lineGlow 3s ease-in-out infinite;\\n}\\n\\n@keyframes lineGlow {\\n 0%, 100% { opacity: 0.7; }\\n 50% { opacity: 1; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }\\n}\\n\\n.bifa-calendar-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin: 0;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n position: relative;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-calendar-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-calendar-title:hover {\\n transform: translateY(-3px);\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-calendar-title:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-calendar-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.1rem, 2vw, 1.3rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 1.5px;\\n margin: 0 0 15px 0;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-calendar-description {\\n max-width: 700px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\\n line-height: 1.7;\\n color: var(--bifa-gray);\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= NAVIGATION ========= *\\\/\\n.bifa-calendar-nav {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n margin-bottom: 40px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n padding: 25px 35px;\\n border-radius: 25px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n animation: slideInDown 1.2s ease 0.2s both;\\n}\\n\\n.bifa-nav-btn {\\n background: transparent;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n color: var(--bifa-deep-navy);\\n width: 55px;\\n height: 55px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-nav-btn::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-nav-btn:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-nav-btn:hover {\\n border-color: transparent;\\n color: var(--bifa-deep-navy);\\n transform: scale(1.1);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-nav-btn svg {\\n width: 24px;\\n height: 24px;\\n stroke-width: 3;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-nav-btn:hover svg {\\n transform: scale(1.1);\\n}\\n\\n.bifa-current-month {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.8rem, 3vw, 2.2rem);\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin: 0;\\n text-align: center;\\n position: relative;\\n}\\n\\n.bifa-current-month::after {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n height: 2px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 2px;\\n}\\n\\n\\\/* ========= CALENDAR GRID ========= *\\\/\\n.bifa-calendar-grid {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n border-radius: 30px;\\n padding: 40px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n animation: slideInUp 1.2s ease 0.4s both;\\n}\\n\\n.bifa-weekdays {\\n display: grid;\\n grid-template-columns: repeat(7, 1fr);\\n gap: 15px;\\n margin-bottom: 25px;\\n padding-bottom: 20px;\\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-weekday {\\n text-align: center;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.9rem;\\n color: var(--bifa-deep-navy);\\n text-transform: uppercase;\\n letter-spacing: 1.5px;\\n padding: 12px 0;\\n position: relative;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-weekday::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 20px;\\n height: 2px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 2px;\\n opacity: 0.5;\\n}\\n\\n.bifa-calendar-days {\\n display: grid;\\n grid-template-columns: repeat(7, 1fr);\\n gap: 12px;\\n}\\n\\n.bifa-calendar-day {\\n aspect-ratio: 1;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: space-between;\\n background: rgba(255, 255, 255, 0.8);\\n border: 2px solid transparent;\\n border-radius: 18px;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n padding: 10px;\\n overflow: hidden;\\n}\\n\\n.bifa-calendar-day::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 18px;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-calendar-day:hover::before {\\n opacity: 0.1;\\n}\\n\\n.bifa-calendar-day:hover {\\n transform: translateY(-5px);\\n box-shadow: var(--bifa-shadow-hover);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-calendar-day.other-month {\\n opacity: 0.3;\\n cursor: default;\\n}\\n\\n.bifa-calendar-day.other-month:hover {\\n transform: none;\\n box-shadow: none;\\n border-color: transparent;\\n}\\n\\n.bifa-calendar-day.other-month:hover::before {\\n opacity: 0;\\n}\\n\\n.bifa-calendar-day.today {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n font-weight: 800;\\n box-shadow: var(--bifa-shadow-gold);\\n border-color: transparent;\\n}\\n\\n.bifa-calendar-day.today::before {\\n opacity: 0;\\n}\\n\\n.bifa-calendar-day.has-events {\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.05) 0%, \\n rgba(29, 97, 67, 0.08) 100%);\\n border-color: rgba(29, 97, 67, 0.3);\\n}\\n\\n\\\/* Event day background slider *\\\/\\n.bifa-day-bg-slider {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n border-radius: 16px;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.bifa-day-bg-track {\\n display: flex;\\n width: 100%;\\n height: 100%;\\n transition: transform 0.5s ease;\\n}\\n\\n.bifa-day-bg-slide {\\n flex: 0 0 100%;\\n width: 100%;\\n height: 100%;\\n position: relative;\\n}\\n\\n.bifa-day-bg-image {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n filter: brightness(0.7) saturate(1.2);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-calendar-day:hover .bifa-day-bg-image {\\n filter: brightness(0.5) saturate(1.4);\\n transform: scale(1.05);\\n}\\n\\n\\\/* Content overlay *\\\/\\n.bifa-day-overlay {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.3) 0%, \\n rgba(10, 31, 68, 0.1) 50%, \\n rgba(29, 97, 67, 0.2) 100%);\\n z-index: 1;\\n border-radius: 16px;\\n}\\n\\n.bifa-day-content {\\n position: relative;\\n z-index: 2;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: space-between;\\n height: 100%;\\n width: 100%;\\n}\\n\\n.bifa-day-number {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.4rem;\\n font-weight: 800;\\n line-height: 1;\\n color: var(--bifa-deep-navy);\\n text-shadow: 2px 2px 4px rgba(255,255,255,0.8);\\n margin-top: 4px;\\n}\\n\\n.bifa-calendar-day.has-events .bifa-day-number {\\n color: var(--bifa-bright-white);\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.7);\\n}\\n\\n.bifa-calendar-day.today .bifa-day-number {\\n color: var(--bifa-deep-navy);\\n text-shadow: 2px 2px 4px rgba(255,255,255,0.5);\\n}\\n\\n.bifa-event-count {\\n font-family: var(--bifa-font-body);\\n font-size: 0.7rem;\\n color: var(--bifa-bright-white);\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\\n padding: 2px 8px;\\n border-radius: 12px;\\n text-shadow: none;\\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\\n margin-bottom: 4px;\\n letter-spacing: 0.5px;\\n}\\n\\n\\\/* Slider dots for multiple events *\\\/\\n.bifa-day-slider-dots {\\n position: absolute;\\n bottom: 4px;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n gap: 3px;\\n z-index: 3;\\n}\\n\\n.bifa-day-slider-dot {\\n width: 4px;\\n height: 4px;\\n border-radius: 50%;\\n background: rgba(255,255,255,0.5);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-day-slider-dot.active {\\n background: var(--bifa-heritage-gold);\\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);\\n}\\n\\n\\\/* ========= SELECTED EVENTS PANEL ========= *\\\/\\n.bifa-selected-events {\\n margin-top: 40px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n border-radius: 25px;\\n padding: 35px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n display: none;\\n animation: slideInUp 0.5s ease;\\n}\\n\\n.bifa-selected-events.show {\\n display: block;\\n}\\n\\n.bifa-events-header {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 30px;\\n padding-bottom: 20px;\\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-events-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin: 0;\\n}\\n\\n.bifa-close-events {\\n background: transparent;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n font-size: 1.5rem;\\n color: var(--bifa-gray);\\n cursor: pointer;\\n width: 45px;\\n height: 45px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-close-events::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, #ff4757, #ff3742);\\n border-radius: 50%;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-close-events:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-close-events:hover {\\n color: var(--bifa-bright-white);\\n border-color: transparent;\\n transform: rotate(90deg) scale(1.1);\\n}\\n\\n.bifa-events-list {\\n display: flex;\\n flex-direction: column;\\n gap: 25px;\\n}\\n\\n\\\/* ========= EVENT ITEMS ========= *\\\/\\n.bifa-event-item {\\n background: rgba(255, 255, 255, 0.9);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n border-radius: 20px;\\n padding: 0;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n display: flex;\\n gap: 25px;\\n min-height: 130px;\\n}\\n\\n.bifa-event-item::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-event-item:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-event-item:hover {\\n transform: translateX(10px);\\n box-shadow: var(--bifa-shadow-hover);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-event-image {\\n width: 150px;\\n height: 130px;\\n flex-shrink: 0;\\n background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);\\n overflow: hidden;\\n position: relative;\\n border-radius: 20px 0 0 20px;\\n}\\n\\n.bifa-event-image img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-event-item:hover .bifa-event-image img {\\n transform: scale(1.1);\\n}\\n\\n.bifa-event-badge {\\n position: absolute;\\n top: 12px;\\n left: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 5px 12px;\\n border-radius: 15px;\\n font-family: var(--bifa-font-heading);\\n font-size: 0.7rem;\\n font-weight: 800;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\\n}\\n\\n.bifa-event-details {\\n flex: 1;\\n padding: 25px;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n}\\n\\n.bifa-event-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.3rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 12px;\\n line-height: 1.3;\\n}\\n\\n.bifa-event-time {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n color: var(--bifa-heritage-gold);\\n font-weight: 600;\\n margin-bottom: 8px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n}\\n\\n.bifa-event-location {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: var(--bifa-gray);\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n margin-bottom: 10px;\\n}\\n\\n.bifa-event-status {\\n font-family: var(--bifa-font-heading);\\n font-size: 0.8rem;\\n padding: 5px 15px;\\n border-radius: 20px;\\n display: inline-block;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n background: var(--bifa-civic-green);\\n color: var(--bifa-bright-white);\\n}\\n\\n.bifa-event-status.urgent {\\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\\n color: var(--bifa-deep-navy);\\n}\\n\\n.bifa-no-events {\\n text-align: center;\\n padding: 60px;\\n color: var(--bifa-gray);\\n}\\n\\n.bifa-no-events-icon {\\n font-size: 3rem;\\n margin-bottom: 15px;\\n filter: grayscale(1);\\n}\\n\\n\\\/* ========= CALENDAR LEGEND ========= *\\\/\\n.bifa-calendar-legend {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap;\\n gap: 30px;\\n margin-top: 40px;\\n padding: 25px;\\n background: rgba(255, 255, 255, 0.8);\\n backdrop-filter: blur(10px);\\n border-radius: 20px;\\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.05);\\n animation: fadeInUp 1.2s ease 0.8s both;\\n}\\n\\n.bifa-legend-item {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: var(--bifa-gray);\\n font-weight: 500;\\n}\\n\\n.bifa-legend-dot {\\n width: 18px;\\n height: 18px;\\n border-radius: 50%;\\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\\n}\\n\\n.bifa-legend-dot.today {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n}\\n\\n.bifa-legend-dot.has-event {\\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\\n}\\n\\n.bifa-legend-dot.selected {\\n background: rgba(212, 175, 55, 0.2);\\n border: 3px solid var(--bifa-heritage-gold);\\n}\\n\\n\\\/* ========= LOADING STATE ========= *\\\/\\n.bifa-loading {\\n text-align: center;\\n padding: 80px;\\n color: var(--bifa-gray);\\n}\\n\\n.bifa-spinner {\\n width: 50px;\\n height: 50px;\\n border: 3px solid rgba(212, 175, 55, 0.2);\\n border-top: 3px solid var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: bifaSpin 1s linear infinite;\\n margin: 0 auto 25px;\\n}\\n\\n@keyframes bifaSpin {\\n 0% { transform: rotate(0deg); }\\n 100% { transform: rotate(360deg); }\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes slideInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes slideInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE DESIGN ========= *\\\/\\n@media (max-width: 768px) {\\n .bifa-calendar-wrapper {\\n padding: 40px 0 60px 0;\\n }\\n \\n .bifa-calendar-content {\\n padding: 0 15px;\\n }\\n \\n .bifa-calendar-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-calendar-grid {\\n padding: 25px;\\n }\\n \\n .bifa-weekday {\\n font-size: 0.75rem;\\n padding: 8px 0;\\n }\\n \\n .bifa-day-number {\\n font-size: 1.1rem;\\n }\\n \\n .bifa-event-count {\\n display: none;\\n }\\n \\n .bifa-event-item {\\n flex-direction: column;\\n min-height: auto;\\n }\\n \\n .bifa-event-image {\\n width: 100%;\\n height: 180px;\\n border-radius: 20px 20px 0 0;\\n }\\n \\n .bifa-event-details {\\n padding: 20px;\\n }\\n \\n .bifa-calendar-nav {\\n padding: 20px 25px;\\n }\\n \\n .bifa-nav-btn {\\n width: 50px;\\n height: 50px;\\n }\\n \\n .bifa-current-month {\\n font-size: 1.5rem;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-calendar-wrapper {\\n padding: 30px 0 50px 0;\\n }\\n \\n .bifa-calendar-content {\\n padding: 0 10px;\\n }\\n \\n .bifa-calendar-title {\\n font-size: 1.8rem;\\n }\\n \\n .bifa-calendar-subtitle {\\n font-size: 1rem;\\n }\\n \\n .bifa-calendar-grid {\\n padding: 20px;\\n }\\n \\n .bifa-weekday {\\n font-size: 0.7rem;\\n }\\n \\n .bifa-day-number {\\n font-size: 1rem;\\n }\\n \\n .bifa-calendar-nav {\\n padding: 18px 20px;\\n }\\n \\n .bifa-nav-btn {\\n width: 45px;\\n height: 45px;\\n }\\n \\n .bifa-current-month {\\n font-size: 1.3rem;\\n }\\n \\n .bifa-legend-item {\\n font-size: 0.85rem;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-calendar-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-bg\\\"\">\\n <\/p>\n<div class=\"\\\"calendar-shape\" shape-calendar-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"calendar-shape\" shape-calendar-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"calendar-shape\" shape-calendar-3\\\"><\\\/div>\\n \\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-header\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-title-decoration\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-gold-line\\\"\"><\\\/div>\\n <\/p>\n<h2 class=\"\\\"bifa-calendar-title\\\"\">BIFA+ Events Calendar<\\\/h2>\\n <\/p>\n<div class=\"\\\"bifa-gold-line\\\"\"><\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"bifa-calendar-subtitle\\\"\">Upcoming International Events & Initiatives<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-calendar-description\\\"\">\\n Explore our comprehensive schedule of international football events, diplomatic meetings, \\n youth programs, and alliance initiatives designed to foster global cooperation through sport.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-nav\\\"\">\\n <button class=\"\\\"bifa-nav-btn\\\"\" id=\"\\\"bifaPrevMonth\\\"\" aria-label=\"\\\"Previous\" month\\\">\\n <svg width=\"\\\"24\\\"\" height=\"\\\"24\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <path d=\"\\\"M15\" 18l-6-6 6-6\\\"\\>\\n <\\\/svg>\\n <\\\/button>\\n <\/p>\n<h3 class=\"\\\"bifa-current-month\\\"\" id=\"\\\"bifaCurrentMonth\\\"\">Loading...<\\\/h3>\\n <button class=\"\\\"bifa-nav-btn\\\"\" id=\"\\\"bifaNextMonth\\\"\" aria-label=\"\\\"Next\" month\\\">\\n <svg width=\"\\\"24\\\"\" height=\"\\\"24\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <path d=\"\\\"M9\" 18l6-6-6-6\\\"\\>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-grid\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-weekdays\\\"\" id=\"\\\"bifaWeekdays\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-calendar-days\\\"\" id=\"\\\"bifaCalendarDays\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-spinner\\\"\"><\\\/div>\\n <\/p>\n<div>Loading Events Calendar...<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-selected-events\\\"\" id=\"\\\"bifaSelectedEvents\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-events-header\\\"\">\\n <\/p>\n<h4 class=\"\\\"bifa-events-title\\\"\" id=\"\\\"bifaEventsTitle\\\"\">Events<\\\/h4>\\n <button class=\"\\\"bifa-close-events\\\"\" id=\"\\\"bifaCloseEvents\\\"\" aria-label=\"\\\"Close\" events\\\">\\u00d7<\\\/button>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-events-list\\\"\" id=\"\\\"bifaEventsList\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-legend\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-legend-item\\\"\">\\n <span class=\"\\\"bifa-legend-dot\" today\\\"><\\\/span>\\n <span>Today<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-legend-item\\\"\">\\n <span class=\"\\\"bifa-legend-dot\" has-event\\\"><\\\/span>\\n <span>Has Events<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-legend-item\\\"\">\\n <span class=\"\\\"bifa-legend-dot\" selected\\\"><\\\/span>\\n <span>Selected Date<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n<\\\/div>\\n\\n<script>\\n(function() {\\n 'use strict';\\n \\n \\\/\\\/ BIFA+ Calendar System\\n let bifaCurrentDate = new Date();\\n let bifaSelectedDate = null;\\n let bifaEventsData = [];\\n \\n \\\/\\\/ Utility Functions\\n function formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n const options = { month: 'long', day: 'numeric', year: 'numeric' };\\n return date.toLocaleDateString('en-US', options);\\n }\\n \\n function formatTime(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n const options = { hour: '2-digit', minute: '2-digit' };\\n return date.toLocaleTimeString('en-US', options);\\n }\\n \\n function getMonthYearString(date) {\\n const options = { month: 'long', year: 'numeric' };\\n return date.toLocaleDateString('en-US', options);\\n }\\n \\n function getDaysInMonth(date) {\\n return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\\n }\\n \\n function getFirstDayOfMonth(date) {\\n return new Date(date.getFullYear(), date.getMonth(), 1).getDay();\\n }\\n \\n function isSameDay(date1, date2) {\\n return date1.getFullYear() === date2.getFullYear() &&\\n date1.getMonth() === date2.getMonth() &&\\n date1.getDate() === date2.getDate();\\n }\\n \\n function hasEventsOnDate(date) {\\n const dateStr = date.toISOString().split('T')[0];\\n return bifaEventsData.some(event => {\\n const eventDate = event._bifa_event_date;\\n if (!eventDate) return false;\\n \\n const eventStartDate = new Date(eventDate);\\n const eventEndDate = event._bifa_event_end_date;\\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;\\n \\n const checkDate = new Date(dateStr);\\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \\n checkDate <= new Date(endDate.toISOString().split('T')[0]);\\n });\\n }\\n \\n function getEventsOnDate(date) {\\n const dateStr = date.toISOString().split('T')[0];\\n return bifaEventsData.filter(event => {\\n const eventDate = event._bifa_event_date;\\n if (!eventDate) return false;\\n \\n const eventStartDate = new Date(eventDate);\\n const eventEndDate = event._bifa_event_end_date;\\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;\\n \\n const checkDate = new Date(dateStr);\\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \\n checkDate <= new Date(endDate.toISOString().split('T')[0]);\\n });\\n }\\n \\n \\\/\\\/ Create animated background particles\\n function createParticles() {\\n const particlesContainer = document.querySelector('.bifa-calendar-bg');\\n const particleCount = 12;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'calendar-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 8) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n }\\n \\n \\\/\\\/ Create weekdays header\\n function createWeekdays() {\\n const weekdaysContainer = document.getElementById('bifaWeekdays');\\n const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\\n \\n weekdaysContainer.innerHTML = '';\\n days.forEach(day => {\\n const dayElement = document.createElement('div');\\n dayElement.className = 'bifa-weekday';\\n dayElement.textContent = day;\\n weekdaysContainer.appendChild(dayElement);\\n });\\n }\\n \\n \\\/\\\/ Render calendar\\n function renderCalendar() {\\n const calendarDays = document.getElementById('bifaCalendarDays');\\n const currentMonthElement = document.getElementById('bifaCurrentMonth');\\n \\n currentMonthElement.textContent = getMonthYearString(bifaCurrentDate);\\n calendarDays.innerHTML = '';\\n \\n const daysInMonth = getDaysInMonth(bifaCurrentDate);\\n const firstDay = getFirstDayOfMonth(bifaCurrentDate);\\n const today = new Date();\\n \\n \\\/\\\/ Previous month days\\n const prevMonthDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth() - 1);\\n const daysInPrevMonth = getDaysInMonth(prevMonthDate);\\n \\n for (let i = firstDay - 1; i >= 0; i--) {\\n const dayElement = document.createElement('div');\\n dayElement.className = 'bifa-calendar-day other-month';\\n \\n const dayContent = document.createElement('div');\\n dayContent.className = 'bifa-day-content';\\n \\n const dayNumber = document.createElement('div');\\n dayNumber.className = 'bifa-day-number';\\n dayNumber.textContent = daysInPrevMonth - i;\\n dayContent.appendChild(dayNumber);\\n \\n dayElement.appendChild(dayContent);\\n calendarDays.appendChild(dayElement);\\n }\\n \\n \\\/\\\/ Current month days\\n for (let day = 1; day <= daysInMonth; day++) {\\n const dayDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth(), day);\\n const dayElement = document.createElement('div');\\n let classes = ['bifa-calendar-day'];\\n \\n if (isSameDay(dayDate, today)) {\\n classes.push('today');\\n }\\n \\n if (hasEventsOnDate(dayDate)) {\\n classes.push('has-events');\\n }\\n \\n dayElement.className = classes.join(' ');\\n \\n if (hasEventsOnDate(dayDate)) {\\n const events = getEventsOnDate(dayDate);\\n const eventsWithImages = events.filter(event => \\n event._embedded?.['wp:featuredmedia']?.[0]?.source_url\\n );\\n \\n if (eventsWithImages.length > 0) {\\n \\\/\\\/ Create background image slider\\n const bgSlider = document.createElement('div');\\n bgSlider.className = 'bifa-day-bg-slider';\\n \\n const bgTrack = document.createElement('div');\\n bgTrack.className = 'bifa-day-bg-track';\\n \\n eventsWithImages.forEach(event => {\\n const media = event._embedded['wp:featuredmedia'][0];\\n const slide = document.createElement('div');\\n slide.className = 'bifa-day-bg-slide';\\n \\n const bgImage = document.createElement('img');\\n bgImage.className = 'bifa-day-bg-image';\\n bgImage.src = media.source_url;\\n bgImage.alt = event.title.rendered;\\n bgImage.loading = 'lazy';\\n \\n slide.appendChild(bgImage);\\n bgTrack.appendChild(slide);\\n });\\n \\n bgSlider.appendChild(bgTrack);\\n dayElement.appendChild(bgSlider);\\n \\n \\\/\\\/ Add overlay\\n const overlay = document.createElement('div');\\n overlay.className = 'bifa-day-overlay';\\n dayElement.appendChild(overlay);\\n \\n \\\/\\\/ Create slider dots if multiple images\\n if (eventsWithImages.length > 1) {\\n const dotsContainer = document.createElement('div');\\n dotsContainer.className = 'bifa-day-slider-dots';\\n \\n for (let i = 0; i < eventsWithImages.length; i++) {\\n const dot = document.createElement('div');\\n dot.className = `bifa-day-slider-dot ${i === 0 ? 'active' : ''}`;\\n dotsContainer.appendChild(dot);\\n }\\n \\n dayElement.appendChild(dotsContainer);\\n \\n \\\/\\\/ Auto-rotate slides\\n let currentSlide = 0;\\n setInterval(() => {\\n currentSlide = (currentSlide + 1) % eventsWithImages.length;\\n bgTrack.style.transform = `translateX(-${currentSlide * 100}%)`;\\n \\n \\\/\\\/ Update dots\\n dotsContainer.querySelectorAll('.bifa-day-slider-dot').forEach((dot, index) => {\\n dot.classList.toggle('active', index === currentSlide);\\n });\\n }, 3000);\\n }\\n }\\n }\\n \\n \\\/\\\/ Create day content\\n const dayContent = document.createElement('div');\\n dayContent.className = 'bifa-day-content';\\n \\n \\\/\\\/ Day number\\n const dayNumber = document.createElement('div');\\n dayNumber.className = 'bifa-day-number';\\n dayNumber.textContent = day;\\n dayContent.appendChild(dayNumber);\\n \\n if (hasEventsOnDate(dayDate)) {\\n const events = getEventsOnDate(dayDate);\\n \\n \\\/\\\/ Event count\\n const eventCount = document.createElement('div');\\n eventCount.className = 'bifa-event-count';\\n eventCount.textContent = `${events.length} event${events.length > 1 ? 's' : ''}`;\\n dayContent.appendChild(eventCount);\\n }\\n \\n dayElement.appendChild(dayContent);\\n \\n if (!dayElement.classList.contains('other-month')) {\\n dayElement.addEventListener('click', () => selectDate(dayDate));\\n }\\n \\n calendarDays.appendChild(dayElement);\\n }\\n \\n \\\/\\\/ Next month days\\n const totalCells = calendarDays.children.length;\\n const remainingCells = 42 - totalCells;\\n for (let i = 1; i <= remainingCells; i++) {\\n const dayElement = document.createElement('div');\\n dayElement.className = 'bifa-calendar-day other-month';\\n \\n const dayContent = document.createElement('div');\\n dayContent.className = 'bifa-day-content';\\n \\n const dayNumber = document.createElement('div');\\n dayNumber.className = 'bifa-day-number';\\n dayNumber.textContent = i;\\n dayContent.appendChild(dayNumber);\\n \\n dayElement.appendChild(dayContent);\\n calendarDays.appendChild(dayElement);\\n }\\n }\\n \\n \\\/\\\/ Select date\\n function selectDate(date) {\\n bifaSelectedDate = date;\\n showSelectedDayEvents(date);\\n }\\n \\n \\\/\\\/ Show selected day events\\n function showSelectedDayEvents(date) {\\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\\n const eventsTitle = document.getElementById('bifaEventsTitle');\\n const eventsList = document.getElementById('bifaEventsList');\\n \\n eventsTitle.textContent = `Events on ${formatDate(date)}`;\\n \\n const events = getEventsOnDate(date);\\n \\n eventsList.innerHTML = '';\\n \\n if (events.length === 0) {\\n eventsList.innerHTML = `\\n \n\n<div class=\"\\\"bifa-no-events\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-no-events-icon\\\"\">\\ud83d\\udcc5<\\\/div>\\n <\/p>\n<div>No events scheduled for this date<\\\/div>\\n <\\\/div>\\n `;\\n } else {\\n events.forEach(event => {\\n \\\/\\\/ Get event image\\n const media = event._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || 'https:\\\/\\\/via.placeholder.com\\\/320x180\\\/0A1F44\\\/D4AF37?text=BIFA+Event';\\n \\n \\\/\\\/ Get additional data\\n const badgeText = event._bifa_badge_text || 'Event';\\n const priority = event._bifa_priority || 'normal';\\n \\n \\\/\\\/ Create event item\\n const eventElement = document.createElement('div');\\n eventElement.className = 'bifa-event-item';\\n \\n \\\/\\\/ Image container\\n const imageContainer = document.createElement('div');\\n imageContainer.className = 'bifa-event-image';\\n \\n const img = document.createElement('img');\\n img.src = imageUrl;\\n img.alt = event.title.rendered;\\n img.loading = 'lazy';\\n imageContainer.appendChild(img);\\n \\n \\\/\\\/ Badge\\n if (badgeText && badgeText.trim()) {\\n const badge = document.createElement('div');\\n badge.className = 'bifa-event-badge';\\n badge.textContent = badgeText;\\n imageContainer.appendChild(badge);\\n }\\n \\n \\\/\\\/ Details container\\n const detailsContainer = document.createElement('div');\\n detailsContainer.className = 'bifa-event-details';\\n \\n \\\/\\\/ Title\\n const title = document.createElement('div');\\n title.className = 'bifa-event-title';\\n title.textContent = event.title.rendered;\\n detailsContainer.appendChild(title);\\n \\n \\\/\\\/ Time\\n if (event._bifa_event_date) {\\n const timeElement = document.createElement('div');\\n timeElement.className = 'bifa-event-time';\\n timeElement.innerHTML = `\\ud83d\\udd50 ${formatTime(event._bifa_event_date)}`;\\n detailsContainer.appendChild(timeElement);\\n }\\n \\n \\\/\\\/ Location\\n if (event._bifa_location) {\\n const locationElement = document.createElement('div');\\n locationElement.className = 'bifa-event-location';\\n locationElement.innerHTML = `\\ud83d\\udccd ${event._bifa_location}`;\\n detailsContainer.appendChild(locationElement);\\n }\\n \\n \\\/\\\/ Status\\n const statusElement = document.createElement('div');\\n statusElement.className = `bifa-event-status ${priority}`;\\n statusElement.textContent = priority === 'urgent' ? 'Priority Event' : 'Regular Event';\\n detailsContainer.appendChild(statusElement);\\n \\n \\\/\\\/ Assemble event item\\n eventElement.appendChild(imageContainer);\\n eventElement.appendChild(detailsContainer);\\n \\n \\\/\\\/ Add click handler\\n eventElement.addEventListener('click', () => {\\n window.open(event.link, '_blank');\\n });\\n \\n eventsList.appendChild(eventElement);\\n });\\n }\\n \\n selectedEventsContainer.classList.add('show');\\n selectedEventsContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\\n }\\n \\n \\\/\\\/ Close selected day events\\n function closeSelectedDayEvents() {\\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\\n selectedEventsContainer.classList.remove('show');\\n bifaSelectedDate = null;\\n }\\n \\n \\\/\\\/ Load events from API\\n function loadEvents() {\\n const apiUrl = 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events?_embed&per_page=100&acf_format=standard';\\n \\n fetch(apiUrl)\\n .then(response => {\\n if (!response.ok) throw new Error('Network response was not ok');\\n return response.json();\\n })\\n .then(posts => {\\n \\\/\\\/ Filter only events with dates\\n const events = posts.filter(post => {\\n const itemTypes = post.bifa_item_type || [];\\n const classNames = post.class_list || [];\\n \\n \\\/\\\/ Check taxonomy ID (event = 3)\\n const hasEventId = itemTypes.some(typeId => typeId == 3 || typeId == 'event');\\n \\n \\\/\\\/ Check CSS classes\\n const hasEventClass = classNames.some(className => \\n className.includes('bifa_item_type-event')\\n );\\n \\n \\\/\\\/ Check for event date\\n const hasEventDate = post._bifa_event_date;\\n \\n return (hasEventId || hasEventClass) && hasEventDate;\\n });\\n \\n bifaEventsData = events;\\n createWeekdays();\\n renderCalendar();\\n })\\n .catch(err => {\\n console.error('Error loading events:', err);\\n const calendarDays = document.getElementById('bifaCalendarDays');\\n calendarDays.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div>Error loading events. Please try again later.<\\\/div>\\n <\\\/div>\\n `;\\n });\\n }\\n \\n \\\/\\\/ Initialize calendar\\n function initCalendar() {\\n \\\/\\\/ Create animated background\\n createParticles();\\n \\n \\\/\\\/ Navigation event listeners\\n document.getElementById('bifaPrevMonth').addEventListener('click', () => {\\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() - 1);\\n renderCalendar();\\n });\\n \\n document.getElementById('bifaNextMonth').addEventListener('click', () => {\\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() + 1);\\n renderCalendar();\\n });\\n \\n \\\/\\\/ Close events handler\\n document.getElementById('bifaCloseEvents').addEventListener('click', closeSelectedDayEvents);\\n \\n \\\/\\\/ Load events\\n loadEvents();\\n }\\n \\n \\\/\\\/ Initialize when DOM is ready\\n if (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', initCalendar);\\n } else {\\n initCalendar();\\n }\\n})();\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"ru\\\"\">\\n<head>\\n<meta charset=\"\\\"UTF-8\\\"\">\\n<meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n<title>BIFA+ Media Gallery<\\\/title>\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* \\u0412\\u0421\\u0415 \\u0412\\u0410\\u0428\\u0418 \\u0421\\u0422\\u0418\\u041b\\u0418 \\u041e\\u0421\\u0422\\u0410\\u0412\\u041b\\u042f\\u0415\\u041c \\u0411\\u0415\\u0417 \\u0418\\u0417\\u041c\\u0415\\u041d\\u0415\\u041d\\u0418\\u0419 - \\u041e\\u041d\\u0418 \\u0418\\u0414\\u0415\\u0410\\u041b\\u042c\\u041d\\u042b *\\\/\\n.bifa-media-wrapper {\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.bifa-media-wrapper * { box-sizing: border-box; }\\n\\n.bifa-media-wrapper {\\n background: #FFFFFF;\\n padding: 100px 0;\\n margin: 0 calc(-50vw + 50%);\\n width: 100vw;\\n position: relative;\\n}\\n\\n.media-bg-animation {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n top: 0;\\n left: 0;\\n pointer-events: none;\\n}\\n\\n.media-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatMedia 25s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.15;\\n}\\n\\n@keyframes floatMedia {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.2; }\\n 90% { opacity: 0.2; }\\n 100% {\\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n.bifa-media-main {\\n position: relative;\\n z-index: 10;\\n}\\n\\n.bifa-media-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n.bifa-section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n position: relative;\\n}\\n\\n.bifa-section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n}\\n\\n.bifa-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n}\\n\\n.bifa-section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n color: #4a5568;\\n max-width: 600px;\\n margin: 0 auto;\\n line-height: 1.6;\\n}\\n\\n.bifa-media-filters {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap;\\n gap: 15px;\\n margin-bottom: 50px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n padding: 25px;\\n border-radius: 25px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n animation: slideInDown 1.2s ease 0.2s both;\\n}\\n\\n.bifa-filter-btn {\\n padding: 12px 28px;\\n background: transparent;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-size: 0.9rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-filter-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-filter-btn:hover::before,\\n.bifa-filter-btn.active::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-filter-btn:hover,\\n.bifa-filter-btn.active {\\n color: var(--bifa-deep-navy);\\n border-color: transparent;\\n transform: translateY(-3px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-media-stats {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 30px;\\n margin-bottom: 60px;\\n}\\n\\n.bifa-stat-card {\\n background: #FFFFFF;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n padding: 30px;\\n text-align: center;\\n opacity: 0;\\n animation: fadeInUpMedia 1.2s ease forwards;\\n}\\n\\n.bifa-stat-card:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-stat-card:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-stat-card:nth-child(3) { animation-delay: 0.3s; }\\n.bifa-stat-card:nth-child(4) { animation-delay: 0.4s; }\\n\\n.bifa-stat-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-stat-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-stat-card:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-stat-icon {\\n width: 60px;\\n height: 60px;\\n margin: 0 auto 15px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n font-size: 1.8rem;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-stat-number {\\n font-family: var(--bifa-font-heading);\\n font-size: 2.5rem;\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 5px;\\n}\\n\\n.bifa-stat-label {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n color: var(--bifa-gray);\\n font-weight: 600;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.bifa-media-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 50px;\\n}\\n\\n.bifa-media-item {\\n background: #FFFFFF;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n opacity: 0;\\n animation: fadeInUpMedia 1.2s ease forwards;\\n}\\n\\n.bifa-media-item:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-media-item:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-media-item:nth-child(3) { animation-delay: 0.3s; }\\n.bifa-media-item:nth-child(4) { animation-delay: 0.4s; }\\n.bifa-media-item:nth-child(5) { animation-delay: 0.5s; }\\n.bifa-media-item:nth-child(6) { animation-delay: 0.6s; }\\n\\n.bifa-media-item::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-media-item:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-media-item:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-media-image {\\n position: relative;\\n height: 200px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-media-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 60%, \\n rgba(10, 31, 68, 0.8) 100%\\n );\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-media-item:hover .bifa-media-image::before {\\n opacity: 0.9;\\n}\\n\\n.bifa-media-image img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.5s ease;\\n}\\n\\n.bifa-media-item:hover .bifa-media-image img {\\n transform: scale(1.1);\\n}\\n\\n.bifa-featured-indicator {\\n position: absolute;\\n top: 15px;\\n left: 15px;\\n background: linear-gradient(135deg, #ff4757, #ff6348);\\n color: white;\\n padding: 6px 16px;\\n border-radius: 20px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 3;\\n display: flex;\\n align-items: center;\\n gap: 6px;\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n animation: featuredPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes featuredPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-featured-indicator::before {\\n content: '\\u2b50';\\n font-size: 12px;\\n}\\n\\n.bifa-media-badge {\\n position: absolute;\\n top: 15px;\\n right: 15px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-media-content {\\n padding: 25px;\\n}\\n\\n.bifa-media-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n margin-bottom: 12px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n font-weight: 500;\\n}\\n\\n.bifa-media-date::before {\\n content: '';\\n width: 5px;\\n height: 5px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-media-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 15px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-media-item:hover .bifa-media-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-media-caption {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: #4a5568;\\n line-height: 1.6;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 15px;\\n}\\n\\n.bifa-media-meta {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n padding-top: 15px;\\n border-top: 1px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-media-type {\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n font-weight: 600;\\n}\\n\\n.bifa-media-photographer {\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n}\\n\\n.bifa-view-all-container {\\n text-align: center;\\n margin-top: 60px;\\n}\\n\\n.bifa-view-all-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-view-all-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-view-all-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-view-all-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-view-all-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-view-all-btn:hover svg {\\n transform: translateX(5px);\\n}\\n\\n.bifa-media-loading {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 400px;\\n}\\n\\n.bifa-media-loader {\\n width: 60px;\\n height: 60px;\\n border: 4px solid rgba(212, 175, 55, 0.2);\\n border-top-color: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: spinMedia 1s linear infinite;\\n}\\n\\n@keyframes spinMedia {\\n to { transform: rotate(360deg); }\\n}\\n\\n@keyframes fadeInUpMedia {\\n from {\\n opacity: 0;\\n transform: translateY(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes slideInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@media (max-width: 1200px) {\\n .bifa-media-grid {\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 35px;\\n }\\n}\\n\\n@media (max-width: 992px) {\\n .bifa-media-wrapper {\\n padding: 70px 0;\\n }\\n .bifa-media-stats {\\n grid-template-columns: repeat(2, 1fr);\\n gap: 25px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-media-grid {\\n grid-template-columns: 1fr;\\n gap: 25px;\\n }\\n .bifa-media-wrapper {\\n padding: 50px 0;\\n }\\n .bifa-media-filters {\\n padding: 20px;\\n gap: 10px;\\n }\\n .bifa-filter-btn {\\n padding: 8px 20px;\\n font-size: 0.8rem;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-section-title {\\n font-size: 2rem;\\n }\\n .bifa-media-stats {\\n grid-template-columns: 1fr;\\n gap: 20px;\\n }\\n .bifa-stat-number {\\n font-size: 2rem;\\n }\\n .bifa-media-content {\\n padding: 20px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div id=\"\\\"bifa-media-section\\\"\" class=\"\\\"bifa-media-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"media-bg-animation\\\"\">\\n \\n <\\\/div>\\n\\n \\n <main class=\"\\\"bifa-media-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">Media Gallery<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Visual stories of BIFA+ global initiatives and achievements<\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-media-filters\\\"\">\\n <button class=\"\\\"bifa-filter-btn\" active\\\" data-filter=\"\\\"all\\\"\">All Media<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"photo\\\"\">Photos<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"video\\\"\">Videos<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"gallery\\\"\">Galleries<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"infographic\\\"\">Infographics<\\\/button>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-media-stats\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83d\\udcf8<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Total Media<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83c\\udfa5<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Videos<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83d\\uddbc\\ufe0f<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Photo Galleries<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83d\\udcca<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Infographics<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div id=\"\\\"mediaGrid\\\"\" class=\"\\\"bifa-media-grid\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-loader\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-view-all-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/media-center\\\/\\\"\" class=\"\\\"bifa-view-all-btn\\\"\">\\n <span>View Full Media Gallery<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/main>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Media Module - \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041d\\u0410\\u042f \\u0412\\u0415\\u0420\\u0421\\u0418\\u042f \\u0414\\u041b\\u042f MEDIABIFA\\nconst BifaMedia = {\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_media',\\n taxonomyUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_media_type',\\n mediaItems: [],\\n mediaTypes: {},\\n currentFilter: 'all',\\n stats: {\\n total: 0,\\n photo: 0,\\n video: 0,\\n gallery: 0,\\n infographic: 0\\n }\\n },\\n\\n \\\/\\\/ Initialize\\n async init() {\\n this.createParticles();\\n await this.loadTaxonomies();\\n await this.loadMediaItems();\\n this.setupFilters();\\n this.updateStatistics();\\n this.animateNumbers();\\n },\\n\\n \\\/\\\/ Load taxonomies first\\n async loadTaxonomies() {\\n try {\\n const response = await fetch(this.config.taxonomyUrl);\\n if (response.ok) {\\n const types = await response.json();\\n types.forEach(type => {\\n this.config.mediaTypes[type.id] = type.slug;\\n });\\n }\\n } catch (error) {\\n console.log('Could not load taxonomies, using defaults');\\n \\\/\\\/ Default mapping based on your setup\\n this.config.mediaTypes = {\\n 3: 'photo',\\n 4: 'gallery',\\n 5: 'video',\\n 6: 'infographic'\\n };\\n }\\n },\\n\\n \\\/\\\/ Create background particles\\n createParticles() {\\n const container = document.querySelector('.media-bg-animation');\\n if (!container) return;\\n\\n for (let i = 0; i < 20; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'media-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 25 + 's';\\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n container.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Load media items with proper meta fields\\n async loadMediaItems() {\\n const container = document.getElementById('mediaGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Load with embedded data and ACF format\\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=12&orderby=date&order=desc&acf_format=standard');\\n if (!response.ok) throw new Error('Failed to load media');\\n \\n const data = await response.json();\\n this.config.mediaItems = data;\\n \\n \\\/\\\/ Count items by type\\n this.config.stats.total = data.length;\\n data.forEach(item => {\\n const type = this.getMediaType(item);\\n if (this.config.stats[type] !== undefined) {\\n this.config.stats[type]++;\\n }\\n });\\n \\n this.renderMediaGrid(data);\\n } catch (error) {\\n console.error('Error loading media:', error);\\n container.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div style=\"\\\"font-size:\" 3rem; margin-bottom: 15px;\\\">\\ud83d\\udcc1<\\\/div>\\n <\/p>\n<h3>Loading Media Gallery...<\\\/h3>\\n <\/p>\n<p>Please check back in a moment.<\\\/p>\\n <\\\/div>\\n `;\\n }\\n },\\n\\n \\\/\\\/ Get media type from item\\n getMediaType(item) {\\n \\\/\\\/ Try from taxonomy\\n if (item.bifa_media_type && item.bifa_media_type.length > 0) {\\n const typeId = item.bifa_media_type[0];\\n return this.config.mediaTypes[typeId] || 'photo';\\n }\\n \\n \\\/\\\/ Try from embedded terms\\n if (item._embedded && item._embedded['wp:term']) {\\n const terms = item._embedded['wp:term'].flat();\\n const typeTerm = terms.find(term => term.taxonomy === 'bifa_media_type');\\n if (typeTerm) return typeTerm.slug;\\n }\\n \\n \\\/\\\/ Default\\n return 'photo';\\n },\\n\\n \\\/\\\/ Get featured image URL\\n getFeaturedImage(item) {\\n \\\/\\\/ Try featured media\\n if (item._embedded && item._embedded['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]) {\\n const media = item._embedded['wp:featuredmedia'][0];\\n if (media.media_details && media.media_details.sizes) {\\n return media.media_details.sizes.medium_large?.source_url || \\n media.media_details.sizes.large?.source_url || \\n media.source_url;\\n }\\n return media.source_url;\\n }\\n \\n \\\/\\\/ Try ACF fields\\n if (item.acf && item.acf.featured_image) {\\n return item.acf.featured_image;\\n }\\n \\n \\\/\\\/ Placeholder\\n return 'https:\\\/\\\/via.placeholder.com\\\/600x400\\\/0A1F44\\\/D4AF37?text=BIFA+Media';\\n },\\n\\n \\\/\\\/ Get metadata from custom fields\\n getMetadata(item) {\\n const meta = {\\n caption: '',\\n photographer: 'BIFA+ Team',\\n location: '',\\n priority: 'normal',\\n date: item.date\\n };\\n \\n \\\/\\\/ Try meta fields (our custom fields)\\n if (item.meta) {\\n meta.caption = item.meta._bifa_media_caption || '';\\n meta.photographer = item.meta._bifa_media_photographer || meta.photographer;\\n meta.location = item.meta._bifa_media_location || '';\\n meta.priority = item.meta._bifa_media_priority || 'normal';\\n meta.date = item.meta._bifa_media_date || item.date;\\n }\\n \\n \\\/\\\/ Try ACF fields as fallback\\n if (item.acf) {\\n meta.caption = meta.caption || item.acf.caption || '';\\n meta.photographer = meta.photographer || item.acf.photographer || 'BIFA+ Team';\\n meta.location = meta.location || item.acf.location || '';\\n meta.priority = meta.priority || item.acf.priority || 'normal';\\n }\\n \\n \\\/\\\/ Use excerpt if no caption\\n if (!meta.caption && item.excerpt) {\\n meta.caption = item.excerpt.rendered.replace(\\\/<[^>]*>\\\/g, '');\\n }\\n \\n return meta;\\n },\\n\\n \\\/\\\/ Render media grid\\n renderMediaGrid(items) {\\n const container = document.getElementById('mediaGrid');\\n if (!container) return;\\n\\n if (items.length === 0) {\\n container.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div style=\"\\\"font-size:\" 3rem; margin-bottom: 15px;\\\">\\ud83d\\udced<\\\/div>\\n <\/p>\n<h3>No media items found<\\\/h3>\\n <\/p>\n<p>Please check back later for updates.<\\\/p>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n container.innerHTML = '';\\n\\n items.slice(0, 12).forEach((item, index) => {\\n const card = this.createMediaCard(item, index);\\n container.appendChild(card);\\n });\\n },\\n\\n \\\/\\\/ Create media card with correct data\\n createMediaCard(item, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-media-item';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n const imageUrl = this.getFeaturedImage(item);\\n const title = item.title?.rendered || 'BIFA+ Media';\\n const metadata = this.getMetadata(item);\\n const mediaType = this.getMediaType(item);\\n \\n \\\/\\\/ Set data-type for filtering\\n card.dataset.type = mediaType;\\n \\n const typeLabels = {\\n 'photo': 'Photo',\\n 'video': 'Video',\\n 'gallery': 'Gallery',\\n 'infographic': 'Infographic'\\n };\\n\\n card.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-media-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n ${metadata.priority === 'featured' || metadata.priority === 'high' ? '<\/p>\n<div class=\"\\\"bifa-featured-indicator\\\"\">FEATURED<\\\/div>' : ''}\\n ${mediaType ? `<span class=\"\\\"bifa-media-badge\\\"\">${typeLabels[mediaType] || 'Media'}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-media-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-date\\\"\">${this.formatDate(metadata.date)}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-media-title\\\"\">${title}<\\\/h3>\\n ${metadata.caption ? `<\/p>\n<p class=\"\\\"bifa-media-caption\\\"\">${metadata.caption.substring(0, 120)}${metadata.caption.length > 120 ? '...' : ''}<\\\/p>` : ''}\\n <\/p>\n<div class=\"\\\"bifa-media-meta\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-type\\\"\">\\n ${this.getTypeIcon(mediaType)} ${typeLabels[mediaType] || 'Media'}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-media-photographer\\\"\">\\n \\ud83d\\udcf8 ${metadata.photographer}\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n `;\\n\\n card.addEventListener('click', () => {\\n if (item.link) {\\n window.open(item.link, '_blank');\\n }\\n });\\n\\n return card;\\n },\\n\\n \\\/\\\/ Get type icon\\n getTypeIcon(type) {\\n const icons = {\\n 'photo': '\\ud83d\\uddbc\\ufe0f',\\n 'video': '\\ud83c\\udfa5',\\n 'gallery': '\\ud83d\\udcf8',\\n 'infographic': '\\ud83d\\udcca'\\n };\\n return icons[type] || '\\ud83d\\udcc1';\\n },\\n\\n \\\/\\\/ Update statistics\\n updateStatistics() {\\n \\\/\\\/ Update stat numbers\\n const statElements = document.querySelectorAll('.bifa-stat-number');\\n statElements[0]?.setAttribute('data-target', this.config.stats.total);\\n statElements[1]?.setAttribute('data-target', this.config.stats.video);\\n statElements[2]?.setAttribute('data-target', this.config.stats.gallery);\\n statElements[3]?.setAttribute('data-target', this.config.stats.infographic);\\n },\\n\\n \\\/\\\/ Setup filters\\n setupFilters() {\\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');\\n \\n filterButtons.forEach(button => {\\n button.addEventListener('click', () => {\\n \\\/\\\/ Remove active class from all\\n filterButtons.forEach(btn => btn.classList.remove('active'));\\n \\\/\\\/ Add active to clicked\\n button.classList.add('active');\\n \\n \\\/\\\/ Get filter value\\n const filter = button.dataset.filter;\\n this.config.currentFilter = filter;\\n \\n \\\/\\\/ Filter items\\n this.filterMediaItems(filter);\\n });\\n });\\n },\\n\\n \\\/\\\/ Filter media items with animation\\n filterMediaItems(filter) {\\n const items = document.querySelectorAll('.bifa-media-item');\\n let visibleCount = 0;\\n \\n items.forEach((item, index) => {\\n if (filter === 'all' || item.dataset.type === filter) {\\n item.style.display = 'block';\\n \\\/\\\/ Reset animation with stagger\\n item.style.animation = 'none';\\n setTimeout(() => {\\n item.style.animation = `fadeInUpMedia 0.6s ease forwards`;\\n item.style.animationDelay = `${visibleCount * 0.1}s`;\\n }, 10);\\n visibleCount++;\\n } else {\\n item.style.opacity = '0';\\n item.style.transform = 'scale(0.9)';\\n setTimeout(() => {\\n item.style.display = 'none';\\n }, 300);\\n }\\n });\\n },\\n\\n \\\/\\\/ Animate numbers\\n animateNumbers() {\\n const numbers = document.querySelectorAll('.bifa-stat-number');\\n \\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n const target = parseInt(entry.target.dataset.target);\\n if (target > 0) {\\n this.animateNumber(entry.target, target);\\n }\\n observer.unobserve(entry.target);\\n }\\n });\\n });\\n \\n numbers.forEach(number => observer.observe(number));\\n },\\n\\n \\\/\\\/ Animate single number\\n animateNumber(element, target) {\\n let current = 0;\\n const increment = Math.ceil(target \\\/ 50);\\n const timer = setInterval(() => {\\n current += increment;\\n if (current >= target) {\\n current = target;\\n clearInterval(timer);\\n }\\n element.textContent = current;\\n }, 30);\\n },\\n\\n \\\/\\\/ Format date\\n formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\nif (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', () => {\\n BifaMedia.init();\\n });\\n} else {\\n BifaMedia.init();\\n}\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]}]}]}],\"version\":\"4.5.28\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ Hub – News, Events & Updates Latest News Stay updated with the latest BIFA+ news and announcements View All News Upcoming Events Join our international tournaments and conferences View All Events BIFA+ Events Calendar BIFA+ Events Calendar Upcoming International Events & Initiatives Explore our comprehensive schedule of international football events, diplomatic meetings, youth programs, […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-news-official-updates.php","meta":{"footnotes":""},"class_list":["post-507","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":36,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/507\/revisions"}],"predecessor-version":[{"id":1249,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/507\/revisions\/1249"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/media?parent=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nBIFA+ Hub – News, Events & Updates<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 - \u0421\u041e\u0412\u041c\u0415\u0421\u0422\u0418\u041c\u041e\u0421\u0422\u042c \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n.bifa-hub-wrapper {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ========= RESET ========= *\/\n.bifa-hub-wrapper * {\n box-sizing: border-box;\n}<\/p>\n<p>\/* ========= MAIN WRAPPER ========= *\/\n.bifa-hub-wrapper {\n min-height: 100vh;\n position: relative;\n background: #FFFFFF;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 0;\n}<\/p>\n<p>\/* ========= HERO SECTION WITH SLIDER ========= *\/\n.bifa-hero-section {\n position: relative;\n height: 70vh;\n min-height: 600px;\n background: var(--bifa-deep-navy);\n overflow: hidden;\n}<\/p>\n<p>.bifa-hero-slider {\n position: relative;\n width: 100%;\n height: 100%;\n}<\/p>\n<p>.bifa-hero-slides {\n position: relative;\n width: 100%;\n height: 100%;\n}<\/p>\n<p>.bifa-hero-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1.5s ease, transform 1s ease;\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-hero-slide.active {\n opacity: 1;\n transform: scale(1);\n}<\/p>\n<p>.bifa-hero-slide-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n filter: brightness(0.6);\n}<\/p>\n<p>.bifa-hero-slide-bg::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.7) 0%, \n rgba(10, 31, 68, 0.3) 50%,\n rgba(212, 175, 55, 0.1) 100%\n );\n}<\/p>\n<p>\/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 *\/\n.bifa-hero-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n z-index: 2;\n max-width: 1200px;\n width: 90%;\n height: 75%;\n max-height: 550px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n opacity: 0;\n animation: heroContentIn 1s ease 0.5s forwards;\n}<\/p>\n<p>@keyframes heroContentIn {\n from {\n opacity: 0;\n transform: translate(-50%, -45%);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n}<\/p>\n<p>\/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 *\/\n.bifa-hero-scrollable {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px 20px 20px;\n margin-bottom: 15px;<\/p>\n<p> \/* \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 *\/\n scrollbar-width: thin;\n scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.1);\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar {\n width: 6px;\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar-thumb {\n background: rgba(212, 175, 55, 0.5);\n border-radius: 10px;\n}<\/p>\n<p>.bifa-hero-scrollable::-webkit-scrollbar-thumb:hover {\n background: rgba(212, 175, 55, 0.7);\n}<\/p>\n<p>.bifa-hero-badge {\n display: inline-block;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 10px 30px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 30px;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n flex-shrink: 0;\n}<\/p>\n<p>.bifa-hero-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 900;\n color: var(--bifa-bright-white);\n margin-bottom: 25px;\n line-height: 1.2;\n text-shadow: 2px 4px 20px rgba(0, 0, 0, 0.3);\n flex-shrink: 0;\n}<\/p>\n<p>.bifa-hero-excerpt {\n font-family: var(--bifa-font-body);\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n color: rgba(255, 255, 255, 0.9);\n line-height: 1.6;\n margin-bottom: 40px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n flex-shrink: 1;\n}<\/p>\n<p>.bifa-hero-meta {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n margin-bottom: 30px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}<\/p>\n<p>.bifa-hero-meta-item {\n display: flex;\n align-items: center;\n gap: 10px;\n color: rgba(255, 255, 255, 0.8);\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n}<\/p>\n<p>.bifa-hero-meta-item svg {\n width: 20px;\n height: 20px;\n stroke: var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u043d\u0438\u0437\u0443 *\/\n.bifa-hero-cta {\n display: inline-flex;\n align-items: center;\n gap: 15px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1.1rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n flex-shrink: 0;\n margin-top: auto;\n border: none;\n cursor: pointer;\n}<\/p>\n<p>.bifa-hero-cta::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-hero-cta:hover {\n transform: translateY(-3px);\n box-shadow: 0 30px 70px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-hero-cta:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-hero-cta svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-hero-cta:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>\/* Slider Navigation *\/\n.bifa-slider-nav {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 15px;\n z-index: 3;\n}<\/p>\n<p>.bifa-slider-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n border: 2px solid rgba(255, 255, 255, 0.5);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n}<\/p>\n<p>.bifa-slider-dot.active {\n background: var(--bifa-heritage-gold);\n border-color: var(--bifa-heritage-gold);\n transform: scale(1.2);\n}<\/p>\n<p>.bifa-slider-dot:hover {\n background: rgba(255, 255, 255, 0.5);\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-slider-progress {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n width: 0;\n z-index: 4;\n transition: width 5s linear;\n}<\/p>\n<p>.bifa-slider-progress.active {\n width: 100%;\n}<\/p>\n<p>\/* Slider Arrows *\/\n.bifa-slider-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 60px;\n height: 60px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 2px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n z-index: 3;\n opacity: 0.8;\n}<\/p>\n<p>.bifa-slider-arrow:active {\n transform: translateY(-50%) scale(0.95);\n}<\/p>\n<p>.bifa-slider-arrow:hover {\n background: rgba(212, 175, 55, 0.2);\n border-color: var(--bifa-heritage-gold);\n transform: translateY(-50%) scale(1.1);\n}<\/p>\n<p>.bifa-slider-arrow.prev {\n left: 50px;\n}<\/p>\n<p>.bifa-slider-arrow.next {\n right: 50px;\n}<\/p>\n<p>.bifa-slider-arrow svg {\n width: 24px;\n height: 24px;\n stroke: var(--bifa-bright-white);\n stroke-width: 2.5;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ========= *\/\n.hub-bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n top: 0;\n left: 0;\n pointer-events: none;\n}<\/p>\n<p>.hub-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatHub 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n}<\/p>\n<p>@keyframes floatHub {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.2; }\n 90% { opacity: 0.2; }\n 100% {\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* ========= MAIN CONTENT ========= *\/\n.bifa-hub-main {\n position: relative;\n z-index: 10;\n padding: 100px 0;\n}<\/p>\n<p>.bifa-hub-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>\/* ========= SEARCH SECTION ========= *\/\n.bifa-hub-search-section {\n background: #FFFFFF;\n padding: 40px 0;\n margin-bottom: 80px;\n border-radius: 30px;\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.08);\n}<\/p>\n<p>.bifa-hub-search-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>.bifa-hub-search-wrapper {\n position: relative;\n}<\/p>\n<p>.bifa-hub-search-input {\n width: 100%;\n padding: 20px 60px 20px 30px;\n border: 3px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n background: #F8F9FA;\n transition: var(--bifa-transition);\n outline: none;\n}<\/p>\n<p>.bifa-hub-search-input:focus {\n border-color: var(--bifa-heritage-gold);\n box-shadow: 0 12px 35px rgba(212, 175, 55, 0.2);\n background: #FFFFFF;\n}<\/p>\n<p>.bifa-hub-search-btn {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-hub-search-btn:hover {\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-hub-search-btn svg {\n width: 22px;\n height: 22px;\n stroke: var(--bifa-deep-navy);\n stroke-width: 3;\n}<\/p>\n<p>.bifa-search-results {\n margin-top: 20px;\n text-align: center;\n font-family: var(--bifa-font-body);\n color: var(--bifa-gray);\n font-size: 0.95rem;\n}<\/p>\n<p>.bifa-search-results.active {\n color: var(--bifa-deep-navy);\n font-weight: 600;\n}<\/p>\n<p>\/* ========= SECTION HEADERS ========= *\/\n.bifa-section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n}<\/p>\n<p>.bifa-section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n}<\/p>\n<p>.bifa-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n}<\/p>\n<p>.bifa-section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n color: #4a5568;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= NEWS SECTION ========= *\/\n.bifa-news-section {\n margin-bottom: 100px;\n}<\/p>\n<p>.bifa-news-preview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 50px;\n}<\/p>\n<p>\/* ========= EVENTS SECTION ========= *\/\n.bifa-events-section {\n background: #FFFFFF;\n padding: 100px 0;\n margin: 0 calc(-50vw + 50%);\n width: 100vw;\n position: relative;\n}<\/p>\n<p>.bifa-events-preview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 50px;\n}<\/p>\n<p>\/* ========= PREVIEW CARDS (Shared Styles) ========= *\/\n.bifa-preview-card {\n background: #FFFFFF;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n opacity: 0;\n animation: fadeInUpHub 1.2s ease forwards;\n}<\/p>\n<p>.bifa-preview-card:nth-child(1) { animation-delay: 0.1s; }\n.bifa-preview-card:nth-child(2) { animation-delay: 0.2s; }\n.bifa-preview-card:nth-child(3) { animation-delay: 0.3s; }<\/p>\n<p>.bifa-preview-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-preview-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-preview-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-preview-image {\n position: relative;\n height: 200px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-preview-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 60%, \n rgba(10, 31, 68, 0.8) 100%\n );\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-preview-card:hover .bifa-preview-image::before {\n opacity: 0.9;\n}<\/p>\n<p>\/* Hot\/Trending Indicator *\/\n.bifa-hot-indicator {\n position: absolute;\n top: 15px;\n left: 15px;\n background: linear-gradient(135deg, #ff4757, #ff6348);\n color: white;\n padding: 6px 16px;\n border-radius: 20px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: 6px;\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n animation: hotPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes hotPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-hot-indicator::before {\n content: '\ud83d\udd25';\n font-size: 12px;\n}<\/p>\n<p>.bifa-preview-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-preview-status {\n position: absolute;\n top: 15px;\n left: 15px;\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n backdrop-filter: blur(10px);\n}<\/p>\n<p>.bifa-preview-status.upcoming {\n background: rgba(219, 234, 254, 0.9);\n color: #1e40af;\n border: 1px solid rgba(30, 64, 175, 0.2);\n}<\/p>\n<p>.bifa-preview-status.ongoing {\n background: rgba(220, 252, 231, 0.9);\n color: #166534;\n border: 1px solid rgba(22, 101, 52, 0.2);\n}<\/p>\n<p>.bifa-preview-content {\n padding: 25px;\n}<\/p>\n<p>.bifa-preview-date {\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}<\/p>\n<p>.bifa-preview-date::before {\n content: '';\n width: 5px;\n height: 5px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-preview-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 15px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-preview-card:hover .bifa-preview-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-preview-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: #4a5568;\n line-height: 1.6;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 0;\n}<\/p>\n<p>\/* ========= VIEW ALL BUTTONS ========= *\/\n.bifa-view-all-container {\n text-align: center;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-view-all-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-view-all-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-view-all-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-view-all-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>\/* ========= LOADING STATES ========= *\/\n.bifa-hub-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 400px;\n}<\/p>\n<p>.bifa-hub-loader {\n width: 60px;\n height: 60px;\n border: 4px solid rgba(212, 175, 55, 0.2);\n border-top-color: var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: spinHub 1s linear infinite;\n}<\/p>\n<p>@keyframes spinHub {\n to { transform: rotate(360deg); }\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInUpHub {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .bifa-news-preview-grid,\n .bifa-events-preview-grid {\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 30px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 30px;\n }\n}<\/p>\n<p>\/* Tablet optimizations *\/\n@media (max-width: 992px) {\n .bifa-hero-section {\n height: 65vh;\n min-height: 550px;\n max-height: 700px;\n }<\/p>\n<p> .bifa-hero-content {\n height: 70%;\n max-height: 500px;\n }<\/p>\n<p> .bifa-hero-badge {\n padding: 6px 20px;\n font-size: 0.75rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: clamp(1.8rem, 4vw, 2.5rem);\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: clamp(0.9rem, 2vw, 1.1rem);\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-hero-meta {\n gap: 20px;\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-hero-meta-item {\n font-size: 0.85rem;\n }<\/p>\n<p> .bifa-hero-meta-item svg {\n width: 16px;\n height: 16px;\n }<\/p>\n<p> .bifa-hero-cta {\n padding: 12px 28px;\n font-size: 0.9rem;\n gap: 10px;\n }<\/p>\n<p> .bifa-hero-cta svg {\n width: 16px;\n height: 16px;\n }<\/p>\n<p> .bifa-slider-nav {\n bottom: 50px;\n gap: 12px;\n }<\/p>\n<p> .bifa-slider-dot {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> .bifa-hub-main {\n padding: 70px 0;\n }<\/p>\n<p> .bifa-events-section {\n padding: 70px 0;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-hero-slide-bg {\n filter: brightness(0.7);\n }<\/p>\n<p> .bifa-hero-slide-bg::after {\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.6) 0%, \n rgba(10, 31, 68, 0.2) 50%,\n rgba(212, 175, 55, 0.05) 100%\n );\n }<\/p>\n<p> .bifa-hero-section {\n height: 50vh;\n min-height: 400px;\n }<\/p>\n<p> .bifa-hero-content {\n height: 70%;\n max-height: 450px;\n }<\/p>\n<p> .bifa-hero-meta {\n gap: 20px;\n }<\/p>\n<p> .bifa-news-preview-grid,\n .bifa-events-preview-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }<\/p>\n<p> .bifa-hub-main {\n padding: 50px 0;\n }<\/p>\n<p> .bifa-events-section {\n padding: 50px 0;\n }<\/p>\n<p> .bifa-slider-arrow {\n width: 45px;\n height: 45px;\n background: rgba(0, 0, 0, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }<\/p>\n<p> .bifa-slider-arrow:hover {\n transform: translateY(-50%) scale(1.05);\n background: rgba(0, 0, 0, 0.8);\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 20px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 20px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-hero-section {\n height: 60vh;\n min-height: 450px;\n max-height: 600px;\n }<\/p>\n<p> .bifa-hero-content {\n width: 85%;\n height: 75%;\n max-height: 500px;\n }<\/p>\n<p> .bifa-hero-badge {\n padding: 6px 18px;\n font-size: 0.7rem;\n letter-spacing: 1px;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.5rem;\n margin-bottom: 12px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.85rem;\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-hero-meta {\n gap: 15px;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-meta-item {\n font-size: 0.75rem;\n gap: 6px;\n }<\/p>\n<p> .bifa-hero-meta-item svg {\n width: 14px;\n height: 14px;\n }<\/p>\n<p> .bifa-hero-cta {\n padding: 10px 20px;\n font-size: 0.75rem;\n gap: 8px;\n letter-spacing: 0.5px;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);\n }<\/p>\n<p> .bifa-hero-cta svg {\n width: 12px;\n height: 12px;\n }<\/p>\n<p> .bifa-slider-nav {\n bottom: 30px;\n gap: 10px;\n }<\/p>\n<p> .bifa-slider-dot {\n width: 8px;\n height: 8px;\n border-width: 1px;\n }<\/p>\n<p> .bifa-slider-arrow {\n width: 40px;\n height: 40px;\n background: rgba(0, 0, 0, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }<\/p>\n<p> .bifa-slider-arrow svg {\n width: 18px;\n height: 18px;\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 10px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 10px;\n }<\/p>\n<p> .bifa-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-preview-content {\n padding: 25px;\n }\n}<\/p>\n<p>@media (max-width: 360px) {\n .bifa-hero-section {\n min-height: 450px;\n max-height: 550px;\n }<\/p>\n<p> .bifa-hero-content {\n height: 70%;\n max-height: 450px;\n }<\/p>\n<p> .bifa-hero-badge {\n padding: 5px 15px;\n font-size: 0.65rem;\n margin-bottom: 12px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.3rem;\n margin-bottom: 10px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.8rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-meta {\n margin-bottom: 12px;\n }<\/p>\n<p> .bifa-hero-cta {\n padding: 9px 18px;\n font-size: 0.7rem;\n gap: 6px;\n }<\/p>\n<p> .bifa-hero-cta svg {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> .bifa-slider-arrow {\n width: 36px;\n height: 36px;\n }<\/p>\n<p> .bifa-slider-arrow svg {\n width: 14px;\n height: 14px;\n }<\/p>\n<p> .bifa-slider-arrow.prev {\n left: 8px;\n }<\/p>\n<p> .bifa-slider-arrow.next {\n right: 8px;\n }<\/p>\n<p> .bifa-slider-nav {\n bottom: 25px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-hub-wrapper\">\n <\/p>\n<div class=\"hub-bg-animation\">\n \n <\/div>\n<p> <\/p>\n<section class=\"bifa-hero-section\">\n<div class=\"bifa-hero-slider\">\n<div class=\"bifa-hero-slides\" id=\"heroSlides\">\n \n <\/div>\n<p> <\/p>\n<div class=\"bifa-slider-nav\" id=\"sliderNav\">\n \n <\/div>\n<p> <\/p>\n<div class=\"bifa-slider-progress\" id=\"sliderProgress\"><\/div>\n<p> <br \/>\n <button class=\"bifa-slider-arrow prev\" id=\"sliderPrev\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <button class=\"bifa-slider-arrow next\" id=\"sliderNext\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/section>\n<p> <br \/>\n <main class=\"bifa-hub-main\"><\/p>\n<div class=\"bifa-hub-container\">\n <\/p>\n<section class=\"bifa-hub-search-section\">\n<div class=\"bifa-hub-search-container\">\n<div class=\"bifa-hub-search-wrapper\">\n <input \n type=\"text\" \n class=\"bifa-hub-search-input\" \n placeholder=\"Search news and events...\" \n id=\"hubSearchInput\"\n ><br \/>\n <button class=\"bifa-hub-search-btn\" id=\"hubSearchBtn\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n <path d=\"m21 21-4.35-4.35\"><\/path>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<div class=\"bifa-search-results\" id=\"searchResults\"><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section class=\"bifa-news-section\">\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Latest News<\/h2>\n<p class=\"bifa-section-subtitle\">Stay updated with the latest BIFA+ news and announcements<\/p>\n<\/p><\/div>\n<div id=\"newsPreviewGrid\" class=\"bifa-news-preview-grid\">\n <\/p>\n<div class=\"bifa-hub-loading\">\n<div class=\"bifa-hub-loader\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-view-all-container\">\n <a href=\"\/news\" class=\"bifa-view-all-btn\"><br \/>\n <span>View All News<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/section><\/div>\n<p> <\/main><\/p>\n<p> <\/p>\n<section class=\"bifa-events-section\">\n<div class=\"bifa-hub-container\">\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Upcoming Events<\/h2>\n<p class=\"bifa-section-subtitle\">Join our international tournaments and conferences<\/p>\n<\/p><\/div>\n<div id=\"eventsPreviewGrid\" class=\"bifa-events-preview-grid\">\n <\/p>\n<div class=\"bifa-hub-loading\">\n<div class=\"bifa-hub-loader\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-view-all-container\">\n <a href=\"https:\/\/bifa.ai\/events-2\/\" class=\"bifa-view-all-btn\"><br \/>\n <span>View All Events<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Hub Module\nconst BifaHub = {\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events',\n sliderInterval: null,\n currentSlide: 0,\n autoPlayDelay: 5000,\n slides: [],\n allPosts: [],\n searchQuery: '',\n searchResults: []\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.loadHeroSlides();\n this.loadNewsPreviews();\n this.loadEventsPreviews();\n this.setupSliderControls();\n this.setupSearch();\n },<\/p>\n<p> \/\/ Setup search functionality\n setupSearch() {\n const searchInput = document.getElementById('hubSearchInput');\n const searchBtn = document.getElementById('hubSearchBtn');\n const searchResults = document.getElementById('searchResults');<\/p>\n<p> if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n this.config.searchQuery = e.target.value.toLowerCase();\n if (this.config.searchQuery.length >= 3) {\n this.performSearch();\n } else {\n searchResults.textContent = '';\n this.loadNewsPreviews();\n this.loadEventsPreviews();\n }\n });<\/p>\n<p> searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n this.performSearch();\n }\n });\n }<\/p>\n<p> if (searchBtn) {\n searchBtn.addEventListener('click', () => {\n this.performSearch();\n });\n }\n },<\/p>\n<p> \/\/ Perform search\n performSearch() {\n const searchResults = document.getElementById('searchResults');<\/p>\n<p> if (!this.config.searchQuery || this.config.searchQuery.length < 2) {\n searchResults.textContent = '';\n return;\n }\n \n this.config.searchResults = this.config.allPosts.filter(post => {\n const title = post.title.rendered.toLowerCase();\n const excerpt = this.stripHtml(post.excerpt.rendered).toLowerCase();\n const location = (post._bifa_location || '').toLowerCase();<\/p>\n<p> return title.includes(this.config.searchQuery) || \n excerpt.includes(this.config.searchQuery) ||\n location.includes(this.config.searchQuery);\n });<\/p>\n<p> \/\/ Update results text\n if (this.config.searchResults.length > 0) {\n searchResults.textContent = `Found ${this.config.searchResults.length} results for \"${this.config.searchQuery}\"`;\n searchResults.classList.add('active');\n } else {\n searchResults.textContent = `No results found for \"${this.config.searchQuery}\"`;\n searchResults.classList.remove('active');\n }<\/p>\n<p> \/\/ Update previews with search results\n this.updatePreviewsWithSearch();\n },<\/p>\n<p> \/\/ Update previews with search results\n updatePreviewsWithSearch() {\n const newsContainer = document.getElementById('newsPreviewGrid');\n const eventsContainer = document.getElementById('eventsPreviewGrid');<\/p>\n<p> \/\/ Clear existing content\n if (newsContainer) newsContainer.innerHTML = '';\n if (eventsContainer) eventsContainer.innerHTML = '';<\/p>\n<p> \/\/ Separate search results into news and events\n const newsResults = this.config.searchResults.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return !eventDate || eventDate === '';\n });<\/p>\n<p> const eventsResults = this.config.searchResults.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return eventDate && eventDate !== '';\n });<\/p>\n<p> \/\/ Display news results\n if (newsContainer) {\n if (newsResults.length > 0) {\n newsResults.slice(0, 6).forEach((post, index) => {\n const card = this.createPreviewCard(post, 'news', index);\n newsContainer.appendChild(card);\n });\n } else {\n newsContainer.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray); grid-column: 1 \/ -1;\">No news found<\/p>\n<p>';\n }\n }<\/p>\n<p> \/\/ Display events results\n if (eventsContainer) {\n if (eventsResults.length > 0) {\n eventsResults.slice(0, 6).forEach((post, index) => {\n const card = this.createPreviewCard(post, 'event', index);\n eventsContainer.appendChild(card);\n });\n } else {\n eventsContainer.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray); grid-column: 1 \/ -1;\">No events found<\/p>\n<p>';\n }\n }\n },<\/p>\n<p> \/\/ Check if post is hot\/trending\n isHotPost(post) {\n \/\/ Logic to determine if a post is hot\/trending\n \/\/ More strict criteria to avoid marking all posts as hot<\/p>\n<p> \/\/ 1. Posts from last 24 hours (not 3 days)\n const postDate = new Date(post.date);\n const oneDayAgo = new Date();\n oneDayAgo.setDate(oneDayAgo.getDate() - 1);<\/p>\n<p> \/\/ 2. Must have urgent badge or priority\n const badge = (post._bifa_badge_text || '').toLowerCase();\n const hasUrgentBadge = badge.includes('urgent') || \n badge.includes('hot') || \n badge.includes('breaking') ||\n badge.includes('\u0432\u0430\u0436\u043d\u043e\u0435');<\/p>\n<p> \/\/ 3. Check priority flag\n const hasHighPriority = post._bifa_priority === 'urgent' || \n post._bifa_priority === 'high';<\/p>\n<p> \/\/ Post must be recent AND have urgent badge\/priority\n if (postDate > oneDayAgo && (hasUrgentBadge || hasHighPriority)) {\n return true;\n }<\/p>\n<p> \/\/ 4. For events - check if starting within 48 hours\n if (post._bifa_event_date) {\n const eventDate = new Date(post._bifa_event_date);\n const twoDaysFromNow = new Date();\n twoDaysFromNow.setDate(twoDaysFromNow.getDate() + 2);<\/p>\n<p> if (eventDate > new Date() && eventDate < twoDaysFromNow) {\n return true;\n }\n }\n \n return false;\n },\n\n \/\/ Create background particles\n createParticles() {\n const container = document.querySelector('.hub-bg-animation');\n if (!container) return;\n\n for (let i = 0; i < 20; i++) {\n const particle = document.createElement('div');\n particle.className = 'hub-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 25 + 's';\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n container.appendChild(particle);\n }\n },\n\n \/\/ Load hero slides (latest 3 posts)\n async loadHeroSlides() {\n try {\n const response = await fetch(`${this.config.apiUrl}?_embed&per_page=50&orderby=date&order=desc`);\n const posts = await response.json();\n \n this.config.allPosts = posts;\n \n \/\/ Get latest 3 posts for slider\n this.config.slides = posts.slice(0, 3);\n \n \/\/ \u0414\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430\n if (this.config.slides.length > 0) {\n const firstPost = this.config.slides[0];\n console.log('\ud83d\udcca First post data:');\n console.log(' - ID:', firstPost.id);\n console.log(' - Title:', firstPost.title.rendered);\n console.log(' - Slug:', firstPost.slug);\n console.log(' - Link:', firstPost.link);\n console.log(' - Type:', firstPost.type);\n console.log(' - Status:', firstPost.status);\n if (firstPost.guid) {\n console.log(' - GUID:', firstPost.guid.rendered);\n }\n }<\/p>\n<p> this.renderHeroSlides();\n this.createSliderDots();\n this.startAutoPlay();<\/p>\n<p> } catch (error) {\n console.error('Error loading hero slides:', error);\n }\n },<\/p>\n<p> \/\/ Render hero slides\n renderHeroSlides() {\n const slidesContainer = document.getElementById('heroSlides');\n if (!slidesContainer || this.config.slides.length === 0) return;<\/p>\n<p> slidesContainer.innerHTML = '';<\/p>\n<p> this.config.slides.forEach((post, index) => {\n const media = post._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/hero-placeholder.jpg`;\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';\n const badge = isEvent ? 'Event' : 'News';\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 150) + '...';<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 URL \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0438\n const postUrl = this.getPostUrl(post);<\/p>\n<p> const slide = document.createElement('div');\n slide.className = `bifa-hero-slide ${index === 0 ? 'active' : ''}`;<\/p>\n<p> \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430\n slide.innerHTML = `<\/p>\n<div class=\"bifa-hero-slide-bg\" style=\"background-image: url('${imageUrl}')\"><\/div>\n<div class=\"bifa-hero-content\">\n<div class=\"bifa-hero-scrollable\">\n<div class=\"bifa-hero-badge\">${badge}<\/div>\n<h1 class=\"bifa-hero-title\">${post.title.rendered}<\/h1>\n<p class=\"bifa-hero-excerpt\">${excerpt}<\/p>\n<div class=\"bifa-hero-meta\">\n ${isEvent ? `<\/p>\n<div class=\"bifa-hero-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>${this.formatDate(post._bifa_event_date)}<\/span>\n <\/div>\n<p> ${post._bifa_location ? `<\/p>\n<div class=\"bifa-hero-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n <\/svg>\n <span>${post._bifa_location}<\/span>\n <\/div>\n<p> ` : ''}\n ` : `<\/p>\n<div class=\"bifa-hero-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>${this.formatDate(post.date)}<\/span>\n <\/div>\n<p> `}\n <\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"bifa-hero-cta\" data-post-url=\"${postUrl}\" data-post-id=\"${post.id}\">\n <span>Read More<\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/button>\n <\/div>\n<p> `;<\/p>\n<p> slidesContainer.appendChild(slide);\n });<\/p>\n<p> \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043d\u043e\u043f\u043e\u043a - \u0431\u0435\u0440\u0451\u0442 URL \u0438\u0437 \u0410\u041a\u0422\u0418\u0412\u041d\u041e\u0413\u041e \u0441\u043b\u0430\u0439\u0434\u0430\n slidesContainer.addEventListener('click', (e) => {\n const clickedButton = e.target.closest('.bifa-hero-cta');\n if (!clickedButton) return;<\/p>\n<p> \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0410\u041a\u0422\u0418\u0412\u041d\u042b\u0419 \u0441\u043b\u0430\u0439\u0434\n const activeSlide = slidesContainer.querySelector('.bifa-hero-slide.active');\n if (!activeSlide) {\n console.error('\u274c No active slide found!');\n return;\n }<\/p>\n<p> \/\/ \u0411\u0435\u0440\u0451\u043c URL \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430\n const activeButton = activeSlide.querySelector('.bifa-hero-cta');\n const url = activeButton ? activeButton.getAttribute('data-post-url') : null;<\/p>\n<p> if (!url) {\n console.error('\u274c No URL found in active slide!');\n return;\n }<\/p>\n<p> console.log('\ud83d\udd17 Hero CTA clicked!');\n console.log('\ud83d\udd17 Active slide URL:', url);\n console.log('\ud83d\udd17 Navigating to:', url);<\/p>\n<p> \/\/ \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n window.location.href = url;\n });\n },<\/p>\n<p> \/\/ Get correct post URL\n getPostUrl(post) {\n \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 1: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 link \u0438\u0437 API\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\n return post.link;\n }<\/p>\n<p> \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 2: \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 post type, \u0441\u0442\u0440\u043e\u0438\u043c URL \u0432\u0440\u0443\u0447\u043d\u0443\u044e\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0435\u0441\u0442\u044c \u043b\u0438 slug\n if (post.slug) {\n const baseUrl = 'https:\/\/bifa.ai';<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u0438\u043f \u0437\u0430\u043f\u0438\u0441\u0438\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b URL \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b\n \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442 1: \/news-events\/slug\/\n return `${baseUrl}\/news-events\/${post.slug}\/`;\n }<\/p>\n<p> \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 3: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c guid \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c\n if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\n return post.guid.rendered;\n }<\/p>\n<p> \/\/ \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422 4: \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c ID, \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u044f\u043c\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443\n if (post.id) {\n return `https:\/\/bifa.ai\/?p=${post.id}`;\n }<\/p>\n<p> \/\/ \u0412 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n console.error('\u26a0\ufe0f Cannot determine URL for post:', post);\n return 'https:\/\/bifa.ai\/';\n },<\/p>\n<p> \/\/ Create slider dots\n createSliderDots() {\n const navContainer = document.getElementById('sliderNav');\n if (!navContainer) return;<\/p>\n<p> navContainer.innerHTML = '';<\/p>\n<p> this.config.slides.forEach((_, index) => {\n const dot = document.createElement('button');\n dot.className = `bifa-slider-dot ${index === 0 ? 'active' : ''}`;\n dot.addEventListener('click', () => this.goToSlide(index));\n navContainer.appendChild(dot);\n });\n },<\/p>\n<p> \/\/ Setup slider controls\n setupSliderControls() {\n const prevBtn = document.getElementById('sliderPrev');\n const nextBtn = document.getElementById('sliderNext');<\/p>\n<p> if (prevBtn) {\n prevBtn.addEventListener('click', () => this.prevSlide());\n }<\/p>\n<p> if (nextBtn) {\n nextBtn.addEventListener('click', () => this.nextSlide());\n }\n },<\/p>\n<p> \/\/ Go to specific slide\n goToSlide(index) {\n const slides = document.querySelectorAll('.bifa-hero-slide');\n const dots = document.querySelectorAll('.bifa-slider-dot');\n const progress = document.getElementById('sliderProgress');<\/p>\n<p> \/\/ Remove active classes\n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => dot.classList.remove('active'));<\/p>\n<p> \/\/ Add active class to current\n if (slides[index]) slides[index].classList.add('active');\n if (dots[index]) dots[index].classList.add('active');<\/p>\n<p> \/\/ Reset progress bar\n if (progress) {\n progress.classList.remove('active');\n void progress.offsetWidth; \/\/ Force reflow\n progress.classList.add('active');\n }<\/p>\n<p> this.config.currentSlide = index;<\/p>\n<p> \/\/ Reset autoplay\n this.startAutoPlay();\n },<\/p>\n<p> \/\/ Previous slide\n prevSlide() {\n const newIndex = this.config.currentSlide === 0 \n ? this.config.slides.length - 1 \n : this.config.currentSlide - 1;\n this.goToSlide(newIndex);\n },<\/p>\n<p> \/\/ Next slide\n nextSlide() {\n const newIndex = (this.config.currentSlide + 1) % this.config.slides.length;\n this.goToSlide(newIndex);\n },<\/p>\n<p> \/\/ Start autoplay\n startAutoPlay() {\n \/\/ Clear existing interval\n if (this.config.sliderInterval) {\n clearInterval(this.config.sliderInterval);\n }<\/p>\n<p> \/\/ Start progress bar\n const progress = document.getElementById('sliderProgress');\n if (progress) {\n progress.classList.add('active');\n }<\/p>\n<p> \/\/ Set new interval\n this.config.sliderInterval = setInterval(() => {\n this.nextSlide();\n }, this.config.autoPlayDelay);\n },<\/p>\n<p> \/\/ Load news previews\n async loadNewsPreviews() {\n const container = document.getElementById('newsPreviewGrid');\n if (!container) return;<\/p>\n<p> try {\n \/\/ Wait for main data if not loaded\n if (this.config.allPosts.length === 0) {\n await this.loadHeroSlides();\n }<\/p>\n<p> \/\/ Filter only news (no event date)\n const news = this.config.allPosts.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return !eventDate || eventDate === '';\n }).slice(0, 3);<\/p>\n<p> if (news.length === 0) {\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray);\">No news available<\/p>\n<p>';\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> news.forEach((post, index) => {\n const card = this.createPreviewCard(post, 'news', index);\n container.appendChild(card);\n });<\/p>\n<p> } catch (error) {\n console.error('Error loading news:', error);\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: #dc2626;\">Failed to load news<\/p>\n<p>';\n }\n },<\/p>\n<p> \/\/ Load events previews\n async loadEventsPreviews() {\n const container = document.getElementById('eventsPreviewGrid');\n if (!container) return;<\/p>\n<p> try {\n \/\/ Wait for main data if not loaded\n if (this.config.allPosts.length === 0) {\n await this.loadHeroSlides();\n }<\/p>\n<p> \/\/ Filter only events (with event date)\n const events = this.config.allPosts.filter(post => {\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\n return eventDate && eventDate !== '';\n }).slice(0, 3);<\/p>\n<p> if (events.length === 0) {\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: var(--bifa-gray);\">No events available<\/p>\n<p>';\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> events.forEach((post, index) => {\n const card = this.createPreviewCard(post, 'event', index);\n container.appendChild(card);\n });<\/p>\n<p> } catch (error) {\n console.error('Error loading events:', error);\n container.innerHTML = '<\/p>\n<p style=\"text-align: center; color: #dc2626;\">Failed to load events<\/p>\n<p>';\n }\n },<\/p>\n<p> \/\/ Create preview card\n createPreviewCard(post, type, index) {\n const card = document.createElement('div');\n card.className = 'bifa-preview-card';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> const media = post._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/${type}-placeholder.jpg`;\n const isHot = this.isHotPost(post);<\/p>\n<p> \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 URL\n const postUrl = this.getPostUrl(post);<\/p>\n<p> let contentHtml = '';<\/p>\n<p> if (type === 'news') {\n const date = this.formatDate(post.date);\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 100) + '...';\n const badge = this.getBadgeText(post);<\/p>\n<p> contentHtml = `<\/p>\n<div class=\"bifa-preview-image\" style=\"background-image: url('${imageUrl}')\">\n ${isHot ? '<\/p>\n<div class=\"bifa-hot-indicator\">HOT<\/div>\n<p>' : ''}\n ${badge ? `<span class=\"bifa-preview-badge\">${badge}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-preview-content\">\n<div class=\"bifa-preview-date\">${date}<\/div>\n<h3 class=\"bifa-preview-title\">${post.title.rendered}<\/h3>\n<p class=\"bifa-preview-excerpt\">${excerpt}<\/p>\n<\/p><\/div>\n<p> `;\n } else {\n \/\/ Event card\n const eventDate = post._bifa_event_date;\n const eventEndDate = post._bifa_event_end_date;\n const location = post._bifa_location || 'Location TBA';\n const status = this.getEventStatus(eventDate, eventEndDate);\n const statusText = this.getStatusText(status);\n const dateDisplay = this.formatEventDates(eventDate, eventEndDate);<\/p>\n<p> contentHtml = `<\/p>\n<div class=\"bifa-preview-image\" style=\"background-image: url('${imageUrl}')\">\n ${isHot ? '<\/p>\n<div class=\"bifa-hot-indicator\">HOT<\/div>\n<p>' : ''}\n ${status !== 'unknown' ? `<span class=\"bifa-preview-status ${status}\">${statusText}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-preview-content\">\n<div class=\"bifa-preview-date\">${dateDisplay}<\/div>\n<h3 class=\"bifa-preview-title\">${post.title.rendered}<\/h3>\n<p class=\"bifa-preview-excerpt\">\ud83d\udccd ${location}<\/p>\n<\/p><\/div>\n<p> `;\n }<\/p>\n<p> card.innerHTML = contentHtml;<\/p>\n<p> \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u043d\u043e\u0432\u043e\u0441\u0442\u044c\/\u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c URL\n card.addEventListener('click', () => {\n window.location.href = postUrl;\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Format event dates\n formatEventDates(startDate, endDate) {\n if (!startDate) return '';<\/p>\n<p> const start = this.formatDate(startDate);<\/p>\n<p> if (endDate && startDate !== endDate) {\n const end = this.formatDate(endDate);\n return `${start} - ${end}`;\n }<\/p>\n<p> return start;\n },<\/p>\n<p> \/\/ Get event status\n getEventStatus(startDate, endDate) {\n if (!startDate) return 'unknown';<\/p>\n<p> const now = new Date();\n const start = new Date(startDate);\n const end = endDate ? new Date(endDate) : start;<\/p>\n<p> now.setHours(0, 0, 0, 0);\n start.setHours(0, 0, 0, 0);\n end.setHours(23, 59, 59, 999);<\/p>\n<p> if (now > end) {\n return 'past';\n } else if (now >= start && now <= end) {\n return 'ongoing';\n } else {\n return 'upcoming';\n }\n },\n\n \/\/ Get status text\n getStatusText(status) {\n switch(status) {\n case 'upcoming': return 'Upcoming';\n case 'ongoing': return 'Live Now';\n case 'past': return 'Past Event';\n default: return '';\n }\n },\n\n \/\/ Get badge text\n getBadgeText(post) {\n if (post._bifa_badge_text) {\n return post._bifa_badge_text;\n }\n \n const category = post._embedded?.['wp:term']?.[0]?.[0];\n return category?.name || '';\n },\n\n \/\/ Format date\n formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n },\n\n \/\/ Strip HTML\n stripHtml(html) {\n const temp = document.createElement('div');\n temp.innerHTML = html;\n return temp.textContent || temp.innerText || '';\n }\n};\n\n\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaHub.init();\n});\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Events Calendar<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= OFFICIAL BIFA+ BRAND VARIABLES ========= *\/\n:root {\n \/* Official BIFA+ Colors *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* Official BIFA+ Typography *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* Premium Effects *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* Reset *\/\n.bifa-calendar-wrapper * {\n box-sizing: border-box;\n}<\/p>\n<p>\/* ========= MAIN CALENDAR WRAPPER ========= *\/\n.bifa-calendar-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n padding: 60px 0 80px 0;\n background: transparent;\n overflow: hidden;\n font-family: var(--bifa-font-body);\n}<\/p>\n<p>\/* ========= CONTENT CONTAINER ========= *\/\n.bifa-calendar-content {\n position: relative;\n z-index: 10;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>\/* ========= SECTION HEADER ========= *\/\n.bifa-calendar-header {\n text-align: center;\n margin-bottom: 50px;\n animation: fadeInUp 1.2s ease;\n}<\/p>\n<p>.bifa-title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-gold-line {\n width: 80px;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n animation: lineGlow 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes lineGlow {\n 0%, 100% { opacity: 0.7; }\n 50% { opacity: 1; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }\n}<\/p>\n<p>.bifa-calendar-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 2px;\n position: relative;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-calendar-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-calendar-title:hover {\n transform: translateY(-3px);\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-calendar-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-calendar-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 1.5px;\n margin: 0 0 15px 0;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-calendar-description {\n max-width: 700px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\n line-height: 1.7;\n color: var(--bifa-gray);\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= NAVIGATION ========= *\/\n.bifa-calendar-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 40px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n padding: 25px 35px;\n border-radius: 25px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n animation: slideInDown 1.2s ease 0.2s both;\n}<\/p>\n<p>.bifa-nav-btn {\n background: transparent;\n border: 2px solid rgba(212, 175, 55, 0.3);\n color: var(--bifa-deep-navy);\n width: 55px;\n height: 55px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-nav-btn::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-nav-btn:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-nav-btn:hover {\n border-color: transparent;\n color: var(--bifa-deep-navy);\n transform: scale(1.1);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-nav-btn svg {\n width: 24px;\n height: 24px;\n stroke-width: 3;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-nav-btn:hover svg {\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-current-month {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.8rem, 3vw, 2.2rem);\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin: 0;\n text-align: center;\n position: relative;\n}<\/p>\n<p>.bifa-current-month::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 2px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 2px;\n}<\/p>\n<p>\/* ========= CALENDAR GRID ========= *\/\n.bifa-calendar-grid {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 30px;\n padding: 40px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n animation: slideInUp 1.2s ease 0.4s both;\n}<\/p>\n<p>.bifa-weekdays {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 15px;\n margin-bottom: 25px;\n padding-bottom: 20px;\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-weekday {\n text-align: center;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.9rem;\n color: var(--bifa-deep-navy);\n text-transform: uppercase;\n letter-spacing: 1.5px;\n padding: 12px 0;\n position: relative;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-weekday::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 2px;\n background: var(--bifa-heritage-gold);\n border-radius: 2px;\n opacity: 0.5;\n}<\/p>\n<p>.bifa-calendar-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 12px;\n}<\/p>\n<p>.bifa-calendar-day {\n aspect-ratio: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n background: rgba(255, 255, 255, 0.8);\n border: 2px solid transparent;\n border-radius: 18px;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n padding: 10px;\n overflow: hidden;\n}<\/p>\n<p>.bifa-calendar-day::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 18px;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-calendar-day:hover::before {\n opacity: 0.1;\n}<\/p>\n<p>.bifa-calendar-day:hover {\n transform: translateY(-5px);\n box-shadow: var(--bifa-shadow-hover);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-calendar-day.other-month {\n opacity: 0.3;\n cursor: default;\n}<\/p>\n<p>.bifa-calendar-day.other-month:hover {\n transform: none;\n box-shadow: none;\n border-color: transparent;\n}<\/p>\n<p>.bifa-calendar-day.other-month:hover::before {\n opacity: 0;\n}<\/p>\n<p>.bifa-calendar-day.today {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n font-weight: 800;\n box-shadow: var(--bifa-shadow-gold);\n border-color: transparent;\n}<\/p>\n<p>.bifa-calendar-day.today::before {\n opacity: 0;\n}<\/p>\n<p>.bifa-calendar-day.has-events {\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.05) 0%, \n rgba(29, 97, 67, 0.08) 100%);\n border-color: rgba(29, 97, 67, 0.3);\n}<\/p>\n<p>\/* Event day background slider *\/\n.bifa-day-bg-slider {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 16px;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.bifa-day-bg-track {\n display: flex;\n width: 100%;\n height: 100%;\n transition: transform 0.5s ease;\n}<\/p>\n<p>.bifa-day-bg-slide {\n flex: 0 0 100%;\n width: 100%;\n height: 100%;\n position: relative;\n}<\/p>\n<p>.bifa-day-bg-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: brightness(0.7) saturate(1.2);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-calendar-day:hover .bifa-day-bg-image {\n filter: brightness(0.5) saturate(1.4);\n transform: scale(1.05);\n}<\/p>\n<p>\/* Content overlay *\/\n.bifa-day-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.3) 0%, \n rgba(10, 31, 68, 0.1) 50%, \n rgba(29, 97, 67, 0.2) 100%);\n z-index: 1;\n border-radius: 16px;\n}<\/p>\n<p>.bifa-day-content {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n}<\/p>\n<p>.bifa-day-number {\n font-family: var(--bifa-font-heading);\n font-size: 1.4rem;\n font-weight: 800;\n line-height: 1;\n color: var(--bifa-deep-navy);\n text-shadow: 2px 2px 4px rgba(255,255,255,0.8);\n margin-top: 4px;\n}<\/p>\n<p>.bifa-calendar-day.has-events .bifa-day-number {\n color: var(--bifa-bright-white);\n text-shadow: 2px 2px 4px rgba(0,0,0,0.7);\n}<\/p>\n<p>.bifa-calendar-day.today .bifa-day-number {\n color: var(--bifa-deep-navy);\n text-shadow: 2px 2px 4px rgba(255,255,255,0.5);\n}<\/p>\n<p>.bifa-event-count {\n font-family: var(--bifa-font-body);\n font-size: 0.7rem;\n color: var(--bifa-bright-white);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\n padding: 2px 8px;\n border-radius: 12px;\n text-shadow: none;\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\n margin-bottom: 4px;\n letter-spacing: 0.5px;\n}<\/p>\n<p>\/* Slider dots for multiple events *\/\n.bifa-day-slider-dots {\n position: absolute;\n bottom: 4px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 3px;\n z-index: 3;\n}<\/p>\n<p>.bifa-day-slider-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: rgba(255,255,255,0.5);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-day-slider-dot.active {\n background: var(--bifa-heritage-gold);\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);\n}<\/p>\n<p>\/* ========= SELECTED EVENTS PANEL ========= *\/\n.bifa-selected-events {\n margin-top: 40px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 25px;\n padding: 35px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n display: none;\n animation: slideInUp 0.5s ease;\n}<\/p>\n<p>.bifa-selected-events.show {\n display: block;\n}<\/p>\n<p>.bifa-events-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n padding-bottom: 20px;\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-events-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0;\n}<\/p>\n<p>.bifa-close-events {\n background: transparent;\n border: 2px solid rgba(212, 175, 55, 0.3);\n font-size: 1.5rem;\n color: var(--bifa-gray);\n cursor: pointer;\n width: 45px;\n height: 45px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-close-events::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, #ff4757, #ff3742);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-close-events:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-close-events:hover {\n color: var(--bifa-bright-white);\n border-color: transparent;\n transform: rotate(90deg) scale(1.1);\n}<\/p>\n<p>.bifa-events-list {\n display: flex;\n flex-direction: column;\n gap: 25px;\n}<\/p>\n<p>\/* ========= EVENT ITEMS ========= *\/\n.bifa-event-item {\n background: rgba(255, 255, 255, 0.9);\n border: 2px solid rgba(212, 175, 55, 0.1);\n border-radius: 20px;\n padding: 0;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n display: flex;\n gap: 25px;\n min-height: 130px;\n}<\/p>\n<p>.bifa-event-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-event-item:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-event-item:hover {\n transform: translateX(10px);\n box-shadow: var(--bifa-shadow-hover);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-event-image {\n width: 150px;\n height: 130px;\n flex-shrink: 0;\n background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);\n overflow: hidden;\n position: relative;\n border-radius: 20px 0 0 20px;\n}<\/p>\n<p>.bifa-event-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-event-item:hover .bifa-event-image img {\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-event-badge {\n position: absolute;\n top: 12px;\n left: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 5px 12px;\n border-radius: 15px;\n font-family: var(--bifa-font-heading);\n font-size: 0.7rem;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}<\/p>\n<p>.bifa-event-details {\n flex: 1;\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}<\/p>\n<p>.bifa-event-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.3rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 12px;\n line-height: 1.3;\n}<\/p>\n<p>.bifa-event-time {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n color: var(--bifa-heritage-gold);\n font-weight: 600;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}<\/p>\n<p>.bifa-event-location {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: var(--bifa-gray);\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n}<\/p>\n<p>.bifa-event-status {\n font-family: var(--bifa-font-heading);\n font-size: 0.8rem;\n padding: 5px 15px;\n border-radius: 20px;\n display: inline-block;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n background: var(--bifa-civic-green);\n color: var(--bifa-bright-white);\n}<\/p>\n<p>.bifa-event-status.urgent {\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>.bifa-no-events {\n text-align: center;\n padding: 60px;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-no-events-icon {\n font-size: 3rem;\n margin-bottom: 15px;\n filter: grayscale(1);\n}<\/p>\n<p>\/* ========= CALENDAR LEGEND ========= *\/\n.bifa-calendar-legend {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 30px;\n margin-top: 40px;\n padding: 25px;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.05);\n animation: fadeInUp 1.2s ease 0.8s both;\n}<\/p>\n<p>.bifa-legend-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: var(--bifa-gray);\n font-weight: 500;\n}<\/p>\n<p>.bifa-legend-dot {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}<\/p>\n<p>.bifa-legend-dot.today {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n}<\/p>\n<p>.bifa-legend-dot.has-event {\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\n}<\/p>\n<p>.bifa-legend-dot.selected {\n background: rgba(212, 175, 55, 0.2);\n border: 3px solid var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* ========= LOADING STATE ========= *\/\n.bifa-loading {\n text-align: center;\n padding: 80px;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-spinner {\n width: 50px;\n height: 50px;\n border: 3px solid rgba(212, 175, 55, 0.2);\n border-top: 3px solid var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: bifaSpin 1s linear infinite;\n margin: 0 auto 25px;\n}<\/p>\n<p>@keyframes bifaSpin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes slideInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE DESIGN ========= *\/\n@media (max-width: 768px) {\n .bifa-calendar-wrapper {\n padding: 40px 0 60px 0;\n }<\/p>\n<p> .bifa-calendar-content {\n padding: 0 15px;\n }<\/p>\n<p> .bifa-calendar-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-calendar-grid {\n padding: 25px;\n }<\/p>\n<p> .bifa-weekday {\n font-size: 0.75rem;\n padding: 8px 0;\n }<\/p>\n<p> .bifa-day-number {\n font-size: 1.1rem;\n }<\/p>\n<p> .bifa-event-count {\n display: none;\n }<\/p>\n<p> .bifa-event-item {\n flex-direction: column;\n min-height: auto;\n }<\/p>\n<p> .bifa-event-image {\n width: 100%;\n height: 180px;\n border-radius: 20px 20px 0 0;\n }<\/p>\n<p> .bifa-event-details {\n padding: 20px;\n }<\/p>\n<p> .bifa-calendar-nav {\n padding: 20px 25px;\n }<\/p>\n<p> .bifa-nav-btn {\n width: 50px;\n height: 50px;\n }<\/p>\n<p> .bifa-current-month {\n font-size: 1.5rem;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-calendar-wrapper {\n padding: 30px 0 50px 0;\n }<\/p>\n<p> .bifa-calendar-content {\n padding: 0 10px;\n }<\/p>\n<p> .bifa-calendar-title {\n font-size: 1.8rem;\n }<\/p>\n<p> .bifa-calendar-subtitle {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-calendar-grid {\n padding: 20px;\n }<\/p>\n<p> .bifa-weekday {\n font-size: 0.7rem;\n }<\/p>\n<p> .bifa-day-number {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-calendar-nav {\n padding: 18px 20px;\n }<\/p>\n<p> .bifa-nav-btn {\n width: 45px;\n height: 45px;\n }<\/p>\n<p> .bifa-current-month {\n font-size: 1.3rem;\n }<\/p>\n<p> .bifa-legend-item {\n font-size: 0.85rem;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-calendar-wrapper\">\n <\/p>\n<div class=\"bifa-calendar-bg\">\n<div class=\"calendar-shape shape-calendar-1\"><\/div>\n<div class=\"calendar-shape shape-calendar-2\"><\/div>\n<div class=\"calendar-shape shape-calendar-3\"><\/div>\n<p> \n <\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-content\">\n <\/p>\n<div class=\"bifa-calendar-header\">\n<div class=\"bifa-title-decoration\">\n<div class=\"bifa-gold-line\"><\/div>\n<h2 class=\"bifa-calendar-title\">BIFA+ Events Calendar<\/h2>\n<div class=\"bifa-gold-line\"><\/div>\n<\/p><\/div>\n<p class=\"bifa-calendar-subtitle\">Upcoming International Events & Initiatives<\/p>\n<p class=\"bifa-calendar-description\">\n Explore our comprehensive schedule of international football events, diplomatic meetings,<br \/>\n youth programs, and alliance initiatives designed to foster global cooperation through sport.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-nav\">\n <button class=\"bifa-nav-btn\" id=\"bifaPrevMonth\" aria-label=\"Previous Month\"><br \/>\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M15 18l-6-6 6-6\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<h3 class=\"bifa-current-month\" id=\"bifaCurrentMonth\">Loading…<\/h3>\n<p> <button class=\"bifa-nav-btn\" id=\"bifaNextMonth\" aria-label=\"Next Month\"><br \/>\n <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 18l6-6-6-6\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-grid\">\n<div class=\"bifa-weekdays\" id=\"bifaWeekdays\"><\/div>\n<div class=\"bifa-calendar-days\" id=\"bifaCalendarDays\">\n<div class=\"bifa-loading\">\n<div class=\"bifa-spinner\"><\/div>\n<div>Loading Events Calendar…<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-selected-events\" id=\"bifaSelectedEvents\">\n<div class=\"bifa-events-header\">\n<h4 class=\"bifa-events-title\" id=\"bifaEventsTitle\">\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/h4>\n<p> <button class=\"bifa-close-events\" id=\"bifaCloseEvents\" aria-label=\"Close Events\">\u00d7<\/button>\n <\/div>\n<div class=\"bifa-events-list\" id=\"bifaEventsList\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-calendar-legend\">\n<div class=\"bifa-legend-item\">\n <span class=\"bifa-legend-dot today\"><\/span><br \/>\n <span>Today<\/span>\n <\/div>\n<div class=\"bifa-legend-item\">\n <span class=\"bifa-legend-dot has-event\"><\/span><br \/>\n <span>Has Events<\/span>\n <\/div>\n<div class=\"bifa-legend-item\">\n <span class=\"bifa-legend-dot selected\"><\/span><br \/>\n <span>Selected Date<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n(function() {\n 'use strict';<\/p>\n<p> \/\/ BIFA+ Calendar System\n let bifaCurrentDate = new Date();\n let bifaSelectedDate = null;\n let bifaEventsData = [];<\/p>\n<p> \/\/ Utility Functions\n function formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n const options = { month: 'long', day: 'numeric', year: 'numeric' };\n return date.toLocaleDateString('en-US', options);\n }<\/p>\n<p> function formatTime(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n const options = { hour: '2-digit', minute: '2-digit' };\n return date.toLocaleTimeString('en-US', options);\n }<\/p>\n<p> function getMonthYearString(date) {\n const options = { month: 'long', year: 'numeric' };\n return date.toLocaleDateString('en-US', options);\n }<\/p>\n<p> function getDaysInMonth(date) {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\n }<\/p>\n<p> function getFirstDayOfMonth(date) {\n return new Date(date.getFullYear(), date.getMonth(), 1).getDay();\n }<\/p>\n<p> function isSameDay(date1, date2) {\n return date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate();\n }<\/p>\n<p> function hasEventsOnDate(date) {\n const dateStr = date.toISOString().split('T')[0];\n return bifaEventsData.some(event => {\n const eventDate = event._bifa_event_date;\n if (!eventDate) return false;<\/p>\n<p> const eventStartDate = new Date(eventDate);\n const eventEndDate = event._bifa_event_end_date;\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;<\/p>\n<p> const checkDate = new Date(dateStr);\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \n checkDate <= new Date(endDate.toISOString().split('T')[0]);\n });\n }\n \n function getEventsOnDate(date) {\n const dateStr = date.toISOString().split('T')[0];\n return bifaEventsData.filter(event => {\n const eventDate = event._bifa_event_date;\n if (!eventDate) return false;<\/p>\n<p> const eventStartDate = new Date(eventDate);\n const eventEndDate = event._bifa_event_end_date;\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;<\/p>\n<p> const checkDate = new Date(dateStr);\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \n checkDate <= new Date(endDate.toISOString().split('T')[0]);\n });\n }\n \n \/\/ Create animated background particles\n function createParticles() {\n const particlesContainer = document.querySelector('.bifa-calendar-bg');\n const particleCount = 12;\n\n for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'calendar-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 8) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n }\n \n \/\/ Create weekdays header\n function createWeekdays() {\n const weekdaysContainer = document.getElementById('bifaWeekdays');\n const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n \n weekdaysContainer.innerHTML = '';\n days.forEach(day => {\n const dayElement = document.createElement('div');\n dayElement.className = 'bifa-weekday';\n dayElement.textContent = day;\n weekdaysContainer.appendChild(dayElement);\n });\n }<\/p>\n<p> \/\/ Render calendar\n function renderCalendar() {\n const calendarDays = document.getElementById('bifaCalendarDays');\n const currentMonthElement = document.getElementById('bifaCurrentMonth');<\/p>\n<p> currentMonthElement.textContent = getMonthYearString(bifaCurrentDate);\n calendarDays.innerHTML = '';<\/p>\n<p> const daysInMonth = getDaysInMonth(bifaCurrentDate);\n const firstDay = getFirstDayOfMonth(bifaCurrentDate);\n const today = new Date();<\/p>\n<p> \/\/ Previous month days\n const prevMonthDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth() - 1);\n const daysInPrevMonth = getDaysInMonth(prevMonthDate);<\/p>\n<p> for (let i = firstDay - 1; i >= 0; i--) {\n const dayElement = document.createElement('div');\n dayElement.className = 'bifa-calendar-day other-month';<\/p>\n<p> const dayContent = document.createElement('div');\n dayContent.className = 'bifa-day-content';<\/p>\n<p> const dayNumber = document.createElement('div');\n dayNumber.className = 'bifa-day-number';\n dayNumber.textContent = daysInPrevMonth - i;\n dayContent.appendChild(dayNumber);<\/p>\n<p> dayElement.appendChild(dayContent);\n calendarDays.appendChild(dayElement);\n }<\/p>\n<p> \/\/ Current month days\n for (let day = 1; day <= daysInMonth; day++) {\n const dayDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth(), day);\n const dayElement = document.createElement('div');\n let classes = ['bifa-calendar-day'];\n \n if (isSameDay(dayDate, today)) {\n classes.push('today');\n }\n \n if (hasEventsOnDate(dayDate)) {\n classes.push('has-events');\n }\n \n dayElement.className = classes.join(' ');\n \n if (hasEventsOnDate(dayDate)) {\n const events = getEventsOnDate(dayDate);\n const eventsWithImages = events.filter(event => \n event._embedded?.['wp:featuredmedia']?.[0]?.source_url\n );<\/p>\n<p> if (eventsWithImages.length > 0) {\n \/\/ Create background image slider\n const bgSlider = document.createElement('div');\n bgSlider.className = 'bifa-day-bg-slider';<\/p>\n<p> const bgTrack = document.createElement('div');\n bgTrack.className = 'bifa-day-bg-track';<\/p>\n<p> eventsWithImages.forEach(event => {\n const media = event._embedded['wp:featuredmedia'][0];\n const slide = document.createElement('div');\n slide.className = 'bifa-day-bg-slide';<\/p>\n<p> const bgImage = document.createElement('img');\n bgImage.className = 'bifa-day-bg-image';\n bgImage.src = media.source_url;\n bgImage.alt = event.title.rendered;\n bgImage.loading = 'lazy';<\/p>\n<p> slide.appendChild(bgImage);\n bgTrack.appendChild(slide);\n });<\/p>\n<p> bgSlider.appendChild(bgTrack);\n dayElement.appendChild(bgSlider);<\/p>\n<p> \/\/ Add overlay\n const overlay = document.createElement('div');\n overlay.className = 'bifa-day-overlay';\n dayElement.appendChild(overlay);<\/p>\n<p> \/\/ Create slider dots if multiple images\n if (eventsWithImages.length > 1) {\n const dotsContainer = document.createElement('div');\n dotsContainer.className = 'bifa-day-slider-dots';<\/p>\n<p> for (let i = 0; i < eventsWithImages.length; i++) {\n const dot = document.createElement('div');\n dot.className = `bifa-day-slider-dot ${i === 0 ? 'active' : ''}`;\n dotsContainer.appendChild(dot);\n }\n \n dayElement.appendChild(dotsContainer);\n \n \/\/ Auto-rotate slides\n let currentSlide = 0;\n setInterval(() => {\n currentSlide = (currentSlide + 1) % eventsWithImages.length;\n bgTrack.style.transform = `translateX(-${currentSlide * 100}%)`;<\/p>\n<p> \/\/ Update dots\n dotsContainer.querySelectorAll('.bifa-day-slider-dot').forEach((dot, index) => {\n dot.classList.toggle('active', index === currentSlide);\n });\n }, 3000);\n }\n }\n }<\/p>\n<p> \/\/ Create day content\n const dayContent = document.createElement('div');\n dayContent.className = 'bifa-day-content';<\/p>\n<p> \/\/ Day number\n const dayNumber = document.createElement('div');\n dayNumber.className = 'bifa-day-number';\n dayNumber.textContent = day;\n dayContent.appendChild(dayNumber);<\/p>\n<p> if (hasEventsOnDate(dayDate)) {\n const events = getEventsOnDate(dayDate);<\/p>\n<p> \/\/ Event count\n const eventCount = document.createElement('div');\n eventCount.className = 'bifa-event-count';\n eventCount.textContent = `${events.length} event${events.length > 1 ? 's' : ''}`;\n dayContent.appendChild(eventCount);\n }<\/p>\n<p> dayElement.appendChild(dayContent);<\/p>\n<p> if (!dayElement.classList.contains('other-month')) {\n dayElement.addEventListener('click', () => selectDate(dayDate));\n }<\/p>\n<p> calendarDays.appendChild(dayElement);\n }<\/p>\n<p> \/\/ Next month days\n const totalCells = calendarDays.children.length;\n const remainingCells = 42 - totalCells;\n for (let i = 1; i <= remainingCells; i++) {\n const dayElement = document.createElement('div');\n dayElement.className = 'bifa-calendar-day other-month';\n \n const dayContent = document.createElement('div');\n dayContent.className = 'bifa-day-content';\n \n const dayNumber = document.createElement('div');\n dayNumber.className = 'bifa-day-number';\n dayNumber.textContent = i;\n dayContent.appendChild(dayNumber);\n \n dayElement.appendChild(dayContent);\n calendarDays.appendChild(dayElement);\n }\n }\n \n \/\/ Select date\n function selectDate(date) {\n bifaSelectedDate = date;\n showSelectedDayEvents(date);\n }\n \n \/\/ Show selected day events\n function showSelectedDayEvents(date) {\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\n const eventsTitle = document.getElementById('bifaEventsTitle');\n const eventsList = document.getElementById('bifaEventsList');\n \n eventsTitle.textContent = `Events on ${formatDate(date)}`;\n \n const events = getEventsOnDate(date);\n \n eventsList.innerHTML = '';\n \n if (events.length === 0) {\n eventsList.innerHTML = `\n \n\n<div class=\"bifa-no-events\">\n<div class=\"bifa-no-events-icon\">\ud83d\udcc5<\/div>\n<div>No events scheduled for this date<\/div>\n<\/p><\/div>\n<p> `;\n } else {\n events.forEach(event => {\n \/\/ Get event image\n const media = event._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || 'https:\/\/via.placeholder.com\/320x180\/0A1F44\/D4AF37?text=BIFA+Event';<\/p>\n<p> \/\/ Get additional data\n const badgeText = event._bifa_badge_text || 'Event';\n const priority = event._bifa_priority || 'normal';<\/p>\n<p> \/\/ Create event item\n const eventElement = document.createElement('div');\n eventElement.className = 'bifa-event-item';<\/p>\n<p> \/\/ Image container\n const imageContainer = document.createElement('div');\n imageContainer.className = 'bifa-event-image';<\/p>\n<p> const img = document.createElement('img');\n img.src = imageUrl;\n img.alt = event.title.rendered;\n img.loading = 'lazy';\n imageContainer.appendChild(img);<\/p>\n<p> \/\/ Badge\n if (badgeText && badgeText.trim()) {\n const badge = document.createElement('div');\n badge.className = 'bifa-event-badge';\n badge.textContent = badgeText;\n imageContainer.appendChild(badge);\n }<\/p>\n<p> \/\/ Details container\n const detailsContainer = document.createElement('div');\n detailsContainer.className = 'bifa-event-details';<\/p>\n<p> \/\/ Title\n const title = document.createElement('div');\n title.className = 'bifa-event-title';\n title.textContent = event.title.rendered;\n detailsContainer.appendChild(title);<\/p>\n<p> \/\/ Time\n if (event._bifa_event_date) {\n const timeElement = document.createElement('div');\n timeElement.className = 'bifa-event-time';\n timeElement.innerHTML = `\ud83d\udd50 ${formatTime(event._bifa_event_date)}`;\n detailsContainer.appendChild(timeElement);\n }<\/p>\n<p> \/\/ Location\n if (event._bifa_location) {\n const locationElement = document.createElement('div');\n locationElement.className = 'bifa-event-location';\n locationElement.innerHTML = `\ud83d\udccd ${event._bifa_location}`;\n detailsContainer.appendChild(locationElement);\n }<\/p>\n<p> \/\/ Status\n const statusElement = document.createElement('div');\n statusElement.className = `bifa-event-status ${priority}`;\n statusElement.textContent = priority === 'urgent' ? 'Priority Event' : 'Regular Event';\n detailsContainer.appendChild(statusElement);<\/p>\n<p> \/\/ Assemble event item\n eventElement.appendChild(imageContainer);\n eventElement.appendChild(detailsContainer);<\/p>\n<p> \/\/ Add click handler\n eventElement.addEventListener('click', () => {\n window.open(event.link, '_blank');\n });<\/p>\n<p> eventsList.appendChild(eventElement);\n });\n }<\/p>\n<p> selectedEventsContainer.classList.add('show');\n selectedEventsContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }<\/p>\n<p> \/\/ Close selected day events\n function closeSelectedDayEvents() {\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\n selectedEventsContainer.classList.remove('show');\n bifaSelectedDate = null;\n }<\/p>\n<p> \/\/ Load events from API\n function loadEvents() {\n const apiUrl = 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events?_embed&per_page=100&acf_format=standard';<\/p>\n<p> fetch(apiUrl)\n .then(response => {\n if (!response.ok) throw new Error('Network response was not ok');\n return response.json();\n })\n .then(posts => {\n \/\/ Filter only events with dates\n const events = posts.filter(post => {\n const itemTypes = post.bifa_item_type || [];\n const classNames = post.class_list || [];<\/p>\n<p> \/\/ Check taxonomy ID (event = 3)\n const hasEventId = itemTypes.some(typeId => typeId == 3 || typeId == 'event');<\/p>\n<p> \/\/ Check CSS classes\n const hasEventClass = classNames.some(className => \n className.includes('bifa_item_type-event')\n );<\/p>\n<p> \/\/ Check for event date\n const hasEventDate = post._bifa_event_date;<\/p>\n<p> return (hasEventId || hasEventClass) && hasEventDate;\n });<\/p>\n<p> bifaEventsData = events;\n createWeekdays();\n renderCalendar();\n })\n .catch(err => {\n console.error('Error loading events:', err);\n const calendarDays = document.getElementById('bifaCalendarDays');\n calendarDays.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 60px 20px; color: #dc2626;\">\n<div>Error loading events. Please try again later.<\/div>\n<\/p><\/div>\n<p> `;\n });\n }<\/p>\n<p> \/\/ Initialize calendar\n function initCalendar() {\n \/\/ Create animated background\n createParticles();<\/p>\n<p> \/\/ Navigation event listeners\n document.getElementById('bifaPrevMonth').addEventListener('click', () => {\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() - 1);\n renderCalendar();\n });<\/p>\n<p> document.getElementById('bifaNextMonth').addEventListener('click', () => {\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() + 1);\n renderCalendar();\n });<\/p>\n<p> \/\/ Close events handler\n document.getElementById('bifaCloseEvents').addEventListener('click', closeSelectedDayEvents);<\/p>\n<p> \/\/ Load events\n loadEvents();\n }<\/p>\n<p> \/\/ Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initCalendar);\n } else {\n initCalendar();\n }\n})();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"ru\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Media Gallery<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* \u0412\u0421\u0415 \u0412\u0410\u0428\u0418 \u0421\u0422\u0418\u041b\u0418 \u041e\u0421\u0422\u0410\u0412\u041b\u042f\u0415\u041c \u0411\u0415\u0417 \u0418\u0417\u041c\u0415\u041d\u0415\u041d\u0418\u0419 - \u041e\u041d\u0418 \u0418\u0414\u0415\u0410\u041b\u042c\u041d\u042b *\/\n.bifa-media-wrapper {\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>.bifa-media-wrapper * { box-sizing: border-box; }<\/p>\n<p>.bifa-media-wrapper {\n background: #FFFFFF;\n padding: 100px 0;\n margin: 0 calc(-50vw + 50%);\n width: 100vw;\n position: relative;\n}<\/p>\n<p>.media-bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n top: 0;\n left: 0;\n pointer-events: none;\n}<\/p>\n<p>.media-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatMedia 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n}<\/p>\n<p>@keyframes floatMedia {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.2; }\n 90% { opacity: 0.2; }\n 100% {\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>.bifa-media-main {\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.bifa-media-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n}<\/p>\n<p>.bifa-section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n}<\/p>\n<p>.bifa-section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n}<\/p>\n<p>.bifa-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n}<\/p>\n<p>.bifa-section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n color: #4a5568;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n}<\/p>\n<p>.bifa-media-filters {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 50px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n padding: 25px;\n border-radius: 25px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n animation: slideInDown 1.2s ease 0.2s both;\n}<\/p>\n<p>.bifa-filter-btn {\n padding: 12px 28px;\n background: transparent;\n border: 2px solid rgba(212, 175, 55, 0.3);\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-filter-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-filter-btn:hover::before,\n.bifa-filter-btn.active::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-filter-btn:hover,\n.bifa-filter-btn.active {\n color: var(--bifa-deep-navy);\n border-color: transparent;\n transform: translateY(-3px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-media-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 30px;\n margin-bottom: 60px;\n}<\/p>\n<p>.bifa-stat-card {\n background: #FFFFFF;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n padding: 30px;\n text-align: center;\n opacity: 0;\n animation: fadeInUpMedia 1.2s ease forwards;\n}<\/p>\n<p>.bifa-stat-card:nth-child(1) { animation-delay: 0.1s; }\n.bifa-stat-card:nth-child(2) { animation-delay: 0.2s; }\n.bifa-stat-card:nth-child(3) { animation-delay: 0.3s; }\n.bifa-stat-card:nth-child(4) { animation-delay: 0.4s; }<\/p>\n<p>.bifa-stat-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-stat-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-stat-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-stat-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n font-size: 1.8rem;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-stat-number {\n font-family: var(--bifa-font-heading);\n font-size: 2.5rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 5px;\n}<\/p>\n<p>.bifa-stat-label {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n color: var(--bifa-gray);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.bifa-media-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 50px;\n}<\/p>\n<p>.bifa-media-item {\n background: #FFFFFF;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n opacity: 0;\n animation: fadeInUpMedia 1.2s ease forwards;\n}<\/p>\n<p>.bifa-media-item:nth-child(1) { animation-delay: 0.1s; }\n.bifa-media-item:nth-child(2) { animation-delay: 0.2s; }\n.bifa-media-item:nth-child(3) { animation-delay: 0.3s; }\n.bifa-media-item:nth-child(4) { animation-delay: 0.4s; }\n.bifa-media-item:nth-child(5) { animation-delay: 0.5s; }\n.bifa-media-item:nth-child(6) { animation-delay: 0.6s; }<\/p>\n<p>.bifa-media-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-media-item:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-media-item:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-media-image {\n position: relative;\n height: 200px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-media-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 60%, \n rgba(10, 31, 68, 0.8) 100%\n );\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-media-item:hover .bifa-media-image::before {\n opacity: 0.9;\n}<\/p>\n<p>.bifa-media-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n}<\/p>\n<p>.bifa-media-item:hover .bifa-media-image img {\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-featured-indicator {\n position: absolute;\n top: 15px;\n left: 15px;\n background: linear-gradient(135deg, #ff4757, #ff6348);\n color: white;\n padding: 6px 16px;\n border-radius: 20px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: 6px;\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n animation: featuredPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes featuredPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-featured-indicator::before {\n content: '\u2b50';\n font-size: 12px;\n}<\/p>\n<p>.bifa-media-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-media-content {\n padding: 25px;\n}<\/p>\n<p>.bifa-media-date {\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}<\/p>\n<p>.bifa-media-date::before {\n content: '';\n width: 5px;\n height: 5px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-media-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 15px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-media-item:hover .bifa-media-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-media-caption {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: #4a5568;\n line-height: 1.6;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 15px;\n}<\/p>\n<p>.bifa-media-meta {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n padding-top: 15px;\n border-top: 1px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-media-type {\n display: flex;\n align-items: center;\n gap: 5px;\n font-weight: 600;\n}<\/p>\n<p>.bifa-media-photographer {\n display: flex;\n align-items: center;\n gap: 5px;\n}<\/p>\n<p>.bifa-view-all-container {\n text-align: center;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-view-all-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-view-all-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-view-all-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-view-all-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-view-all-btn:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>.bifa-media-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 400px;\n}<\/p>\n<p>.bifa-media-loader {\n width: 60px;\n height: 60px;\n border: 4px solid rgba(212, 175, 55, 0.2);\n border-top-color: var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: spinMedia 1s linear infinite;\n}<\/p>\n<p>@keyframes spinMedia {\n to { transform: rotate(360deg); }\n}<\/p>\n<p>@keyframes fadeInUpMedia {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes slideInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@media (max-width: 1200px) {\n .bifa-media-grid {\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n .bifa-media-wrapper {\n padding: 70px 0;\n }\n .bifa-media-stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 25px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-media-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }\n .bifa-media-wrapper {\n padding: 50px 0;\n }\n .bifa-media-filters {\n padding: 20px;\n gap: 10px;\n }\n .bifa-filter-btn {\n padding: 8px 20px;\n font-size: 0.8rem;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-section-title {\n font-size: 2rem;\n }\n .bifa-media-stats {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n .bifa-stat-number {\n font-size: 2rem;\n }\n .bifa-media-content {\n padding: 20px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div id=\"bifa-media-section\" class=\"bifa-media-wrapper\">\n <\/p>\n<div class=\"media-bg-animation\">\n \n <\/div>\n<p> <br \/>\n <main class=\"bifa-media-main\"><\/p>\n<div class=\"bifa-media-container\">\n <\/p>\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Media Gallery<\/h2>\n<p class=\"bifa-section-subtitle\">Visual stories of BIFA+ global initiatives and achievements<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-media-filters\">\n <button class=\"bifa-filter-btn active\" data-filter=\"all\">All Media<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"photo\">Photos<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"video\">Videos<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"gallery\">Galleries<\/button><br \/>\n <button class=\"bifa-filter-btn\" data-filter=\"infographic\">Infographics<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"bifa-media-stats\">\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83d\udcf8<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Total Media<\/div>\n<\/p><\/div>\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83c\udfa5<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Videos<\/div>\n<\/p><\/div>\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83d\uddbc\ufe0f<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Photo Galleries<\/div>\n<\/p><\/div>\n<div class=\"bifa-stat-card\">\n<div class=\"bifa-stat-icon\">\ud83d\udcca<\/div>\n<div class=\"bifa-stat-number\" data-target=\"0\">0<\/div>\n<div class=\"bifa-stat-label\">Infographics<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"mediaGrid\" class=\"bifa-media-grid\">\n<div class=\"bifa-media-loading\">\n<div class=\"bifa-media-loader\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-view-all-container\">\n <a href=\"https:\/\/bifa.ai\/media-center\/\" class=\"bifa-view-all-btn\"><br \/>\n <span>View Full Media Gallery<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/main>\n<\/div>\n<p><script>\n\/\/ BIFA+ Media Module - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f \u0414\u041b\u042f MEDIABIFA\nconst BifaMedia = {\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_media',\n taxonomyUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_media_type',\n mediaItems: [],\n mediaTypes: {},\n currentFilter: 'all',\n stats: {\n total: 0,\n photo: 0,\n video: 0,\n gallery: 0,\n infographic: 0\n }\n },<\/p>\n<p> \/\/ Initialize\n async init() {\n this.createParticles();\n await this.loadTaxonomies();\n await this.loadMediaItems();\n this.setupFilters();\n this.updateStatistics();\n this.animateNumbers();\n },<\/p>\n<p> \/\/ Load taxonomies first\n async loadTaxonomies() {\n try {\n const response = await fetch(this.config.taxonomyUrl);\n if (response.ok) {\n const types = await response.json();\n types.forEach(type => {\n this.config.mediaTypes[type.id] = type.slug;\n });\n }\n } catch (error) {\n console.log('Could not load taxonomies, using defaults');\n \/\/ Default mapping based on your setup\n this.config.mediaTypes = {\n 3: 'photo',\n 4: 'gallery',\n 5: 'video',\n 6: 'infographic'\n };\n }\n },<\/p>\n<p> \/\/ Create background particles\n createParticles() {\n const container = document.querySelector('.media-bg-animation');\n if (!container) return;<\/p>\n<p> for (let i = 0; i < 20; i++) {\n const particle = document.createElement('div');\n particle.className = 'media-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 25 + 's';\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n container.appendChild(particle);\n }\n },\n\n \/\/ Load media items with proper meta fields\n async loadMediaItems() {\n const container = document.getElementById('mediaGrid');\n if (!container) return;\n\n try {\n \/\/ Load with embedded data and ACF format\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=12&orderby=date&order=desc&acf_format=standard');\n if (!response.ok) throw new Error('Failed to load media');\n \n const data = await response.json();\n this.config.mediaItems = data;\n \n \/\/ Count items by type\n this.config.stats.total = data.length;\n data.forEach(item => {\n const type = this.getMediaType(item);\n if (this.config.stats[type] !== undefined) {\n this.config.stats[type]++;\n }\n });<\/p>\n<p> this.renderMediaGrid(data);\n } catch (error) {\n console.error('Error loading media:', error);\n container.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 60px 20px; color: #666;\">\n<div style=\"font-size: 3rem; margin-bottom: 15px;\">\ud83d\udcc1<\/div>\n<h3>Loading Media Gallery...<\/h3>\n<p>Please check back in a moment.<\/p>\n<\/p><\/div>\n<p> `;\n }\n },<\/p>\n<p> \/\/ Get media type from item\n getMediaType(item) {\n \/\/ Try from taxonomy\n if (item.bifa_media_type && item.bifa_media_type.length > 0) {\n const typeId = item.bifa_media_type[0];\n return this.config.mediaTypes[typeId] || 'photo';\n }<\/p>\n<p> \/\/ Try from embedded terms\n if (item._embedded && item._embedded['wp:term']) {\n const terms = item._embedded['wp:term'].flat();\n const typeTerm = terms.find(term => term.taxonomy === 'bifa_media_type');\n if (typeTerm) return typeTerm.slug;\n }<\/p>\n<p> \/\/ Default\n return 'photo';\n },<\/p>\n<p> \/\/ Get featured image URL\n getFeaturedImage(item) {\n \/\/ Try featured media\n if (item._embedded && item._embedded['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]) {\n const media = item._embedded['wp:featuredmedia'][0];\n if (media.media_details && media.media_details.sizes) {\n return media.media_details.sizes.medium_large?.source_url || \n media.media_details.sizes.large?.source_url || \n media.source_url;\n }\n return media.source_url;\n }<\/p>\n<p> \/\/ Try ACF fields\n if (item.acf && item.acf.featured_image) {\n return item.acf.featured_image;\n }<\/p>\n<p> \/\/ Placeholder\n return 'https:\/\/via.placeholder.com\/600x400\/0A1F44\/D4AF37?text=BIFA+Media';\n },<\/p>\n<p> \/\/ Get metadata from custom fields\n getMetadata(item) {\n const meta = {\n caption: '',\n photographer: 'BIFA+ Team',\n location: '',\n priority: 'normal',\n date: item.date\n };<\/p>\n<p> \/\/ Try meta fields (our custom fields)\n if (item.meta) {\n meta.caption = item.meta._bifa_media_caption || '';\n meta.photographer = item.meta._bifa_media_photographer || meta.photographer;\n meta.location = item.meta._bifa_media_location || '';\n meta.priority = item.meta._bifa_media_priority || 'normal';\n meta.date = item.meta._bifa_media_date || item.date;\n }<\/p>\n<p> \/\/ Try ACF fields as fallback\n if (item.acf) {\n meta.caption = meta.caption || item.acf.caption || '';\n meta.photographer = meta.photographer || item.acf.photographer || 'BIFA+ Team';\n meta.location = meta.location || item.acf.location || '';\n meta.priority = meta.priority || item.acf.priority || 'normal';\n }<\/p>\n<p> \/\/ Use excerpt if no caption\n if (!meta.caption && item.excerpt) {\n meta.caption = item.excerpt.rendered.replace(\/<[^>]*>\/g, '');\n }<\/p>\n<p> return meta;\n },<\/p>\n<p> \/\/ Render media grid\n renderMediaGrid(items) {\n const container = document.getElementById('mediaGrid');\n if (!container) return;<\/p>\n<p> if (items.length === 0) {\n container.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 60px; color: var(--bifa-gray);\">\n<div style=\"font-size: 3rem; margin-bottom: 15px;\">\ud83d\udced<\/div>\n<h3>No media items found<\/h3>\n<p>Please check back later for updates.<\/p>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> items.slice(0, 12).forEach((item, index) => {\n const card = this.createMediaCard(item, index);\n container.appendChild(card);\n });\n },<\/p>\n<p> \/\/ Create media card with correct data\n createMediaCard(item, index) {\n const card = document.createElement('div');\n card.className = 'bifa-media-item';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> const imageUrl = this.getFeaturedImage(item);\n const title = item.title?.rendered || 'BIFA+ Media';\n const metadata = this.getMetadata(item);\n const mediaType = this.getMediaType(item);<\/p>\n<p> \/\/ Set data-type for filtering\n card.dataset.type = mediaType;<\/p>\n<p> const typeLabels = {\n 'photo': 'Photo',\n 'video': 'Video',\n 'gallery': 'Gallery',\n 'infographic': 'Infographic'\n };<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"bifa-media-image\" style=\"background-image: url('${imageUrl}')\">\n ${metadata.priority === 'featured' || metadata.priority === 'high' ? '<\/p>\n<div class=\"bifa-featured-indicator\">FEATURED<\/div>\n<p>' : ''}\n ${mediaType ? `<span class=\"bifa-media-badge\">${typeLabels[mediaType] || 'Media'}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-media-content\">\n<div class=\"bifa-media-date\">${this.formatDate(metadata.date)}<\/div>\n<h3 class=\"bifa-media-title\">${title}<\/h3>\n<p> ${metadata.caption ? `<\/p>\n<p class=\"bifa-media-caption\">${metadata.caption.substring(0, 120)}${metadata.caption.length > 120 ? '...' : ''}<\/p>\n<p>` : ''}<\/p>\n<div class=\"bifa-media-meta\">\n<div class=\"bifa-media-type\">\n ${this.getTypeIcon(mediaType)} ${typeLabels[mediaType] || 'Media'}\n <\/div>\n<div class=\"bifa-media-photographer\">\n \ud83d\udcf8 ${metadata.photographer}\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> card.addEventListener('click', () => {\n if (item.link) {\n window.open(item.link, '_blank');\n }\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Get type icon\n getTypeIcon(type) {\n const icons = {\n 'photo': '\ud83d\uddbc\ufe0f',\n 'video': '\ud83c\udfa5',\n 'gallery': '\ud83d\udcf8',\n 'infographic': '\ud83d\udcca'\n };\n return icons[type] || '\ud83d\udcc1';\n },<\/p>\n<p> \/\/ Update statistics\n updateStatistics() {\n \/\/ Update stat numbers\n const statElements = document.querySelectorAll('.bifa-stat-number');\n statElements[0]?.setAttribute('data-target', this.config.stats.total);\n statElements[1]?.setAttribute('data-target', this.config.stats.video);\n statElements[2]?.setAttribute('data-target', this.config.stats.gallery);\n statElements[3]?.setAttribute('data-target', this.config.stats.infographic);\n },<\/p>\n<p> \/\/ Setup filters\n setupFilters() {\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');<\/p>\n<p> filterButtons.forEach(button => {\n button.addEventListener('click', () => {\n \/\/ Remove active class from all\n filterButtons.forEach(btn => btn.classList.remove('active'));\n \/\/ Add active to clicked\n button.classList.add('active');<\/p>\n<p> \/\/ Get filter value\n const filter = button.dataset.filter;\n this.config.currentFilter = filter;<\/p>\n<p> \/\/ Filter items\n this.filterMediaItems(filter);\n });\n });\n },<\/p>\n<p> \/\/ Filter media items with animation\n filterMediaItems(filter) {\n const items = document.querySelectorAll('.bifa-media-item');\n let visibleCount = 0;<\/p>\n<p> items.forEach((item, index) => {\n if (filter === 'all' || item.dataset.type === filter) {\n item.style.display = 'block';\n \/\/ Reset animation with stagger\n item.style.animation = 'none';\n setTimeout(() => {\n item.style.animation = `fadeInUpMedia 0.6s ease forwards`;\n item.style.animationDelay = `${visibleCount * 0.1}s`;\n }, 10);\n visibleCount++;\n } else {\n item.style.opacity = '0';\n item.style.transform = 'scale(0.9)';\n setTimeout(() => {\n item.style.display = 'none';\n }, 300);\n }\n });\n },<\/p>\n<p> \/\/ Animate numbers\n animateNumbers() {\n const numbers = document.querySelectorAll('.bifa-stat-number');<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const target = parseInt(entry.target.dataset.target);\n if (target > 0) {\n this.animateNumber(entry.target, target);\n }\n observer.unobserve(entry.target);\n }\n });\n });<\/p>\n<p> numbers.forEach(number => observer.observe(number));\n },<\/p>\n<p> \/\/ Animate single number\n animateNumber(element, target) {\n let current = 0;\n const increment = Math.ceil(target \/ 50);\n const timer = setInterval(() => {\n current += increment;\n if (current >= target) {\n current = target;\n clearInterval(timer);\n }\n element.textContent = current;\n }, 30);\n },<\/p>\n<p> \/\/ Format date\n formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n BifaMedia.init();\n });\n} else {\n BifaMedia.init();\n}\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 - \\u0421\\u041e\\u0412\\u041c\\u0415\\u0421\\u0422\\u0418\\u041c\\u041e\\u0421\\u0422\\u042c \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n.bifa-hub-wrapper {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n\\\/* ========= RESET ========= *\\\/\\n.bifa-hub-wrapper * {\\n box-sizing: border-box;\\n}\\n\\n\\\/* ========= MAIN WRAPPER ========= *\\\/\\n.bifa-hub-wrapper {\\n min-height: 100vh;\\n position: relative;\\n background: #FFFFFF;\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 0;\\n}\\n\\n\\\/* ========= HERO SECTION WITH SLIDER ========= *\\\/\\n.bifa-hero-section {\\n position: relative;\\n height: 70vh;\\n min-height: 600px;\\n background: var(--bifa-deep-navy);\\n overflow: hidden;\\n}\\n\\n.bifa-hero-slider {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.bifa-hero-slides {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.bifa-hero-slide {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n opacity: 0;\\n transition: opacity 1.5s ease, transform 1s ease;\\n transform: scale(1.1);\\n}\\n\\n.bifa-hero-slide.active {\\n opacity: 1;\\n transform: scale(1);\\n}\\n\\n.bifa-hero-slide-bg {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-size: cover;\\n background-position: center;\\n filter: brightness(0.6);\\n}\\n\\n.bifa-hero-slide-bg::after {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.7) 0%, \\n rgba(10, 31, 68, 0.3) 50%,\\n rgba(212, 175, 55, 0.1) 100%\\n );\\n}\\n\\n\\\/* \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u0424\\u0438\\u043a\\u0441\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u0430\\u044f \\u0441\\u0442\\u0440\\u0443\\u043a\\u0442\\u0443\\u0440\\u0430 \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440\\u0430 \\u043a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442\\u0430 *\\\/\\n.bifa-hero-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n z-index: 2;\\n max-width: 1200px;\\n width: 90%;\\n height: 75%;\\n max-height: 550px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: flex-start;\\n opacity: 0;\\n animation: heroContentIn 1s ease 0.5s forwards;\\n}\\n\\n@keyframes heroContentIn {\\n from {\\n opacity: 0;\\n transform: translate(-50%, -45%);\\n }\\n to {\\n opacity: 1;\\n transform: translate(-50%, -50%);\\n }\\n}\\n\\n\\\/* \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440 \\u0441 \\u043f\\u0440\\u043e\\u043a\\u0440\\u0443\\u0442\\u043a\\u043e\\u0439 \\u0434\\u043b\\u044f \\u043a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442\\u0430 *\\\/\\n.bifa-hero-scrollable {\\n flex: 1;\\n overflow-y: auto;\\n overflow-x: hidden;\\n width: 100%;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 10px 20px 20px;\\n margin-bottom: 15px;\\n \\n \\\/* \\u0421\\u0442\\u0438\\u043b\\u0438\\u0437\\u0430\\u0446\\u0438\\u044f \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b\\u0431\\u0430\\u0440\\u0430 *\\\/\\n scrollbar-width: thin;\\n scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.1);\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar-track {\\n background: rgba(255, 255, 255, 0.1);\\n border-radius: 10px;\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar-thumb {\\n background: rgba(212, 175, 55, 0.5);\\n border-radius: 10px;\\n}\\n\\n.bifa-hero-scrollable::-webkit-scrollbar-thumb:hover {\\n background: rgba(212, 175, 55, 0.7);\\n}\\n\\n.bifa-hero-badge {\\n display: inline-block;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 10px 30px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.9rem;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n margin-bottom: 30px;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\\n flex-shrink: 0;\\n}\\n\\n.bifa-hero-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 5vw, 4rem);\\n font-weight: 900;\\n color: var(--bifa-bright-white);\\n margin-bottom: 25px;\\n line-height: 1.2;\\n text-shadow: 2px 4px 20px rgba(0, 0, 0, 0.3);\\n flex-shrink: 0;\\n}\\n\\n.bifa-hero-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1.1rem, 2vw, 1.4rem);\\n color: rgba(255, 255, 255, 0.9);\\n line-height: 1.6;\\n margin-bottom: 40px;\\n max-width: 800px;\\n margin-left: auto;\\n margin-right: auto;\\n flex-shrink: 1;\\n}\\n\\n.bifa-hero-meta {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 30px;\\n margin-bottom: 30px;\\n flex-wrap: wrap;\\n flex-shrink: 0;\\n}\\n\\n.bifa-hero-meta-item {\\n display: flex;\\n align-items: center;\\n gap: 10px;\\n color: rgba(255, 255, 255, 0.8);\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n}\\n\\n.bifa-hero-meta-item svg {\\n width: 20px;\\n height: 20px;\\n stroke: var(--bifa-heritage-gold);\\n}\\n\\n\\\/* \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u0424\\u0438\\u043a\\u0441\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u0430\\u044f \\u043a\\u043d\\u043e\\u043f\\u043a\\u0430 \\u0432\\u043d\\u0438\\u0437\\u0443 *\\\/\\n.bifa-hero-cta {\\n display: inline-flex;\\n align-items: center;\\n gap: 15px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1.1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n white-space: nowrap;\\n flex-shrink: 0;\\n margin-top: auto;\\n border: none;\\n cursor: pointer;\\n}\\n\\n.bifa-hero-cta::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-hero-cta:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 30px 70px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-hero-cta:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-hero-cta svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-hero-cta:hover svg {\\n transform: translateX(5px);\\n}\\n\\n\\\/* Slider Navigation *\\\/\\n.bifa-slider-nav {\\n position: absolute;\\n bottom: 40px;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n gap: 15px;\\n z-index: 3;\\n}\\n\\n.bifa-slider-dot {\\n width: 12px;\\n height: 12px;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n border: 2px solid rgba(255, 255, 255, 0.5);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n position: relative;\\n}\\n\\n.bifa-slider-dot.active {\\n background: var(--bifa-heritage-gold);\\n border-color: var(--bifa-heritage-gold);\\n transform: scale(1.2);\\n}\\n\\n.bifa-slider-dot:hover {\\n background: rgba(255, 255, 255, 0.5);\\n transform: scale(1.1);\\n}\\n\\n.bifa-slider-progress {\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n width: 0;\\n z-index: 4;\\n transition: width 5s linear;\\n}\\n\\n.bifa-slider-progress.active {\\n width: 100%;\\n}\\n\\n\\\/* Slider Arrows *\\\/\\n.bifa-slider-arrow {\\n position: absolute;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 60px;\\n height: 60px;\\n background: rgba(255, 255, 255, 0.1);\\n backdrop-filter: blur(10px);\\n border: 2px solid rgba(255, 255, 255, 0.2);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n z-index: 3;\\n opacity: 0.8;\\n}\\n\\n.bifa-slider-arrow:active {\\n transform: translateY(-50%) scale(0.95);\\n}\\n\\n.bifa-slider-arrow:hover {\\n background: rgba(212, 175, 55, 0.2);\\n border-color: var(--bifa-heritage-gold);\\n transform: translateY(-50%) scale(1.1);\\n}\\n\\n.bifa-slider-arrow.prev {\\n left: 50px;\\n}\\n\\n.bifa-slider-arrow.next {\\n right: 50px;\\n}\\n\\n.bifa-slider-arrow svg {\\n width: 24px;\\n height: 24px;\\n stroke: var(--bifa-bright-white);\\n stroke-width: 2.5;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ========= *\\\/\\n.hub-bg-animation {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n top: 0;\\n left: 0;\\n pointer-events: none;\\n}\\n\\n.hub-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatHub 25s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.15;\\n}\\n\\n@keyframes floatHub {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.2; }\\n 90% { opacity: 0.2; }\\n 100% {\\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* ========= MAIN CONTENT ========= *\\\/\\n.bifa-hub-main {\\n position: relative;\\n z-index: 10;\\n padding: 100px 0;\\n}\\n\\n.bifa-hub-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n\\\/* ========= SEARCH SECTION ========= *\\\/\\n.bifa-hub-search-section {\\n background: #FFFFFF;\\n padding: 40px 0;\\n margin-bottom: 80px;\\n border-radius: 30px;\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.08);\\n}\\n\\n.bifa-hub-search-container {\\n max-width: 800px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n.bifa-hub-search-wrapper {\\n position: relative;\\n}\\n\\n.bifa-hub-search-input {\\n width: 100%;\\n padding: 20px 60px 20px 30px;\\n border: 3px solid rgba(212, 175, 55, 0.2);\\n border-radius: 50px;\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n background: #F8F9FA;\\n transition: var(--bifa-transition);\\n outline: none;\\n}\\n\\n.bifa-hub-search-input:focus {\\n border-color: var(--bifa-heritage-gold);\\n box-shadow: 0 12px 35px rgba(212, 175, 55, 0.2);\\n background: #FFFFFF;\\n}\\n\\n.bifa-hub-search-btn {\\n position: absolute;\\n right: 8px;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 50px;\\n height: 50px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border: none;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n}\\n\\n.bifa-hub-search-btn:hover {\\n transform: translateY(-50%) scale(1.1);\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-hub-search-btn svg {\\n width: 22px;\\n height: 22px;\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 3;\\n}\\n\\n.bifa-search-results {\\n margin-top: 20px;\\n text-align: center;\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-gray);\\n font-size: 0.95rem;\\n}\\n\\n.bifa-search-results.active {\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n}\\n\\n\\\/* ========= SECTION HEADERS ========= *\\\/\\n.bifa-section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n position: relative;\\n}\\n\\n.bifa-section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n}\\n\\n.bifa-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n}\\n\\n.bifa-section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n color: #4a5568;\\n max-width: 600px;\\n margin: 0 auto;\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= NEWS SECTION ========= *\\\/\\n.bifa-news-section {\\n margin-bottom: 100px;\\n}\\n\\n.bifa-news-preview-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 50px;\\n}\\n\\n\\\/* ========= EVENTS SECTION ========= *\\\/\\n.bifa-events-section {\\n background: #FFFFFF;\\n padding: 100px 0;\\n margin: 0 calc(-50vw + 50%);\\n width: 100vw;\\n position: relative;\\n}\\n\\n.bifa-events-preview-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 50px;\\n}\\n\\n\\\/* ========= PREVIEW CARDS (Shared Styles) ========= *\\\/\\n.bifa-preview-card {\\n background: #FFFFFF;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n opacity: 0;\\n animation: fadeInUpHub 1.2s ease forwards;\\n}\\n\\n.bifa-preview-card:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-preview-card:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-preview-card:nth-child(3) { animation-delay: 0.3s; }\\n\\n.bifa-preview-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-preview-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-preview-card:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-preview-image {\\n position: relative;\\n height: 200px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-preview-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 60%, \\n rgba(10, 31, 68, 0.8) 100%\\n );\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-preview-card:hover .bifa-preview-image::before {\\n opacity: 0.9;\\n}\\n\\n\\\/* Hot\\\/Trending Indicator *\\\/\\n.bifa-hot-indicator {\\n position: absolute;\\n top: 15px;\\n left: 15px;\\n background: linear-gradient(135deg, #ff4757, #ff6348);\\n color: white;\\n padding: 6px 16px;\\n border-radius: 20px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 3;\\n display: flex;\\n align-items: center;\\n gap: 6px;\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n animation: hotPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes hotPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-hot-indicator::before {\\n content: '\\ud83d\\udd25';\\n font-size: 12px;\\n}\\n\\n.bifa-preview-badge {\\n position: absolute;\\n top: 15px;\\n right: 15px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-preview-status {\\n position: absolute;\\n top: 15px;\\n left: 15px;\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n backdrop-filter: blur(10px);\\n}\\n\\n.bifa-preview-status.upcoming {\\n background: rgba(219, 234, 254, 0.9);\\n color: #1e40af;\\n border: 1px solid rgba(30, 64, 175, 0.2);\\n}\\n\\n.bifa-preview-status.ongoing {\\n background: rgba(220, 252, 231, 0.9);\\n color: #166534;\\n border: 1px solid rgba(22, 101, 52, 0.2);\\n}\\n\\n.bifa-preview-content {\\n padding: 25px;\\n}\\n\\n.bifa-preview-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n margin-bottom: 12px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n font-weight: 500;\\n}\\n\\n.bifa-preview-date::before {\\n content: '';\\n width: 5px;\\n height: 5px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-preview-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 15px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-preview-card:hover .bifa-preview-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-preview-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: #4a5568;\\n line-height: 1.6;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 0;\\n}\\n\\n\\\/* ========= VIEW ALL BUTTONS ========= *\\\/\\n.bifa-view-all-container {\\n text-align: center;\\n margin-top: 60px;\\n}\\n\\n.bifa-view-all-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-view-all-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-view-all-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-view-all-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-view-all-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-view-all-btn:hover svg {\\n transform: translateX(5px);\\n}\\n\\n\\\/* ========= LOADING STATES ========= *\\\/\\n.bifa-hub-loading {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 400px;\\n}\\n\\n.bifa-hub-loader {\\n width: 60px;\\n height: 60px;\\n border: 4px solid rgba(212, 175, 55, 0.2);\\n border-top-color: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: spinHub 1s linear infinite;\\n}\\n\\n@keyframes spinHub {\\n to { transform: rotate(360deg); }\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInUpHub {\\n from {\\n opacity: 0;\\n transform: translateY(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .bifa-news-preview-grid,\\n .bifa-events-preview-grid {\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 35px;\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 30px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 30px;\\n }\\n}\\n\\n\\\/* Tablet optimizations *\\\/\\n@media (max-width: 992px) {\\n .bifa-hero-section {\\n height: 65vh;\\n min-height: 550px;\\n max-height: 700px;\\n }\\n \\n .bifa-hero-content {\\n height: 70%;\\n max-height: 500px;\\n }\\n \\n .bifa-hero-badge {\\n padding: 6px 20px;\\n font-size: 0.75rem;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-title {\\n font-size: clamp(1.8rem, 4vw, 2.5rem);\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: clamp(0.9rem, 2vw, 1.1rem);\\n margin-bottom: 20px;\\n }\\n \\n .bifa-hero-meta {\\n gap: 20px;\\n margin-bottom: 20px;\\n }\\n \\n .bifa-hero-meta-item {\\n font-size: 0.85rem;\\n }\\n \\n .bifa-hero-meta-item svg {\\n width: 16px;\\n height: 16px;\\n }\\n \\n .bifa-hero-cta {\\n padding: 12px 28px;\\n font-size: 0.9rem;\\n gap: 10px;\\n }\\n \\n .bifa-hero-cta svg {\\n width: 16px;\\n height: 16px;\\n }\\n \\n .bifa-slider-nav {\\n bottom: 50px;\\n gap: 12px;\\n }\\n \\n .bifa-slider-dot {\\n width: 10px;\\n height: 10px;\\n }\\n \\n .bifa-hub-main {\\n padding: 70px 0;\\n }\\n \\n .bifa-events-section {\\n padding: 70px 0;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-hero-slide-bg {\\n filter: brightness(0.7);\\n }\\n \\n .bifa-hero-slide-bg::after {\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.6) 0%, \\n rgba(10, 31, 68, 0.2) 50%,\\n rgba(212, 175, 55, 0.05) 100%\\n );\\n }\\n \\n .bifa-hero-section {\\n height: 50vh;\\n min-height: 400px;\\n }\\n \\n .bifa-hero-content {\\n height: 70%;\\n max-height: 450px;\\n }\\n \\n .bifa-hero-meta {\\n gap: 20px;\\n }\\n \\n .bifa-news-preview-grid,\\n .bifa-events-preview-grid {\\n grid-template-columns: 1fr;\\n gap: 25px;\\n }\\n \\n .bifa-hub-main {\\n padding: 50px 0;\\n }\\n \\n .bifa-events-section {\\n padding: 50px 0;\\n }\\n \\n .bifa-slider-arrow {\\n width: 45px;\\n height: 45px;\\n background: rgba(0, 0, 0, 0.6);\\n border: 1px solid rgba(255, 255, 255, 0.3);\\n }\\n \\n .bifa-slider-arrow:hover {\\n transform: translateY(-50%) scale(1.05);\\n background: rgba(0, 0, 0, 0.8);\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 20px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 20px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-hero-section {\\n height: 60vh;\\n min-height: 450px;\\n max-height: 600px;\\n }\\n \\n .bifa-hero-content {\\n width: 85%;\\n height: 75%;\\n max-height: 500px;\\n }\\n \\n .bifa-hero-badge {\\n padding: 6px 18px;\\n font-size: 0.7rem;\\n letter-spacing: 1px;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.5rem;\\n margin-bottom: 12px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.85rem;\\n margin-bottom: 20px;\\n }\\n \\n .bifa-hero-meta {\\n gap: 15px;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-meta-item {\\n font-size: 0.75rem;\\n gap: 6px;\\n }\\n \\n .bifa-hero-meta-item svg {\\n width: 14px;\\n height: 14px;\\n }\\n \\n .bifa-hero-cta {\\n padding: 10px 20px;\\n font-size: 0.75rem;\\n gap: 8px;\\n letter-spacing: 0.5px;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);\\n }\\n \\n .bifa-hero-cta svg {\\n width: 12px;\\n height: 12px;\\n }\\n \\n .bifa-slider-nav {\\n bottom: 30px;\\n gap: 10px;\\n }\\n \\n .bifa-slider-dot {\\n width: 8px;\\n height: 8px;\\n border-width: 1px;\\n }\\n \\n .bifa-slider-arrow {\\n width: 40px;\\n height: 40px;\\n background: rgba(0, 0, 0, 0.5);\\n border: 1px solid rgba(255, 255, 255, 0.2);\\n }\\n \\n .bifa-slider-arrow svg {\\n width: 18px;\\n height: 18px;\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 10px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 10px;\\n }\\n \\n .bifa-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-preview-content {\\n padding: 25px;\\n }\\n}\\n\\n@media (max-width: 360px) {\\n .bifa-hero-section {\\n min-height: 450px;\\n max-height: 550px;\\n }\\n \\n .bifa-hero-content {\\n height: 70%;\\n max-height: 450px;\\n }\\n \\n .bifa-hero-badge {\\n padding: 5px 15px;\\n font-size: 0.65rem;\\n margin-bottom: 12px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.3rem;\\n margin-bottom: 10px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.8rem;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-meta {\\n margin-bottom: 12px;\\n }\\n \\n .bifa-hero-cta {\\n padding: 9px 18px;\\n font-size: 0.7rem;\\n gap: 6px;\\n }\\n \\n .bifa-hero-cta svg {\\n width: 10px;\\n height: 10px;\\n }\\n \\n .bifa-slider-arrow {\\n width: 36px;\\n height: 36px;\\n }\\n \\n .bifa-slider-arrow svg {\\n width: 14px;\\n height: 14px;\\n }\\n \\n .bifa-slider-arrow.prev {\\n left: 8px;\\n }\\n \\n .bifa-slider-arrow.next {\\n right: 8px;\\n }\\n \\n .bifa-slider-nav {\\n bottom: 25px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-hub-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"hub-bg-animation\\\"\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<section class=\"\\\"bifa-hero-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-slider\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-slides\\\"\" id=\"\\\"heroSlides\\\"\">\\n \\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-slider-nav\\\"\" id=\"\\\"sliderNav\\\"\">\\n \\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-slider-progress\\\"\" id=\"\\\"sliderProgress\\\"\"><\\\/div>\\n \\n \\n <button class=\"\\\"bifa-slider-arrow\" prev\\\" id=\"\\\"sliderPrev\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M15\" 18l9 12l15 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <button class=\"\\\"bifa-slider-arrow\" next\\\" id=\"\\\"sliderNext\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 18l15 12l9 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/section>\\n\\n \\n <main class=\"\\\"bifa-hub-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-container\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-hub-search-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-search-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-search-wrapper\\\"\">\\n <input \\n type=\"\\\"text\\\"\" class =\"\\\"bifa-hub-search-input\\\"\" placeholder=\"\\\"Search\" news and events...\\\" id =\"\\\"hubSearchInput\\\"\\n\" >\\n <button class=\"\\\"bifa-hub-search-btn\\\"\" id=\"\\\"hubSearchBtn\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"11\\\"\" cy=\"\\\"11\\\"\" r=\"\\\"8\\\"\"><\\\/circle>\\n <path d=\"\\\"m21\" 21-4.35-4.35\\\"><\\\/path>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-search-results\\\"\" id=\"\\\"searchResults\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/section>\\n \\n \\n <\/p>\n<section class=\"\\\"bifa-news-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">Latest News<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Stay updated with the latest BIFA+ news and announcements<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div id=\"\\\"newsPreviewGrid\\\"\" class=\"\\\"bifa-news-preview-grid\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-hub-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-loader\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-view-all-container\\\"\">\\n <a href=\"\\\"\\\/news\\\"\" class=\"\\\"bifa-view-all-btn\\\"\">\\n <span>View All News<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/section>\\n <\\\/div>\\n <\\\/main>\\n\\n \\n <\/p>\n<section class=\"\\\"bifa-events-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">Upcoming Events<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Join our international tournaments and conferences<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div id=\"\\\"eventsPreviewGrid\\\"\" class=\"\\\"bifa-events-preview-grid\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-hub-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hub-loader\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-view-all-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/events-2\\\/\\\"\" class=\"\\\"bifa-view-all-btn\\\"\">\\n <span>View All Events<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Hub Module\\nconst BifaHub = {\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events',\\n sliderInterval: null,\\n currentSlide: 0,\\n autoPlayDelay: 5000,\\n slides: [],\\n allPosts: [],\\n searchQuery: '',\\n searchResults: []\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.loadHeroSlides();\\n this.loadNewsPreviews();\\n this.loadEventsPreviews();\\n this.setupSliderControls();\\n this.setupSearch();\\n },\\n\\n \\\/\\\/ Setup search functionality\\n setupSearch() {\\n const searchInput = document.getElementById('hubSearchInput');\\n const searchBtn = document.getElementById('hubSearchBtn');\\n const searchResults = document.getElementById('searchResults');\\n \\n if (searchInput) {\\n searchInput.addEventListener('input', (e) => {\\n this.config.searchQuery = e.target.value.toLowerCase();\\n if (this.config.searchQuery.length >= 3) {\\n this.performSearch();\\n } else {\\n searchResults.textContent = '';\\n this.loadNewsPreviews();\\n this.loadEventsPreviews();\\n }\\n });\\n \\n searchInput.addEventListener('keypress', (e) => {\\n if (e.key === 'Enter') {\\n this.performSearch();\\n }\\n });\\n }\\n \\n if (searchBtn) {\\n searchBtn.addEventListener('click', () => {\\n this.performSearch();\\n });\\n }\\n },\\n\\n \\\/\\\/ Perform search\\n performSearch() {\\n const searchResults = document.getElementById('searchResults');\\n \\n if (!this.config.searchQuery || this.config.searchQuery.length < 2) {\\n searchResults.textContent = '';\\n return;\\n }\\n \\n this.config.searchResults = this.config.allPosts.filter(post => {\\n const title = post.title.rendered.toLowerCase();\\n const excerpt = this.stripHtml(post.excerpt.rendered).toLowerCase();\\n const location = (post._bifa_location || '').toLowerCase();\\n \\n return title.includes(this.config.searchQuery) || \\n excerpt.includes(this.config.searchQuery) ||\\n location.includes(this.config.searchQuery);\\n });\\n \\n \\\/\\\/ Update results text\\n if (this.config.searchResults.length > 0) {\\n searchResults.textContent = `Found ${this.config.searchResults.length} results for \\\"${this.config.searchQuery}\\\"`;\\n searchResults.classList.add('active');\\n } else {\\n searchResults.textContent = `No results found for \\\"${this.config.searchQuery}\\\"`;\\n searchResults.classList.remove('active');\\n }\\n \\n \\\/\\\/ Update previews with search results\\n this.updatePreviewsWithSearch();\\n },\\n\\n \\\/\\\/ Update previews with search results\\n updatePreviewsWithSearch() {\\n const newsContainer = document.getElementById('newsPreviewGrid');\\n const eventsContainer = document.getElementById('eventsPreviewGrid');\\n \\n \\\/\\\/ Clear existing content\\n if (newsContainer) newsContainer.innerHTML = '';\\n if (eventsContainer) eventsContainer.innerHTML = '';\\n \\n \\\/\\\/ Separate search results into news and events\\n const newsResults = this.config.searchResults.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return !eventDate || eventDate === '';\\n });\\n \\n const eventsResults = this.config.searchResults.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return eventDate && eventDate !== '';\\n });\\n \\n \\\/\\\/ Display news results\\n if (newsContainer) {\\n if (newsResults.length > 0) {\\n newsResults.slice(0, 6).forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'news', index);\\n newsContainer.appendChild(card);\\n });\\n } else {\\n newsContainer.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray); grid-column: 1 \\>No news found<\\\/p>';\\n }\\n }\\n \\n \\\/\\\/ Display events results\\n if (eventsContainer) {\\n if (eventsResults.length > 0) {\\n eventsResults.slice(0, 6).forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'event', index);\\n eventsContainer.appendChild(card);\\n });\\n } else {\\n eventsContainer.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray); grid-column: 1 \\>No events found<\\\/p>';\\n }\\n }\\n },\\n\\n \\\/\\\/ Check if post is hot\\\/trending\\n isHotPost(post) {\\n \\\/\\\/ Logic to determine if a post is hot\\\/trending\\n \\\/\\\/ More strict criteria to avoid marking all posts as hot\\n \\n \\\/\\\/ 1. Posts from last 24 hours (not 3 days)\\n const postDate = new Date(post.date);\\n const oneDayAgo = new Date();\\n oneDayAgo.setDate(oneDayAgo.getDate() - 1);\\n \\n \\\/\\\/ 2. Must have urgent badge or priority\\n const badge = (post._bifa_badge_text || '').toLowerCase();\\n const hasUrgentBadge = badge.includes('urgent') || \\n badge.includes('hot') || \\n badge.includes('breaking') ||\\n badge.includes('\\u0432\\u0430\\u0436\\u043d\\u043e\\u0435');\\n \\n \\\/\\\/ 3. Check priority flag\\n const hasHighPriority = post._bifa_priority === 'urgent' || \\n post._bifa_priority === 'high';\\n \\n \\\/\\\/ Post must be recent AND have urgent badge\\\/priority\\n if (postDate > oneDayAgo && (hasUrgentBadge || hasHighPriority)) {\\n return true;\\n }\\n \\n \\\/\\\/ 4. For events - check if starting within 48 hours\\n if (post._bifa_event_date) {\\n const eventDate = new Date(post._bifa_event_date);\\n const twoDaysFromNow = new Date();\\n twoDaysFromNow.setDate(twoDaysFromNow.getDate() + 2);\\n \\n if (eventDate > new Date() && eventDate < twoDaysFromNow) {\\n return true;\\n }\\n }\\n \\n return false;\\n },\\n\\n \\\/\\\/ Create background particles\\n createParticles() {\\n const container = document.querySelector('.hub-bg-animation');\\n if (!container) return;\\n\\n for (let i = 0; i < 20; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'hub-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 25 + 's';\\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n container.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Load hero slides (latest 3 posts)\\n async loadHeroSlides() {\\n try {\\n const response = await fetch(`${this.config.apiUrl}?_embed&per_page=50&orderby=date&order=desc`);\\n const posts = await response.json();\\n \\n this.config.allPosts = posts;\\n \\n \\\/\\\/ Get latest 3 posts for slider\\n this.config.slides = posts.slice(0, 3);\\n \\n \\\/\\\/ \\u0414\\u0435\\u0442\\u0430\\u043b\\u044c\\u043d\\u043e\\u0435 \\u043b\\u043e\\u0433\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u0435 \\u043f\\u0435\\u0440\\u0432\\u043e\\u0433\\u043e \\u043f\\u043e\\u0441\\u0442\\u0430\\n if (this.config.slides.length > 0) {\\n const firstPost = this.config.slides[0];\\n console.log('\\ud83d\\udcca First post data:');\\n console.log(' - ID:', firstPost.id);\\n console.log(' - Title:', firstPost.title.rendered);\\n console.log(' - Slug:', firstPost.slug);\\n console.log(' - Link:', firstPost.link);\\n console.log(' - Type:', firstPost.type);\\n console.log(' - Status:', firstPost.status);\\n if (firstPost.guid) {\\n console.log(' - GUID:', firstPost.guid.rendered);\\n }\\n }\\n \\n this.renderHeroSlides();\\n this.createSliderDots();\\n this.startAutoPlay();\\n \\n } catch (error) {\\n console.error('Error loading hero slides:', error);\\n }\\n },\\n\\n \\\/\\\/ Render hero slides\\n renderHeroSlides() {\\n const slidesContainer = document.getElementById('heroSlides');\\n if (!slidesContainer || this.config.slides.length === 0) return;\\n\\n slidesContainer.innerHTML = '';\\n\\n this.config.slides.forEach((post, index) => {\\n const media = post._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/hero-placeholder.jpg`;\\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';\\n const badge = isEvent ? 'Event' : 'News';\\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 150) + '...';\\n \\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u044b\\u0439 URL \\u0434\\u043b\\u044f \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0438\\n const postUrl = this.getPostUrl(post);\\n \\n const slide = document.createElement('div');\\n slide.className = `bifa-hero-slide ${index === 0 ? 'active' : ''}`;\\n \\n \\\/\\\/ \\u0414\\u043e\\u0431\\u0430\\u0432\\u043b\\u0435\\u043d \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440 \\u0441 \\u043f\\u0440\\u043e\\u043a\\u0440\\u0443\\u0442\\u043a\\u043e\\u0439 \\u0438 \\u0444\\u0438\\u043a\\u0441\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u0430\\u044f \\u043a\\u043d\\u043e\\u043f\\u043a\\u0430\\n slide.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-hero-slide-bg\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-hero-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-scrollable\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-badge\\\"\">${badge}<\\\/div>\\n <\/p>\n<h1 class=\"\\\"bifa-hero-title\\\"\">${post.title.rendered}<\\\/h1>\\n <\/p>\n<p class=\"\\\"bifa-hero-excerpt\\\"\">${excerpt}<\\\/p>\\n <\/p>\n<div class=\"\\\"bifa-hero-meta\\\"\">\\n ${isEvent ? `\\n <\/p>\n<div class=\"\\\"bifa-hero-meta-item\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M8\" 7v3m16 7v3m7 11h17m5 21h19c20.1046 21 20.1046 19v7c21 5.89543 5 19 5h5c3.89543 3 7v19c3 3.89543 21z\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>${this.formatDate(post._bifa_event_date)}<\\\/span>\\n <\\\/div>\\n ${post._bifa_location ? `\\n <\/p>\n<div class=\"\\\"bifa-hero-meta-item\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M21\" 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 18 0z\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\\\/\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"10\\\"\" r=\"\\\"3\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\\\/\">\\n <\\\/svg>\\n <span>${post._bifa_location}<\\\/span>\\n <\\\/div>\\n ` : ''}\\n ` : `\\n <\/p>\n<div class=\"\\\"bifa-hero-meta-item\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 8v12l15 15m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3c16.9706 12z\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>${this.formatDate(post.date)}<\\\/span>\\n <\\\/div>\\n `}\\n <\\\/div>\\n <\\\/div>\\n <button class=\"\\\"bifa-hero-cta\\\"\" data-post-url=\"\\\"${postUrl}\\\"\" data-post-id=\"\\\"${post.id}\\\"\">\\n <span>Read More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n `;\\n \\n slidesContainer.appendChild(slide);\\n });\\n \\n \\\/\\\/ \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041e\\u0434\\u0438\\u043d \\u043e\\u0431\\u0440\\u0430\\u0431\\u043e\\u0442\\u0447\\u0438\\u043a \\u0434\\u043b\\u044f \\u0432\\u0441\\u0435\\u0445 \\u043a\\u043d\\u043e\\u043f\\u043e\\u043a - \\u0431\\u0435\\u0440\\u0451\\u0442 URL \\u0438\\u0437 \\u0410\\u041a\\u0422\\u0418\\u0412\\u041d\\u041e\\u0413\\u041e \\u0441\\u043b\\u0430\\u0439\\u0434\\u0430\\n slidesContainer.addEventListener('click', (e) => {\\n const clickedButton = e.target.closest('.bifa-hero-cta');\\n if (!clickedButton) return;\\n \\n \\\/\\\/ \\u041d\\u0430\\u0445\\u043e\\u0434\\u0438\\u043c \\u0410\\u041a\\u0422\\u0418\\u0412\\u041d\\u042b\\u0419 \\u0441\\u043b\\u0430\\u0439\\u0434\\n const activeSlide = slidesContainer.querySelector('.bifa-hero-slide.active');\\n if (!activeSlide) {\\n console.error('\\u274c No active slide found!');\\n return;\\n }\\n \\n \\\/\\\/ \\u0411\\u0435\\u0440\\u0451\\u043c URL \\u0438\\u0437 \\u0430\\u043a\\u0442\\u0438\\u0432\\u043d\\u043e\\u0433\\u043e \\u0441\\u043b\\u0430\\u0439\\u0434\\u0430\\n const activeButton = activeSlide.querySelector('.bifa-hero-cta');\\n const url = activeButton ? activeButton.getAttribute('data-post-url') : null;\\n \\n if (!url) {\\n console.error('\\u274c No URL found in active slide!');\\n return;\\n }\\n \\n console.log('\\ud83d\\udd17 Hero CTA clicked!');\\n console.log('\\ud83d\\udd17 Active slide URL:', url);\\n console.log('\\ud83d\\udd17 Navigating to:', url);\\n \\n \\\/\\\/ \\u041f\\u0435\\u0440\\u0435\\u0445\\u043e\\u0434\\u0438\\u043c \\u043d\\u0430 \\u0441\\u0442\\u0440\\u0430\\u043d\\u0438\\u0446\\u0443\\n window.location.href = url;\\n });\\n },\\n\\n \\\/\\\/ Get correct post URL\\n getPostUrl(post) {\\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 1: \\u0418\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c \\u0441\\u0442\\u0430\\u043d\\u0434\\u0430\\u0440\\u0442\\u043d\\u044b\\u0439 link \\u0438\\u0437 API\\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\\n return post.link;\\n }\\n \\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 2: \\u0415\\u0441\\u043b\\u0438 \\u044d\\u0442\\u043e \\u043a\\u0430\\u0441\\u0442\\u043e\\u043c\\u043d\\u044b\\u0439 post type, \\u0441\\u0442\\u0440\\u043e\\u0438\\u043c URL \\u0432\\u0440\\u0443\\u0447\\u043d\\u0443\\u044e\\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c \\u0435\\u0441\\u0442\\u044c \\u043b\\u0438 slug\\n if (post.slug) {\\n const baseUrl = 'https:\\\/\\\/bifa.ai';\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c \\u0442\\u0438\\u043f \\u0437\\u0430\\u043f\\u0438\\u0441\\u0438\\n const isEvent = post._bifa_event_date && post._bifa_event_date !== '';\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0431\\u0443\\u0435\\u043c \\u0440\\u0430\\u0437\\u043d\\u044b\\u0435 \\u0432\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442\\u044b URL \\u0441\\u0442\\u0440\\u0443\\u043a\\u0442\\u0443\\u0440\\u044b\\n \\\/\\\/ \\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1: \\\/news-events\\\/slug\\\/\\n return `${baseUrl}\\\/news-events\\\/${post.slug}\\\/`;\\n }\\n \\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 3: \\u0418\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c guid \\u0435\\u0441\\u043b\\u0438 \\u0435\\u0441\\u0442\\u044c\\n if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\\n return post.guid.rendered;\\n }\\n \\n \\\/\\\/ \\u041f\\u0420\\u0418\\u041e\\u0420\\u0418\\u0422\\u0415\\u0422 4: \\u0415\\u0441\\u043b\\u0438 \\u0435\\u0441\\u0442\\u044c ID, \\u043f\\u0440\\u043e\\u0431\\u0443\\u0435\\u043c \\u043f\\u0440\\u044f\\u043c\\u0443\\u044e \\u0441\\u0441\\u044b\\u043b\\u043a\\u0443\\n if (post.id) {\\n return `https:\\\/\\\/bifa.ai\\\/?p=${post.id}`;\\n }\\n \\n \\\/\\\/ \\u0412 \\u043a\\u0440\\u0430\\u0439\\u043d\\u0435\\u043c \\u0441\\u043b\\u0443\\u0447\\u0430\\u0435 \\u0432\\u043e\\u0437\\u0432\\u0440\\u0430\\u0449\\u0430\\u0435\\u043c \\u0433\\u043b\\u0430\\u0432\\u043d\\u0443\\u044e \\u0441\\u0442\\u0440\\u0430\\u043d\\u0438\\u0446\\u0443\\n console.error('\\u26a0\\ufe0f Cannot determine URL for post:', post);\\n return 'https:\\\/\\\/bifa.ai\\\/';\\n },\\n\\n \\\/\\\/ Create slider dots\\n createSliderDots() {\\n const navContainer = document.getElementById('sliderNav');\\n if (!navContainer) return;\\n\\n navContainer.innerHTML = '';\\n \\n this.config.slides.forEach((_, index) => {\\n const dot = document.createElement('button');\\n dot.className = `bifa-slider-dot ${index === 0 ? 'active' : ''}`;\\n dot.addEventListener('click', () => this.goToSlide(index));\\n navContainer.appendChild(dot);\\n });\\n },\\n\\n \\\/\\\/ Setup slider controls\\n setupSliderControls() {\\n const prevBtn = document.getElementById('sliderPrev');\\n const nextBtn = document.getElementById('sliderNext');\\n \\n if (prevBtn) {\\n prevBtn.addEventListener('click', () => this.prevSlide());\\n }\\n \\n if (nextBtn) {\\n nextBtn.addEventListener('click', () => this.nextSlide());\\n }\\n },\\n\\n \\\/\\\/ Go to specific slide\\n goToSlide(index) {\\n const slides = document.querySelectorAll('.bifa-hero-slide');\\n const dots = document.querySelectorAll('.bifa-slider-dot');\\n const progress = document.getElementById('sliderProgress');\\n \\n \\\/\\\/ Remove active classes\\n slides.forEach(slide => slide.classList.remove('active'));\\n dots.forEach(dot => dot.classList.remove('active'));\\n \\n \\\/\\\/ Add active class to current\\n if (slides[index]) slides[index].classList.add('active');\\n if (dots[index]) dots[index].classList.add('active');\\n \\n \\\/\\\/ Reset progress bar\\n if (progress) {\\n progress.classList.remove('active');\\n void progress.offsetWidth; \\\/\\\/ Force reflow\\n progress.classList.add('active');\\n }\\n \\n this.config.currentSlide = index;\\n \\n \\\/\\\/ Reset autoplay\\n this.startAutoPlay();\\n },\\n\\n \\\/\\\/ Previous slide\\n prevSlide() {\\n const newIndex = this.config.currentSlide === 0 \\n ? this.config.slides.length - 1 \\n : this.config.currentSlide - 1;\\n this.goToSlide(newIndex);\\n },\\n\\n \\\/\\\/ Next slide\\n nextSlide() {\\n const newIndex = (this.config.currentSlide + 1) % this.config.slides.length;\\n this.goToSlide(newIndex);\\n },\\n\\n \\\/\\\/ Start autoplay\\n startAutoPlay() {\\n \\\/\\\/ Clear existing interval\\n if (this.config.sliderInterval) {\\n clearInterval(this.config.sliderInterval);\\n }\\n \\n \\\/\\\/ Start progress bar\\n const progress = document.getElementById('sliderProgress');\\n if (progress) {\\n progress.classList.add('active');\\n }\\n \\n \\\/\\\/ Set new interval\\n this.config.sliderInterval = setInterval(() => {\\n this.nextSlide();\\n }, this.config.autoPlayDelay);\\n },\\n\\n \\\/\\\/ Load news previews\\n async loadNewsPreviews() {\\n const container = document.getElementById('newsPreviewGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Wait for main data if not loaded\\n if (this.config.allPosts.length === 0) {\\n await this.loadHeroSlides();\\n }\\n\\n \\\/\\\/ Filter only news (no event date)\\n const news = this.config.allPosts.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return !eventDate || eventDate === '';\\n }).slice(0, 3);\\n\\n if (news.length === 0) {\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray);\\\">No news available<\\\/p>';\\n return;\\n }\\n\\n container.innerHTML = '';\\n \\n news.forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'news', index);\\n container.appendChild(card);\\n });\\n\\n } catch (error) {\\n console.error('Error loading news:', error);\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: #dc2626;\\\">Failed to load news<\\\/p>';\\n }\\n },\\n\\n \\\/\\\/ Load events previews\\n async loadEventsPreviews() {\\n const container = document.getElementById('eventsPreviewGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Wait for main data if not loaded\\n if (this.config.allPosts.length === 0) {\\n await this.loadHeroSlides();\\n }\\n\\n \\\/\\\/ Filter only events (with event date)\\n const events = this.config.allPosts.filter(post => {\\n const eventDate = post._bifa_event_date || post.meta?._bifa_event_date;\\n return eventDate && eventDate !== '';\\n }).slice(0, 3);\\n\\n if (events.length === 0) {\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: var(--bifa-gray);\\\">No events available<\\\/p>';\\n return;\\n }\\n\\n container.innerHTML = '';\\n \\n events.forEach((post, index) => {\\n const card = this.createPreviewCard(post, 'event', index);\\n container.appendChild(card);\\n });\\n\\n } catch (error) {\\n console.error('Error loading events:', error);\\n container.innerHTML = '<\/p>\n<p style=\"\\\"text-align:\" center; color: #dc2626;\\\">Failed to load events<\\\/p>';\\n }\\n },\\n\\n \\\/\\\/ Create preview card\\n createPreviewCard(post, type, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-preview-card';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n const media = post._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/${type}-placeholder.jpg`;\\n const isHot = this.isHotPost(post);\\n \\n \\\/\\\/ \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u044b\\u0439 URL\\n const postUrl = this.getPostUrl(post);\\n \\n let contentHtml = '';\\n \\n if (type === 'news') {\\n const date = this.formatDate(post.date);\\n const excerpt = this.stripHtml(post.excerpt.rendered).substring(0, 100) + '...';\\n const badge = this.getBadgeText(post);\\n\\n contentHtml = `\\n <\/p>\n<div class=\"\\\"bifa-preview-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n ${isHot ? '<\/p>\n<div class=\"\\\"bifa-hot-indicator\\\"\">HOT<\\\/div>' : ''}\\n ${badge ? `<span class=\"\\\"bifa-preview-badge\\\"\">${badge}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-preview-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-preview-date\\\"\">${date}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-preview-title\\\"\">${post.title.rendered}<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-preview-excerpt\\\"\">${excerpt}<\\\/p>\\n <\\\/div>\\n `;\\n } else {\\n \\\/\\\/ Event card\\n const eventDate = post._bifa_event_date;\\n const eventEndDate = post._bifa_event_end_date;\\n const location = post._bifa_location || 'Location TBA';\\n const status = this.getEventStatus(eventDate, eventEndDate);\\n const statusText = this.getStatusText(status);\\n const dateDisplay = this.formatEventDates(eventDate, eventEndDate);\\n\\n contentHtml = `\\n <\/p>\n<div class=\"\\\"bifa-preview-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n ${isHot ? '<\/p>\n<div class=\"\\\"bifa-hot-indicator\\\"\">HOT<\\\/div>' : ''}\\n ${status !== 'unknown' ? `<span class=\"\\\"bifa-preview-status\" ${status}\\\">${statusText}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-preview-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-preview-date\\\"\">${dateDisplay}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-preview-title\\\"\">${post.title.rendered}<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-preview-excerpt\\\"\">\\ud83d\\udccd ${location}<\\\/p>\\n <\\\/div>\\n `;\\n }\\n\\n card.innerHTML = contentHtml;\\n \\n \\\/\\\/ \\u041e\\u0442\\u043a\\u0440\\u044b\\u0432\\u0430\\u0442\\u044c \\u0441\\u0441\\u044b\\u043b\\u043a\\u0443 \\u043d\\u0430 \\u043f\\u043e\\u043b\\u043d\\u0443\\u044e \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u044c\\\/\\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0435 \\u0441 \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u044b\\u043c URL\\n card.addEventListener('click', () => {\\n window.location.href = postUrl;\\n });\\n \\n return card;\\n },\\n\\n \\\/\\\/ Format event dates\\n formatEventDates(startDate, endDate) {\\n if (!startDate) return '';\\n \\n const start = this.formatDate(startDate);\\n \\n if (endDate && startDate !== endDate) {\\n const end = this.formatDate(endDate);\\n return `${start} - ${end}`;\\n }\\n \\n return start;\\n },\\n\\n \\\/\\\/ Get event status\\n getEventStatus(startDate, endDate) {\\n if (!startDate) return 'unknown';\\n \\n const now = new Date();\\n const start = new Date(startDate);\\n const end = endDate ? new Date(endDate) : start;\\n \\n now.setHours(0, 0, 0, 0);\\n start.setHours(0, 0, 0, 0);\\n end.setHours(23, 59, 59, 999);\\n \\n if (now > end) {\\n return 'past';\\n } else if (now >= start && now <= end) {\\n return 'ongoing';\\n } else {\\n return 'upcoming';\\n }\\n },\\n\\n \\\/\\\/ Get status text\\n getStatusText(status) {\\n switch(status) {\\n case 'upcoming': return 'Upcoming';\\n case 'ongoing': return 'Live Now';\\n case 'past': return 'Past Event';\\n default: return '';\\n }\\n },\\n\\n \\\/\\\/ Get badge text\\n getBadgeText(post) {\\n if (post._bifa_badge_text) {\\n return post._bifa_badge_text;\\n }\\n \\n const category = post._embedded?.['wp:term']?.[0]?.[0];\\n return category?.name || '';\\n },\\n\\n \\\/\\\/ Format date\\n formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n },\\n\\n \\\/\\\/ Strip HTML\\n stripHtml(html) {\\n const temp = document.createElement('div');\\n temp.innerHTML = html;\\n return temp.textContent || temp.innerText || '';\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaHub.init();\\n});\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"en\\\"\">\\n<head>\\n<meta charset=\"\\\"UTF-8\\\"\">\\n<meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n<title>BIFA+ Events Calendar<\\\/title>\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= OFFICIAL BIFA+ BRAND VARIABLES ========= *\\\/\\n:root {\\n \\\/* Official BIFA+ Colors *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* Official BIFA+ Typography *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* Premium Effects *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n\\\/* Reset *\\\/\\n.bifa-calendar-wrapper * {\\n box-sizing: border-box;\\n}\\n\\n\\\/* ========= MAIN CALENDAR WRAPPER ========= *\\\/\\n.bifa-calendar-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n padding: 60px 0 80px 0;\\n background: transparent;\\n overflow: hidden;\\n font-family: var(--bifa-font-body);\\n}\\n\\n\\\/* ========= CONTENT CONTAINER ========= *\\\/\\n.bifa-calendar-content {\\n position: relative;\\n z-index: 10;\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n\\\/* ========= SECTION HEADER ========= *\\\/\\n.bifa-calendar-header {\\n text-align: center;\\n margin-bottom: 50px;\\n animation: fadeInUp 1.2s ease;\\n}\\n\\n.bifa-title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-gold-line {\\n width: 80px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n animation: lineGlow 3s ease-in-out infinite;\\n}\\n\\n@keyframes lineGlow {\\n 0%, 100% { opacity: 0.7; }\\n 50% { opacity: 1; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }\\n}\\n\\n.bifa-calendar-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin: 0;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n position: relative;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-calendar-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-calendar-title:hover {\\n transform: translateY(-3px);\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-calendar-title:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-calendar-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.1rem, 2vw, 1.3rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 1.5px;\\n margin: 0 0 15px 0;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-calendar-description {\\n max-width: 700px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\\n line-height: 1.7;\\n color: var(--bifa-gray);\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= NAVIGATION ========= *\\\/\\n.bifa-calendar-nav {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n margin-bottom: 40px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n padding: 25px 35px;\\n border-radius: 25px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n animation: slideInDown 1.2s ease 0.2s both;\\n}\\n\\n.bifa-nav-btn {\\n background: transparent;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n color: var(--bifa-deep-navy);\\n width: 55px;\\n height: 55px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-nav-btn::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-nav-btn:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-nav-btn:hover {\\n border-color: transparent;\\n color: var(--bifa-deep-navy);\\n transform: scale(1.1);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-nav-btn svg {\\n width: 24px;\\n height: 24px;\\n stroke-width: 3;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-nav-btn:hover svg {\\n transform: scale(1.1);\\n}\\n\\n.bifa-current-month {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.8rem, 3vw, 2.2rem);\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin: 0;\\n text-align: center;\\n position: relative;\\n}\\n\\n.bifa-current-month::after {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n height: 2px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 2px;\\n}\\n\\n\\\/* ========= CALENDAR GRID ========= *\\\/\\n.bifa-calendar-grid {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n border-radius: 30px;\\n padding: 40px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n animation: slideInUp 1.2s ease 0.4s both;\\n}\\n\\n.bifa-weekdays {\\n display: grid;\\n grid-template-columns: repeat(7, 1fr);\\n gap: 15px;\\n margin-bottom: 25px;\\n padding-bottom: 20px;\\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-weekday {\\n text-align: center;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.9rem;\\n color: var(--bifa-deep-navy);\\n text-transform: uppercase;\\n letter-spacing: 1.5px;\\n padding: 12px 0;\\n position: relative;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-weekday::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 20px;\\n height: 2px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 2px;\\n opacity: 0.5;\\n}\\n\\n.bifa-calendar-days {\\n display: grid;\\n grid-template-columns: repeat(7, 1fr);\\n gap: 12px;\\n}\\n\\n.bifa-calendar-day {\\n aspect-ratio: 1;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: space-between;\\n background: rgba(255, 255, 255, 0.8);\\n border: 2px solid transparent;\\n border-radius: 18px;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n padding: 10px;\\n overflow: hidden;\\n}\\n\\n.bifa-calendar-day::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 18px;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-calendar-day:hover::before {\\n opacity: 0.1;\\n}\\n\\n.bifa-calendar-day:hover {\\n transform: translateY(-5px);\\n box-shadow: var(--bifa-shadow-hover);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-calendar-day.other-month {\\n opacity: 0.3;\\n cursor: default;\\n}\\n\\n.bifa-calendar-day.other-month:hover {\\n transform: none;\\n box-shadow: none;\\n border-color: transparent;\\n}\\n\\n.bifa-calendar-day.other-month:hover::before {\\n opacity: 0;\\n}\\n\\n.bifa-calendar-day.today {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n font-weight: 800;\\n box-shadow: var(--bifa-shadow-gold);\\n border-color: transparent;\\n}\\n\\n.bifa-calendar-day.today::before {\\n opacity: 0;\\n}\\n\\n.bifa-calendar-day.has-events {\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.05) 0%, \\n rgba(29, 97, 67, 0.08) 100%);\\n border-color: rgba(29, 97, 67, 0.3);\\n}\\n\\n\\\/* Event day background slider *\\\/\\n.bifa-day-bg-slider {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n border-radius: 16px;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.bifa-day-bg-track {\\n display: flex;\\n width: 100%;\\n height: 100%;\\n transition: transform 0.5s ease;\\n}\\n\\n.bifa-day-bg-slide {\\n flex: 0 0 100%;\\n width: 100%;\\n height: 100%;\\n position: relative;\\n}\\n\\n.bifa-day-bg-image {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n filter: brightness(0.7) saturate(1.2);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-calendar-day:hover .bifa-day-bg-image {\\n filter: brightness(0.5) saturate(1.4);\\n transform: scale(1.05);\\n}\\n\\n\\\/* Content overlay *\\\/\\n.bifa-day-overlay {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.3) 0%, \\n rgba(10, 31, 68, 0.1) 50%, \\n rgba(29, 97, 67, 0.2) 100%);\\n z-index: 1;\\n border-radius: 16px;\\n}\\n\\n.bifa-day-content {\\n position: relative;\\n z-index: 2;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: space-between;\\n height: 100%;\\n width: 100%;\\n}\\n\\n.bifa-day-number {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.4rem;\\n font-weight: 800;\\n line-height: 1;\\n color: var(--bifa-deep-navy);\\n text-shadow: 2px 2px 4px rgba(255,255,255,0.8);\\n margin-top: 4px;\\n}\\n\\n.bifa-calendar-day.has-events .bifa-day-number {\\n color: var(--bifa-bright-white);\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.7);\\n}\\n\\n.bifa-calendar-day.today .bifa-day-number {\\n color: var(--bifa-deep-navy);\\n text-shadow: 2px 2px 4px rgba(255,255,255,0.5);\\n}\\n\\n.bifa-event-count {\\n font-family: var(--bifa-font-body);\\n font-size: 0.7rem;\\n color: var(--bifa-bright-white);\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\\n padding: 2px 8px;\\n border-radius: 12px;\\n text-shadow: none;\\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\\n margin-bottom: 4px;\\n letter-spacing: 0.5px;\\n}\\n\\n\\\/* Slider dots for multiple events *\\\/\\n.bifa-day-slider-dots {\\n position: absolute;\\n bottom: 4px;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n gap: 3px;\\n z-index: 3;\\n}\\n\\n.bifa-day-slider-dot {\\n width: 4px;\\n height: 4px;\\n border-radius: 50%;\\n background: rgba(255,255,255,0.5);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-day-slider-dot.active {\\n background: var(--bifa-heritage-gold);\\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);\\n}\\n\\n\\\/* ========= SELECTED EVENTS PANEL ========= *\\\/\\n.bifa-selected-events {\\n margin-top: 40px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n border-radius: 25px;\\n padding: 35px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n display: none;\\n animation: slideInUp 0.5s ease;\\n}\\n\\n.bifa-selected-events.show {\\n display: block;\\n}\\n\\n.bifa-events-header {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 30px;\\n padding-bottom: 20px;\\n border-bottom: 2px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-events-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin: 0;\\n}\\n\\n.bifa-close-events {\\n background: transparent;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n font-size: 1.5rem;\\n color: var(--bifa-gray);\\n cursor: pointer;\\n width: 45px;\\n height: 45px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-close-events::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, #ff4757, #ff3742);\\n border-radius: 50%;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-close-events:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-close-events:hover {\\n color: var(--bifa-bright-white);\\n border-color: transparent;\\n transform: rotate(90deg) scale(1.1);\\n}\\n\\n.bifa-events-list {\\n display: flex;\\n flex-direction: column;\\n gap: 25px;\\n}\\n\\n\\\/* ========= EVENT ITEMS ========= *\\\/\\n.bifa-event-item {\\n background: rgba(255, 255, 255, 0.9);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n border-radius: 20px;\\n padding: 0;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n display: flex;\\n gap: 25px;\\n min-height: 130px;\\n}\\n\\n.bifa-event-item::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-event-item:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-event-item:hover {\\n transform: translateX(10px);\\n box-shadow: var(--bifa-shadow-hover);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-event-image {\\n width: 150px;\\n height: 130px;\\n flex-shrink: 0;\\n background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);\\n overflow: hidden;\\n position: relative;\\n border-radius: 20px 0 0 20px;\\n}\\n\\n.bifa-event-image img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-event-item:hover .bifa-event-image img {\\n transform: scale(1.1);\\n}\\n\\n.bifa-event-badge {\\n position: absolute;\\n top: 12px;\\n left: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 5px 12px;\\n border-radius: 15px;\\n font-family: var(--bifa-font-heading);\\n font-size: 0.7rem;\\n font-weight: 800;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\\n}\\n\\n.bifa-event-details {\\n flex: 1;\\n padding: 25px;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n}\\n\\n.bifa-event-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.3rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 12px;\\n line-height: 1.3;\\n}\\n\\n.bifa-event-time {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n color: var(--bifa-heritage-gold);\\n font-weight: 600;\\n margin-bottom: 8px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n}\\n\\n.bifa-event-location {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: var(--bifa-gray);\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n margin-bottom: 10px;\\n}\\n\\n.bifa-event-status {\\n font-family: var(--bifa-font-heading);\\n font-size: 0.8rem;\\n padding: 5px 15px;\\n border-radius: 20px;\\n display: inline-block;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n background: var(--bifa-civic-green);\\n color: var(--bifa-bright-white);\\n}\\n\\n.bifa-event-status.urgent {\\n background: linear-gradient(135deg, #fbbf24, #f59e0b);\\n color: var(--bifa-deep-navy);\\n}\\n\\n.bifa-no-events {\\n text-align: center;\\n padding: 60px;\\n color: var(--bifa-gray);\\n}\\n\\n.bifa-no-events-icon {\\n font-size: 3rem;\\n margin-bottom: 15px;\\n filter: grayscale(1);\\n}\\n\\n\\\/* ========= CALENDAR LEGEND ========= *\\\/\\n.bifa-calendar-legend {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap;\\n gap: 30px;\\n margin-top: 40px;\\n padding: 25px;\\n background: rgba(255, 255, 255, 0.8);\\n backdrop-filter: blur(10px);\\n border-radius: 20px;\\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.05);\\n animation: fadeInUp 1.2s ease 0.8s both;\\n}\\n\\n.bifa-legend-item {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: var(--bifa-gray);\\n font-weight: 500;\\n}\\n\\n.bifa-legend-dot {\\n width: 18px;\\n height: 18px;\\n border-radius: 50%;\\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\\n}\\n\\n.bifa-legend-dot.today {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n}\\n\\n.bifa-legend-dot.has-event {\\n background: linear-gradient(135deg, var(--bifa-civic-green), #22c55e);\\n}\\n\\n.bifa-legend-dot.selected {\\n background: rgba(212, 175, 55, 0.2);\\n border: 3px solid var(--bifa-heritage-gold);\\n}\\n\\n\\\/* ========= LOADING STATE ========= *\\\/\\n.bifa-loading {\\n text-align: center;\\n padding: 80px;\\n color: var(--bifa-gray);\\n}\\n\\n.bifa-spinner {\\n width: 50px;\\n height: 50px;\\n border: 3px solid rgba(212, 175, 55, 0.2);\\n border-top: 3px solid var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: bifaSpin 1s linear infinite;\\n margin: 0 auto 25px;\\n}\\n\\n@keyframes bifaSpin {\\n 0% { transform: rotate(0deg); }\\n 100% { transform: rotate(360deg); }\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes slideInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes slideInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE DESIGN ========= *\\\/\\n@media (max-width: 768px) {\\n .bifa-calendar-wrapper {\\n padding: 40px 0 60px 0;\\n }\\n \\n .bifa-calendar-content {\\n padding: 0 15px;\\n }\\n \\n .bifa-calendar-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-calendar-grid {\\n padding: 25px;\\n }\\n \\n .bifa-weekday {\\n font-size: 0.75rem;\\n padding: 8px 0;\\n }\\n \\n .bifa-day-number {\\n font-size: 1.1rem;\\n }\\n \\n .bifa-event-count {\\n display: none;\\n }\\n \\n .bifa-event-item {\\n flex-direction: column;\\n min-height: auto;\\n }\\n \\n .bifa-event-image {\\n width: 100%;\\n height: 180px;\\n border-radius: 20px 20px 0 0;\\n }\\n \\n .bifa-event-details {\\n padding: 20px;\\n }\\n \\n .bifa-calendar-nav {\\n padding: 20px 25px;\\n }\\n \\n .bifa-nav-btn {\\n width: 50px;\\n height: 50px;\\n }\\n \\n .bifa-current-month {\\n font-size: 1.5rem;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-calendar-wrapper {\\n padding: 30px 0 50px 0;\\n }\\n \\n .bifa-calendar-content {\\n padding: 0 10px;\\n }\\n \\n .bifa-calendar-title {\\n font-size: 1.8rem;\\n }\\n \\n .bifa-calendar-subtitle {\\n font-size: 1rem;\\n }\\n \\n .bifa-calendar-grid {\\n padding: 20px;\\n }\\n \\n .bifa-weekday {\\n font-size: 0.7rem;\\n }\\n \\n .bifa-day-number {\\n font-size: 1rem;\\n }\\n \\n .bifa-calendar-nav {\\n padding: 18px 20px;\\n }\\n \\n .bifa-nav-btn {\\n width: 45px;\\n height: 45px;\\n }\\n \\n .bifa-current-month {\\n font-size: 1.3rem;\\n }\\n \\n .bifa-legend-item {\\n font-size: 0.85rem;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-calendar-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-bg\\\"\">\\n <\/p>\n<div class=\"\\\"calendar-shape\" shape-calendar-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"calendar-shape\" shape-calendar-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"calendar-shape\" shape-calendar-3\\\"><\\\/div>\\n \\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-header\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-title-decoration\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-gold-line\\\"\"><\\\/div>\\n <\/p>\n<h2 class=\"\\\"bifa-calendar-title\\\"\">BIFA+ Events Calendar<\\\/h2>\\n <\/p>\n<div class=\"\\\"bifa-gold-line\\\"\"><\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"bifa-calendar-subtitle\\\"\">Upcoming International Events & Initiatives<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-calendar-description\\\"\">\\n Explore our comprehensive schedule of international football events, diplomatic meetings, \\n youth programs, and alliance initiatives designed to foster global cooperation through sport.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-nav\\\"\">\\n <button class=\"\\\"bifa-nav-btn\\\"\" id=\"\\\"bifaPrevMonth\\\"\" aria-label=\"\\\"Previous\" month\\\">\\n <svg width=\"\\\"24\\\"\" height=\"\\\"24\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <path d=\"\\\"M15\" 18l-6-6 6-6\\\"\\>\\n <\\\/svg>\\n <\\\/button>\\n <\/p>\n<h3 class=\"\\\"bifa-current-month\\\"\" id=\"\\\"bifaCurrentMonth\\\"\">Loading...<\\\/h3>\\n <button class=\"\\\"bifa-nav-btn\\\"\" id=\"\\\"bifaNextMonth\\\"\" aria-label=\"\\\"Next\" month\\\">\\n <svg width=\"\\\"24\\\"\" height=\"\\\"24\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <path d=\"\\\"M9\" 18l6-6-6-6\\\"\\>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-grid\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-weekdays\\\"\" id=\"\\\"bifaWeekdays\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-calendar-days\\\"\" id=\"\\\"bifaCalendarDays\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-spinner\\\"\"><\\\/div>\\n <\/p>\n<div>Loading Events Calendar...<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-selected-events\\\"\" id=\"\\\"bifaSelectedEvents\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-events-header\\\"\">\\n <\/p>\n<h4 class=\"\\\"bifa-events-title\\\"\" id=\"\\\"bifaEventsTitle\\\"\">Events<\\\/h4>\\n <button class=\"\\\"bifa-close-events\\\"\" id=\"\\\"bifaCloseEvents\\\"\" aria-label=\"\\\"Close\" events\\\">\\u00d7<\\\/button>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-events-list\\\"\" id=\"\\\"bifaEventsList\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-calendar-legend\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-legend-item\\\"\">\\n <span class=\"\\\"bifa-legend-dot\" today\\\"><\\\/span>\\n <span>Today<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-legend-item\\\"\">\\n <span class=\"\\\"bifa-legend-dot\" has-event\\\"><\\\/span>\\n <span>Has Events<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-legend-item\\\"\">\\n <span class=\"\\\"bifa-legend-dot\" selected\\\"><\\\/span>\\n <span>Selected Date<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n<\\\/div>\\n\\n<script>\\n(function() {\\n 'use strict';\\n \\n \\\/\\\/ BIFA+ Calendar System\\n let bifaCurrentDate = new Date();\\n let bifaSelectedDate = null;\\n let bifaEventsData = [];\\n \\n \\\/\\\/ Utility Functions\\n function formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n const options = { month: 'long', day: 'numeric', year: 'numeric' };\\n return date.toLocaleDateString('en-US', options);\\n }\\n \\n function formatTime(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n const options = { hour: '2-digit', minute: '2-digit' };\\n return date.toLocaleTimeString('en-US', options);\\n }\\n \\n function getMonthYearString(date) {\\n const options = { month: 'long', year: 'numeric' };\\n return date.toLocaleDateString('en-US', options);\\n }\\n \\n function getDaysInMonth(date) {\\n return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\\n }\\n \\n function getFirstDayOfMonth(date) {\\n return new Date(date.getFullYear(), date.getMonth(), 1).getDay();\\n }\\n \\n function isSameDay(date1, date2) {\\n return date1.getFullYear() === date2.getFullYear() &&\\n date1.getMonth() === date2.getMonth() &&\\n date1.getDate() === date2.getDate();\\n }\\n \\n function hasEventsOnDate(date) {\\n const dateStr = date.toISOString().split('T')[0];\\n return bifaEventsData.some(event => {\\n const eventDate = event._bifa_event_date;\\n if (!eventDate) return false;\\n \\n const eventStartDate = new Date(eventDate);\\n const eventEndDate = event._bifa_event_end_date;\\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;\\n \\n const checkDate = new Date(dateStr);\\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \\n checkDate <= new Date(endDate.toISOString().split('T')[0]);\\n });\\n }\\n \\n function getEventsOnDate(date) {\\n const dateStr = date.toISOString().split('T')[0];\\n return bifaEventsData.filter(event => {\\n const eventDate = event._bifa_event_date;\\n if (!eventDate) return false;\\n \\n const eventStartDate = new Date(eventDate);\\n const eventEndDate = event._bifa_event_end_date;\\n const endDate = eventEndDate ? new Date(eventEndDate) : eventStartDate;\\n \\n const checkDate = new Date(dateStr);\\n return checkDate >= new Date(eventStartDate.toISOString().split('T')[0]) && \\n checkDate <= new Date(endDate.toISOString().split('T')[0]);\\n });\\n }\\n \\n \\\/\\\/ Create animated background particles\\n function createParticles() {\\n const particlesContainer = document.querySelector('.bifa-calendar-bg');\\n const particleCount = 12;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'calendar-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 8) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n }\\n \\n \\\/\\\/ Create weekdays header\\n function createWeekdays() {\\n const weekdaysContainer = document.getElementById('bifaWeekdays');\\n const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\\n \\n weekdaysContainer.innerHTML = '';\\n days.forEach(day => {\\n const dayElement = document.createElement('div');\\n dayElement.className = 'bifa-weekday';\\n dayElement.textContent = day;\\n weekdaysContainer.appendChild(dayElement);\\n });\\n }\\n \\n \\\/\\\/ Render calendar\\n function renderCalendar() {\\n const calendarDays = document.getElementById('bifaCalendarDays');\\n const currentMonthElement = document.getElementById('bifaCurrentMonth');\\n \\n currentMonthElement.textContent = getMonthYearString(bifaCurrentDate);\\n calendarDays.innerHTML = '';\\n \\n const daysInMonth = getDaysInMonth(bifaCurrentDate);\\n const firstDay = getFirstDayOfMonth(bifaCurrentDate);\\n const today = new Date();\\n \\n \\\/\\\/ Previous month days\\n const prevMonthDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth() - 1);\\n const daysInPrevMonth = getDaysInMonth(prevMonthDate);\\n \\n for (let i = firstDay - 1; i >= 0; i--) {\\n const dayElement = document.createElement('div');\\n dayElement.className = 'bifa-calendar-day other-month';\\n \\n const dayContent = document.createElement('div');\\n dayContent.className = 'bifa-day-content';\\n \\n const dayNumber = document.createElement('div');\\n dayNumber.className = 'bifa-day-number';\\n dayNumber.textContent = daysInPrevMonth - i;\\n dayContent.appendChild(dayNumber);\\n \\n dayElement.appendChild(dayContent);\\n calendarDays.appendChild(dayElement);\\n }\\n \\n \\\/\\\/ Current month days\\n for (let day = 1; day <= daysInMonth; day++) {\\n const dayDate = new Date(bifaCurrentDate.getFullYear(), bifaCurrentDate.getMonth(), day);\\n const dayElement = document.createElement('div');\\n let classes = ['bifa-calendar-day'];\\n \\n if (isSameDay(dayDate, today)) {\\n classes.push('today');\\n }\\n \\n if (hasEventsOnDate(dayDate)) {\\n classes.push('has-events');\\n }\\n \\n dayElement.className = classes.join(' ');\\n \\n if (hasEventsOnDate(dayDate)) {\\n const events = getEventsOnDate(dayDate);\\n const eventsWithImages = events.filter(event => \\n event._embedded?.['wp:featuredmedia']?.[0]?.source_url\\n );\\n \\n if (eventsWithImages.length > 0) {\\n \\\/\\\/ Create background image slider\\n const bgSlider = document.createElement('div');\\n bgSlider.className = 'bifa-day-bg-slider';\\n \\n const bgTrack = document.createElement('div');\\n bgTrack.className = 'bifa-day-bg-track';\\n \\n eventsWithImages.forEach(event => {\\n const media = event._embedded['wp:featuredmedia'][0];\\n const slide = document.createElement('div');\\n slide.className = 'bifa-day-bg-slide';\\n \\n const bgImage = document.createElement('img');\\n bgImage.className = 'bifa-day-bg-image';\\n bgImage.src = media.source_url;\\n bgImage.alt = event.title.rendered;\\n bgImage.loading = 'lazy';\\n \\n slide.appendChild(bgImage);\\n bgTrack.appendChild(slide);\\n });\\n \\n bgSlider.appendChild(bgTrack);\\n dayElement.appendChild(bgSlider);\\n \\n \\\/\\\/ Add overlay\\n const overlay = document.createElement('div');\\n overlay.className = 'bifa-day-overlay';\\n dayElement.appendChild(overlay);\\n \\n \\\/\\\/ Create slider dots if multiple images\\n if (eventsWithImages.length > 1) {\\n const dotsContainer = document.createElement('div');\\n dotsContainer.className = 'bifa-day-slider-dots';\\n \\n for (let i = 0; i < eventsWithImages.length; i++) {\\n const dot = document.createElement('div');\\n dot.className = `bifa-day-slider-dot ${i === 0 ? 'active' : ''}`;\\n dotsContainer.appendChild(dot);\\n }\\n \\n dayElement.appendChild(dotsContainer);\\n \\n \\\/\\\/ Auto-rotate slides\\n let currentSlide = 0;\\n setInterval(() => {\\n currentSlide = (currentSlide + 1) % eventsWithImages.length;\\n bgTrack.style.transform = `translateX(-${currentSlide * 100}%)`;\\n \\n \\\/\\\/ Update dots\\n dotsContainer.querySelectorAll('.bifa-day-slider-dot').forEach((dot, index) => {\\n dot.classList.toggle('active', index === currentSlide);\\n });\\n }, 3000);\\n }\\n }\\n }\\n \\n \\\/\\\/ Create day content\\n const dayContent = document.createElement('div');\\n dayContent.className = 'bifa-day-content';\\n \\n \\\/\\\/ Day number\\n const dayNumber = document.createElement('div');\\n dayNumber.className = 'bifa-day-number';\\n dayNumber.textContent = day;\\n dayContent.appendChild(dayNumber);\\n \\n if (hasEventsOnDate(dayDate)) {\\n const events = getEventsOnDate(dayDate);\\n \\n \\\/\\\/ Event count\\n const eventCount = document.createElement('div');\\n eventCount.className = 'bifa-event-count';\\n eventCount.textContent = `${events.length} event${events.length > 1 ? 's' : ''}`;\\n dayContent.appendChild(eventCount);\\n }\\n \\n dayElement.appendChild(dayContent);\\n \\n if (!dayElement.classList.contains('other-month')) {\\n dayElement.addEventListener('click', () => selectDate(dayDate));\\n }\\n \\n calendarDays.appendChild(dayElement);\\n }\\n \\n \\\/\\\/ Next month days\\n const totalCells = calendarDays.children.length;\\n const remainingCells = 42 - totalCells;\\n for (let i = 1; i <= remainingCells; i++) {\\n const dayElement = document.createElement('div');\\n dayElement.className = 'bifa-calendar-day other-month';\\n \\n const dayContent = document.createElement('div');\\n dayContent.className = 'bifa-day-content';\\n \\n const dayNumber = document.createElement('div');\\n dayNumber.className = 'bifa-day-number';\\n dayNumber.textContent = i;\\n dayContent.appendChild(dayNumber);\\n \\n dayElement.appendChild(dayContent);\\n calendarDays.appendChild(dayElement);\\n }\\n }\\n \\n \\\/\\\/ Select date\\n function selectDate(date) {\\n bifaSelectedDate = date;\\n showSelectedDayEvents(date);\\n }\\n \\n \\\/\\\/ Show selected day events\\n function showSelectedDayEvents(date) {\\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\\n const eventsTitle = document.getElementById('bifaEventsTitle');\\n const eventsList = document.getElementById('bifaEventsList');\\n \\n eventsTitle.textContent = `Events on ${formatDate(date)}`;\\n \\n const events = getEventsOnDate(date);\\n \\n eventsList.innerHTML = '';\\n \\n if (events.length === 0) {\\n eventsList.innerHTML = `\\n \n\n<div class=\"\\\"bifa-no-events\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-no-events-icon\\\"\">\\ud83d\\udcc5<\\\/div>\\n <\/p>\n<div>No events scheduled for this date<\\\/div>\\n <\\\/div>\\n `;\\n } else {\\n events.forEach(event => {\\n \\\/\\\/ Get event image\\n const media = event._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || 'https:\\\/\\\/via.placeholder.com\\\/320x180\\\/0A1F44\\\/D4AF37?text=BIFA+Event';\\n \\n \\\/\\\/ Get additional data\\n const badgeText = event._bifa_badge_text || 'Event';\\n const priority = event._bifa_priority || 'normal';\\n \\n \\\/\\\/ Create event item\\n const eventElement = document.createElement('div');\\n eventElement.className = 'bifa-event-item';\\n \\n \\\/\\\/ Image container\\n const imageContainer = document.createElement('div');\\n imageContainer.className = 'bifa-event-image';\\n \\n const img = document.createElement('img');\\n img.src = imageUrl;\\n img.alt = event.title.rendered;\\n img.loading = 'lazy';\\n imageContainer.appendChild(img);\\n \\n \\\/\\\/ Badge\\n if (badgeText && badgeText.trim()) {\\n const badge = document.createElement('div');\\n badge.className = 'bifa-event-badge';\\n badge.textContent = badgeText;\\n imageContainer.appendChild(badge);\\n }\\n \\n \\\/\\\/ Details container\\n const detailsContainer = document.createElement('div');\\n detailsContainer.className = 'bifa-event-details';\\n \\n \\\/\\\/ Title\\n const title = document.createElement('div');\\n title.className = 'bifa-event-title';\\n title.textContent = event.title.rendered;\\n detailsContainer.appendChild(title);\\n \\n \\\/\\\/ Time\\n if (event._bifa_event_date) {\\n const timeElement = document.createElement('div');\\n timeElement.className = 'bifa-event-time';\\n timeElement.innerHTML = `\\ud83d\\udd50 ${formatTime(event._bifa_event_date)}`;\\n detailsContainer.appendChild(timeElement);\\n }\\n \\n \\\/\\\/ Location\\n if (event._bifa_location) {\\n const locationElement = document.createElement('div');\\n locationElement.className = 'bifa-event-location';\\n locationElement.innerHTML = `\\ud83d\\udccd ${event._bifa_location}`;\\n detailsContainer.appendChild(locationElement);\\n }\\n \\n \\\/\\\/ Status\\n const statusElement = document.createElement('div');\\n statusElement.className = `bifa-event-status ${priority}`;\\n statusElement.textContent = priority === 'urgent' ? 'Priority Event' : 'Regular Event';\\n detailsContainer.appendChild(statusElement);\\n \\n \\\/\\\/ Assemble event item\\n eventElement.appendChild(imageContainer);\\n eventElement.appendChild(detailsContainer);\\n \\n \\\/\\\/ Add click handler\\n eventElement.addEventListener('click', () => {\\n window.open(event.link, '_blank');\\n });\\n \\n eventsList.appendChild(eventElement);\\n });\\n }\\n \\n selectedEventsContainer.classList.add('show');\\n selectedEventsContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\\n }\\n \\n \\\/\\\/ Close selected day events\\n function closeSelectedDayEvents() {\\n const selectedEventsContainer = document.getElementById('bifaSelectedEvents');\\n selectedEventsContainer.classList.remove('show');\\n bifaSelectedDate = null;\\n }\\n \\n \\\/\\\/ Load events from API\\n function loadEvents() {\\n const apiUrl = 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events?_embed&per_page=100&acf_format=standard';\\n \\n fetch(apiUrl)\\n .then(response => {\\n if (!response.ok) throw new Error('Network response was not ok');\\n return response.json();\\n })\\n .then(posts => {\\n \\\/\\\/ Filter only events with dates\\n const events = posts.filter(post => {\\n const itemTypes = post.bifa_item_type || [];\\n const classNames = post.class_list || [];\\n \\n \\\/\\\/ Check taxonomy ID (event = 3)\\n const hasEventId = itemTypes.some(typeId => typeId == 3 || typeId == 'event');\\n \\n \\\/\\\/ Check CSS classes\\n const hasEventClass = classNames.some(className => \\n className.includes('bifa_item_type-event')\\n );\\n \\n \\\/\\\/ Check for event date\\n const hasEventDate = post._bifa_event_date;\\n \\n return (hasEventId || hasEventClass) && hasEventDate;\\n });\\n \\n bifaEventsData = events;\\n createWeekdays();\\n renderCalendar();\\n })\\n .catch(err => {\\n console.error('Error loading events:', err);\\n const calendarDays = document.getElementById('bifaCalendarDays');\\n calendarDays.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div>Error loading events. Please try again later.<\\\/div>\\n <\\\/div>\\n `;\\n });\\n }\\n \\n \\\/\\\/ Initialize calendar\\n function initCalendar() {\\n \\\/\\\/ Create animated background\\n createParticles();\\n \\n \\\/\\\/ Navigation event listeners\\n document.getElementById('bifaPrevMonth').addEventListener('click', () => {\\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() - 1);\\n renderCalendar();\\n });\\n \\n document.getElementById('bifaNextMonth').addEventListener('click', () => {\\n bifaCurrentDate.setMonth(bifaCurrentDate.getMonth() + 1);\\n renderCalendar();\\n });\\n \\n \\\/\\\/ Close events handler\\n document.getElementById('bifaCloseEvents').addEventListener('click', closeSelectedDayEvents);\\n \\n \\\/\\\/ Load events\\n loadEvents();\\n }\\n \\n \\\/\\\/ Initialize when DOM is ready\\n if (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', initCalendar);\\n } else {\\n initCalendar();\\n }\\n})();\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"ru\\\"\">\\n<head>\\n<meta charset=\"\\\"UTF-8\\\"\">\\n<meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n<title>BIFA+ Media Gallery<\\\/title>\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* \\u0412\\u0421\\u0415 \\u0412\\u0410\\u0428\\u0418 \\u0421\\u0422\\u0418\\u041b\\u0418 \\u041e\\u0421\\u0422\\u0410\\u0412\\u041b\\u042f\\u0415\\u041c \\u0411\\u0415\\u0417 \\u0418\\u0417\\u041c\\u0415\\u041d\\u0415\\u041d\\u0418\\u0419 - \\u041e\\u041d\\u0418 \\u0418\\u0414\\u0415\\u0410\\u041b\\u042c\\u041d\\u042b *\\\/\\n.bifa-media-wrapper {\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.bifa-media-wrapper * { box-sizing: border-box; }\\n\\n.bifa-media-wrapper {\\n background: #FFFFFF;\\n padding: 100px 0;\\n margin: 0 calc(-50vw + 50%);\\n width: 100vw;\\n position: relative;\\n}\\n\\n.media-bg-animation {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n top: 0;\\n left: 0;\\n pointer-events: none;\\n}\\n\\n.media-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatMedia 25s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.15;\\n}\\n\\n@keyframes floatMedia {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.2; }\\n 90% { opacity: 0.2; }\\n 100% {\\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n.bifa-media-main {\\n position: relative;\\n z-index: 10;\\n}\\n\\n.bifa-media-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n}\\n\\n.bifa-section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n position: relative;\\n}\\n\\n.bifa-section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n}\\n\\n.bifa-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n}\\n\\n.bifa-section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n color: #4a5568;\\n max-width: 600px;\\n margin: 0 auto;\\n line-height: 1.6;\\n}\\n\\n.bifa-media-filters {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap;\\n gap: 15px;\\n margin-bottom: 50px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(20px);\\n padding: 25px;\\n border-radius: 25px;\\n box-shadow: var(--bifa-shadow-premium);\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n animation: slideInDown 1.2s ease 0.2s both;\\n}\\n\\n.bifa-filter-btn {\\n padding: 12px 28px;\\n background: transparent;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-size: 0.9rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-filter-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-filter-btn:hover::before,\\n.bifa-filter-btn.active::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-filter-btn:hover,\\n.bifa-filter-btn.active {\\n color: var(--bifa-deep-navy);\\n border-color: transparent;\\n transform: translateY(-3px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-media-stats {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 30px;\\n margin-bottom: 60px;\\n}\\n\\n.bifa-stat-card {\\n background: #FFFFFF;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n padding: 30px;\\n text-align: center;\\n opacity: 0;\\n animation: fadeInUpMedia 1.2s ease forwards;\\n}\\n\\n.bifa-stat-card:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-stat-card:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-stat-card:nth-child(3) { animation-delay: 0.3s; }\\n.bifa-stat-card:nth-child(4) { animation-delay: 0.4s; }\\n\\n.bifa-stat-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-stat-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-stat-card:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-stat-icon {\\n width: 60px;\\n height: 60px;\\n margin: 0 auto 15px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n font-size: 1.8rem;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-stat-number {\\n font-family: var(--bifa-font-heading);\\n font-size: 2.5rem;\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 5px;\\n}\\n\\n.bifa-stat-label {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n color: var(--bifa-gray);\\n font-weight: 600;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.bifa-media-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 50px;\\n}\\n\\n.bifa-media-item {\\n background: #FFFFFF;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n opacity: 0;\\n animation: fadeInUpMedia 1.2s ease forwards;\\n}\\n\\n.bifa-media-item:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-media-item:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-media-item:nth-child(3) { animation-delay: 0.3s; }\\n.bifa-media-item:nth-child(4) { animation-delay: 0.4s; }\\n.bifa-media-item:nth-child(5) { animation-delay: 0.5s; }\\n.bifa-media-item:nth-child(6) { animation-delay: 0.6s; }\\n\\n.bifa-media-item::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-media-item:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-media-item:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-media-image {\\n position: relative;\\n height: 200px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-media-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 60%, \\n rgba(10, 31, 68, 0.8) 100%\\n );\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-media-item:hover .bifa-media-image::before {\\n opacity: 0.9;\\n}\\n\\n.bifa-media-image img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.5s ease;\\n}\\n\\n.bifa-media-item:hover .bifa-media-image img {\\n transform: scale(1.1);\\n}\\n\\n.bifa-featured-indicator {\\n position: absolute;\\n top: 15px;\\n left: 15px;\\n background: linear-gradient(135deg, #ff4757, #ff6348);\\n color: white;\\n padding: 6px 16px;\\n border-radius: 20px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 3;\\n display: flex;\\n align-items: center;\\n gap: 6px;\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n animation: featuredPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes featuredPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-featured-indicator::before {\\n content: '\\u2b50';\\n font-size: 12px;\\n}\\n\\n.bifa-media-badge {\\n position: absolute;\\n top: 15px;\\n right: 15px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-media-content {\\n padding: 25px;\\n}\\n\\n.bifa-media-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n margin-bottom: 12px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n font-weight: 500;\\n}\\n\\n.bifa-media-date::before {\\n content: '';\\n width: 5px;\\n height: 5px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-media-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 15px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-media-item:hover .bifa-media-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-media-caption {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: #4a5568;\\n line-height: 1.6;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 15px;\\n}\\n\\n.bifa-media-meta {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n padding-top: 15px;\\n border-top: 1px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-media-type {\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n font-weight: 600;\\n}\\n\\n.bifa-media-photographer {\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n}\\n\\n.bifa-view-all-container {\\n text-align: center;\\n margin-top: 60px;\\n}\\n\\n.bifa-view-all-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-view-all-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-view-all-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-view-all-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-view-all-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-view-all-btn:hover svg {\\n transform: translateX(5px);\\n}\\n\\n.bifa-media-loading {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n min-height: 400px;\\n}\\n\\n.bifa-media-loader {\\n width: 60px;\\n height: 60px;\\n border: 4px solid rgba(212, 175, 55, 0.2);\\n border-top-color: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: spinMedia 1s linear infinite;\\n}\\n\\n@keyframes spinMedia {\\n to { transform: rotate(360deg); }\\n}\\n\\n@keyframes fadeInUpMedia {\\n from {\\n opacity: 0;\\n transform: translateY(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes slideInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@media (max-width: 1200px) {\\n .bifa-media-grid {\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 35px;\\n }\\n}\\n\\n@media (max-width: 992px) {\\n .bifa-media-wrapper {\\n padding: 70px 0;\\n }\\n .bifa-media-stats {\\n grid-template-columns: repeat(2, 1fr);\\n gap: 25px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-media-grid {\\n grid-template-columns: 1fr;\\n gap: 25px;\\n }\\n .bifa-media-wrapper {\\n padding: 50px 0;\\n }\\n .bifa-media-filters {\\n padding: 20px;\\n gap: 10px;\\n }\\n .bifa-filter-btn {\\n padding: 8px 20px;\\n font-size: 0.8rem;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-section-title {\\n font-size: 2rem;\\n }\\n .bifa-media-stats {\\n grid-template-columns: 1fr;\\n gap: 20px;\\n }\\n .bifa-stat-number {\\n font-size: 2rem;\\n }\\n .bifa-media-content {\\n padding: 20px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div id=\"\\\"bifa-media-section\\\"\" class=\"\\\"bifa-media-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"media-bg-animation\\\"\">\\n \\n <\\\/div>\\n\\n \\n <main class=\"\\\"bifa-media-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">Media Gallery<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Visual stories of BIFA+ global initiatives and achievements<\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-media-filters\\\"\">\\n <button class=\"\\\"bifa-filter-btn\" active\\\" data-filter=\"\\\"all\\\"\">All Media<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"photo\\\"\">Photos<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"video\\\"\">Videos<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"gallery\\\"\">Galleries<\\\/button>\\n <button class=\"\\\"bifa-filter-btn\\\"\" data-filter=\"\\\"infographic\\\"\">Infographics<\\\/button>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-media-stats\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83d\\udcf8<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Total Media<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83c\\udfa5<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Videos<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83d\\uddbc\\ufe0f<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Photo Galleries<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-stat-icon\\\"\">\\ud83d\\udcca<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-number\\\"\" data-target=\"\\\"0\\\"\">0<\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-stat-label\\\"\">Infographics<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div id=\"\\\"mediaGrid\\\"\" class=\"\\\"bifa-media-grid\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-loading\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-loader\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-view-all-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/media-center\\\/\\\"\" class=\"\\\"bifa-view-all-btn\\\"\">\\n <span>View Full Media Gallery<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/main>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Media Module - \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041d\\u0410\\u042f \\u0412\\u0415\\u0420\\u0421\\u0418\\u042f \\u0414\\u041b\\u042f MEDIABIFA\\nconst BifaMedia = {\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_media',\\n taxonomyUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_media_type',\\n mediaItems: [],\\n mediaTypes: {},\\n currentFilter: 'all',\\n stats: {\\n total: 0,\\n photo: 0,\\n video: 0,\\n gallery: 0,\\n infographic: 0\\n }\\n },\\n\\n \\\/\\\/ Initialize\\n async init() {\\n this.createParticles();\\n await this.loadTaxonomies();\\n await this.loadMediaItems();\\n this.setupFilters();\\n this.updateStatistics();\\n this.animateNumbers();\\n },\\n\\n \\\/\\\/ Load taxonomies first\\n async loadTaxonomies() {\\n try {\\n const response = await fetch(this.config.taxonomyUrl);\\n if (response.ok) {\\n const types = await response.json();\\n types.forEach(type => {\\n this.config.mediaTypes[type.id] = type.slug;\\n });\\n }\\n } catch (error) {\\n console.log('Could not load taxonomies, using defaults');\\n \\\/\\\/ Default mapping based on your setup\\n this.config.mediaTypes = {\\n 3: 'photo',\\n 4: 'gallery',\\n 5: 'video',\\n 6: 'infographic'\\n };\\n }\\n },\\n\\n \\\/\\\/ Create background particles\\n createParticles() {\\n const container = document.querySelector('.media-bg-animation');\\n if (!container) return;\\n\\n for (let i = 0; i < 20; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'media-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 25 + 's';\\n particle.style.animationDuration = (20 + Math.random() * 15) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n container.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Load media items with proper meta fields\\n async loadMediaItems() {\\n const container = document.getElementById('mediaGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Load with embedded data and ACF format\\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=12&orderby=date&order=desc&acf_format=standard');\\n if (!response.ok) throw new Error('Failed to load media');\\n \\n const data = await response.json();\\n this.config.mediaItems = data;\\n \\n \\\/\\\/ Count items by type\\n this.config.stats.total = data.length;\\n data.forEach(item => {\\n const type = this.getMediaType(item);\\n if (this.config.stats[type] !== undefined) {\\n this.config.stats[type]++;\\n }\\n });\\n \\n this.renderMediaGrid(data);\\n } catch (error) {\\n console.error('Error loading media:', error);\\n container.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div style=\"\\\"font-size:\" 3rem; margin-bottom: 15px;\\\">\\ud83d\\udcc1<\\\/div>\\n <\/p>\n<h3>Loading Media Gallery...<\\\/h3>\\n <\/p>\n<p>Please check back in a moment.<\\\/p>\\n <\\\/div>\\n `;\\n }\\n },\\n\\n \\\/\\\/ Get media type from item\\n getMediaType(item) {\\n \\\/\\\/ Try from taxonomy\\n if (item.bifa_media_type && item.bifa_media_type.length > 0) {\\n const typeId = item.bifa_media_type[0];\\n return this.config.mediaTypes[typeId] || 'photo';\\n }\\n \\n \\\/\\\/ Try from embedded terms\\n if (item._embedded && item._embedded['wp:term']) {\\n const terms = item._embedded['wp:term'].flat();\\n const typeTerm = terms.find(term => term.taxonomy === 'bifa_media_type');\\n if (typeTerm) return typeTerm.slug;\\n }\\n \\n \\\/\\\/ Default\\n return 'photo';\\n },\\n\\n \\\/\\\/ Get featured image URL\\n getFeaturedImage(item) {\\n \\\/\\\/ Try featured media\\n if (item._embedded && item._embedded['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]) {\\n const media = item._embedded['wp:featuredmedia'][0];\\n if (media.media_details && media.media_details.sizes) {\\n return media.media_details.sizes.medium_large?.source_url || \\n media.media_details.sizes.large?.source_url || \\n media.source_url;\\n }\\n return media.source_url;\\n }\\n \\n \\\/\\\/ Try ACF fields\\n if (item.acf && item.acf.featured_image) {\\n return item.acf.featured_image;\\n }\\n \\n \\\/\\\/ Placeholder\\n return 'https:\\\/\\\/via.placeholder.com\\\/600x400\\\/0A1F44\\\/D4AF37?text=BIFA+Media';\\n },\\n\\n \\\/\\\/ Get metadata from custom fields\\n getMetadata(item) {\\n const meta = {\\n caption: '',\\n photographer: 'BIFA+ Team',\\n location: '',\\n priority: 'normal',\\n date: item.date\\n };\\n \\n \\\/\\\/ Try meta fields (our custom fields)\\n if (item.meta) {\\n meta.caption = item.meta._bifa_media_caption || '';\\n meta.photographer = item.meta._bifa_media_photographer || meta.photographer;\\n meta.location = item.meta._bifa_media_location || '';\\n meta.priority = item.meta._bifa_media_priority || 'normal';\\n meta.date = item.meta._bifa_media_date || item.date;\\n }\\n \\n \\\/\\\/ Try ACF fields as fallback\\n if (item.acf) {\\n meta.caption = meta.caption || item.acf.caption || '';\\n meta.photographer = meta.photographer || item.acf.photographer || 'BIFA+ Team';\\n meta.location = meta.location || item.acf.location || '';\\n meta.priority = meta.priority || item.acf.priority || 'normal';\\n }\\n \\n \\\/\\\/ Use excerpt if no caption\\n if (!meta.caption && item.excerpt) {\\n meta.caption = item.excerpt.rendered.replace(\\\/<[^>]*>\\\/g, '');\\n }\\n \\n return meta;\\n },\\n\\n \\\/\\\/ Render media grid\\n renderMediaGrid(items) {\\n const container = document.getElementById('mediaGrid');\\n if (!container) return;\\n\\n if (items.length === 0) {\\n container.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div style=\"\\\"font-size:\" 3rem; margin-bottom: 15px;\\\">\\ud83d\\udced<\\\/div>\\n <\/p>\n<h3>No media items found<\\\/h3>\\n <\/p>\n<p>Please check back later for updates.<\\\/p>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n container.innerHTML = '';\\n\\n items.slice(0, 12).forEach((item, index) => {\\n const card = this.createMediaCard(item, index);\\n container.appendChild(card);\\n });\\n },\\n\\n \\\/\\\/ Create media card with correct data\\n createMediaCard(item, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-media-item';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n const imageUrl = this.getFeaturedImage(item);\\n const title = item.title?.rendered || 'BIFA+ Media';\\n const metadata = this.getMetadata(item);\\n const mediaType = this.getMediaType(item);\\n \\n \\\/\\\/ Set data-type for filtering\\n card.dataset.type = mediaType;\\n \\n const typeLabels = {\\n 'photo': 'Photo',\\n 'video': 'Video',\\n 'gallery': 'Gallery',\\n 'infographic': 'Infographic'\\n };\\n\\n card.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-media-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n ${metadata.priority === 'featured' || metadata.priority === 'high' ? '<\/p>\n<div class=\"\\\"bifa-featured-indicator\\\"\">FEATURED<\\\/div>' : ''}\\n ${mediaType ? `<span class=\"\\\"bifa-media-badge\\\"\">${typeLabels[mediaType] || 'Media'}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-media-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-date\\\"\">${this.formatDate(metadata.date)}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-media-title\\\"\">${title}<\\\/h3>\\n ${metadata.caption ? `<\/p>\n<p class=\"\\\"bifa-media-caption\\\"\">${metadata.caption.substring(0, 120)}${metadata.caption.length > 120 ? '...' : ''}<\\\/p>` : ''}\\n <\/p>\n<div class=\"\\\"bifa-media-meta\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-media-type\\\"\">\\n ${this.getTypeIcon(mediaType)} ${typeLabels[mediaType] || 'Media'}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-media-photographer\\\"\">\\n \\ud83d\\udcf8 ${metadata.photographer}\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n `;\\n\\n card.addEventListener('click', () => {\\n if (item.link) {\\n window.open(item.link, '_blank');\\n }\\n });\\n\\n return card;\\n },\\n\\n \\\/\\\/ Get type icon\\n getTypeIcon(type) {\\n const icons = {\\n 'photo': '\\ud83d\\uddbc\\ufe0f',\\n 'video': '\\ud83c\\udfa5',\\n 'gallery': '\\ud83d\\udcf8',\\n 'infographic': '\\ud83d\\udcca'\\n };\\n return icons[type] || '\\ud83d\\udcc1';\\n },\\n\\n \\\/\\\/ Update statistics\\n updateStatistics() {\\n \\\/\\\/ Update stat numbers\\n const statElements = document.querySelectorAll('.bifa-stat-number');\\n statElements[0]?.setAttribute('data-target', this.config.stats.total);\\n statElements[1]?.setAttribute('data-target', this.config.stats.video);\\n statElements[2]?.setAttribute('data-target', this.config.stats.gallery);\\n statElements[3]?.setAttribute('data-target', this.config.stats.infographic);\\n },\\n\\n \\\/\\\/ Setup filters\\n setupFilters() {\\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');\\n \\n filterButtons.forEach(button => {\\n button.addEventListener('click', () => {\\n \\\/\\\/ Remove active class from all\\n filterButtons.forEach(btn => btn.classList.remove('active'));\\n \\\/\\\/ Add active to clicked\\n button.classList.add('active');\\n \\n \\\/\\\/ Get filter value\\n const filter = button.dataset.filter;\\n this.config.currentFilter = filter;\\n \\n \\\/\\\/ Filter items\\n this.filterMediaItems(filter);\\n });\\n });\\n },\\n\\n \\\/\\\/ Filter media items with animation\\n filterMediaItems(filter) {\\n const items = document.querySelectorAll('.bifa-media-item');\\n let visibleCount = 0;\\n \\n items.forEach((item, index) => {\\n if (filter === 'all' || item.dataset.type === filter) {\\n item.style.display = 'block';\\n \\\/\\\/ Reset animation with stagger\\n item.style.animation = 'none';\\n setTimeout(() => {\\n item.style.animation = `fadeInUpMedia 0.6s ease forwards`;\\n item.style.animationDelay = `${visibleCount * 0.1}s`;\\n }, 10);\\n visibleCount++;\\n } else {\\n item.style.opacity = '0';\\n item.style.transform = 'scale(0.9)';\\n setTimeout(() => {\\n item.style.display = 'none';\\n }, 300);\\n }\\n });\\n },\\n\\n \\\/\\\/ Animate numbers\\n animateNumbers() {\\n const numbers = document.querySelectorAll('.bifa-stat-number');\\n \\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n const target = parseInt(entry.target.dataset.target);\\n if (target > 0) {\\n this.animateNumber(entry.target, target);\\n }\\n observer.unobserve(entry.target);\\n }\\n });\\n });\\n \\n numbers.forEach(number => observer.observe(number));\\n },\\n\\n \\\/\\\/ Animate single number\\n animateNumber(element, target) {\\n let current = 0;\\n const increment = Math.ceil(target \\\/ 50);\\n const timer = setInterval(() => {\\n current += increment;\\n if (current >= target) {\\n current = target;\\n clearInterval(timer);\\n }\\n element.textContent = current;\\n }, 30);\\n },\\n\\n \\\/\\\/ Format date\\n formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\nif (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', () => {\\n BifaMedia.init();\\n });\\n} else {\\n BifaMedia.init();\\n}\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]}]}]}],\"version\":\"4.5.28\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ Hub – News, Events & Updates Latest News Stay updated with the latest BIFA+ news and announcements View All News Upcoming Events Join our international tournaments and conferences View All Events BIFA+ Events Calendar BIFA+ Events Calendar Upcoming International Events & Initiatives Explore our comprehensive schedule of international football events, diplomatic meetings, youth programs, […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-news-official-updates.php","meta":{"footnotes":""},"class_list":["post-507","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":36,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/507\/revisions"}],"predecessor-version":[{"id":1249,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/507\/revisions\/1249"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/media?parent=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}