BIFA+ Media Gallery – All Collections<\/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\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0421\u0422\u0418\u041b\u0415\u0419 \u0418\u0417 \u041f\u0415\u0420\u0412\u041e\u0413\u041e \u0411\u041b\u041e\u041a\u0410 *\/\n.bifa-gallery-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-gallery-wrapper * { \n box-sizing: border-box; \n margin: 0;\n padding: 0;\n}<\/p>\n<p>body {\n margin: 0;\n padding: 0;\n}<\/p>\n<p>.bifa-gallery-wrapper {\n background: #FFFFFF;\n padding: 100px 0;\n margin: 0 calc(-50vw + 50%);\n width: 100vw;\n position: relative;\n}<\/p>\n<p>.gallery-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>.gallery-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: floatGallery 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n}<\/p>\n<p>@keyframes floatGallery {\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-gallery-main {\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.bifa-gallery-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>\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0424\u0418\u041b\u042c\u0422\u0420\u041e\u0412 *\/\n.bifa-gallery-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>\/* \u0420\u0410\u0421\u0428\u0418\u0420\u0415\u041d\u041d\u042b\u0415 \u0424\u0418\u041b\u042c\u0422\u0420\u042b \u0418 \u041f\u041e\u0418\u0421\u041a *\/\n.bifa-search-section {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n padding: 30px;\n border-radius: 25px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n margin-bottom: 40px;\n animation: slideInDown 1.2s ease 0.3s both;\n}<\/p>\n<p>.bifa-search-bar {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-search-input {\n flex: 1;\n padding: 15px 25px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n background: white;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-search-input:focus {\n outline: none;\n border-color: var(--bifa-heritage-gold);\n box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-search-btn {\n padding: 15px 35px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\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 box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-search-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-sort-controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n}<\/p>\n<p>.bifa-results-count {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: var(--bifa-gray);\n font-weight: 600;\n}<\/p>\n<p>.bifa-sort-dropdown {\n padding: 10px 20px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n background: white;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-sort-dropdown:focus {\n outline: none;\n border-color: var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0421\u0422\u0410\u0422\u0418\u0421\u0422\u0418\u041a\u0418 *\/\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}<\/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: fadeInUpGallery 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>\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0421\u0415\u0422\u041a\u0418 \u0418 \u041a\u0410\u0420\u0422\u041e\u0427\u0415\u041a \u0418\u0417 \u041f\u0415\u0420\u0412\u041e\u0413\u041e \u0411\u041b\u041e\u041a\u0410 *\/\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}<\/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: fadeInUpGallery 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>\/* \u041f\u0410\u0413\u0418\u041d\u0410\u0426\u0418\u042f *\/\n.bifa-pagination-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-page-btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50%;\n font-family: var(--bifa-font-heading);\n font-size: 0.95rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-page-btn:hover:not(.active):not(.disabled) {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: transparent;\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-page-btn.active {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: transparent;\n cursor: default;\n}<\/p>\n<p>.bifa-page-btn.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}<\/p>\n<p>.bifa-page-dots {\n color: var(--bifa-gray);\n font-weight: 700;\n}<\/p>\n<p>\/* \u041a\u041d\u041e\u041f\u041a\u0410 \u0417\u0410\u0413\u0420\u0423\u0417\u0418\u0422\u042c \u0415\u0429\u0415 *\/\n.bifa-load-more-container {\n text-align: center;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-load-more-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 border: none;\n cursor: pointer;\n}<\/p>\n<p>.bifa-load-more-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-load-more-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-load-more-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-load-more-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-load-more-btn:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>\/* LOADING \u0418 EMPTY STATES *\/\n.bifa-media-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 400px;\n grid-column: 1 \/ -1;\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: spinGallery 1s linear infinite;\n}<\/p>\n<p>@keyframes spinGallery {\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.bifa-empty-state {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 60px;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-empty-icon {\n font-size: 3rem;\n margin-bottom: 15px;\n}<\/p>\n<p>.bifa-empty-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 10px;\n}<\/p>\n<p>.bifa-empty-text {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n}<\/p>\n<p>\/* \u0410\u041d\u0418\u041c\u0410\u0426\u0418\u0418 *\/\n@keyframes fadeInUpGallery {\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>\/* RESPONSIVE - \u0422\u041e\u0427\u041d\u041e \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415 *\/\n@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-gallery-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-gallery-wrapper {\n padding: 50px 0;\n }\n .bifa-gallery-filters {\n padding: 20px;\n gap: 10px;\n }\n .bifa-filter-btn {\n padding: 8px 20px;\n font-size: 0.8rem;\n }\n .bifa-search-bar {\n flex-direction: column;\n gap: 15px;\n }\n .bifa-sort-controls {\n flex-direction: column;\n align-items: stretch;\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-gallery-page\" class=\"bifa-gallery-wrapper\">\n <\/p>\n<div class=\"gallery-bg-animation\">\n \n <\/div>\n<p> <br \/>\n <main class=\"bifa-gallery-main\"><\/p>\n<div class=\"bifa-gallery-container\">\n <\/p>\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Media Gallery<\/h2>\n<p class=\"bifa-section-subtitle\">Complete collection of BIFA+ visual stories and global achievements<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-search-section\">\n<div class=\"bifa-search-bar\">\n <input type=\"text\" class=\"bifa-search-input\" id=\"searchInput\" placeholder=\"Search by title, photographer, or description...\"><br \/>\n <button class=\"bifa-search-btn\" id=\"searchBtn\">\u041f\u043e\u0438\u0441\u043a<\/button>\n <\/div>\n<div class=\"bifa-sort-controls\">\n<div class=\"bifa-results-count\">\n Showing <span id=\"resultsCount\">0<\/span> media items\n <\/div>\n<p> <select class=\"bifa-sort-dropdown\" id=\"sortSelect\"><option value=\"newest\">Newest First<\/option><option value=\"oldest\">Oldest First<\/option><option value=\"title\">Title A-Z<\/option><option value=\"featured\">Featured First<\/option><\/select>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-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=\"galleryGrid\" 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-pagination-container\" id=\"pagination\"><\/div>\n<p> <\/p>\n<div class=\"bifa-load-more-container\" id=\"loadMoreContainer\" style=\"display: none;\">\n <button class=\"bifa-load-more-btn\" id=\"loadMoreBtn\"><br \/>\n <span>Load More Media<\/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 <\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/main>\n<\/div>\n<p><script>\n\/\/ BIFA+ Gallery Module - \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u041b\u041e\u0413\u0418\u041a\u0418 \u0418\u0417 \u041f\u0415\u0420\u0412\u041e\u0413\u041e \u0411\u041b\u041e\u041a\u0410 \u0421 \u0420\u0410\u0421\u0428\u0418\u0420\u0415\u041d\u0418\u042f\u041c\u0418\nconst BifaGalleryPage = {\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 filteredItems: [],\n displayedItems: [],\n mediaTypes: {},\n currentFilter: 'all',\n currentSort: 'newest',\n searchQuery: '',\n currentPage: 1,\n itemsPerPage: 12,\n totalPages: 1,\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.setupEventListeners();\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 this.config.mediaTypes = {\n 3: 'photo',\n 4: 'gallery',\n 5: 'video',\n 6: 'infographic'\n };\n }\n },<\/p>\n<p> \/\/ Create background particles - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n createParticles() {\n const container = document.querySelector('.gallery-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 = 'gallery-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 all media items\n async loadMediaItems() {\n const container = document.getElementById('galleryGrid');\n if (!container) return;\n\n try {\n \/\/ Load ALL items for proper filtering\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=100&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> \/\/ Initial filter and display\n this.applyFiltersAndSort();<\/p>\n<p> } catch (error) {\n console.error('Error loading media:', error);\n container.innerHTML = `<\/p>\n<div class=\"bifa-empty-state\">\n<div class=\"bifa-empty-icon\">\ud83d\udcc1<\/div>\n<h3 class=\"bifa-empty-title\">Loading Media Gallery...<\/h3>\n<p class=\"bifa-empty-text\">Please check back in a moment.<\/p>\n<\/p><\/div>\n<p> `;\n }\n },<\/p>\n<p> \/\/ Apply filters and sorting\n applyFiltersAndSort() {\n let filtered = [...this.config.mediaItems];<\/p>\n<p> \/\/ Apply filter\n if (this.config.currentFilter !== 'all') {\n filtered = filtered.filter(item => {\n const type = this.getMediaType(item);\n return type === this.config.currentFilter;\n });\n }<\/p>\n<p> \/\/ Apply search\n if (this.config.searchQuery) {\n const query = this.config.searchQuery.toLowerCase();\n filtered = filtered.filter(item => {\n const title = (item.title?.rendered || '').toLowerCase();\n const metadata = this.getMetadata(item);\n const caption = (metadata.caption || '').toLowerCase();\n const photographer = (metadata.photographer || '').toLowerCase();<\/p>\n<p> return title.includes(query) || \n caption.includes(query) || \n photographer.includes(query);\n });\n }<\/p>\n<p> \/\/ Apply sort\n filtered.sort((a, b) => {\n switch (this.config.currentSort) {\n case 'oldest':\n return new Date(a.date) - new Date(b.date);\n case 'title':\n return (a.title?.rendered || '').localeCompare(b.title?.rendered || '');\n case 'featured':\n const prioA = this.getMetadata(a).priority;\n const prioB = this.getMetadata(b).priority;\n if (prioA === 'featured' && prioB !== 'featured') return -1;\n if (prioA !== 'featured' && prioB === 'featured') return 1;\n return new Date(b.date) - new Date(a.date);\n default: \/\/ newest\n return new Date(b.date) - new Date(a.date);\n }\n });<\/p>\n<p> this.config.filteredItems = filtered;\n this.config.totalPages = Math.ceil(filtered.length \/ this.config.itemsPerPage);\n this.config.currentPage = 1;<\/p>\n<p> \/\/ Update results count\n document.getElementById('resultsCount').textContent = filtered.length;<\/p>\n<p> \/\/ Render first page\n this.renderPage();\n },<\/p>\n<p> \/\/ Render current page\n renderPage() {\n const start = (this.config.currentPage - 1) * this.config.itemsPerPage;\n const end = start + this.config.itemsPerPage;\n const items = this.config.filteredItems.slice(start, end);<\/p>\n<p> this.renderMediaGrid(items);\n this.renderPagination();\n },<\/p>\n<p> \/\/ Get media type from item - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n getMediaType(item) {\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> 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> return 'photo';\n },<\/p>\n<p> \/\/ Get featured image URL - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n getFeaturedImage(item) {\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> if (item.acf && item.acf.featured_image) {\n return item.acf.featured_image;\n }<\/p>\n<p> return 'https:\/\/via.placeholder.com\/600x400\/0A1F44\/D4AF37?text=BIFA+Media';\n },<\/p>\n<p> \/\/ Get metadata from custom fields - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\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> 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> 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> 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 - \u0422\u041e\u0427\u041d\u041e \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n renderMediaGrid(items) {\n const container = document.getElementById('galleryGrid');\n if (!container) return;<\/p>\n<p> if (items.length === 0) {\n container.innerHTML = `<\/p>\n<div class=\"bifa-empty-state\">\n<div class=\"bifa-empty-icon\">\ud83d\udced<\/div>\n<h3 class=\"bifa-empty-title\">No media items found<\/h3>\n<p class=\"bifa-empty-text\">Try adjusting your filters or search query.<\/p>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> items.forEach((item, index) => {\n const card = this.createMediaCard(item, index);\n container.appendChild(card);\n });\n },<\/p>\n<p> \/\/ Create media card - \u0422\u041e\u0427\u041d\u041e \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\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> 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> \/\/ Render pagination\n renderPagination() {\n const container = document.getElementById('pagination');\n if (!container) return;<\/p>\n<p> if (this.config.totalPages <= 1) {\n container.innerHTML = '';\n return;\n }\n \n let html = '';\n \n \/\/ Previous button\n html += `<button class=\"bifa-page-btn ${this.config.currentPage === 1 ? 'disabled' : ''}\" \n onclick=\"BifaGalleryPage.goToPage(${this.config.currentPage - 1})\" \n ${this.config.currentPage === 1 ? 'disabled' : ''}>\u2039<\/button>`;<\/p>\n<p> \/\/ Page numbers\n const maxVisible = 7;\n let start = Math.max(1, this.config.currentPage - 3);\n let end = Math.min(this.config.totalPages, start + maxVisible - 1);<\/p>\n<p> if (end - start + 1 < maxVisible) {\n start = Math.max(1, end - maxVisible + 1);\n }\n \n if (start > 1) {\n html += `<button class=\"bifa-page-btn\" onclick=\"BifaGalleryPage.goToPage(1)\">1<\/button>`;\n if (start > 2) {\n html += `<span class=\"bifa-page-dots\">...<\/span>`;\n }\n }<\/p>\n<p> for (let i = start; i <= end; i++) {\n html += `<button class=\"bifa-page-btn ${i === this.config.currentPage ? 'active' : ''}\" \n onclick=\"BifaGalleryPage.goToPage(${i})\">${i}<\/button>`;\n }<\/p>\n<p> if (end < this.config.totalPages) {\n if (end < this.config.totalPages - 1) {\n html += `<span class=\"bifa-page-dots\">...<\/span>`;\n }\n html += `<button class=\"bifa-page-btn\" onclick=\"BifaGalleryPage.goToPage(${this.config.totalPages})\">\n ${this.config.totalPages}<\/button>`;\n }<\/p>\n<p> \/\/ Next button\n html += `<button class=\"bifa-page-btn ${this.config.currentPage === this.config.totalPages ? 'disabled' : ''}\" \n onclick=\"BifaGalleryPage.goToPage(${this.config.currentPage + 1})\"\n ${this.config.currentPage === this.config.totalPages ? 'disabled' : ''}>\u203a<\/button>`;<\/p>\n<p> container.innerHTML = html;\n },<\/p>\n<p> \/\/ Go to page\n goToPage(page) {\n if (page < 1 || page > this.config.totalPages) return;<\/p>\n<p> this.config.currentPage = page;\n this.renderPage();<\/p>\n<p> \/\/ Scroll to top\n window.scrollTo({ top: 0, behavior: 'smooth' });\n },<\/p>\n<p> \/\/ Update statistics - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n updateStatistics() {\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 event listeners\n setupEventListeners() {\n \/\/ Filter buttons\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');<\/p>\n<p> filterButtons.forEach(button => {\n button.addEventListener('click', () => {\n filterButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');<\/p>\n<p> const filter = button.dataset.filter;\n this.config.currentFilter = filter;<\/p>\n<p> this.applyFiltersAndSort();\n });\n });<\/p>\n<p> \/\/ Search\n const searchInput = document.getElementById('searchInput');\n const searchBtn = document.getElementById('searchBtn');<\/p>\n<p> const performSearch = () => {\n this.config.searchQuery = searchInput.value;\n this.applyFiltersAndSort();\n };<\/p>\n<p> searchBtn?.addEventListener('click', performSearch);\n searchInput?.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') performSearch();\n });<\/p>\n<p> \/\/ Sort\n document.getElementById('sortSelect')?.addEventListener('change', (e) => {\n this.config.currentSort = e.target.value;\n this.applyFiltersAndSort();\n });<\/p>\n<p> \/\/ Load More Button\n document.getElementById('loadMoreBtn')?.addEventListener('click', () => {\n this.loadMore();\n });\n },<\/p>\n<p> \/\/ Load more items\n loadMore() {\n if (this.config.currentPage < this.config.totalPages) {\n this.config.currentPage++;\n this.config.itemsPerPage += 12; \/\/ Increase items shown\n this.renderPage();\n }\n },\n\n \/\/ Animate numbers - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\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 });<\/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 BifaGalleryPage.init();\n });\n} else {\n BifaGalleryPage.init();\n}\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\"\\\"gallery-bg-animation\\\"\">\\n \\n <\\\/div>\\n\\n \\n <main class=\"\\\"bifa-gallery-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-gallery-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\\\"\">Complete collection of BIFA+ visual stories and global achievements<\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-search-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-search-bar\\\"\">\\n <input type=\"\\\"text\\\"\" class=\"\\\"bifa-search-input\\\"\" id=\"\\\"searchInput\\\"\" placeholder=\"\\\"Search\" by title, photographer, or description...\\\">\\n <button class=\"\\\"bifa-search-btn\\\"\" id=\"\\\"searchBtn\\\"\">\u041f\u043e\u0438\u0441\u043a<\\\/button>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-sort-controls\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-results-count\\\"\">\\n Showing <span id=\"\\\"resultsCount\\\"\">0<\\\/span> media items\\n <\\\/div>\\n <select class=\"\\\"bifa-sort-dropdown\\\"\" id=\"\\\"sortSelect\\\"\">\\n<option value=\"\\\"newest\\\"\">Newest First<\\\/option>\\n<option value=\"\\\"oldest\\\"\">Oldest First<\\\/option>\\n<option value=\"\\\"title\\\"\">Title A-Z<\\\/option>\\n<option value=\"\\\"featured\\\"\">Featured First<\\\/option>\\n <\\\/select>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-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=\"\\\"galleryGrid\\\"\" 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-pagination-container\\\"\" id=\"\\\"pagination\\\"\"><\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-load-more-container\\\"\" id=\"\\\"loadMoreContainer\\\"\" style=\"\\\"display:\" none;\\\">\\n <button class=\"\\\"bifa-load-more-btn\\\"\" id=\"\\\"loadMoreBtn\\\"\">\\n <span>Load More Media<\\\/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 <\\\/div>\\n <\\\/main>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Gallery Module - \\u0422\\u041e\\u0427\\u041d\\u0410\\u042f \\u041a\\u041e\\u041f\\u0418\\u042f \\u041b\\u041e\\u0413\\u0418\\u041a\\u0418 \\u0418\\u0417 \\u041f\\u0415\\u0420\\u0412\\u041e\\u0413\\u041e \\u0411\\u041b\\u041e\\u041a\\u0410 \\u0421 \\u0420\\u0410\\u0421\\u0428\\u0418\\u0420\\u0415\\u041d\\u0418\\u042f\\u041c\\u0418\\nconst BifaGalleryPage = {\\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 filteredItems: [],\\n displayedItems: [],\\n mediaTypes: {},\\n currentFilter: 'all',\\n currentSort: 'newest',\\n searchQuery: '',\\n currentPage: 1,\\n itemsPerPage: 12,\\n totalPages: 1,\\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.setupEventListeners();\\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 this.config.mediaTypes = {\\n 3: 'photo',\\n 4: 'gallery',\\n 5: 'video',\\n 6: 'infographic'\\n };\\n }\\n },\\n\\n \\\/\\\/ Create background particles - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n createParticles() {\\n const container = document.querySelector('.gallery-bg-animation');\\n if (!container) return;\\n\\n for (let i = 0; i < 20; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'gallery-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 all media items\\n async loadMediaItems() {\\n const container = document.getElementById('galleryGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Load ALL items for proper filtering\\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=100&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 \\\/\\\/ Initial filter and display\\n this.applyFiltersAndSort();\\n \\n } catch (error) {\\n console.error('Error loading media:', error);\\n container.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-empty-state\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-empty-icon\\\"\">\\ud83d\\udcc1<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-empty-title\\\"\">Loading Media Gallery...<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-empty-text\\\"\">Please check back in a moment.<\\\/p>\\n <\\\/div>\\n `;\\n }\\n },\\n\\n \\\/\\\/ Apply filters and sorting\\n applyFiltersAndSort() {\\n let filtered = [...this.config.mediaItems];\\n \\n \\\/\\\/ Apply filter\\n if (this.config.currentFilter !== 'all') {\\n filtered = filtered.filter(item => {\\n const type = this.getMediaType(item);\\n return type === this.config.currentFilter;\\n });\\n }\\n \\n \\\/\\\/ Apply search\\n if (this.config.searchQuery) {\\n const query = this.config.searchQuery.toLowerCase();\\n filtered = filtered.filter(item => {\\n const title = (item.title?.rendered || '').toLowerCase();\\n const metadata = this.getMetadata(item);\\n const caption = (metadata.caption || '').toLowerCase();\\n const photographer = (metadata.photographer || '').toLowerCase();\\n \\n return title.includes(query) || \\n caption.includes(query) || \\n photographer.includes(query);\\n });\\n }\\n \\n \\\/\\\/ Apply sort\\n filtered.sort((a, b) => {\\n switch (this.config.currentSort) {\\n case 'oldest':\\n return new Date(a.date) - new Date(b.date);\\n case 'title':\\n return (a.title?.rendered || '').localeCompare(b.title?.rendered || '');\\n case 'featured':\\n const prioA = this.getMetadata(a).priority;\\n const prioB = this.getMetadata(b).priority;\\n if (prioA === 'featured' && prioB !== 'featured') return -1;\\n if (prioA !== 'featured' && prioB === 'featured') return 1;\\n return new Date(b.date) - new Date(a.date);\\n default: \\\/\\\/ newest\\n return new Date(b.date) - new Date(a.date);\\n }\\n });\\n \\n this.config.filteredItems = filtered;\\n this.config.totalPages = Math.ceil(filtered.length \\\/ this.config.itemsPerPage);\\n this.config.currentPage = 1;\\n \\n \\\/\\\/ Update results count\\n document.getElementById('resultsCount').textContent = filtered.length;\\n \\n \\\/\\\/ Render first page\\n this.renderPage();\\n },\\n\\n \\\/\\\/ Render current page\\n renderPage() {\\n const start = (this.config.currentPage - 1) * this.config.itemsPerPage;\\n const end = start + this.config.itemsPerPage;\\n const items = this.config.filteredItems.slice(start, end);\\n \\n this.renderMediaGrid(items);\\n this.renderPagination();\\n },\\n\\n \\\/\\\/ Get media type from item - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n getMediaType(item) {\\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 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 return 'photo';\\n },\\n\\n \\\/\\\/ Get featured image URL - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n getFeaturedImage(item) {\\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 if (item.acf && item.acf.featured_image) {\\n return item.acf.featured_image;\\n }\\n \\n return 'https:\\\/\\\/via.placeholder.com\\\/600x400\\\/0A1F44\\\/D4AF37?text=BIFA+Media';\\n },\\n\\n \\\/\\\/ Get metadata from custom fields - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n getMetadata(item) {\\n const meta = {\\n caption: '',\\n photographer: 'BIFA+ Team',\\n location: '',\\n priority: 'normal',\\n date: item.date\\n };\\n \\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 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 if (!meta.caption && item.excerpt) {\\n meta.caption = item.excerpt.rendered.replace(\\\/<[^>]*>\\\/g, '');\\n }\\n \\n return meta;\\n },\\n\\n \\\/\\\/ Render media grid - \\u0422\\u041e\\u0427\\u041d\\u041e \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n renderMediaGrid(items) {\\n const container = document.getElementById('galleryGrid');\\n if (!container) return;\\n\\n if (items.length === 0) {\\n container.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-empty-state\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-empty-icon\\\"\">\\ud83d\\udced<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-empty-title\\\"\">No media items found<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-empty-text\\\"\">Try adjusting your filters or search query.<\\\/p>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n container.innerHTML = '';\\n\\n items.forEach((item, index) => {\\n const card = this.createMediaCard(item, index);\\n container.appendChild(card);\\n });\\n },\\n\\n \\\/\\\/ Create media card - \\u0422\\u041e\\u0427\\u041d\\u041e \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\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 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 \\\/\\\/ Render pagination\\n renderPagination() {\\n const container = document.getElementById('pagination');\\n if (!container) return;\\n \\n if (this.config.totalPages <= 1) {\\n container.innerHTML = '';\\n return;\\n }\\n \\n let html = '';\\n \\n \\\/\\\/ Previous button\\n html += `<button class=\"\\\"bifa-page-btn\" ${this.config.currentpage =\"==\" 1 ? 'disabled' : ''}\\\" \\n onclick=\"\\\"BifaGalleryPage.goToPage(${this.config.currentPage\" - 1})\\\" ''}>\\u2039<\\\/button>`;\\n \\n \\\/\\\/ Page numbers\\n const maxVisible = 7;\\n let start = Math.max(1, this.config.currentPage - 3);\\n let end = Math.min(this.config.totalPages, start + maxVisible - 1);\\n \\n if (end - start + 1 < maxVisible) {\\n start = Math.max(1, end - maxVisible + 1);\\n }\\n \\n if (start > 1) {\\n html += `<button class=\"\\\"bifa-page-btn\\\"\" onclick=\"\\\"BifaGalleryPage.goToPage(1)\\\"\">1<\\\/button>`;\\n if (start > 2) {\\n html += `<span class=\"\\\"bifa-page-dots\\\"\">...<\\\/span>`;\\n }\\n }\\n \\n for (let i = start; i <= end; i++) {\\n html += `<button class=\"\\\"bifa-page-btn\" ${i =\"==\" this.config.currentpage ? 'active' : ''}\\\" \\n onclick=\"\\\"BifaGalleryPage.goToPage(${i})\\\"\">${i}<\\\/button>`;\\n }\\n \\n if (end < this.config.totalPages) {\\n if (end < this.config.totalPages - 1) {\\n html += `<span class=\"\\\"bifa-page-dots\\\"\">...<\\\/span>`;\\n }\\n html += `<button class=\"\\\"bifa-page-btn\\\"\" onclick=\"\\\"BifaGalleryPage.goToPage(${this.config.totalPages})\\\"\">\\n ${this.config.totalPages}<\\\/button>`;\\n }\\n \\n \\\/\\\/ Next button\\n html += `<button class=\"\\\"bifa-page-btn\" ${this.config.currentpage =\"==\" this.config.totalpages ? 'disabled' : ''}\\\" \\n onclick=\"\\\"BifaGalleryPage.goToPage(${this.config.currentPage\" + 1})\\\"\\n ''}>\\u203a<\\\/button>`;\\n \\n container.innerHTML = html;\\n },\\n\\n \\\/\\\/ Go to page\\n goToPage(page) {\\n if (page < 1 || page > this.config.totalPages) return;\\n \\n this.config.currentPage = page;\\n this.renderPage();\\n \\n \\\/\\\/ Scroll to top\\n window.scrollTo({ top: 0, behavior: 'smooth' });\\n },\\n\\n \\\/\\\/ Update statistics - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n updateStatistics() {\\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 event listeners\\n setupEventListeners() {\\n \\\/\\\/ Filter buttons\\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');\\n \\n filterButtons.forEach(button => {\\n button.addEventListener('click', () => {\\n filterButtons.forEach(btn => btn.classList.remove('active'));\\n button.classList.add('active');\\n \\n const filter = button.dataset.filter;\\n this.config.currentFilter = filter;\\n \\n this.applyFiltersAndSort();\\n });\\n });\\n \\n \\\/\\\/ Search\\n const searchInput = document.getElementById('searchInput');\\n const searchBtn = document.getElementById('searchBtn');\\n \\n const performSearch = () => {\\n this.config.searchQuery = searchInput.value;\\n this.applyFiltersAndSort();\\n };\\n \\n searchBtn?.addEventListener('click', performSearch);\\n searchInput?.addEventListener('keypress', (e) => {\\n if (e.key === 'Enter') performSearch();\\n });\\n \\n \\\/\\\/ Sort\\n document.getElementById('sortSelect')?.addEventListener('change', (e) => {\\n this.config.currentSort = e.target.value;\\n this.applyFiltersAndSort();\\n });\\n \\n \\\/\\\/ Load More Button\\n document.getElementById('loadMoreBtn')?.addEventListener('click', () => {\\n this.loadMore();\\n });\\n },\\n\\n \\\/\\\/ Load more items\\n loadMore() {\\n if (this.config.currentPage < this.config.totalPages) {\\n this.config.currentPage++;\\n this.config.itemsPerPage += 12; \\\/\\\/ Increase items shown\\n this.renderPage();\\n }\\n },\\n\\n \\\/\\\/ Animate numbers - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\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 BifaGalleryPage.init();\\n });\\n} else {\\n BifaGalleryPage.init();\\n}\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]}]}]}],\"version\":\"4.5.28\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ Media Gallery – All Collections Media Gallery Complete collection of BIFA+ visual stories and global achievements Search Showing 0 media items Newest FirstOldest FirstTitle A-ZFeatured First All Media Photos Videos Galleries Infographics \ud83d\udcf8 0 Total Media \ud83c\udfa5 0 Videos \ud83d\uddbc\ufe0f 0 Photo Galleries \ud83d\udcca 0 Infographics Load More Media<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-505","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/505","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=505"}],"version-history":[{"count":55,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/505\/revisions"}],"predecessor-version":[{"id":1304,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/505\/revisions\/1304"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/media?parent=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nBIFA+ Media Gallery – All Collections<\/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\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0421\u0422\u0418\u041b\u0415\u0419 \u0418\u0417 \u041f\u0415\u0420\u0412\u041e\u0413\u041e \u0411\u041b\u041e\u041a\u0410 *\/\n.bifa-gallery-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-gallery-wrapper * { \n box-sizing: border-box; \n margin: 0;\n padding: 0;\n}<\/p>\n<p>body {\n margin: 0;\n padding: 0;\n}<\/p>\n<p>.bifa-gallery-wrapper {\n background: #FFFFFF;\n padding: 100px 0;\n margin: 0 calc(-50vw + 50%);\n width: 100vw;\n position: relative;\n}<\/p>\n<p>.gallery-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>.gallery-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: floatGallery 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n}<\/p>\n<p>@keyframes floatGallery {\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-gallery-main {\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.bifa-gallery-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>\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0424\u0418\u041b\u042c\u0422\u0420\u041e\u0412 *\/\n.bifa-gallery-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>\/* \u0420\u0410\u0421\u0428\u0418\u0420\u0415\u041d\u041d\u042b\u0415 \u0424\u0418\u041b\u042c\u0422\u0420\u042b \u0418 \u041f\u041e\u0418\u0421\u041a *\/\n.bifa-search-section {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n padding: 30px;\n border-radius: 25px;\n box-shadow: var(--bifa-shadow-premium);\n border: 2px solid rgba(212, 175, 55, 0.1);\n margin-bottom: 40px;\n animation: slideInDown 1.2s ease 0.3s both;\n}<\/p>\n<p>.bifa-search-bar {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-search-input {\n flex: 1;\n padding: 15px 25px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n background: white;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-search-input:focus {\n outline: none;\n border-color: var(--bifa-heritage-gold);\n box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-search-btn {\n padding: 15px 35px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\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 box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-search-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-sort-controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n}<\/p>\n<p>.bifa-results-count {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: var(--bifa-gray);\n font-weight: 600;\n}<\/p>\n<p>.bifa-sort-dropdown {\n padding: 10px 20px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n background: white;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-sort-dropdown:focus {\n outline: none;\n border-color: var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0421\u0422\u0410\u0422\u0418\u0421\u0422\u0418\u041a\u0418 *\/\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}<\/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: fadeInUpGallery 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>\/* \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u0421\u0415\u0422\u041a\u0418 \u0418 \u041a\u0410\u0420\u0422\u041e\u0427\u0415\u041a \u0418\u0417 \u041f\u0415\u0420\u0412\u041e\u0413\u041e \u0411\u041b\u041e\u041a\u0410 *\/\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}<\/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: fadeInUpGallery 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>\/* \u041f\u0410\u0413\u0418\u041d\u0410\u0426\u0418\u042f *\/\n.bifa-pagination-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-page-btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50%;\n font-family: var(--bifa-font-heading);\n font-size: 0.95rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-page-btn:hover:not(.active):not(.disabled) {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: transparent;\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-page-btn.active {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: transparent;\n cursor: default;\n}<\/p>\n<p>.bifa-page-btn.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}<\/p>\n<p>.bifa-page-dots {\n color: var(--bifa-gray);\n font-weight: 700;\n}<\/p>\n<p>\/* \u041a\u041d\u041e\u041f\u041a\u0410 \u0417\u0410\u0413\u0420\u0423\u0417\u0418\u0422\u042c \u0415\u0429\u0415 *\/\n.bifa-load-more-container {\n text-align: center;\n margin-top: 60px;\n}<\/p>\n<p>.bifa-load-more-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 border: none;\n cursor: pointer;\n}<\/p>\n<p>.bifa-load-more-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-load-more-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-load-more-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-load-more-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-load-more-btn:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>\/* LOADING \u0418 EMPTY STATES *\/\n.bifa-media-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 400px;\n grid-column: 1 \/ -1;\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: spinGallery 1s linear infinite;\n}<\/p>\n<p>@keyframes spinGallery {\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.bifa-empty-state {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 60px;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-empty-icon {\n font-size: 3rem;\n margin-bottom: 15px;\n}<\/p>\n<p>.bifa-empty-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 10px;\n}<\/p>\n<p>.bifa-empty-text {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n}<\/p>\n<p>\/* \u0410\u041d\u0418\u041c\u0410\u0426\u0418\u0418 *\/\n@keyframes fadeInUpGallery {\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>\/* RESPONSIVE - \u0422\u041e\u0427\u041d\u041e \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415 *\/\n@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-gallery-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-gallery-wrapper {\n padding: 50px 0;\n }\n .bifa-gallery-filters {\n padding: 20px;\n gap: 10px;\n }\n .bifa-filter-btn {\n padding: 8px 20px;\n font-size: 0.8rem;\n }\n .bifa-search-bar {\n flex-direction: column;\n gap: 15px;\n }\n .bifa-sort-controls {\n flex-direction: column;\n align-items: stretch;\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-gallery-page\" class=\"bifa-gallery-wrapper\">\n <\/p>\n<div class=\"gallery-bg-animation\">\n \n <\/div>\n<p> <br \/>\n <main class=\"bifa-gallery-main\"><\/p>\n<div class=\"bifa-gallery-container\">\n <\/p>\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Media Gallery<\/h2>\n<p class=\"bifa-section-subtitle\">Complete collection of BIFA+ visual stories and global achievements<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-search-section\">\n<div class=\"bifa-search-bar\">\n <input type=\"text\" class=\"bifa-search-input\" id=\"searchInput\" placeholder=\"Search by title, photographer, or description...\"><br \/>\n <button class=\"bifa-search-btn\" id=\"searchBtn\">\u041f\u043e\u0438\u0441\u043a<\/button>\n <\/div>\n<div class=\"bifa-sort-controls\">\n<div class=\"bifa-results-count\">\n Showing <span id=\"resultsCount\">0<\/span> media items\n <\/div>\n<p> <select class=\"bifa-sort-dropdown\" id=\"sortSelect\"><option value=\"newest\">Newest First<\/option><option value=\"oldest\">Oldest First<\/option><option value=\"title\">Title A-Z<\/option><option value=\"featured\">Featured First<\/option><\/select>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-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=\"galleryGrid\" 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-pagination-container\" id=\"pagination\"><\/div>\n<p> <\/p>\n<div class=\"bifa-load-more-container\" id=\"loadMoreContainer\" style=\"display: none;\">\n <button class=\"bifa-load-more-btn\" id=\"loadMoreBtn\"><br \/>\n <span>Load More Media<\/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 <\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/main>\n<\/div>\n<p><script>\n\/\/ BIFA+ Gallery Module - \u0422\u041e\u0427\u041d\u0410\u042f \u041a\u041e\u041f\u0418\u042f \u041b\u041e\u0413\u0418\u041a\u0418 \u0418\u0417 \u041f\u0415\u0420\u0412\u041e\u0413\u041e \u0411\u041b\u041e\u041a\u0410 \u0421 \u0420\u0410\u0421\u0428\u0418\u0420\u0415\u041d\u0418\u042f\u041c\u0418\nconst BifaGalleryPage = {\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 filteredItems: [],\n displayedItems: [],\n mediaTypes: {},\n currentFilter: 'all',\n currentSort: 'newest',\n searchQuery: '',\n currentPage: 1,\n itemsPerPage: 12,\n totalPages: 1,\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.setupEventListeners();\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 this.config.mediaTypes = {\n 3: 'photo',\n 4: 'gallery',\n 5: 'video',\n 6: 'infographic'\n };\n }\n },<\/p>\n<p> \/\/ Create background particles - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n createParticles() {\n const container = document.querySelector('.gallery-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 = 'gallery-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 all media items\n async loadMediaItems() {\n const container = document.getElementById('galleryGrid');\n if (!container) return;\n\n try {\n \/\/ Load ALL items for proper filtering\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=100&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> \/\/ Initial filter and display\n this.applyFiltersAndSort();<\/p>\n<p> } catch (error) {\n console.error('Error loading media:', error);\n container.innerHTML = `<\/p>\n<div class=\"bifa-empty-state\">\n<div class=\"bifa-empty-icon\">\ud83d\udcc1<\/div>\n<h3 class=\"bifa-empty-title\">Loading Media Gallery...<\/h3>\n<p class=\"bifa-empty-text\">Please check back in a moment.<\/p>\n<\/p><\/div>\n<p> `;\n }\n },<\/p>\n<p> \/\/ Apply filters and sorting\n applyFiltersAndSort() {\n let filtered = [...this.config.mediaItems];<\/p>\n<p> \/\/ Apply filter\n if (this.config.currentFilter !== 'all') {\n filtered = filtered.filter(item => {\n const type = this.getMediaType(item);\n return type === this.config.currentFilter;\n });\n }<\/p>\n<p> \/\/ Apply search\n if (this.config.searchQuery) {\n const query = this.config.searchQuery.toLowerCase();\n filtered = filtered.filter(item => {\n const title = (item.title?.rendered || '').toLowerCase();\n const metadata = this.getMetadata(item);\n const caption = (metadata.caption || '').toLowerCase();\n const photographer = (metadata.photographer || '').toLowerCase();<\/p>\n<p> return title.includes(query) || \n caption.includes(query) || \n photographer.includes(query);\n });\n }<\/p>\n<p> \/\/ Apply sort\n filtered.sort((a, b) => {\n switch (this.config.currentSort) {\n case 'oldest':\n return new Date(a.date) - new Date(b.date);\n case 'title':\n return (a.title?.rendered || '').localeCompare(b.title?.rendered || '');\n case 'featured':\n const prioA = this.getMetadata(a).priority;\n const prioB = this.getMetadata(b).priority;\n if (prioA === 'featured' && prioB !== 'featured') return -1;\n if (prioA !== 'featured' && prioB === 'featured') return 1;\n return new Date(b.date) - new Date(a.date);\n default: \/\/ newest\n return new Date(b.date) - new Date(a.date);\n }\n });<\/p>\n<p> this.config.filteredItems = filtered;\n this.config.totalPages = Math.ceil(filtered.length \/ this.config.itemsPerPage);\n this.config.currentPage = 1;<\/p>\n<p> \/\/ Update results count\n document.getElementById('resultsCount').textContent = filtered.length;<\/p>\n<p> \/\/ Render first page\n this.renderPage();\n },<\/p>\n<p> \/\/ Render current page\n renderPage() {\n const start = (this.config.currentPage - 1) * this.config.itemsPerPage;\n const end = start + this.config.itemsPerPage;\n const items = this.config.filteredItems.slice(start, end);<\/p>\n<p> this.renderMediaGrid(items);\n this.renderPagination();\n },<\/p>\n<p> \/\/ Get media type from item - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n getMediaType(item) {\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> 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> return 'photo';\n },<\/p>\n<p> \/\/ Get featured image URL - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n getFeaturedImage(item) {\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> if (item.acf && item.acf.featured_image) {\n return item.acf.featured_image;\n }<\/p>\n<p> return 'https:\/\/via.placeholder.com\/600x400\/0A1F44\/D4AF37?text=BIFA+Media';\n },<\/p>\n<p> \/\/ Get metadata from custom fields - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\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> 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> 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> 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 - \u0422\u041e\u0427\u041d\u041e \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n renderMediaGrid(items) {\n const container = document.getElementById('galleryGrid');\n if (!container) return;<\/p>\n<p> if (items.length === 0) {\n container.innerHTML = `<\/p>\n<div class=\"bifa-empty-state\">\n<div class=\"bifa-empty-icon\">\ud83d\udced<\/div>\n<h3 class=\"bifa-empty-title\">No media items found<\/h3>\n<p class=\"bifa-empty-text\">Try adjusting your filters or search query.<\/p>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> container.innerHTML = '';<\/p>\n<p> items.forEach((item, index) => {\n const card = this.createMediaCard(item, index);\n container.appendChild(card);\n });\n },<\/p>\n<p> \/\/ Create media card - \u0422\u041e\u0427\u041d\u041e \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\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> 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> \/\/ Render pagination\n renderPagination() {\n const container = document.getElementById('pagination');\n if (!container) return;<\/p>\n<p> if (this.config.totalPages <= 1) {\n container.innerHTML = '';\n return;\n }\n \n let html = '';\n \n \/\/ Previous button\n html += `<button class=\"bifa-page-btn ${this.config.currentPage === 1 ? 'disabled' : ''}\" \n onclick=\"BifaGalleryPage.goToPage(${this.config.currentPage - 1})\" \n ${this.config.currentPage === 1 ? 'disabled' : ''}>\u2039<\/button>`;<\/p>\n<p> \/\/ Page numbers\n const maxVisible = 7;\n let start = Math.max(1, this.config.currentPage - 3);\n let end = Math.min(this.config.totalPages, start + maxVisible - 1);<\/p>\n<p> if (end - start + 1 < maxVisible) {\n start = Math.max(1, end - maxVisible + 1);\n }\n \n if (start > 1) {\n html += `<button class=\"bifa-page-btn\" onclick=\"BifaGalleryPage.goToPage(1)\">1<\/button>`;\n if (start > 2) {\n html += `<span class=\"bifa-page-dots\">...<\/span>`;\n }\n }<\/p>\n<p> for (let i = start; i <= end; i++) {\n html += `<button class=\"bifa-page-btn ${i === this.config.currentPage ? 'active' : ''}\" \n onclick=\"BifaGalleryPage.goToPage(${i})\">${i}<\/button>`;\n }<\/p>\n<p> if (end < this.config.totalPages) {\n if (end < this.config.totalPages - 1) {\n html += `<span class=\"bifa-page-dots\">...<\/span>`;\n }\n html += `<button class=\"bifa-page-btn\" onclick=\"BifaGalleryPage.goToPage(${this.config.totalPages})\">\n ${this.config.totalPages}<\/button>`;\n }<\/p>\n<p> \/\/ Next button\n html += `<button class=\"bifa-page-btn ${this.config.currentPage === this.config.totalPages ? 'disabled' : ''}\" \n onclick=\"BifaGalleryPage.goToPage(${this.config.currentPage + 1})\"\n ${this.config.currentPage === this.config.totalPages ? 'disabled' : ''}>\u203a<\/button>`;<\/p>\n<p> container.innerHTML = html;\n },<\/p>\n<p> \/\/ Go to page\n goToPage(page) {\n if (page < 1 || page > this.config.totalPages) return;<\/p>\n<p> this.config.currentPage = page;\n this.renderPage();<\/p>\n<p> \/\/ Scroll to top\n window.scrollTo({ top: 0, behavior: 'smooth' });\n },<\/p>\n<p> \/\/ Update statistics - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\n updateStatistics() {\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 event listeners\n setupEventListeners() {\n \/\/ Filter buttons\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');<\/p>\n<p> filterButtons.forEach(button => {\n button.addEventListener('click', () => {\n filterButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');<\/p>\n<p> const filter = button.dataset.filter;\n this.config.currentFilter = filter;<\/p>\n<p> this.applyFiltersAndSort();\n });\n });<\/p>\n<p> \/\/ Search\n const searchInput = document.getElementById('searchInput');\n const searchBtn = document.getElementById('searchBtn');<\/p>\n<p> const performSearch = () => {\n this.config.searchQuery = searchInput.value;\n this.applyFiltersAndSort();\n };<\/p>\n<p> searchBtn?.addEventListener('click', performSearch);\n searchInput?.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') performSearch();\n });<\/p>\n<p> \/\/ Sort\n document.getElementById('sortSelect')?.addEventListener('change', (e) => {\n this.config.currentSort = e.target.value;\n this.applyFiltersAndSort();\n });<\/p>\n<p> \/\/ Load More Button\n document.getElementById('loadMoreBtn')?.addEventListener('click', () => {\n this.loadMore();\n });\n },<\/p>\n<p> \/\/ Load more items\n loadMore() {\n if (this.config.currentPage < this.config.totalPages) {\n this.config.currentPage++;\n this.config.itemsPerPage += 12; \/\/ Increase items shown\n this.renderPage();\n }\n },\n\n \/\/ Animate numbers - \u041a\u0410\u041a \u0412 \u041f\u0415\u0420\u0412\u041e\u041c \u0411\u041b\u041e\u041a\u0415\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 });<\/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 BifaGalleryPage.init();\n });\n} else {\n BifaGalleryPage.init();\n}\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\"\\\"gallery-bg-animation\\\"\">\\n \\n <\\\/div>\\n\\n \\n <main class=\"\\\"bifa-gallery-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-gallery-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\\\"\">Complete collection of BIFA+ visual stories and global achievements<\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-search-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-search-bar\\\"\">\\n <input type=\"\\\"text\\\"\" class=\"\\\"bifa-search-input\\\"\" id=\"\\\"searchInput\\\"\" placeholder=\"\\\"Search\" by title, photographer, or description...\\\">\\n <button class=\"\\\"bifa-search-btn\\\"\" id=\"\\\"searchBtn\\\"\">\u041f\u043e\u0438\u0441\u043a<\\\/button>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-sort-controls\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-results-count\\\"\">\\n Showing <span id=\"\\\"resultsCount\\\"\">0<\\\/span> media items\\n <\\\/div>\\n <select class=\"\\\"bifa-sort-dropdown\\\"\" id=\"\\\"sortSelect\\\"\">\\n<option value=\"\\\"newest\\\"\">Newest First<\\\/option>\\n<option value=\"\\\"oldest\\\"\">Oldest First<\\\/option>\\n<option value=\"\\\"title\\\"\">Title A-Z<\\\/option>\\n<option value=\"\\\"featured\\\"\">Featured First<\\\/option>\\n <\\\/select>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-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=\"\\\"galleryGrid\\\"\" 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-pagination-container\\\"\" id=\"\\\"pagination\\\"\"><\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-load-more-container\\\"\" id=\"\\\"loadMoreContainer\\\"\" style=\"\\\"display:\" none;\\\">\\n <button class=\"\\\"bifa-load-more-btn\\\"\" id=\"\\\"loadMoreBtn\\\"\">\\n <span>Load More Media<\\\/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 <\\\/div>\\n <\\\/main>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Gallery Module - \\u0422\\u041e\\u0427\\u041d\\u0410\\u042f \\u041a\\u041e\\u041f\\u0418\\u042f \\u041b\\u041e\\u0413\\u0418\\u041a\\u0418 \\u0418\\u0417 \\u041f\\u0415\\u0420\\u0412\\u041e\\u0413\\u041e \\u0411\\u041b\\u041e\\u041a\\u0410 \\u0421 \\u0420\\u0410\\u0421\\u0428\\u0418\\u0420\\u0415\\u041d\\u0418\\u042f\\u041c\\u0418\\nconst BifaGalleryPage = {\\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 filteredItems: [],\\n displayedItems: [],\\n mediaTypes: {},\\n currentFilter: 'all',\\n currentSort: 'newest',\\n searchQuery: '',\\n currentPage: 1,\\n itemsPerPage: 12,\\n totalPages: 1,\\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.setupEventListeners();\\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 this.config.mediaTypes = {\\n 3: 'photo',\\n 4: 'gallery',\\n 5: 'video',\\n 6: 'infographic'\\n };\\n }\\n },\\n\\n \\\/\\\/ Create background particles - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n createParticles() {\\n const container = document.querySelector('.gallery-bg-animation');\\n if (!container) return;\\n\\n for (let i = 0; i < 20; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'gallery-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 all media items\\n async loadMediaItems() {\\n const container = document.getElementById('galleryGrid');\\n if (!container) return;\\n\\n try {\\n \\\/\\\/ Load ALL items for proper filtering\\n const response = await fetch(this.config.apiUrl + '?_embed&per_page=100&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 \\\/\\\/ Initial filter and display\\n this.applyFiltersAndSort();\\n \\n } catch (error) {\\n console.error('Error loading media:', error);\\n container.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-empty-state\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-empty-icon\\\"\">\\ud83d\\udcc1<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-empty-title\\\"\">Loading Media Gallery...<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-empty-text\\\"\">Please check back in a moment.<\\\/p>\\n <\\\/div>\\n `;\\n }\\n },\\n\\n \\\/\\\/ Apply filters and sorting\\n applyFiltersAndSort() {\\n let filtered = [...this.config.mediaItems];\\n \\n \\\/\\\/ Apply filter\\n if (this.config.currentFilter !== 'all') {\\n filtered = filtered.filter(item => {\\n const type = this.getMediaType(item);\\n return type === this.config.currentFilter;\\n });\\n }\\n \\n \\\/\\\/ Apply search\\n if (this.config.searchQuery) {\\n const query = this.config.searchQuery.toLowerCase();\\n filtered = filtered.filter(item => {\\n const title = (item.title?.rendered || '').toLowerCase();\\n const metadata = this.getMetadata(item);\\n const caption = (metadata.caption || '').toLowerCase();\\n const photographer = (metadata.photographer || '').toLowerCase();\\n \\n return title.includes(query) || \\n caption.includes(query) || \\n photographer.includes(query);\\n });\\n }\\n \\n \\\/\\\/ Apply sort\\n filtered.sort((a, b) => {\\n switch (this.config.currentSort) {\\n case 'oldest':\\n return new Date(a.date) - new Date(b.date);\\n case 'title':\\n return (a.title?.rendered || '').localeCompare(b.title?.rendered || '');\\n case 'featured':\\n const prioA = this.getMetadata(a).priority;\\n const prioB = this.getMetadata(b).priority;\\n if (prioA === 'featured' && prioB !== 'featured') return -1;\\n if (prioA !== 'featured' && prioB === 'featured') return 1;\\n return new Date(b.date) - new Date(a.date);\\n default: \\\/\\\/ newest\\n return new Date(b.date) - new Date(a.date);\\n }\\n });\\n \\n this.config.filteredItems = filtered;\\n this.config.totalPages = Math.ceil(filtered.length \\\/ this.config.itemsPerPage);\\n this.config.currentPage = 1;\\n \\n \\\/\\\/ Update results count\\n document.getElementById('resultsCount').textContent = filtered.length;\\n \\n \\\/\\\/ Render first page\\n this.renderPage();\\n },\\n\\n \\\/\\\/ Render current page\\n renderPage() {\\n const start = (this.config.currentPage - 1) * this.config.itemsPerPage;\\n const end = start + this.config.itemsPerPage;\\n const items = this.config.filteredItems.slice(start, end);\\n \\n this.renderMediaGrid(items);\\n this.renderPagination();\\n },\\n\\n \\\/\\\/ Get media type from item - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n getMediaType(item) {\\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 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 return 'photo';\\n },\\n\\n \\\/\\\/ Get featured image URL - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n getFeaturedImage(item) {\\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 if (item.acf && item.acf.featured_image) {\\n return item.acf.featured_image;\\n }\\n \\n return 'https:\\\/\\\/via.placeholder.com\\\/600x400\\\/0A1F44\\\/D4AF37?text=BIFA+Media';\\n },\\n\\n \\\/\\\/ Get metadata from custom fields - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n getMetadata(item) {\\n const meta = {\\n caption: '',\\n photographer: 'BIFA+ Team',\\n location: '',\\n priority: 'normal',\\n date: item.date\\n };\\n \\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 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 if (!meta.caption && item.excerpt) {\\n meta.caption = item.excerpt.rendered.replace(\\\/<[^>]*>\\\/g, '');\\n }\\n \\n return meta;\\n },\\n\\n \\\/\\\/ Render media grid - \\u0422\\u041e\\u0427\\u041d\\u041e \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n renderMediaGrid(items) {\\n const container = document.getElementById('galleryGrid');\\n if (!container) return;\\n\\n if (items.length === 0) {\\n container.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-empty-state\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-empty-icon\\\"\">\\ud83d\\udced<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-empty-title\\\"\">No media items found<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-empty-text\\\"\">Try adjusting your filters or search query.<\\\/p>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n container.innerHTML = '';\\n\\n items.forEach((item, index) => {\\n const card = this.createMediaCard(item, index);\\n container.appendChild(card);\\n });\\n },\\n\\n \\\/\\\/ Create media card - \\u0422\\u041e\\u0427\\u041d\\u041e \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\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 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 \\\/\\\/ Render pagination\\n renderPagination() {\\n const container = document.getElementById('pagination');\\n if (!container) return;\\n \\n if (this.config.totalPages <= 1) {\\n container.innerHTML = '';\\n return;\\n }\\n \\n let html = '';\\n \\n \\\/\\\/ Previous button\\n html += `<button class=\"\\\"bifa-page-btn\" ${this.config.currentpage =\"==\" 1 ? 'disabled' : ''}\\\" \\n onclick=\"\\\"BifaGalleryPage.goToPage(${this.config.currentPage\" - 1})\\\" ''}>\\u2039<\\\/button>`;\\n \\n \\\/\\\/ Page numbers\\n const maxVisible = 7;\\n let start = Math.max(1, this.config.currentPage - 3);\\n let end = Math.min(this.config.totalPages, start + maxVisible - 1);\\n \\n if (end - start + 1 < maxVisible) {\\n start = Math.max(1, end - maxVisible + 1);\\n }\\n \\n if (start > 1) {\\n html += `<button class=\"\\\"bifa-page-btn\\\"\" onclick=\"\\\"BifaGalleryPage.goToPage(1)\\\"\">1<\\\/button>`;\\n if (start > 2) {\\n html += `<span class=\"\\\"bifa-page-dots\\\"\">...<\\\/span>`;\\n }\\n }\\n \\n for (let i = start; i <= end; i++) {\\n html += `<button class=\"\\\"bifa-page-btn\" ${i =\"==\" this.config.currentpage ? 'active' : ''}\\\" \\n onclick=\"\\\"BifaGalleryPage.goToPage(${i})\\\"\">${i}<\\\/button>`;\\n }\\n \\n if (end < this.config.totalPages) {\\n if (end < this.config.totalPages - 1) {\\n html += `<span class=\"\\\"bifa-page-dots\\\"\">...<\\\/span>`;\\n }\\n html += `<button class=\"\\\"bifa-page-btn\\\"\" onclick=\"\\\"BifaGalleryPage.goToPage(${this.config.totalPages})\\\"\">\\n ${this.config.totalPages}<\\\/button>`;\\n }\\n \\n \\\/\\\/ Next button\\n html += `<button class=\"\\\"bifa-page-btn\" ${this.config.currentpage =\"==\" this.config.totalpages ? 'disabled' : ''}\\\" \\n onclick=\"\\\"BifaGalleryPage.goToPage(${this.config.currentPage\" + 1})\\\"\\n ''}>\\u203a<\\\/button>`;\\n \\n container.innerHTML = html;\\n },\\n\\n \\\/\\\/ Go to page\\n goToPage(page) {\\n if (page < 1 || page > this.config.totalPages) return;\\n \\n this.config.currentPage = page;\\n this.renderPage();\\n \\n \\\/\\\/ Scroll to top\\n window.scrollTo({ top: 0, behavior: 'smooth' });\\n },\\n\\n \\\/\\\/ Update statistics - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\n updateStatistics() {\\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 event listeners\\n setupEventListeners() {\\n \\\/\\\/ Filter buttons\\n const filterButtons = document.querySelectorAll('.bifa-filter-btn');\\n \\n filterButtons.forEach(button => {\\n button.addEventListener('click', () => {\\n filterButtons.forEach(btn => btn.classList.remove('active'));\\n button.classList.add('active');\\n \\n const filter = button.dataset.filter;\\n this.config.currentFilter = filter;\\n \\n this.applyFiltersAndSort();\\n });\\n });\\n \\n \\\/\\\/ Search\\n const searchInput = document.getElementById('searchInput');\\n const searchBtn = document.getElementById('searchBtn');\\n \\n const performSearch = () => {\\n this.config.searchQuery = searchInput.value;\\n this.applyFiltersAndSort();\\n };\\n \\n searchBtn?.addEventListener('click', performSearch);\\n searchInput?.addEventListener('keypress', (e) => {\\n if (e.key === 'Enter') performSearch();\\n });\\n \\n \\\/\\\/ Sort\\n document.getElementById('sortSelect')?.addEventListener('change', (e) => {\\n this.config.currentSort = e.target.value;\\n this.applyFiltersAndSort();\\n });\\n \\n \\\/\\\/ Load More Button\\n document.getElementById('loadMoreBtn')?.addEventListener('click', () => {\\n this.loadMore();\\n });\\n },\\n\\n \\\/\\\/ Load more items\\n loadMore() {\\n if (this.config.currentPage < this.config.totalPages) {\\n this.config.currentPage++;\\n this.config.itemsPerPage += 12; \\\/\\\/ Increase items shown\\n this.renderPage();\\n }\\n },\\n\\n \\\/\\\/ Animate numbers - \\u041a\\u0410\\u041a \\u0412 \\u041f\\u0415\\u0420\\u0412\\u041e\\u041c \\u0411\\u041b\\u041e\\u041a\\u0415\\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 BifaGalleryPage.init();\\n });\\n} else {\\n BifaGalleryPage.init();\\n}\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]}]}]}],\"version\":\"4.5.28\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ Media Gallery – All Collections Media Gallery Complete collection of BIFA+ visual stories and global achievements Search Showing 0 media items Newest FirstOldest FirstTitle A-ZFeatured First All Media Photos Videos Galleries Infographics \ud83d\udcf8 0 Total Media \ud83c\udfa5 0 Videos \ud83d\uddbc\ufe0f 0 Photo Galleries \ud83d\udcca 0 Infographics Load More Media<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-505","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/505","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=505"}],"version-history":[{"count":55,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/505\/revisions"}],"predecessor-version":[{"id":1304,"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/pages\/505\/revisions\/1304"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/ru\/wp-json\/wp\/v2\/media?parent=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}