{"id":6454,"date":"2026-10-01T08:09:08","date_gmt":"2026-10-01T08:09:08","guid":{"rendered":"https:\/\/mesaofficial.com\/insights\/?page_id=6454"},"modified":"2026-10-09T09:22:14","modified_gmt":"2026-10-09T09:22:14","slug":"past-events","status":"publish","type":"page","link":"https:\/\/mesaofficial.com\/insights\/past-events\/","title":{"rendered":"Past Events"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6454\" class=\"elementor elementor-6454\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dddb2ce e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"dddb2ce\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a213faf elementor-widget elementor-widget-button\" data-id=\"a213faf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/mesaofficial.com\/insights\/events-2\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-chevron-right\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Back to Events<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1e08d6 mb-h1 elementor-widget elementor-widget-heading\" data-id=\"a1e08d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Past Events<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4ae4b8f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"4ae4b8f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41cf75b elementor-widget elementor-widget-html\" data-id=\"41cf75b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"dynamic-blog-section\">\n\n    <!-- =====================================================\n         BLOG FILTER BAR\n    ====================================================== -->\n\n    <div class=\"blog-filter-bar\">\n\n        <div\n            class=\"blog-categories\"\n            id=\"blogCategories\"\n        >\n\n            <button\n                type=\"button\"\n                class=\"blog-filter active\"\n                data-category=\"all\"\n            >\n                All\n            <\/button>\n\n        <\/div>\n\n\n        <!-- SEARCH -->\n\n        <div class=\"blog-search\">\n\n            <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n\n                <circle\n                    cx=\"11\"\n                    cy=\"11\"\n                    r=\"7\"\n                ><\/circle>\n\n                <path\n                    d=\"M20 20l-4-4\"\n                ><\/path>\n\n            <\/svg>\n\n            <input\n                type=\"text\"\n                id=\"blogSearch\"\n                placeholder=\"Search\"\n                autocomplete=\"off\"\n            >\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         BLOG POSTS\n    ====================================================== -->\n\n    <div\n        class=\"blog-posts\"\n        id=\"blogPosts\"\n    >\n\n        <div class=\"blog-loading\">\n            Loading articles...\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         NO RESULTS\n    ====================================================== -->\n\n    <div\n        class=\"blog-no-results\"\n        id=\"blogNoResults\"\n    >\n\n        No articles found.\n\n    <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   MAIN SECTION\n========================================================= *\/\n\n.dynamic-blog-section {\n\n    width: 100%;\n\n    font-family: inherit;\n\n    color: inherit;\n\n}\n\n\n\/* =========================================================\n   FILTER BAR\n========================================================= *\/\n\n.blog-filter-bar {\n\n    width: 100%;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    gap: 30px;\n\n    margin-bottom: 42px;\n\n}\n\n\n\/* =========================================================\n   CATEGORY FILTERS\n========================================================= *\/\n\n.blog-categories {\n\n    display: flex;\n\n    align-items: center;\n\n    flex-wrap: wrap;\n\n    gap: 7px;\n\n}\n\n\n.blog-filter {\n\n    appearance: none;\n\n    border: 1px solid #aaaaaa;\n\n    background: transparent;\n\n    color: inherit;\n\n    padding: 8px 17px;\n\n    border-radius: 30px;\n\n    font-family: inherit;\n\n    font-size: 13px;\n\n    font-weight: inherit;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    transition:\n        background .25s ease,\n        color .25s ease,\n        border-color .25s ease;\n\n}\n\n\n.blog-filter:hover {\n\n    background: #111111;\n\n    border-color: #111111;\n\n    color: #ffffff;\n\n}\n\n\n.blog-filter.active {\n\n    background: #111111;\n\n    border-color: #111111;\n\n    color: #ffffff;\n\n}\n\n\n\/* =========================================================\n   SEARCH\n========================================================= *\/\n\n.blog-search {\n\n    width: 315px;\n\n    height: 40px;\n\n    display: flex;\n\n    align-items: center;\n\n    flex-shrink: 0;\n\n    padding: 0 14px;\n\n    border: 1px solid #aaaaaa;\n\n    border-radius: 30px;\n\n    box-sizing: border-box;\n\n}\n\n\n.blog-search svg {\n\n    width: 16px;\n\n    height: 16px;\n\n    flex-shrink: 0;\n\n    margin-right: 8px;\n\n    stroke: #777777;\n\n    fill: none;\n\n    stroke-width: 1.5;\n\n}\n\n\n.blog-search input {\n\n    width: 100%;\n\n    height: 100%;\n\n    padding: 0;\n\n    border: 0;\n\n    outline: 0;\n\n    background: transparent;\n\n    color: inherit;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    font-weight: inherit;\n\n}\n\n\n.blog-search input::placeholder {\n\n    color: #777777;\n\n    opacity: 1;\n\n}\n\n\n\/* =========================================================\n   BLOG CARD\n========================================================= *\/\n\n.blog-card {\n\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n        150px\n        minmax(0, 1fr)\n        auto;\n\n    align-items: center;\n\n    gap: 20px;\n\n    margin-bottom: 28px;\n\n    color: inherit;\n\n    text-decoration: none;\n\n    transition: opacity .25s ease;\n\n}\n\n\n.blog-card:hover {\n\n    opacity: .82;\n\n}\n\n\n\/* =========================================================\n   FEATURED IMAGE\n   LARGER + HARD BORDER RADIUS\n========================================================= *\/\n\n.blog-image {\n\n    width: 150px !important;\n\n    height: 105px !important;\n\n    min-width: 150px !important;\n\n    display: flex !important;\n\n    align-items: center !important;\n\n    justify-content: center !important;\n\n    overflow: hidden !important;\n\n    border-radius: 12px !important;\n\n    -webkit-border-radius: 12px !important;\n\n    background: #f3f3f3;\n\n    position: relative;\n\n    isolation: isolate;\n\n    \/*\n     * Extra protection against Elementor\/theme\n     * overriding the visual corners.\n     *\/\n\n    clip-path: inset(0 round 12px);\n\n    -webkit-clip-path: inset(0 round 12px);\n\n}\n\n\n\/* =========================================================\n   FEATURED IMAGE ITSELF\n========================================================= *\/\n\n.blog-image img {\n\n    width: 100% !important;\n\n    height: 100% !important;\n\n    max-width: none !important;\n\n    max-height: none !important;\n\n    display: block !important;\n\n    object-fit: contain !important;\n\n    object-position: center !important;\n\n    border: 0 !important;\n\n    border-radius: 12px !important;\n\n    -webkit-border-radius: 12px !important;\n\n    overflow: hidden !important;\n\n    clip-path: inset(0 round 12px);\n\n    -webkit-clip-path: inset(0 round 12px);\n\n    transition:\n        transform .35s ease;\n\n}\n\n\n\/* =========================================================\n   PROTECT AGAINST PICTURE \/ LINK WRAPPERS\n========================================================= *\/\n\n.blog-image picture,\n.blog-image a {\n\n    width: 100% !important;\n\n    height: 100% !important;\n\n    display: block !important;\n\n    overflow: hidden !important;\n\n    border-radius: 12px !important;\n\n    -webkit-border-radius: 12px !important;\n\n    clip-path: inset(0 round 12px);\n\n    -webkit-clip-path: inset(0 round 12px);\n\n}\n\n\n\/* =========================================================\n   IMAGE HOVER\n========================================================= *\/\n\n.blog-card:hover .blog-image img {\n\n    transform: scale(1.02);\n\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.blog-content {\n\n    min-width: 0;\n\n}\n\n\n\/* =========================================================\n   BLOG TITLE\n   MAXIMUM 2 LINES\n========================================================= *\/\n\n.blog-title {\n\n    width: 100%;\n\n    max-width: 520px;\n\n    margin: 0 0 7px 0;\n\n    padding: 0;\n\n    font-family: inherit;\n\n    font-size: 18px;\n\n    font-weight: inherit;\n\n    line-height: 1.35;\n\n    color: inherit;\n\n    display: -webkit-box;\n\n    -webkit-box-orient: vertical;\n\n    -webkit-line-clamp: 2;\n\n    overflow: hidden;\n\n    text-overflow: ellipsis;\n\n    \/*\n     * Prevent long titles from becoming\n     * more than two visual lines.\n     *\/\n\n    max-height: calc(\n        18px * 1.35 * 2\n    );\n\n}\n\n\n\/* =========================================================\n   EXCERPT\n========================================================= *\/\n\n.blog-excerpt {\n\n    margin: 0;\n\n    padding: 0;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    font-weight: inherit;\n\n    line-height: 1.45;\n\n    color: #777777;\n\n    display: -webkit-box;\n\n    -webkit-box-orient: vertical;\n\n    -webkit-line-clamp: 2;\n\n    overflow: hidden;\n\n}\n\n\n\/* =========================================================\n   DATE + CATEGORY\n========================================================= *\/\n\n.blog-meta {\n\n    min-width: 190px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: flex-end;\n\n    gap: 10px;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    font-weight: inherit;\n\n    line-height: 1.3;\n\n    color: #777777;\n\n    white-space: nowrap;\n\n}\n\n\n.blog-dot {\n\n    width: 4px;\n\n    height: 4px;\n\n    flex-shrink: 0;\n\n    border-radius: 50%;\n\n    background: #888888;\n\n}\n\n\n\/* =========================================================\n   LOADING\n========================================================= *\/\n\n.blog-loading {\n\n    padding: 40px 0;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    color: #777777;\n\n}\n\n\n\/* =========================================================\n   NO RESULTS\n========================================================= *\/\n\n.blog-no-results {\n\n    display: none;\n\n    padding: 40px 0;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    color: #777777;\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) {\n\n    .blog-card {\n\n        grid-template-columns:\n            135px\n            minmax(0, 1fr)\n            auto;\n\n        gap: 18px;\n\n    }\n\n\n    .blog-image {\n\n        width: 135px !important;\n\n        height: 100px !important;\n\n        min-width: 135px !important;\n\n        border-radius: 11px !important;\n\n        clip-path: inset(0 round 11px);\n\n        -webkit-clip-path: inset(0 round 11px);\n\n    }\n\n\n    .blog-image img {\n\n        border-radius: 11px !important;\n\n        clip-path: inset(0 round 11px);\n\n        -webkit-clip-path: inset(0 round 11px);\n\n    }\n\n\n    .blog-title {\n\n        max-width: 420px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n\n    .blog-filter-bar {\n\n        flex-direction: column;\n\n        align-items: stretch;\n\n        gap: 18px;\n\n        margin-bottom: 30px;\n\n    }\n\n\n    .blog-categories {\n\n        width: 100%;\n\n        flex-wrap: nowrap;\n\n        overflow-x: auto;\n\n        padding-bottom: 4px;\n\n        scrollbar-width: none;\n\n    }\n\n\n    .blog-categories::-webkit-scrollbar {\n\n        display: none;\n\n    }\n\n\n    .blog-filter {\n\n        flex-shrink: 0;\n\n        padding: 8px 15px;\n\n        font-size: 13px;\n\n    }\n\n\n    .blog-search {\n\n        width: 100%;\n\n        height: 42px;\n\n    }\n\n\n    .blog-search input {\n\n        font-size: 16px;\n\n    }\n\n\n    \/* =====================================================\n       MOBILE BLOG CARD\n    ====================================================== *\/\n\n    .blog-card {\n\n        grid-template-columns:\n            110px\n            minmax(0, 1fr);\n\n        align-items: start;\n\n        gap: 15px;\n\n        margin-bottom: 27px;\n\n    }\n\n\n    \/* =====================================================\n       MOBILE IMAGE\n    ====================================================== *\/\n\n    .blog-image {\n\n        width: 110px !important;\n\n        height: 82px !important;\n\n        min-width: 110px !important;\n\n        border-radius: 10px !important;\n\n        -webkit-border-radius: 10px !important;\n\n        overflow: hidden !important;\n\n        clip-path: inset(0 round 10px);\n\n        -webkit-clip-path: inset(0 round 10px);\n\n    }\n\n\n    .blog-image img {\n\n        width: 100% !important;\n\n        height: 100% !important;\n\n        border-radius: 10px !important;\n\n        -webkit-border-radius: 10px !important;\n\n        clip-path: inset(0 round 10px);\n\n        -webkit-clip-path: inset(0 round 10px);\n\n    }\n\n\n    .blog-image picture,\n    .blog-image a {\n\n        border-radius: 10px !important;\n\n        -webkit-border-radius: 10px !important;\n\n        clip-path: inset(0 round 10px);\n\n        -webkit-clip-path: inset(0 round 10px);\n\n    }\n\n\n    \/* =====================================================\n       MOBILE TITLE\n    ====================================================== *\/\n\n    .blog-title {\n\n        width: 100%;\n\n        max-width: 100%;\n\n        font-size: 18px;\n\n        line-height: 1.3;\n\n        -webkit-line-clamp: 2;\n\n        max-height: calc(\n            18px * 1.3 * 2\n        );\n\n    }\n\n\n    \/* =====================================================\n       MOBILE EXCERPT\n    ====================================================== *\/\n\n    .blog-excerpt {\n\n        font-size: 16px;\n\n        line-height: 1.4;\n\n        -webkit-line-clamp: 2;\n\n    }\n\n\n    \/* =====================================================\n       MOBILE META\n    ====================================================== *\/\n\n    .blog-meta {\n\n        grid-column: 2;\n\n        min-width: 0;\n\n        justify-content: flex-start;\n\n        margin-top: -5px;\n\n        font-size: 16px;\n\n        gap: 7px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 480px) {\n\n\n    .blog-card {\n\n        grid-template-columns:\n            100px\n            minmax(0, 1fr);\n\n        gap: 13px;\n\n    }\n\n\n    .blog-image {\n\n        width: 100px !important;\n\n        height: 78px !important;\n\n        min-width: 100px !important;\n\n        border-radius: 9px !important;\n\n        -webkit-border-radius: 9px !important;\n\n        clip-path: inset(0 round 9px);\n\n        -webkit-clip-path: inset(0 round 9px);\n\n    }\n\n\n    .blog-image img {\n\n        border-radius: 9px !important;\n\n        -webkit-border-radius: 9px !important;\n\n        clip-path: inset(0 round 9px);\n\n        -webkit-clip-path: inset(0 round 9px);\n\n    }\n\n\n    .blog-title {\n\n        font-size: 18px;\n\n        line-height: 1.3;\n\n        -webkit-line-clamp: 2;\n\n        max-height: calc(\n            18px * 1.3 * 2\n        );\n\n    }\n\n\n    .blog-excerpt {\n\n        font-size: 16px;\n\n    }\n\n\n    .blog-meta {\n\n        font-size: 16px;\n\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       \u2605\u2605\u2605 SELECT WHICH CATEGORIES TO SHOW \u2605\u2605\u2605\n    ====================================================== *\/\n\n    const SHOW_CATEGORIES = [\n\n        \"events\"\n\n    ];\n\n\n    \/* =====================================================\n       INITIALIZE\n    ====================================================== *\/\n\n    function initDynamicBlog() {\n\n\n        const postsContainer =\n            document.getElementById(\n                \"blogPosts\"\n            );\n\n\n        const categoriesContainer =\n            document.getElementById(\n                \"blogCategories\"\n            );\n\n\n        const searchInput =\n            document.getElementById(\n                \"blogSearch\"\n            );\n\n\n        const noResults =\n            document.getElementById(\n                \"blogNoResults\"\n            );\n\n\n        if (\n            !postsContainer ||\n            !categoriesContainer ||\n            !searchInput\n        ) {\n\n            return;\n\n        }\n\n\n        let allPosts = [];\n\n        let selectedCategory = \"all\";\n\n\n        \/* =================================================\n           GET WORDPRESS REST API\n        ================================================= *\/\n\n        async function getRestAPI() {\n\n\n            const apiDiscovery =\n                document.querySelector(\n                    'link[rel=\"https:\/\/api.w.org\/\"]'\n                );\n\n\n            if (apiDiscovery) {\n\n                let apiURL =\n                    apiDiscovery.getAttribute(\n                        \"href\"\n                    );\n\n\n                if (apiURL) {\n\n                    apiURL =\n                        apiURL.replace(\n                            \/\\\/$\/,\n                            \"\"\n                        );\n\n\n                    if (\n                        !apiURL.endsWith(\n                            \"\/wp-json\"\n                        )\n                    ) {\n\n                        apiURL +=\n                            \"\/wp-json\";\n\n                    }\n\n\n                    return apiURL + \"\/\";\n\n                }\n\n            }\n\n\n            if (\n                window.wpApiSettings &&\n                window.wpApiSettings.root\n            ) {\n\n                return window.wpApiSettings.root;\n\n            }\n\n\n            const possibleURLs = [\n\n                window.location.origin +\n                \"\/wp-json\/\",\n\n                window.location.origin +\n                \"\/index.php?rest_route=\/\"\n\n            ];\n\n\n            for (\n                let i = 0;\n                i < possibleURLs.length;\n                i++\n            ) {\n\n                try {\n\n                    const test =\n                        await fetch(\n                            possibleURLs[i] +\n                            \"wp\/v2\/posts?per_page=1\"\n                        );\n\n\n                    if (\n                        test.ok\n                    ) {\n\n                        return possibleURLs[i];\n\n                    }\n\n                }\n\n                catch (error) {\n\n                    console.log(\n                        \"API test failed\"\n                    );\n\n                }\n\n            }\n\n\n            return null;\n\n        }\n\n\n        \/* =================================================\n           LOAD POSTS\n        ================================================= *\/\n\n        async function loadPosts() {\n\n\n            try {\n\n\n                postsContainer.innerHTML = `\n\n                    <div class=\"blog-loading\">\n\n                        Loading articles...\n\n                    <\/div>\n\n                `;\n\n\n                const apiBase =\n                    await getRestAPI();\n\n\n                if (!apiBase) {\n\n                    throw new Error(\n                        \"REST API not found.\"\n                    );\n\n                }\n\n\n                const postsURL =\n                    apiBase +\n                    \"wp\/v2\/posts?per_page=100&_embed\";\n\n\n                const response =\n                    await fetch(\n                        postsURL,\n                        {\n                            method: \"GET\",\n\n                            headers: {\n                                \"Accept\":\n                                    \"application\/json\"\n                            }\n\n                        }\n                    );\n\n\n                if (\n                    !response.ok\n                ) {\n\n                    throw new Error(\n                        \"API Error \" +\n                        response.status\n                    );\n\n                }\n\n\n                const posts =\n                    await response.json();\n\n\n                if (\n                    !Array.isArray(posts)\n                ) {\n\n                    throw new Error(\n                        \"Invalid API response.\"\n                    );\n\n                }\n\n\n                allPosts = posts;\n\n\n                createCategoryFilters();\n\n                displayPosts();\n\n\n            }\n\n            catch (error) {\n\n\n                console.error(\n                    \"BLOG ERROR:\",\n                    error\n                );\n\n\n                postsContainer.innerHTML = `\n\n                    <div class=\"blog-loading\">\n\n                        Unable to load articles.\n\n                    <\/div>\n\n                `;\n\n            }\n\n        }\n\n\n        \/* =================================================\n           CREATE CATEGORY FILTERS\n        ================================================= *\/\n\n        function createCategoryFilters() {\n\n\n            categoriesContainer\n                .querySelectorAll(\n                    \".blog-filter.dynamic-category\"\n                )\n                .forEach(\n                    function(button) {\n\n                        button.remove();\n\n                    }\n                );\n\n\n            SHOW_CATEGORIES.forEach(\n                function(categoryName) {\n\n\n                    const button =\n                        document.createElement(\n                            \"button\"\n                        );\n\n\n                    button.type =\n                        \"button\";\n\n\n                    button.className =\n                        \"blog-filter dynamic-category\";\n\n\n                    button.dataset.category =\n                        categoryName;\n\n\n                    button.textContent =\n                        categoryName;\n\n\n                    categoriesContainer\n                        .appendChild(\n                            button\n                        );\n\n\n                    button.addEventListener(\n                        \"click\",\n                        function() {\n\n\n                            categoriesContainer\n                                .querySelectorAll(\n                                    \".blog-filter\"\n                                )\n                                .forEach(\n                                    function(btn) {\n\n                                        btn.classList\n                                            .remove(\n                                                \"active\"\n                                            );\n\n                                    }\n                                );\n\n\n                            button.classList\n                                .add(\"active\");\n\n\n                            selectedCategory =\n                                categoryName;\n\n\n                            displayPosts();\n\n                        }\n                    );\n\n                }\n            );\n\n\n            const allButton =\n                categoriesContainer\n                    .querySelector(\n                        '[data-category=\"all\"]'\n                    );\n\n\n            if (\n                allButton\n            ) {\n\n                allButton.addEventListener(\n                    \"click\",\n                    function() {\n\n\n                        categoriesContainer\n                            .querySelectorAll(\n                                \".blog-filter\"\n                            )\n                            .forEach(\n                                function(btn) {\n\n                                    btn.classList\n                                        .remove(\n                                            \"active\"\n                                        );\n\n                                }\n                            );\n\n\n                        allButton.classList\n                            .add(\"active\");\n\n\n                        selectedCategory =\n                            \"all\";\n\n\n                        displayPosts();\n\n                    }\n                );\n\n            }\n\n        }\n\n\n        \/* =================================================\n           FILTER POSTS\n        ================================================= *\/\n\n        function filterByCategory(\n            posts\n        ) {\n\n\n            if (\n                selectedCategory ===\n                \"all\"\n            ) {\n\n                return posts.filter(\n                    function(post) {\n\n                        return postHasSelectedCategory(\n                            post\n                        );\n\n                    }\n                );\n\n            }\n\n\n            return posts.filter(\n                function(post) {\n\n                    return postHasCategory(\n                        post,\n                        selectedCategory\n                    );\n\n                }\n            );\n\n        }\n\n\n        \/* =================================================\n           CHECK SELECTED CATEGORY\n        ================================================= *\/\n\n        function postHasSelectedCategory(\n            post\n        ) {\n\n\n            const postCategories =\n                getPostCategories(\n                    post\n                );\n\n\n            return postCategories.some(\n                function(category) {\n\n\n                    return SHOW_CATEGORIES\n                        .some(\n                            function(selected) {\n\n                                return (\n                                    category\n                                        .toLowerCase()\n                                        .trim() ===\n                                    selected\n                                        .toLowerCase()\n                                        .trim()\n                                );\n\n                            }\n                        );\n\n                }\n            );\n\n        }\n\n\n        \/* =================================================\n           CHECK CATEGORY\n        ================================================= *\/\n\n        function postHasCategory(\n            post,\n            categoryName\n        ) {\n\n\n            const postCategories =\n                getPostCategories(\n                    post\n                );\n\n\n            return postCategories.some(\n                function(category) {\n\n\n                    return (\n                        category\n                            .toLowerCase()\n                            .trim() ===\n                        categoryName\n                            .toLowerCase()\n                            .trim()\n                    );\n\n                }\n            );\n\n        }\n\n\n        \/* =================================================\n           GET CATEGORIES\n        ================================================= *\/\n\n        function getPostCategories(\n            post\n        ) {\n\n\n            const names = [];\n\n\n            if (\n                !post._embedded ||\n                !post._embedded[\n                    \"wp:term\"\n                ]\n            ) {\n\n                return names;\n\n            }\n\n\n            const groups =\n                post._embedded[\n                    \"wp:term\"\n                ];\n\n\n            groups.forEach(\n                function(group) {\n\n\n                    group.forEach(\n                        function(term) {\n\n\n                            if (\n                                term.taxonomy ===\n                                \"category\"\n                            ) {\n\n                                names.push(\n                                    term.name\n                                );\n\n                            }\n\n                        }\n                    );\n\n                }\n            );\n\n\n            return names;\n\n        }\n\n\n        \/* =================================================\n           DISPLAY POSTS\n        ================================================= *\/\n\n        function displayPosts() {\n\n\n            const search =\n                searchInput.value\n                    .toLowerCase()\n                    .trim();\n\n\n            const categoryPosts =\n                filterByCategory(\n                    allPosts\n                );\n\n\n            const filteredPosts =\n                categoryPosts.filter(\n                    function(post) {\n\n\n                        if (\n                            !search\n                        ) {\n\n                            return true;\n\n                        }\n\n\n                        const title =\n                            cleanText(\n                                post.title &&\n                                post.title.rendered\n                            );\n\n\n                        const content =\n                            cleanText(\n                                post.content &&\n                                post.content.rendered\n                            );\n\n\n                        const excerpt =\n                            cleanText(\n                                post.excerpt &&\n                                post.excerpt.rendered\n                            );\n\n\n                        return (\n\n                            title\n                                .toLowerCase()\n                                .includes(\n                                    search\n                                )\n\n                            ||\n\n                            content\n                                .toLowerCase()\n                                .includes(\n                                    search\n                                )\n\n                            ||\n\n                            excerpt\n                                .toLowerCase()\n                                .includes(\n                                    search\n                                )\n\n                        );\n\n                    }\n                );\n\n\n            renderPosts(\n                filteredPosts\n            );\n\n        }\n\n\n        \/* =================================================\n           RENDER POSTS\n        ================================================= *\/\n\n        function renderPosts(\n            posts\n        ) {\n\n\n            postsContainer.innerHTML =\n                \"\";\n\n\n            noResults.style.display =\n                \"none\";\n\n\n            if (\n                !posts.length\n            ) {\n\n                noResults.style.display =\n                    \"block\";\n\n                return;\n\n            }\n\n\n            posts.forEach(\n                function(post) {\n\n\n                    const card =\n                        document.createElement(\n                            \"a\"\n                        );\n\n\n                    card.className =\n                        \"blog-card\";\n\n\n                    card.href =\n                        post.link;\n\n\n                    \/* =====================================\n                       FEATURED IMAGE\n                    ===================================== *\/\n\n                    let imageURL =\n                        \"\";\n\n\n                    if (\n                        post._embedded &&\n                        post._embedded[\n                            \"wp:featuredmedia\"\n                        ] &&\n                        post._embedded[\n                            \"wp:featuredmedia\"\n                        ][0]\n                    ) {\n\n                        imageURL =\n                            post._embedded[\n                                \"wp:featuredmedia\"\n                            ][0]\n                            .source_url;\n\n                    }\n\n\n                    \/* =====================================\n                       TITLE\n                    ===================================== *\/\n\n                    const title =\n                        cleanText(\n                            post.title &&\n                            post.title.rendered\n                        );\n\n\n                    \/* =====================================\n                       DESCRIPTION\n                    ===================================== *\/\n\n                    let description =\n                        cleanText(\n                            post.excerpt &&\n                            post.excerpt.rendered\n                        );\n\n\n                    if (\n                        !description\n                    ) {\n\n                        description =\n                            cleanText(\n                                post.content &&\n                                post.content.rendered\n                            );\n\n                    }\n\n\n                    if (\n                        description.length >\n                        170\n                    ) {\n\n                        description =\n                            description.substring(\n                                0,\n                                170\n                            ) +\n                            \"...\";\n\n                    }\n\n\n                    \/* =====================================\n                       DATE\n                    ===================================== *\/\n\n                    let formattedDate =\n                        \"\";\n\n\n                    if (\n                        post.date\n                    ) {\n\n                        formattedDate =\n                            new Date(\n                                post.date\n                            )\n                            .toLocaleDateString(\n                                \"en-GB\",\n                                {\n                                    day:\n                                        \"2-digit\",\n\n                                    month:\n                                        \"short\",\n\n                                    year:\n                                        \"numeric\"\n                                }\n                            )\n                            .toUpperCase();\n\n                    }\n\n\n                    \/* =====================================\n                       CATEGORY\n                    ===================================== *\/\n\n                    let categoryName =\n                        \"Article\";\n\n\n                    const postCategories =\n                        getPostCategories(\n                            post\n                        );\n\n\n                    if (\n                        selectedCategory !==\n                        \"all\"\n                    ) {\n\n                        const matchingCategory =\n                            postCategories.find(\n                                function(category) {\n\n                                    return (\n                                        category\n                                            .toLowerCase()\n                                            .trim() ===\n                                        selectedCategory\n                                            .toLowerCase()\n                                            .trim()\n                                    );\n\n                                }\n                            );\n\n\n                        if (\n                            matchingCategory\n                        ) {\n\n                            categoryName =\n                                matchingCategory;\n\n                        }\n\n                    }\n\n                    else if (\n                        postCategories.length\n                    ) {\n\n                        const matchingCategory =\n                            postCategories.find(\n                                function(category) {\n\n\n                                    return SHOW_CATEGORIES\n                                        .some(\n                                            function(\n                                                selected\n                                            ) {\n\n                                                return (\n                                                    category\n                                                        .toLowerCase()\n                                                        .trim() ===\n                                                    selected\n                                                        .toLowerCase()\n                                                        .trim()\n                                                );\n\n                                            }\n                                        );\n\n                                }\n                            );\n\n\n                        if (\n                            matchingCategory\n                        ) {\n\n                            categoryName =\n                                matchingCategory;\n\n                        }\n\n                    }\n\n\n                    \/* =====================================\n                       IMAGE HTML\n                    ===================================== *\/\n\n                    let imageHTML =\n                        \"\";\n\n\n                    if (\n                        imageURL\n                    ) {\n\n                        imageHTML = `\n\n                            <img decoding=\"async\"\n\n                                src=\"${escapeHTML(\n                                    imageURL\n                                )}\"\n\n                                alt=\"${escapeHTML(\n                                    title\n                                )}\"\n\n                                loading=\"lazy\"\n\n                            >\n\n                        `;\n\n                    }\n\n                    else {\n\n                        imageHTML = `\n\n                            <div\n                                style=\"\n                                    width:100%;\n                                    height:100%;\n                                    background:#eeeeee;\n                                    border-radius:12px;\n                                \"\n                            ><\/div>\n\n                        `;\n\n                    }\n\n\n                    \/* =====================================\n                       CARD HTML\n                    ===================================== *\/\n\n                    card.innerHTML = `\n\n                        <div class=\"blog-image\">\n\n                            ${imageHTML}\n\n                        <\/div>\n\n\n                        <div class=\"blog-content\">\n\n                            <h3 class=\"blog-title\">\n\n                                ${escapeHTML(\n                                    title\n                                )}\n\n                            <\/h3>\n\n\n                            ${\n                                description\n\n                                ?\n\n                                `\n\n                                <p class=\"blog-excerpt\">\n\n                                    ${escapeHTML(\n                                        description\n                                    )}\n\n                                <\/p>\n\n                                `\n\n                                :\n\n                                \"\"\n\n                            }\n\n                        <\/div>\n\n\n                        <div class=\"blog-meta\">\n\n                            <span>\n\n                                ${formattedDate}\n\n                            <\/span>\n\n\n                            <span class=\"blog-dot\"><\/span>\n\n\n                            <span>\n\n                                ${escapeHTML(\n                                    categoryName\n                                )}\n\n                            <\/span>\n\n                        <\/div>\n\n                    `;\n\n\n                    postsContainer\n                        .appendChild(\n                            card\n                        );\n\n                }\n            );\n\n        }\n\n\n        \/* =================================================\n           SEARCH\n        ================================================= *\/\n\n        searchInput.addEventListener(\n            \"input\",\n            function() {\n\n                displayPosts();\n\n            }\n        );\n\n\n        \/* =================================================\n           CLEAN TEXT\n        ================================================= *\/\n\n        function cleanText(\n            html\n        ) {\n\n\n            if (\n                !html\n            ) {\n\n                return \"\";\n\n            }\n\n\n            const temp =\n                document.createElement(\n                    \"div\"\n                );\n\n\n            temp.innerHTML =\n                html;\n\n\n            return (\n                temp.textContent ||\n                temp.innerText ||\n                \"\"\n            )\n            .replace(\n                \/\\s+\/g,\n                \" \"\n            )\n            .trim();\n\n        }\n\n\n        \/* =================================================\n           ESCAPE HTML\n        ================================================= *\/\n\n        function escapeHTML(\n            value\n        ) {\n\n\n            return String(\n                value || \"\"\n            )\n\n            .replace(\n                \/&\/g,\n                \"&amp;\"\n            )\n\n            .replace(\n                \/<\/g,\n                \"&lt;\"\n            )\n\n            .replace(\n                \/>\/g,\n                \"&gt;\"\n            )\n\n            .replace(\n                \/\"\/g,\n                \"&quot;\"\n            )\n\n            .replace(\n                \/'\/g,\n                \"&#039;\"\n            );\n\n        }\n\n\n        \/* =================================================\n           START\n        ================================================= *\/\n\n        loadPosts();\n\n    }\n\n\n    \/* =====================================================\n       DOM READY\n    ===================================================== *\/\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initDynamicBlog\n        );\n\n    }\n\n    else {\n\n        initDynamicBlog();\n\n    }\n\n\n    \/* =====================================================\n       ELEMENTOR COMPATIBILITY\n    ===================================================== *\/\n\n    if (\n        window.jQuery\n    ) {\n\n        jQuery(window).on(\n            \"elementor\/frontend\/init\",\n            function() {\n\n                setTimeout(\n                    function() {\n\n                        initDynamicBlog();\n\n                    },\n                    500\n                );\n\n            }\n        );\n\n    }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-02917e5 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"02917e5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-02dfe70 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"02dfe70\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68ce8a7 mb-h1 elementor-widget elementor-widget-heading\" data-id=\"68ce8a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Featured Events<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abd4ada mb-fcar elementor-arrows-position-inside elementor-widget elementor-widget-n-carousel\" data-id=\"abd4ada\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;carousel_items&quot;:[{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;9ce3305&quot;}],&quot;slides_to_show&quot;:&quot;1&quot;,&quot;slides_to_scroll&quot;:&quot;1&quot;,&quot;autoplay_speed&quot;:6000,&quot;speed&quot;:600,&quot;slides_to_show_tablet&quot;:&quot;2&quot;,&quot;slides_to_show_mobile&quot;:&quot;1&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;offset_sides&quot;:&quot;none&quot;,&quot;arrows&quot;:&quot;yes&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"e-n-carousel swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"1\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 1\">\n\t\t\t\t\t\t\t<a class=\"elementor-element elementor-element-4eef539 e-con-full mb-slide e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"4eef539\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" href=\"https:\/\/mesaofficial.com\/insights\/index.php\/2026\/08\/19\/navigating-geopolitical-shifts-and-embedded-compliance-in-middle-east-payment-infrastructure\/\">\n\t\t<div class=\"elementor-element elementor-element-f7072a2 e-con-full mb-slide-img e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"f7072a2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-116ebf5 elementor-widget elementor-widget-html\" data-id=\"116ebf5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<div style=\"width: 100%; max-width: 800px; margin: 0 auto;\">\n  <iframe\n    src=\"https:\/\/cms.fintech.tv\/?p=50912&embed=1\"\n    title=\"Fintech TV Embed\"\n    width=\"800\"\n    height=\"320\"\n    style=\"display: block; width: 100%; height: 320px; max-width: 100%; border: 0;\"\n    frameborder=\"0\"\n    allowfullscreen>\n  <\/iframe>\n<\/div>\n\n<style>\n@media (max-width: 767px) {\n  iframe[src*=\"cms.fintech.tv\"] {\n    height: 220px !important;\n    width: 100% !important;\n  }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-754b431 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"754b431\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55ad92c mb-h1 elementor-widget elementor-widget-heading\" data-id=\"55ad92c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">RAKBANK\u2019s AED Stablecoin Is Not Just a Payment Tool : It Is the Lifeblood of a Blockchain Economy<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5079f10 elementor-widget elementor-widget-text-editor\" data-id=\"5079f10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>SEP 2026<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e76ad5e elementor-widget elementor-widget-heading\" data-id=\"e76ad5e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Media Features<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce948ce elementor-widget elementor-widget-text-editor\" data-id=\"ce948ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>MESA in the News<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d50d8f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4d50d8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b40e9fb elementor-widget elementor-widget-html\" data-id=\"b40e9fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"mesa-media-features\">\n\n\n\n\n    <!-- =====================================================\n         SLIDER\n    ====================================================== -->\n\n    <div class=\"mesa-media-slider-wrap\">\n\n        <div\n            class=\"mesa-media-slider\"\n            id=\"mesaMediaSlider\"\n        >\n\n            <div class=\"mesa-media-loading\">\n                Loading media features...\n            <\/div>\n\n        <\/div>\n\n\n        <!-- ARROWS -->\n\n        <div class=\"mesa-media-arrows\">\n\n            <button\n                type=\"button\"\n                id=\"mesaMediaPrev\"\n                aria-label=\"Previous\"\n            >\n                &#8249;\n            <\/button>\n\n            <button\n                type=\"button\"\n                id=\"mesaMediaNext\"\n                aria-label=\"Next\"\n            >\n                &#8250;\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   MAIN SECTION\n========================================================= *\/\n\n.mesa-media-features {\n\n    width: 100%;\n\n    padding: 0;\n\n    background: #101010;\n\n    color: #ffffff;\n\n    font-family: inherit;\n\n}\n\n\n\/* =========================================================\n   HEADING\n========================================================= *\/\n\n.mesa-media-heading {\n\n    margin-bottom: 42px;\n\n}\n\n\n.mesa-media-heading h2 {\n\n    margin: 0;\n\n    padding: 0;\n\n    font-family: inherit;\n\n    font-size: 24px;\n\n    font-weight: inherit;\n\n    line-height: 1.25;\n\n    color: #ffffff;\n\n}\n\n\n\/* =========================================================\n   SLIDER WRAPPER\n========================================================= *\/\n\n.mesa-media-slider-wrap {\n\n    position: relative;\n\n    width: 100%;\n\n    padding-bottom: 75px;\n\n}\n\n\n\/* =========================================================\n   SLIDER\n========================================================= *\/\n\n.mesa-media-slider {\n\n    width: 100%;\n\n    display: flex;\n\n    gap: 44px;\n\n    overflow-x: auto;\n\n    scroll-behavior: smooth;\n\n    scroll-snap-type: x mandatory;\n\n    scrollbar-width: none;\n\n}\n\n\n.mesa-media-slider::-webkit-scrollbar {\n\n    display: none;\n\n}\n\n\n\/* =========================================================\n   MEDIA CARD\n========================================================= *\/\n\n.mesa-media-card {\n\n    flex: 0 0 calc(50% - 22px);\n\n    min-width: 0;\n\n    display: grid;\n\n    grid-template-columns:\n        215px\n        minmax(0, 1fr);\n\n    gap: 40px;\n\n    align-items: center;\n\n    scroll-snap-align: start;\n\n    text-decoration: none;\n\n    color: #ffffff;\n\n}\n\n\n\/* =========================================================\n   IMAGE \/ LOGO\n========================================================= *\/\n\n.mesa-media-image {\n\n    width: 215px;\n\n    height: 305px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    overflow: hidden;\n\n    border-radius: 6px;\n\n    background: #f7f7f7;\n\n}\n\n\n.mesa-media-image img {\n\n    width: 100%;\n\n    height: 100%;\n\n    display: block;\n\n    object-fit: contain;\n\n    object-position: center;\n\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.mesa-media-content {\n\n    min-width: 0;\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n.mesa-media-title {\n\n    margin: 0 0 10px 0;\n\n    padding: 0;\n\n    font-family: inherit;\n\n    font-size: 24px;\n\n    font-weight: inherit;\n\n    line-height: 1.3;\n\n    color: #ffffff;\n\n    display: -webkit-box;\n\n    -webkit-box-orient: vertical;\n\n    -webkit-line-clamp: 2;\n\n    overflow: hidden;\n\n}\n\n\n\/* =========================================================\n   DATE\n========================================================= *\/\n\n.mesa-media-date {\n\n    margin: 0;\n\n    padding: 0;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    font-weight: inherit;\n\n    line-height: 1.4;\n\n    color: #ffffff;\n\n}\n\n\n\/* =========================================================\n   GOLD LINE\n========================================================= *\/\n\n.mesa-media-line {\n\n    width: 100%;\n\n    height: 1px;\n\n    margin: 23px 0 23px;\n\n    background: rgba(180, 145, 40, 0.55);\n\n}\n\n\n\/* =========================================================\n   EXCERPT\n========================================================= *\/\n\n.mesa-media-description {\n\n    margin: 0;\n\n    padding: 0;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    font-weight: inherit;\n\n    line-height: 1.5;\n\n    color: rgba(255,255,255,0.55);\n\n    \/*\n     * SHOW ONLY 3 LINES\n     *\/\n\n    display: -webkit-box;\n\n    -webkit-box-orient: vertical;\n\n    -webkit-line-clamp: 3;\n\n    overflow: hidden;\n\n}\n\n\n\/* =========================================================\n   ARROWS\n========================================================= *\/\n\n.mesa-media-arrows {\n\n    position: absolute;\n\n    right: 0;\n\n    bottom: 0;\n\n    display: flex;\n\n    gap: 13px;\n\n}\n\n\n.mesa-media-arrows button {\n\n    width: 48px;\n\n    height: 48px;\n\n    padding: 0;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    border: 1px solid rgba(255,255,255,0.18);\n\n    border-radius: 50%;\n\n    background: transparent;\n\n    color: #ffffff;\n\n    font-family: Arial, sans-serif;\n\n    font-size: 28px;\n\n    font-weight: 300;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    transition:\n        background .25s ease,\n        border-color .25s ease;\n\n}\n\n\n.mesa-media-arrows button:hover {\n\n    background: rgba(255,255,255,0.06);\n\n    border-color: rgba(255,255,255,0.4);\n\n}\n\n\n\/* =========================================================\n   LOADING\n========================================================= *\/\n\n.mesa-media-loading {\n\n    width: 100%;\n\n    padding: 40px 0;\n\n    font-family: inherit;\n\n    font-size: 16px;\n\n    color: rgba(255,255,255,0.55);\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n\n    .mesa-media-card {\n\n        grid-template-columns:\n            175px\n            minmax(0,1fr);\n\n        gap: 25px;\n\n    }\n\n\n    .mesa-media-image {\n\n        width: 175px;\n\n        height: 270px;\n\n    }\n\n\n    .mesa-media-title {\n\n        font-size: 22px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .mesa-media-heading {\n\n        margin-bottom: 28px;\n\n    }\n\n\n    .mesa-media-heading h2 {\n\n        font-size: 22px;\n\n    }\n\n\n    .mesa-media-slider-wrap {\n\n        padding-bottom: 70px;\n\n    }\n\n\n    .mesa-media-slider {\n\n        gap: 20px;\n\n    }\n\n\n    \/*\n     * ONE COMPLETE CARD ON MOBILE\n     *\/\n\n    .mesa-media-card {\n\n        flex: 0 0 100%;\n\n        display: grid;\n\n        grid-template-columns:\n            110px\n            minmax(0,1fr);\n\n        gap: 18px;\n\n        align-items: center;\n\n    }\n\n\n    .mesa-media-image {\n\n        width: 110px;\n\n        height: 175px;\n\n        border-radius: 6px;\n\n    }\n\n\n    .mesa-media-title {\n\n        margin-bottom: 8px;\n\n        font-size: 20px;\n\n        line-height: 1.3;\n\n    }\n\n\n    .mesa-media-date {\n\n        font-size: 15px;\n\n    }\n\n\n    .mesa-media-line {\n\n        margin: 15px 0;\n\n    }\n\n\n    .mesa-media-description {\n\n        font-size: 15px;\n\n        line-height: 1.45;\n\n        \/*\n         * 3 lines\n         *\/\n\n        -webkit-line-clamp: 3;\n\n    }\n\n\n    .mesa-media-arrows {\n\n        right: 0;\n\n        bottom: 0;\n\n    }\n\n\n    .mesa-media-arrows button {\n\n        width: 42px;\n\n        height: 42px;\n\n        font-size: 24px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 480px) {\n\n    .mesa-media-card {\n\n        grid-template-columns:\n            95px\n            minmax(0,1fr);\n\n        gap: 14px;\n\n    }\n\n\n    .mesa-media-image {\n\n        width: 95px;\n\n        height: 155px;\n\n    }\n\n\n    .mesa-media-title {\n\n        font-size: 18px;\n\n    }\n\n\n    .mesa-media-date {\n\n        font-size: 14px;\n\n    }\n\n\n    .mesa-media-description {\n\n        font-size: 14px;\n\n        -webkit-line-clamp: 3;\n\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       CATEGORY\n    ====================================================== *\/\n\n    const MEDIA_CATEGORY =\n        \"Media Features\";\n\n\n    \/* =====================================================\n       INITIALIZE\n    ====================================================== *\/\n\n    function initMesaMedia() {\n\n\n        const slider =\n            document.getElementById(\n                \"mesaMediaSlider\"\n            );\n\n\n        const previous =\n            document.getElementById(\n                \"mesaMediaPrev\"\n            );\n\n\n        const next =\n            document.getElementById(\n                \"mesaMediaNext\"\n            );\n\n\n        if (\n            !slider\n        ) {\n\n            return;\n\n        }\n\n\n        \/* =================================================\n           GET WORDPRESS REST API\n        ================================================= *\/\n\n        async function getRestAPI() {\n\n\n            const discovery =\n                document.querySelector(\n                    'link[rel=\"https:\/\/api.w.org\/\"]'\n                );\n\n\n            if (\n                discovery\n            ) {\n\n                let url =\n                    discovery.getAttribute(\n                        \"href\"\n                    );\n\n\n                if (\n                    url\n                ) {\n\n                    url =\n                        url.replace(\n                            \/\\\/$\/,\n                            \"\"\n                        );\n\n\n                    if (\n                        !url.endsWith(\n                            \"\/wp-json\"\n                        )\n                    ) {\n\n                        url +=\n                            \"\/wp-json\";\n\n                    }\n\n\n                    return url + \"\/\";\n\n                }\n\n            }\n\n\n            if (\n                window.wpApiSettings &&\n                window.wpApiSettings.root\n            ) {\n\n                return window.wpApiSettings.root;\n\n            }\n\n\n            const urls = [\n\n                window.location.origin +\n                \"\/wp-json\/\",\n\n                window.location.origin +\n                \"\/index.php?rest_route=\/\"\n\n            ];\n\n\n            for (\n                let i = 0;\n                i < urls.length;\n                i++\n            ) {\n\n                try {\n\n                    const test =\n                        await fetch(\n                            urls[i] +\n                            \"wp\/v2\/posts?per_page=1\"\n                        );\n\n\n                    if (\n                        test.ok\n                    ) {\n\n                        return urls[i];\n\n                    }\n\n                }\n\n                catch (error) {}\n\n            }\n\n\n            return null;\n\n        }\n\n\n        \/* =================================================\n           GET CATEGORY\n        ================================================= *\/\n\n        async function getCategory(\n            apiBase\n        ) {\n\n\n            const url =\n                apiBase +\n                \"wp\/v2\/categories\" +\n                \"?search=\" +\n                encodeURIComponent(\n                    MEDIA_CATEGORY\n                );\n\n\n            const response =\n                await fetch(\n                    url\n                );\n\n\n            if (\n                !response.ok\n            ) {\n\n                throw new Error(\n                    \"Category request failed\"\n                );\n\n            }\n\n\n            const categories =\n                await response.json();\n\n\n            return categories.find(\n                function(category) {\n\n                    return (\n\n                        category.name\n                            .toLowerCase()\n                            .trim() ===\n\n                        MEDIA_CATEGORY\n                            .toLowerCase()\n                            .trim()\n\n                    );\n\n                }\n            );\n\n        }\n\n\n        \/* =================================================\n           LOAD ALL MEDIA POSTS\n        ================================================= *\/\n\n        async function loadPosts() {\n\n\n            try {\n\n\n                slider.innerHTML = `\n\n                    <div class=\"mesa-media-loading\">\n\n                        Loading media features...\n\n                    <\/div>\n\n                `;\n\n\n                const apiBase =\n                    await getRestAPI();\n\n\n                if (\n                    !apiBase\n                ) {\n\n                    throw new Error(\n                        \"REST API not found\"\n                    );\n\n                }\n\n\n                const category =\n                    await getCategory(\n                        apiBase\n                    );\n\n\n                if (\n                    !category\n                ) {\n\n                    slider.innerHTML = `\n\n                        <div class=\"mesa-media-loading\">\n\n                            No media features found.\n\n                        <\/div>\n\n                    `;\n\n                    return;\n\n                }\n\n\n                \/*\n                 * IMPORTANT:\n                 *\n                 * per_page=100 means we load\n                 * all available media posts\n                 * up to WordPress REST API's\n                 * maximum page size.\n                 *\/\n\n                const postsURL =\n                    apiBase +\n                    \"wp\/v2\/posts\" +\n\n                    \"?categories=\" +\n                    category.id +\n\n                    \"&per_page=100\" +\n\n                    \"&_embed\";\n\n\n                const response =\n                    await fetch(\n                        postsURL\n                    );\n\n\n                if (\n                    !response.ok\n                ) {\n\n                    throw new Error(\n                        \"Posts request failed\"\n                    );\n\n                }\n\n\n                const posts =\n                    await response.json();\n\n\n                renderPosts(\n                    posts\n                );\n\n\n            }\n\n            catch (error) {\n\n\n                console.error(\n                    \"Media Features Error:\",\n                    error\n                );\n\n\n                slider.innerHTML = `\n\n                    <div class=\"mesa-media-loading\">\n\n                        Unable to load media features.\n\n                    <\/div>\n\n                `;\n\n            }\n\n        }\n\n\n        \/* =================================================\n           RENDER POSTS\n        ================================================= *\/\n\n        function renderPosts(\n            posts\n        ) {\n\n\n            slider.innerHTML =\n                \"\";\n\n\n            if (\n                !posts.length\n            ) {\n\n                slider.innerHTML = `\n\n                    <div class=\"mesa-media-loading\">\n\n                        No media features found.\n\n                    <\/div>\n\n                `;\n\n                return;\n\n            }\n\n\n            posts.forEach(\n                function(post) {\n\n\n                    const card =\n                        document.createElement(\n                            \"a\"\n                        );\n\n\n                    card.className =\n                        \"mesa-media-card\";\n\n\n                    card.href =\n                        post.link;\n\n\n                    \/* =====================================\n                       FEATURED IMAGE\n                    ===================================== *\/\n\n                    let imageURL =\n                        \"\";\n\n\n                    if (\n                        post._embedded &&\n\n                        post._embedded[\n                            \"wp:featuredmedia\"\n                        ] &&\n\n                        post._embedded[\n                            \"wp:featuredmedia\"\n                        ][0]\n                    ) {\n\n                        imageURL =\n                            post._embedded[\n                                \"wp:featuredmedia\"\n                            ][0]\n                            .source_url;\n\n                    }\n\n\n                    \/* =====================================\n                       TITLE\n                    ===================================== *\/\n\n                    const title =\n                        cleanText(\n                            post.title &&\n                            post.title.rendered\n                        );\n\n\n                    \/* =====================================\n                       DATE\n                    ===================================== *\/\n\n                    let date =\n                        \"\";\n\n\n                    if (\n                        post.date\n                    ) {\n\n                        date =\n                            new Date(\n                                post.date\n                            )\n                            .toLocaleDateString(\n                                \"en-US\",\n                                {\n                                    month:\n                                        \"long\",\n\n                                    day:\n                                        \"numeric\",\n\n                                    year:\n                                        \"numeric\"\n                                }\n                            );\n\n                    }\n\n\n                    \/* =====================================\n                       EXCERPT\n                    ===================================== *\/\n\n                    let description =\n                        cleanText(\n                            post.excerpt &&\n                            post.excerpt.rendered\n                        );\n\n\n                    \/*\n                     * If there is no excerpt,\n                     * use post content.\n                     *\/\n\n                    if (\n                        !description\n                    ) {\n\n                        description =\n                            cleanText(\n                                post.content &&\n                                post.content.rendered\n                            );\n\n                    }\n\n\n                    \/*\n                     * Keep description reasonable.\n                     *\n                     * CSS will show maximum\n                     * 3 lines.\n                     *\/\n\n                    if (\n                        description.length >\n                        220\n                    ) {\n\n                        description =\n                            description.substring(\n                                0,\n                                220\n                            ) +\n                            \"...\";\n\n                    }\n\n\n                    \/* =====================================\n                       IMAGE\n                    ===================================== *\/\n\n                    let imageHTML =\n                        \"\";\n\n\n                    if (\n                        imageURL\n                    ) {\n\n                        imageHTML = `\n\n                            <img decoding=\"async\"\n\n                                src=\"${escapeHTML(\n                                    imageURL\n                                )}\"\n\n                                alt=\"${escapeHTML(\n                                    title\n                                )}\"\n\n                                loading=\"lazy\"\n\n                            >\n\n                        `;\n\n                    }\n\n                    else {\n\n                        imageHTML = `\n\n                            <div\n                                style=\"\n                                    width:100%;\n                                    height:100%;\n                                    background:#f7f7f7;\n                                \"\n                            ><\/div>\n\n                        `;\n\n                    }\n\n\n                    \/* =====================================\n                       CARD\n                    ===================================== *\/\n\n                    card.innerHTML = `\n\n                        <div\n                            class=\"mesa-media-image\"\n                        >\n\n                            ${imageHTML}\n\n                        <\/div>\n\n\n                        <div\n                            class=\"mesa-media-content\"\n                        >\n\n                            <h3\n                                class=\"mesa-media-title\"\n                            >\n\n                                ${escapeHTML(\n                                    title\n                                )}\n\n                            <\/h3>\n\n\n                            <p\n                                class=\"mesa-media-date\"\n                            >\n\n                                Date ${escapeHTML(\n                                    date\n                                )}\n\n                            <\/p>\n\n\n                            <div\n                                class=\"mesa-media-line\"\n                            ><\/div>\n\n\n                            ${\n                                description\n\n                                ?\n\n                                `\n\n                                <p\n                                    class=\"\n                                        mesa-media-description\n                                    \"\n                                >\n\n                                    ${escapeHTML(\n                                        description\n                                    )}\n\n                                <\/p>\n\n                                `\n\n                                :\n\n                                \"\"\n\n                            }\n\n                        <\/div>\n\n                    `;\n\n\n                    slider.appendChild(\n                        card\n                    );\n\n                }\n            );\n\n        }\n\n\n        \/* =================================================\n           PREVIOUS\n        ================================================= *\/\n\n        previous.addEventListener(\n            \"click\",\n            function() {\n\n\n                slider.scrollBy({\n\n                    left:\n                        -(\n                            slider.clientWidth\n                            + 44\n                        ),\n\n                    behavior:\n                        \"smooth\"\n\n                });\n\n            }\n        );\n\n\n        \/* =================================================\n           NEXT\n        ================================================= *\/\n\n        next.addEventListener(\n            \"click\",\n            function() {\n\n\n                slider.scrollBy({\n\n                    left:\n                        slider.clientWidth\n                        + 44,\n\n                    behavior:\n                        \"smooth\"\n\n                });\n\n            }\n        );\n\n\n        \/* =================================================\n           CLEAN TEXT\n        ================================================= *\/\n\n        function cleanText(\n            html\n        ) {\n\n\n            if (\n                !html\n            ) {\n\n                return \"\";\n\n            }\n\n\n            const temp =\n                document.createElement(\n                    \"div\"\n                );\n\n\n            temp.innerHTML =\n                html;\n\n\n            return (\n                temp.textContent ||\n                temp.innerText ||\n                \"\"\n            )\n            .replace(\n                \/\\s+\/g,\n                \" \"\n            )\n            .trim();\n\n        }\n\n\n        \/* =================================================\n           ESCAPE HTML\n        ================================================= *\/\n\n        function escapeHTML(\n            value\n        ) {\n\n\n            return String(\n                value || \"\"\n            )\n\n            .replace(\n                \/&\/g,\n                \"&amp;\"\n            )\n\n            .replace(\n                \/<\/g,\n                \"&lt;\"\n            )\n\n            .replace(\n                \/>\/g,\n                \"&gt;\"\n            )\n\n            .replace(\n                \/\"\/g,\n                \"&quot;\"\n            )\n\n            .replace(\n                \/'\/g,\n                \"&#039;\"\n            );\n\n        }\n\n\n        \/* =================================================\n           START\n        ================================================= *\/\n\n        loadPosts();\n\n    }\n\n\n    \/* =====================================================\n       DOM READY\n    ===================================================== *\/\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initMesaMedia\n        );\n\n    }\n\n    else {\n\n        initMesaMedia();\n\n    }\n\n\n    \/* =====================================================\n       ELEMENTOR\n    ===================================================== *\/\n\n    if (\n        window.jQuery\n    ) {\n\n        jQuery(window).on(\n            \"elementor\/frontend\/init\",\n            function() {\n\n                setTimeout(\n                    function() {\n\n                        initMesaMedia();\n\n                    },\n                    500\n                );\n\n            }\n        );\n\n    }\n\n})();\n\n<\/script>\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>Back to Events Past Events All Loading articles&#8230; No articles found. Featured Events RAKBANK\u2019s AED Stablecoin Is Not Just a Payment Tool : It Is the Lifeblood of a Blockchain Economy SEP 2026 RAKBANK\u2019s AED Stablecoin Is Not Just a Payment Tool : It Is the Lifeblood of a Blockchain Economy SEP 2026 Media Features MESA in the News Loading media features&#8230; &#8249; &#8250;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/pages\/6454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/comments?post=6454"}],"version-history":[{"count":100,"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/pages\/6454\/revisions"}],"predecessor-version":[{"id":6662,"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/pages\/6454\/revisions\/6662"}],"wp:attachment":[{"href":"https:\/\/mesaofficial.com\/insights\/wp-json\/wp\/v2\/media?parent=6454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}