Faculty Sections<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Merriweather:wght@700&family=Open+Sans:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --red: #D32F2F;\r\n --navy: #1A3557;\r\n --navy-light: #1F446B;\r\n --bg: #F3F5F7;\r\n --white: #fff;\r\n --shadow: 0 4px 18px rgba(26,53,87,0.10);\r\n }\r\n\r\n body { font-family: 'Open Sans', sans-serif; background: #eef0f3; }\r\n\r\n .faculty-section {\r\n background: var(--bg);\r\n padding: 56px 0 64px;\r\n }\r\n\r\n .faculty-section:nth-child(even) {\r\n background: #e8ebef;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n padding: 0 20px;\r\n }\r\n\r\n .section-header h2 {\r\n font-family: 'Merriweather', serif;\r\n color: var(--navy);\r\n font-size: 2rem;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .section-header h2 span { color: var(--red); }\r\n\r\n .header-rule {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 10px;\r\n }\r\n\r\n .header-rule::before,\r\n .header-rule::after {\r\n content: '';\r\n width: 60px;\r\n height: 2px;\r\n background: var(--red);\r\n border-radius: 2px;\r\n }\r\n\r\n .header-rule span {\r\n width: 8px;\r\n height: 8px;\r\n background: var(--red);\r\n border-radius: 50%;\r\n display: block;\r\n }\r\n\r\n \/* GRID (5 per row) *\/\r\n .faculty-grid {\r\n display: grid;\r\n grid-template-columns: repeat(5, minmax(0, 200px));\r\n gap: 24px;\r\n justify-content: center;\r\n align-items: stretch;\r\n padding: 16px 24px 20px;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .faculty-grid { grid-template-columns: repeat(4, minmax(0, 200px)); }\r\n }\r\n @media (max-width: 900px) {\r\n .faculty-grid { grid-template-columns: repeat(3, minmax(0, 200px)); }\r\n }\r\n @media (max-width: 680px) {\r\n .faculty-grid { grid-template-columns: repeat(2, minmax(0, 160px)); }\r\n }\r\n @media (max-width: 440px) {\r\n .faculty-grid { grid-template-columns: repeat(1, minmax(0, 220px)); }\r\n }\r\n\r\n \/* Hidden (not-yet-loaded) cards *\/\r\n .faculty-card.is-hidden { display: none; }\r\n\r\n \/* LOAD-MORE \/ COLLAPSE CONTROLS *\/\r\n .faculty-controls {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 8px;\r\n min-height: 54px;\r\n }\r\n\r\n .load-btn {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 6px 14px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 2px;\r\n color: var(--red);\r\n transition: transform 0.2s ease, opacity 0.2s ease;\r\n }\r\n\r\n .load-btn[hidden] { display: none; }\r\n .load-btn:hover { transform: scale(1.12); }\r\n\r\n .load-btn svg {\r\n width: 46px;\r\n height: 46px;\r\n display: block;\r\n }\r\n\r\n .load-btn .load-label {\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n letter-spacing: 0.4px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* Double-chevron bounce animation *\/\r\n .load-btn.more svg { animation: chevBounce 1.4s ease-in-out infinite; }\r\n .load-btn.less svg { animation: chevBounceUp 1.4s ease-in-out infinite; }\r\n\r\n @keyframes chevBounce {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(6px); }\r\n }\r\n @keyframes chevBounceUp {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-6px); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .load-btn.more svg, .load-btn.less svg { animation: none; }\r\n }\r\n\r\n \/* CARD *\/\r\n .faculty-card {\r\n width: 200px;\r\n min-width: 200px;\r\n max-width: 200px;\r\n background: var(--white);\r\n border-radius: 14px;\r\n padding: 28px 16px 22px;\r\n text-align: center;\r\n cursor: pointer;\r\n box-shadow: var(--shadow);\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n border-top: 4px solid transparent;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n }\r\n\r\n .faculty-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 12px 32px rgba(26,53,87,0.15);\r\n border-top-color: var(--red);\r\n }\r\n\r\n .faculty-card .avatar-wrap {\r\n width: 84px;\r\n height: 84px;\r\n border-radius: 50%;\r\n margin: 0 auto 14px;\r\n padding: 3px;\r\n background: linear-gradient(135deg, var(--red), var(--navy));\r\n }\r\n\r\n .faculty-card img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n border: 3px solid var(--white);\r\n display: block;\r\n }\r\n\r\n .faculty-card h4 {\r\n color: var(--navy);\r\n font-size: 0.88rem;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n font-family: 'Open Sans', sans-serif;\r\n line-height: 1.3;\r\n width: 100%;\r\n \/* Wrap long names onto up to 2 lines (no \"...\"), reserve the space so\r\n every card stays the same height *\/\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n min-height: calc(0.88rem * 1.3 * 2);\r\n }\r\n\r\n .faculty-card .badge {\r\n display: inline-block;\r\n background: #FEE8E8;\r\n color: var(--red);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n padding: 3px 10px;\r\n border-radius: 20px;\r\n letter-spacing: 0.3px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: 100%;\r\n }\r\n\r\n \/* POPUP *\/\r\n .teacher-popup {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(10, 20, 40, 0.65);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 999;\r\n backdrop-filter: blur(3px);\r\n animation: fadeIn 0.2s ease;\r\n }\r\n\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n\r\n .teacher-popup.active { display: flex; }\r\n\r\n .popup-box {\r\n background: var(--white);\r\n max-width: 420px;\r\n width: 90%;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n box-shadow: 0 24px 60px rgba(10,20,40,0.25);\r\n animation: slideUp 0.25s ease;\r\n }\r\n\r\n @keyframes slideUp {\r\n from { transform: translateY(24px); opacity: 0; }\r\n to { transform: translateY(0); opacity: 1; }\r\n }\r\n\r\n .popup-banner {\r\n background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);\r\n padding: 32px 20px 20px;\r\n text-align: center;\r\n }\r\n\r\n .popup-avatar-wrap {\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 50%;\r\n margin: 0 auto 14px;\r\n padding: 3px;\r\n background: linear-gradient(135deg, var(--red), #ff6b6b);\r\n }\r\n\r\n .popup-box img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n border: 4px solid var(--white);\r\n display: block;\r\n }\r\n\r\n .popup-box h3 {\r\n color: var(--white);\r\n font-family: 'Merriweather', serif;\r\n font-size: 1.15rem;\r\n }\r\n\r\n .popup-body { padding: 24px 28px 28px; text-align: center; }\r\n\r\n .popup-designation {\r\n display: inline-block;\r\n background: var(--red);\r\n color: var(--white);\r\n font-size: 0.78rem;\r\n font-weight: 700;\r\n padding: 4px 14px;\r\n border-radius: 20px;\r\n margin-bottom: 14px;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .popup-description {\r\n color: #555;\r\n font-size: 0.9rem;\r\n line-height: 1.7;\r\n }\r\n\r\n .popup-close {\r\n position: absolute;\r\n right: 14px;\r\n top: 14px;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.2);\r\n border: none;\r\n color: #fff;\r\n font-size: 18px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1;\r\n transition: background 0.2s;\r\n }\r\n\r\n .popup-close:hover { background: var(--red); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"globalPopup\" class=\"teacher-popup\">\r\n <div class=\"popup-box\">\r\n <button class=\"popup-close\" id=\"globalPopupClose\">×<\/button>\r\n <div class=\"popup-banner\">\r\n <div class=\"popup-avatar-wrap\">\r\n <img decoding=\"async\" id=\"popupImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <h3 id=\"popupName\"><\/h3>\r\n <\/div>\r\n <div class=\"popup-body\">\r\n <span id=\"popupDesignation\" class=\"popup-designation\"><\/span>\r\n <p id=\"popupDescription\" class=\"popup-description\"><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"app\"><\/div>\r\n\r\n<script>\r\n\/* ======================================================\r\n \u270f\ufe0f FACULTY DATA \u2014 Add \/ remove entries here easily\r\n Each section has: title, titleHighlight, and members[]\r\n Each member: name, designation, image, description\r\n====================================================== *\/\r\nconst FACULTY_DATA = {\r\n\r\n \/* \u2500\u2500 SECTION 1: Coordinators \u2500\u2500 *\/\r\n nonTeachingStaff: {\r\n title: \"Non-Teaching\",\r\n titleHighlight: \"Staff class III\",\r\n members: [\r\n {\r\n name: \"Shri. Bharat Shinde\",\r\n designation: \"O.S.\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Bharat Shinde serves as the Office Superintendent (O.S.), overseeing administrative operations.\"\r\n },\r\n {\r\n name: \"Smt. Meera Phansekar\",\r\n designation: \"Head Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Meera Phansekar serves as the Head Clerk, managing office documentation and staff coordination.\"\r\n },\r\n {\r\n name: \"Shri. Satish Waghmare\",\r\n designation: \"Sr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Satish Waghmare serves as a Senior Clerk, assisting in high-level administrative tasks.\"\r\n },\r\n {\r\n name: \"Shri. Vijay Bane\",\r\n designation: \"Sr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vijay Bane serves as a Senior Clerk, supporting the institution's clerical operations.\"\r\n },\r\n {\r\n name: \"Shri. Santosh Jumare\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Santosh Jumare serves as a Junior Clerk, handling daily office records and student queries.\"\r\n },\r\n {\r\n name: \"Smt. Viprada Gotad\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Viprada Gotad serves as a Junior Clerk, managing administrative paperwork and data entry.\"\r\n },\r\n {\r\n name: \"Shri. Dilip Lavate\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Dilip Lavate serves as a Junior Clerk, providing essential clerical support to the department.\"\r\n },\r\n {\r\n name: \"Shri. Vilas Kirloskar\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vilas Kirloskar serves as a Junior Clerk, assisting in maintaining institutional records.\"\r\n },\r\n {\r\n name: \"Shri. Santosh Ghadshi\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Santosh Ghadshi serves as a Junior Clerk, supporting the day-to-day office workflow.\"\r\n },\r\n {\r\n name: \"Shri. Varad Joshi\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Varad Joshi serves as a Junior Clerk, managing clerical tasks and administrative services.\"\r\n }\r\n ]\r\n },\r\n\r\n administrativeStaff: {\r\n title: \"Administrative\",\r\n titleHighlight: \"Staff\",\r\n members: [\r\n {\r\n name: \"Smt. Vrunda Bhovar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Vrunda Bhovar serves as a Clerk, handling administrative and documentation tasks.\"\r\n },\r\n {\r\n name: \"Shri. Vinod Shegar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vinod Shegar serves as a Clerk, supporting the institution's administrative workflow.\"\r\n },\r\n {\r\n name: \"Smt. Arpita Varvatkar\",\r\n designation: \"Asst. Librarian\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Arpita Varvatkar serves as Asst. Librarian, managing library resources and services.\"\r\n },\r\n {\r\n name: \"Smt. Suvarna Gaikwad\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Suvarna Gaikwad serves as a Clerk, assisting in clerical and office management.\"\r\n },\r\n {\r\n name: \"Shri. Prabhakar Kotian\",\r\n designation: \"Lab Asst.\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prabhakar Kotian serves as a Lab Asst., maintaining laboratory equipment and facilities.\"\r\n },\r\n {\r\n name: \"Smt. Swarali Mirashi\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Swarali Mirashi serves as a Clerk, managing office records and administrative duties.\"\r\n },\r\n {\r\n name: \"Smt. Deepali Daroge\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Deepali Daroge serves as a Clerk, facilitating daily administrative operations.\"\r\n },\r\n {\r\n name: \"Smt. Nayan Sakpal\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Nayan Sakpal serves as a Clerk, providing essential clerical support.\"\r\n },\r\n {\r\n name: \"Smt. Gargi Katvi\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Gargi Katvi serves as a Clerk, handling departmental documentation.\"\r\n },\r\n {\r\n name: \"Smt. Aparna Divekar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Aparna Divekar serves as a Clerk, assisting in administrative functions.\"\r\n },\r\n {\r\n name: \"Shri. Kiran Kadam\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Kiran Kadam serves as a Clerk, managing office records and correspondence.\"\r\n },\r\n {\r\n name: \"Smt. Rasika Kale\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Rasika Kale serves as a Clerk, supporting the administrative staff.\"\r\n },\r\n {\r\n name: \"Shri. Aman Patil\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Aman Patil serves as a Clerk, assisting in clerical operations.\"\r\n },\r\n {\r\n name: \"Smt. Yogini Patole\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Yogini Patole serves as a Clerk, handling office tasks and administration.\"\r\n },\r\n {\r\n name: \"Shri. Gururaj Chitnis\",\r\n designation: \"Asst. Librarian\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Gururaj Chitnis serves as a Asst. Librarian\"\r\n },\r\n \r\n {\r\n name: \"Shri. Shreyas Lohar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Shreyas Lohar serves as a Clerk, assisting in administrative management.\"\r\n },\r\n {\r\n name: \"Shri. Hemant Rane\",\r\n designation: \"Lab Asst.\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Hemant Rane serves as a Lab Asst.\"\r\n },\r\n ]\r\n },\r\n\r\n nonTeachingStaffClassIV: {\r\n title: \"Non-Teaching Staff\",\r\n titleHighlight: \"Class IV\",\r\n members: [\r\n {\r\n name: \"Shri. Shailesh Mohite\",\r\n designation: \"Lib. Attendant\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Shailesh Mohite serves as a Library Attendant, assisting in the maintenance and organization of library resources.\"\r\n },\r\n {\r\n name: \"Shri. Rushikesh Mane\",\r\n designation: \"Lib. Attendant\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Rushikesh Mane serves as a Library Attendant, supporting library operations and student services.\"\r\n },\r\n {\r\n name: \"Shri. Machhindra Sable\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Machhindra Sable provides essential support services as a Peon to ensure smooth daily operations.\"\r\n },\r\n {\r\n name: \"Shri. Mahendra Talpade\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Mahendra Talpade serves as a Peon, assisting with departmental tasks and campus maintenance.\"\r\n },\r\n {\r\n name: \"Shri. Sachin Kudalkar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Sachin Kudalkar supports the institution's logistical and administrative needs as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Mukesh Bhojaiya\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Mukesh Bhojaiya serves as a Peon, providing necessary assistance to staff and faculty.\"\r\n },\r\n {\r\n name: \"Shri. Prakash Shedekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prakash Shedekar assists in the daily functioning of the office and campus as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Naresh Gurav\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Naresh Gurav serves as a Peon, supporting the institution's general service requirements.\"\r\n },\r\n {\r\n name: \"Shri. Girish Bhadwalkar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Girish Bhadwalkar provides reliable support as a Peon for various departmental needs.\"\r\n },\r\n {\r\n name: \"Shri. Atish Salve\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Atish Salve serves as a Peon, assisting in the upkeep and logistical tasks of the institution.\"\r\n },\r\n {\r\n name: \"Shri. Nitin Ipte\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Nitin Ipte supports administrative and academic staff in his role as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Sanjay Salvi\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Sanjay Salvi provides essential service and support across the campus as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Randeep Phatak\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Randeep Phatak serves as a Peon, facilitating the smooth movement of files and resources.\"\r\n },\r\n {\r\n name: \"Shri. Jagdish Bhangire\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Jagdish Bhangire assists with campus operations and staff requirements as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Prashant More\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prashant More serves as a Peon, ensuring the efficient handling of daily manual tasks.\"\r\n },\r\n {\r\n name: \"Shri. Chetan Kadam\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Chetan Kadam provides essential support to the office and faculty as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Pravin Hindlekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Pravin Hindlekar serves as a Peon, assisting in the general maintenance of college facilities.\"\r\n },\r\n {\r\n name: \"Shri. Ashwin Sonawane\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Ashwin Sonawane supports departmental functions and logistics in his role as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Rakesh Waghela\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Rakesh Waghela provides dedicated service as a Peon for the institution's daily needs.\"\r\n },\r\n {\r\n name: \"Shri. Shankar Varkhade\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Shankar Varkhade serves as a Peon, assisting with office-related tasks and campus support.\"\r\n },\r\n {\r\n name: \"Shri. Tejas Gurav\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Tejas Gurav supports the smooth running of campus activities as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Bharat Solanki\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Bharat Solanki provides necessary manual and logistical assistance as a Peon.\"\r\n },\r\n {\r\n name: \"Smt. Laxmi Mahida\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Laxmi Mahida serves as a Peon, supporting the institution's daily operational and service requirements.\"\r\n },\r\n {\r\n name: \"Shri. Avinash Sonawane\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Avinash Sonawane assists in the upkeep and smooth functioning of the department as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Omkar Jedhe\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Omkar Jedhe provides essential support services to faculty and staff as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Vishal Ghanekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vishal Ghanekar serves as a Peon, handling various manual and administrative support tasks.\"\r\n },\r\n {\r\n name: \"Shri. Prashant Lad\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prashant Lad supports the institution's logistical needs and daily operations as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Mandar Sawant\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Mandar Sawant serves as a Peon, providing vital support for the campus and administrative office.\"\r\n },\r\n {\r\n name: \"Shri. Rahul Narvekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Rahul Narvekar serves as a Peon, providing vital support for the campus and administrative office.\"\r\n },\r\n {\r\n name: \"Shri. Prathmesh Jadhav\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prathmesh Jadhav serves as a Peon, providing vital support for the campus and administrative office.\"\r\n }\r\n ]\r\n },\r\n\r\n};\r\n\/* ====================================================== *\/\r\n\r\n\r\n\/* \u2500\u2500 Build HTML for one section \u2500\u2500 *\/\r\nfunction buildSection(key, data, index) {\r\n const sectionEl = document.createElement('section');\r\n sectionEl.className = 'faculty-section';\r\n sectionEl.dataset.sectionKey = key;\r\n\r\n const PAGE_SIZE = 5;\r\n\r\n const cardsHtml = data.members.map((m, i) => `\r\n <div class=\"faculty-card${i >= PAGE_SIZE ? ' is-hidden' : ''}\"\r\n data-name=\"${escHtml(m.name)}\"\r\n data-designation=\"${escHtml(m.designation)}\"\r\n data-image=\"${escHtml(m.image)}\"\r\n data-description=\"${escHtml(m.description)}\">\r\n <div class=\"avatar-wrap\"><img decoding=\"async\" src=\"${escHtml(m.image)}\" alt=\"\"><\/div>\r\n <h4>${escHtml(m.name)}<\/h4>\r\n <span class=\"badge\">${escHtml(m.designation)}<\/span>\r\n <\/div>\r\n `).join('');\r\n\r\n const chevDown = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M4 6l8 7 8-7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <path d=\"M4 12l8 7 8-7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>`;\r\n const chevUp = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M4 18l8-7 8 7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <path d=\"M4 12l8-7 8 7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>`;\r\n\r\n const controlsHtml = data.members.length > PAGE_SIZE\r\n ? `<div class=\"faculty-controls\">\r\n <button type=\"button\" class=\"load-btn more\" data-more>${chevDown}<span class=\"load-label\">Load More<\/span><\/button>\r\n <button type=\"button\" class=\"load-btn less\" data-less hidden>${chevUp}<span class=\"load-label\">Show Less<\/span><\/button>\r\n <\/div>`\r\n : '';\r\n\r\n sectionEl.innerHTML = `\r\n <div class=\"section-header\">\r\n <h2>${data.title} <span>${data.titleHighlight}<\/span><\/h2>\r\n <div class=\"header-rule\"><span><\/span><\/div>\r\n <\/div>\r\n <div class=\"faculty-grid\" data-grid data-page=\"${PAGE_SIZE}\">${cardsHtml}<\/div>\r\n ${controlsHtml}\r\n `;\r\n\r\n return sectionEl;\r\n}\r\n\r\nfunction escHtml(str) {\r\n return String(str)\r\n .replace(\/&\/g, '&')\r\n .replace(\/\"\/g, '"')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>');\r\n}\r\n\r\n\/* \u2500\u2500 Render all sections \u2500\u2500 *\/\r\nconst app = document.getElementById('app');\r\nObject.entries(FACULTY_DATA).forEach(([key, data], index) => {\r\n app.appendChild(buildSection(key, data, index));\r\n});\r\n\r\n\r\n\/* \u2500\u2500 Global Popup \u2500\u2500 *\/\r\nconst popup = document.getElementById('globalPopup');\r\nconst popupClose = document.getElementById('globalPopupClose');\r\nlet isPopupOpen = false;\r\n\r\nfunction openPopup(card) {\r\n document.getElementById('popupImage').src = card.dataset.image;\r\n document.getElementById('popupImage').alt = '';\r\n document.getElementById('popupName').innerText = card.dataset.name;\r\n document.getElementById('popupDesignation').innerText = card.dataset.designation;\r\n document.getElementById('popupDescription').innerText = card.dataset.description;\r\n popup.classList.add('active');\r\n isPopupOpen = true;\r\n}\r\n\r\nfunction closePopup() {\r\n popup.classList.remove('active');\r\n isPopupOpen = false;\r\n}\r\n\r\npopupClose.onclick = closePopup;\r\npopup.addEventListener('click', e => { if (e.target === popup) closePopup(); });\r\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') closePopup(); });\r\n\r\n\r\n\/* \u2500\u2500 Per-section paginated grid (Load More \/ Show Less) \u2500\u2500 *\/\r\nfunction initGrid(grid) {\r\n const section = grid.closest('.faculty-section');\r\n const pageSize = parseInt(grid.dataset.page, 10) || 5;\r\n const cards = Array.from(grid.querySelectorAll('.faculty-card'));\r\n const moreBtn = section.querySelector('[data-more]');\r\n const lessBtn = section.querySelector('[data-less]');\r\n\r\n let visible = Math.min(pageSize, cards.length);\r\n\r\n function render() {\r\n cards.forEach((card, i) => {\r\n card.classList.toggle('is-hidden', i >= visible);\r\n });\r\n const allShown = visible >= cards.length;\r\n if (moreBtn) moreBtn.hidden = allShown;\r\n if (lessBtn) lessBtn.hidden = !allShown;\r\n }\r\n\r\n if (moreBtn) {\r\n moreBtn.addEventListener('click', () => {\r\n visible = Math.min(visible + pageSize, cards.length);\r\n render();\r\n });\r\n }\r\n\r\n if (lessBtn) {\r\n lessBtn.addEventListener('click', () => {\r\n \/\/ Scroll smoothly to the top of the section FIRST (while all cards are\r\n \/\/ still visible so the page height doesn't jump), then collapse back to\r\n \/\/ the first page after the scroll has settled.\r\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n setTimeout(() => {\r\n visible = Math.min(pageSize, cards.length);\r\n render();\r\n }, 450);\r\n });\r\n }\r\n\r\n \/* Card click \u2192 popup *\/\r\n grid.addEventListener('click', e => {\r\n const card = e.target.closest('.faculty-card');\r\n if (card) openPopup(card);\r\n });\r\n\r\n render();\r\n}\r\n\r\n\/* Init every grid on page *\/\r\ndocument.querySelectorAll('[data-grid]').forEach(initGrid);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Faculty Sections ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17691","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages\/17691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/comments?post=17691"}],"version-history":[{"count":37,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages\/17691\/revisions"}],"predecessor-version":[{"id":19473,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages\/17691\/revisions\/19473"}],"wp:attachment":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/media?parent=17691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Faculty Sections<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Merriweather:wght@700&family=Open+Sans:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --red: #D32F2F;\r\n --navy: #1A3557;\r\n --navy-light: #1F446B;\r\n --bg: #F3F5F7;\r\n --white: #fff;\r\n --shadow: 0 4px 18px rgba(26,53,87,0.10);\r\n }\r\n\r\n body { font-family: 'Open Sans', sans-serif; background: #eef0f3; }\r\n\r\n .faculty-section {\r\n background: var(--bg);\r\n padding: 56px 0 64px;\r\n }\r\n\r\n .faculty-section:nth-child(even) {\r\n background: #e8ebef;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n padding: 0 20px;\r\n }\r\n\r\n .section-header h2 {\r\n font-family: 'Merriweather', serif;\r\n color: var(--navy);\r\n font-size: 2rem;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .section-header h2 span { color: var(--red); }\r\n\r\n .header-rule {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 10px;\r\n }\r\n\r\n .header-rule::before,\r\n .header-rule::after {\r\n content: '';\r\n width: 60px;\r\n height: 2px;\r\n background: var(--red);\r\n border-radius: 2px;\r\n }\r\n\r\n .header-rule span {\r\n width: 8px;\r\n height: 8px;\r\n background: var(--red);\r\n border-radius: 50%;\r\n display: block;\r\n }\r\n\r\n \/* GRID (5 per row) *\/\r\n .faculty-grid {\r\n display: grid;\r\n grid-template-columns: repeat(5, minmax(0, 200px));\r\n gap: 24px;\r\n justify-content: center;\r\n align-items: stretch;\r\n padding: 16px 24px 20px;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .faculty-grid { grid-template-columns: repeat(4, minmax(0, 200px)); }\r\n }\r\n @media (max-width: 900px) {\r\n .faculty-grid { grid-template-columns: repeat(3, minmax(0, 200px)); }\r\n }\r\n @media (max-width: 680px) {\r\n .faculty-grid { grid-template-columns: repeat(2, minmax(0, 160px)); }\r\n }\r\n @media (max-width: 440px) {\r\n .faculty-grid { grid-template-columns: repeat(1, minmax(0, 220px)); }\r\n }\r\n\r\n \/* Hidden (not-yet-loaded) cards *\/\r\n .faculty-card.is-hidden { display: none; }\r\n\r\n \/* LOAD-MORE \/ COLLAPSE CONTROLS *\/\r\n .faculty-controls {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 8px;\r\n min-height: 54px;\r\n }\r\n\r\n .load-btn {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 6px 14px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 2px;\r\n color: var(--red);\r\n transition: transform 0.2s ease, opacity 0.2s ease;\r\n }\r\n\r\n .load-btn[hidden] { display: none; }\r\n .load-btn:hover { transform: scale(1.12); }\r\n\r\n .load-btn svg {\r\n width: 46px;\r\n height: 46px;\r\n display: block;\r\n }\r\n\r\n .load-btn .load-label {\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n letter-spacing: 0.4px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* Double-chevron bounce animation *\/\r\n .load-btn.more svg { animation: chevBounce 1.4s ease-in-out infinite; }\r\n .load-btn.less svg { animation: chevBounceUp 1.4s ease-in-out infinite; }\r\n\r\n @keyframes chevBounce {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(6px); }\r\n }\r\n @keyframes chevBounceUp {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-6px); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .load-btn.more svg, .load-btn.less svg { animation: none; }\r\n }\r\n\r\n \/* CARD *\/\r\n .faculty-card {\r\n width: 200px;\r\n min-width: 200px;\r\n max-width: 200px;\r\n background: var(--white);\r\n border-radius: 14px;\r\n padding: 28px 16px 22px;\r\n text-align: center;\r\n cursor: pointer;\r\n box-shadow: var(--shadow);\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n border-top: 4px solid transparent;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n }\r\n\r\n .faculty-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 12px 32px rgba(26,53,87,0.15);\r\n border-top-color: var(--red);\r\n }\r\n\r\n .faculty-card .avatar-wrap {\r\n width: 84px;\r\n height: 84px;\r\n border-radius: 50%;\r\n margin: 0 auto 14px;\r\n padding: 3px;\r\n background: linear-gradient(135deg, var(--red), var(--navy));\r\n }\r\n\r\n .faculty-card img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n border: 3px solid var(--white);\r\n display: block;\r\n }\r\n\r\n .faculty-card h4 {\r\n color: var(--navy);\r\n font-size: 0.88rem;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n font-family: 'Open Sans', sans-serif;\r\n line-height: 1.3;\r\n width: 100%;\r\n \/* Wrap long names onto up to 2 lines (no \"...\"), reserve the space so\r\n every card stays the same height *\/\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n min-height: calc(0.88rem * 1.3 * 2);\r\n }\r\n\r\n .faculty-card .badge {\r\n display: inline-block;\r\n background: #FEE8E8;\r\n color: var(--red);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n padding: 3px 10px;\r\n border-radius: 20px;\r\n letter-spacing: 0.3px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: 100%;\r\n }\r\n\r\n \/* POPUP *\/\r\n .teacher-popup {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(10, 20, 40, 0.65);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 999;\r\n backdrop-filter: blur(3px);\r\n animation: fadeIn 0.2s ease;\r\n }\r\n\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n\r\n .teacher-popup.active { display: flex; }\r\n\r\n .popup-box {\r\n background: var(--white);\r\n max-width: 420px;\r\n width: 90%;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n box-shadow: 0 24px 60px rgba(10,20,40,0.25);\r\n animation: slideUp 0.25s ease;\r\n }\r\n\r\n @keyframes slideUp {\r\n from { transform: translateY(24px); opacity: 0; }\r\n to { transform: translateY(0); opacity: 1; }\r\n }\r\n\r\n .popup-banner {\r\n background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);\r\n padding: 32px 20px 20px;\r\n text-align: center;\r\n }\r\n\r\n .popup-avatar-wrap {\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 50%;\r\n margin: 0 auto 14px;\r\n padding: 3px;\r\n background: linear-gradient(135deg, var(--red), #ff6b6b);\r\n }\r\n\r\n .popup-box img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n border: 4px solid var(--white);\r\n display: block;\r\n }\r\n\r\n .popup-box h3 {\r\n color: var(--white);\r\n font-family: 'Merriweather', serif;\r\n font-size: 1.15rem;\r\n }\r\n\r\n .popup-body { padding: 24px 28px 28px; text-align: center; }\r\n\r\n .popup-designation {\r\n display: inline-block;\r\n background: var(--red);\r\n color: var(--white);\r\n font-size: 0.78rem;\r\n font-weight: 700;\r\n padding: 4px 14px;\r\n border-radius: 20px;\r\n margin-bottom: 14px;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .popup-description {\r\n color: #555;\r\n font-size: 0.9rem;\r\n line-height: 1.7;\r\n }\r\n\r\n .popup-close {\r\n position: absolute;\r\n right: 14px;\r\n top: 14px;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.2);\r\n border: none;\r\n color: #fff;\r\n font-size: 18px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1;\r\n transition: background 0.2s;\r\n }\r\n\r\n .popup-close:hover { background: var(--red); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"globalPopup\" class=\"teacher-popup\">\r\n <div class=\"popup-box\">\r\n <button class=\"popup-close\" id=\"globalPopupClose\">×<\/button>\r\n <div class=\"popup-banner\">\r\n <div class=\"popup-avatar-wrap\">\r\n <img decoding=\"async\" id=\"popupImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <h3 id=\"popupName\"><\/h3>\r\n <\/div>\r\n <div class=\"popup-body\">\r\n <span id=\"popupDesignation\" class=\"popup-designation\"><\/span>\r\n <p id=\"popupDescription\" class=\"popup-description\"><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"app\"><\/div>\r\n\r\n<script>\r\n\/* ======================================================\r\n \u270f\ufe0f FACULTY DATA \u2014 Add \/ remove entries here easily\r\n Each section has: title, titleHighlight, and members[]\r\n Each member: name, designation, image, description\r\n====================================================== *\/\r\nconst FACULTY_DATA = {\r\n\r\n \/* \u2500\u2500 SECTION 1: Coordinators \u2500\u2500 *\/\r\n nonTeachingStaff: {\r\n title: \"Non-Teaching\",\r\n titleHighlight: \"Staff class III\",\r\n members: [\r\n {\r\n name: \"Shri. Bharat Shinde\",\r\n designation: \"O.S.\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Bharat Shinde serves as the Office Superintendent (O.S.), overseeing administrative operations.\"\r\n },\r\n {\r\n name: \"Smt. Meera Phansekar\",\r\n designation: \"Head Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Meera Phansekar serves as the Head Clerk, managing office documentation and staff coordination.\"\r\n },\r\n {\r\n name: \"Shri. Satish Waghmare\",\r\n designation: \"Sr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Satish Waghmare serves as a Senior Clerk, assisting in high-level administrative tasks.\"\r\n },\r\n {\r\n name: \"Shri. Vijay Bane\",\r\n designation: \"Sr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vijay Bane serves as a Senior Clerk, supporting the institution's clerical operations.\"\r\n },\r\n {\r\n name: \"Shri. Santosh Jumare\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Santosh Jumare serves as a Junior Clerk, handling daily office records and student queries.\"\r\n },\r\n {\r\n name: \"Smt. Viprada Gotad\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Viprada Gotad serves as a Junior Clerk, managing administrative paperwork and data entry.\"\r\n },\r\n {\r\n name: \"Shri. Dilip Lavate\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Dilip Lavate serves as a Junior Clerk, providing essential clerical support to the department.\"\r\n },\r\n {\r\n name: \"Shri. Vilas Kirloskar\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vilas Kirloskar serves as a Junior Clerk, assisting in maintaining institutional records.\"\r\n },\r\n {\r\n name: \"Shri. Santosh Ghadshi\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Santosh Ghadshi serves as a Junior Clerk, supporting the day-to-day office workflow.\"\r\n },\r\n {\r\n name: \"Shri. Varad Joshi\",\r\n designation: \"Jr. Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Varad Joshi serves as a Junior Clerk, managing clerical tasks and administrative services.\"\r\n }\r\n ]\r\n },\r\n\r\n administrativeStaff: {\r\n title: \"Administrative\",\r\n titleHighlight: \"Staff\",\r\n members: [\r\n {\r\n name: \"Smt. Vrunda Bhovar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Vrunda Bhovar serves as a Clerk, handling administrative and documentation tasks.\"\r\n },\r\n {\r\n name: \"Shri. Vinod Shegar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vinod Shegar serves as a Clerk, supporting the institution's administrative workflow.\"\r\n },\r\n {\r\n name: \"Smt. Arpita Varvatkar\",\r\n designation: \"Asst. Librarian\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Arpita Varvatkar serves as Asst. Librarian, managing library resources and services.\"\r\n },\r\n {\r\n name: \"Smt. Suvarna Gaikwad\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Suvarna Gaikwad serves as a Clerk, assisting in clerical and office management.\"\r\n },\r\n {\r\n name: \"Shri. Prabhakar Kotian\",\r\n designation: \"Lab Asst.\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prabhakar Kotian serves as a Lab Asst., maintaining laboratory equipment and facilities.\"\r\n },\r\n {\r\n name: \"Smt. Swarali Mirashi\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Swarali Mirashi serves as a Clerk, managing office records and administrative duties.\"\r\n },\r\n {\r\n name: \"Smt. Deepali Daroge\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Deepali Daroge serves as a Clerk, facilitating daily administrative operations.\"\r\n },\r\n {\r\n name: \"Smt. Nayan Sakpal\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Nayan Sakpal serves as a Clerk, providing essential clerical support.\"\r\n },\r\n {\r\n name: \"Smt. Gargi Katvi\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Gargi Katvi serves as a Clerk, handling departmental documentation.\"\r\n },\r\n {\r\n name: \"Smt. Aparna Divekar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Aparna Divekar serves as a Clerk, assisting in administrative functions.\"\r\n },\r\n {\r\n name: \"Shri. Kiran Kadam\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Kiran Kadam serves as a Clerk, managing office records and correspondence.\"\r\n },\r\n {\r\n name: \"Smt. Rasika Kale\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Rasika Kale serves as a Clerk, supporting the administrative staff.\"\r\n },\r\n {\r\n name: \"Shri. Aman Patil\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Aman Patil serves as a Clerk, assisting in clerical operations.\"\r\n },\r\n {\r\n name: \"Smt. Yogini Patole\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Yogini Patole serves as a Clerk, handling office tasks and administration.\"\r\n },\r\n {\r\n name: \"Shri. Gururaj Chitnis\",\r\n designation: \"Asst. Librarian\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Gururaj Chitnis serves as a Asst. Librarian\"\r\n },\r\n \r\n {\r\n name: \"Shri. Shreyas Lohar\",\r\n designation: \"Clerk\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Shreyas Lohar serves as a Clerk, assisting in administrative management.\"\r\n },\r\n {\r\n name: \"Shri. Hemant Rane\",\r\n designation: \"Lab Asst.\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Hemant Rane serves as a Lab Asst.\"\r\n },\r\n ]\r\n },\r\n\r\n nonTeachingStaffClassIV: {\r\n title: \"Non-Teaching Staff\",\r\n titleHighlight: \"Class IV\",\r\n members: [\r\n {\r\n name: \"Shri. Shailesh Mohite\",\r\n designation: \"Lib. Attendant\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Shailesh Mohite serves as a Library Attendant, assisting in the maintenance and organization of library resources.\"\r\n },\r\n {\r\n name: \"Shri. Rushikesh Mane\",\r\n designation: \"Lib. Attendant\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Rushikesh Mane serves as a Library Attendant, supporting library operations and student services.\"\r\n },\r\n {\r\n name: \"Shri. Machhindra Sable\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Machhindra Sable provides essential support services as a Peon to ensure smooth daily operations.\"\r\n },\r\n {\r\n name: \"Shri. Mahendra Talpade\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Mahendra Talpade serves as a Peon, assisting with departmental tasks and campus maintenance.\"\r\n },\r\n {\r\n name: \"Shri. Sachin Kudalkar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Sachin Kudalkar supports the institution's logistical and administrative needs as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Mukesh Bhojaiya\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Mukesh Bhojaiya serves as a Peon, providing necessary assistance to staff and faculty.\"\r\n },\r\n {\r\n name: \"Shri. Prakash Shedekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prakash Shedekar assists in the daily functioning of the office and campus as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Naresh Gurav\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Naresh Gurav serves as a Peon, supporting the institution's general service requirements.\"\r\n },\r\n {\r\n name: \"Shri. Girish Bhadwalkar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Girish Bhadwalkar provides reliable support as a Peon for various departmental needs.\"\r\n },\r\n {\r\n name: \"Shri. Atish Salve\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Atish Salve serves as a Peon, assisting in the upkeep and logistical tasks of the institution.\"\r\n },\r\n {\r\n name: \"Shri. Nitin Ipte\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Nitin Ipte supports administrative and academic staff in his role as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Sanjay Salvi\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Sanjay Salvi provides essential service and support across the campus as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Randeep Phatak\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Randeep Phatak serves as a Peon, facilitating the smooth movement of files and resources.\"\r\n },\r\n {\r\n name: \"Shri. Jagdish Bhangire\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Jagdish Bhangire assists with campus operations and staff requirements as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Prashant More\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prashant More serves as a Peon, ensuring the efficient handling of daily manual tasks.\"\r\n },\r\n {\r\n name: \"Shri. Chetan Kadam\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Chetan Kadam provides essential support to the office and faculty as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Pravin Hindlekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Pravin Hindlekar serves as a Peon, assisting in the general maintenance of college facilities.\"\r\n },\r\n {\r\n name: \"Shri. Ashwin Sonawane\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Ashwin Sonawane supports departmental functions and logistics in his role as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Rakesh Waghela\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Rakesh Waghela provides dedicated service as a Peon for the institution's daily needs.\"\r\n },\r\n {\r\n name: \"Shri. Shankar Varkhade\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Shankar Varkhade serves as a Peon, assisting with office-related tasks and campus support.\"\r\n },\r\n {\r\n name: \"Shri. Tejas Gurav\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Tejas Gurav supports the smooth running of campus activities as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Bharat Solanki\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Bharat Solanki provides necessary manual and logistical assistance as a Peon.\"\r\n },\r\n {\r\n name: \"Smt. Laxmi Mahida\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Smt. Laxmi Mahida serves as a Peon, supporting the institution's daily operational and service requirements.\"\r\n },\r\n {\r\n name: \"Shri. Avinash Sonawane\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Avinash Sonawane assists in the upkeep and smooth functioning of the department as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Omkar Jedhe\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Omkar Jedhe provides essential support services to faculty and staff as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Vishal Ghanekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Vishal Ghanekar serves as a Peon, handling various manual and administrative support tasks.\"\r\n },\r\n {\r\n name: \"Shri. Prashant Lad\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prashant Lad supports the institution's logistical needs and daily operations as a Peon.\"\r\n },\r\n {\r\n name: \"Shri. Mandar Sawant\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Mandar Sawant serves as a Peon, providing vital support for the campus and administrative office.\"\r\n },\r\n {\r\n name: \"Shri. Rahul Narvekar\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Rahul Narvekar serves as a Peon, providing vital support for the campus and administrative office.\"\r\n },\r\n {\r\n name: \"Shri. Prathmesh Jadhav\",\r\n designation: \"Peon\",\r\n image: \"\/wp-content\/uploads\/2026\/03\/placeholder.png\",\r\n description: \"Shri. Prathmesh Jadhav serves as a Peon, providing vital support for the campus and administrative office.\"\r\n }\r\n ]\r\n },\r\n\r\n};\r\n\/* ====================================================== *\/\r\n\r\n\r\n\/* \u2500\u2500 Build HTML for one section \u2500\u2500 *\/\r\nfunction buildSection(key, data, index) {\r\n const sectionEl = document.createElement('section');\r\n sectionEl.className = 'faculty-section';\r\n sectionEl.dataset.sectionKey = key;\r\n\r\n const PAGE_SIZE = 5;\r\n\r\n const cardsHtml = data.members.map((m, i) => `\r\n <div class=\"faculty-card${i >= PAGE_SIZE ? ' is-hidden' : ''}\"\r\n data-name=\"${escHtml(m.name)}\"\r\n data-designation=\"${escHtml(m.designation)}\"\r\n data-image=\"${escHtml(m.image)}\"\r\n data-description=\"${escHtml(m.description)}\">\r\n <div class=\"avatar-wrap\"><img decoding=\"async\" src=\"${escHtml(m.image)}\" alt=\"\"><\/div>\r\n <h4>${escHtml(m.name)}<\/h4>\r\n <span class=\"badge\">${escHtml(m.designation)}<\/span>\r\n <\/div>\r\n `).join('');\r\n\r\n const chevDown = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M4 6l8 7 8-7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <path d=\"M4 12l8 7 8-7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>`;\r\n const chevUp = `<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M4 18l8-7 8 7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <path d=\"M4 12l8-7 8 7\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>`;\r\n\r\n const controlsHtml = data.members.length > PAGE_SIZE\r\n ? `<div class=\"faculty-controls\">\r\n <button type=\"button\" class=\"load-btn more\" data-more>${chevDown}<span class=\"load-label\">Load More<\/span><\/button>\r\n <button type=\"button\" class=\"load-btn less\" data-less hidden>${chevUp}<span class=\"load-label\">Show Less<\/span><\/button>\r\n <\/div>`\r\n : '';\r\n\r\n sectionEl.innerHTML = `\r\n <div class=\"section-header\">\r\n <h2>${data.title} <span>${data.titleHighlight}<\/span><\/h2>\r\n <div class=\"header-rule\"><span><\/span><\/div>\r\n <\/div>\r\n <div class=\"faculty-grid\" data-grid data-page=\"${PAGE_SIZE}\">${cardsHtml}<\/div>\r\n ${controlsHtml}\r\n `;\r\n\r\n return sectionEl;\r\n}\r\n\r\nfunction escHtml(str) {\r\n return String(str)\r\n .replace(\/&\/g, '&')\r\n .replace(\/\"\/g, '"')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>');\r\n}\r\n\r\n\/* \u2500\u2500 Render all sections \u2500\u2500 *\/\r\nconst app = document.getElementById('app');\r\nObject.entries(FACULTY_DATA).forEach(([key, data], index) => {\r\n app.appendChild(buildSection(key, data, index));\r\n});\r\n\r\n\r\n\/* \u2500\u2500 Global Popup \u2500\u2500 *\/\r\nconst popup = document.getElementById('globalPopup');\r\nconst popupClose = document.getElementById('globalPopupClose');\r\nlet isPopupOpen = false;\r\n\r\nfunction openPopup(card) {\r\n document.getElementById('popupImage').src = card.dataset.image;\r\n document.getElementById('popupImage').alt = '';\r\n document.getElementById('popupName').innerText = card.dataset.name;\r\n document.getElementById('popupDesignation').innerText = card.dataset.designation;\r\n document.getElementById('popupDescription').innerText = card.dataset.description;\r\n popup.classList.add('active');\r\n isPopupOpen = true;\r\n}\r\n\r\nfunction closePopup() {\r\n popup.classList.remove('active');\r\n isPopupOpen = false;\r\n}\r\n\r\npopupClose.onclick = closePopup;\r\npopup.addEventListener('click', e => { if (e.target === popup) closePopup(); });\r\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') closePopup(); });\r\n\r\n\r\n\/* \u2500\u2500 Per-section paginated grid (Load More \/ Show Less) \u2500\u2500 *\/\r\nfunction initGrid(grid) {\r\n const section = grid.closest('.faculty-section');\r\n const pageSize = parseInt(grid.dataset.page, 10) || 5;\r\n const cards = Array.from(grid.querySelectorAll('.faculty-card'));\r\n const moreBtn = section.querySelector('[data-more]');\r\n const lessBtn = section.querySelector('[data-less]');\r\n\r\n let visible = Math.min(pageSize, cards.length);\r\n\r\n function render() {\r\n cards.forEach((card, i) => {\r\n card.classList.toggle('is-hidden', i >= visible);\r\n });\r\n const allShown = visible >= cards.length;\r\n if (moreBtn) moreBtn.hidden = allShown;\r\n if (lessBtn) lessBtn.hidden = !allShown;\r\n }\r\n\r\n if (moreBtn) {\r\n moreBtn.addEventListener('click', () => {\r\n visible = Math.min(visible + pageSize, cards.length);\r\n render();\r\n });\r\n }\r\n\r\n if (lessBtn) {\r\n lessBtn.addEventListener('click', () => {\r\n \/\/ Scroll smoothly to the top of the section FIRST (while all cards are\r\n \/\/ still visible so the page height doesn't jump), then collapse back to\r\n \/\/ the first page after the scroll has settled.\r\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n setTimeout(() => {\r\n visible = Math.min(pageSize, cards.length);\r\n render();\r\n }, 450);\r\n });\r\n }\r\n\r\n \/* Card click \u2192 popup *\/\r\n grid.addEventListener('click', e => {\r\n const card = e.target.closest('.faculty-card');\r\n if (card) openPopup(card);\r\n });\r\n\r\n render();\r\n}\r\n\r\n\/* Init every grid on page *\/\r\ndocument.querySelectorAll('[data-grid]').forEach(initGrid);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Faculty Sections ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17691","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages\/17691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/comments?post=17691"}],"version-history":[{"count":37,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages\/17691\/revisions"}],"predecessor-version":[{"id":19473,"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/pages\/17691\/revisions\/19473"}],"wp:attachment":[{"href":"https:\/\/mldcc.com\/mldcc\/wp-json\/wp\/v2\/media?parent=17691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}