{"id":45821,"date":"2026-02-15T19:29:55","date_gmt":"2026-02-15T19:29:55","guid":{"rendered":"https:\/\/shazmlc.com\/articoli\/"},"modified":"2026-02-17T21:58:16","modified_gmt":"2026-02-17T21:58:16","slug":"articoli","status":"publish","type":"page","link":"https:\/\/shazmlc.com\/it\/articoli\/","title":{"rendered":"Articoli"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"45821\" class=\"elementor elementor-45821 elementor-44005\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9934472 e-con-full e-flex e-con e-parent\" data-id=\"9934472\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3101ec2 elementor-widget elementor-widget-elementskit-heading\" data-id=\"3101ec2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper center   ekit_heading_tablet-   ekit_heading_mobile-\"><h2 class=\"ekit-heading--title elementskit-section-title \">Approfondimenti e articoli<\/h2><div class=\"ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted\"><div class=\"elementskit-border-divider ekit-dotted\"><\/div><\/div>\t\t\t\t<div class='ekit-heading__description'>\n\t\t\t\t\t<p>Esplora articoli scritti da esperti che offrono approfondimenti pratici e indicazioni strategiche<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3581a69 e-con-full e-flex e-con e-child\" data-id=\"3581a69\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40b186d elementor-widget elementor-widget-html\" data-id=\"40b186d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Font Awesome + Italian-friendly Font -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Josefin+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n    :root {\n        --gold: #d4af37;\n        --blue: #1e3a8a;\n        --light-blue: #3b82f6;\n        --bg-light: #ffffff;\n        --bg-card: #f8f9fa;\n        --text-dark: #1a1a1a;\n        --text-gray: #6c757d;\n        --border-light: #e9ecef;\n        --shadow-light: rgba(0, 0, 0, 0.1);\n        --font-xs: clamp(0.75rem, 1.5vw, 0.875rem);\n        --font-sm: clamp(0.875rem, 2vw, 1rem);\n        --font-base: clamp(1rem, 2.5vw, 1.125rem);\n        --font-lg: clamp(1.125rem, 3vw, 1.5rem);\n        --font-xl: clamp(1.5rem, 4vw, 2rem);\n        --font-2xl: clamp(1.875rem, 5vw, 2.5rem);\n        --font-3xl: clamp(2rem, 6vw, 3rem);\n    }\n\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    body, html {\n        font-family: 'Cormorant Garamond', 'Josefin Sans', serif;\n    }\n\n    .articles-container {\n        display: flex;\n        gap: clamp(20px, 3vw, 30px);\n        max-width: 100%;\n        margin: 0 auto;\n        direction: ltr;\n        font-family: 'Cormorant Garamond', 'Josefin Sans', serif;\n    }\n\n    .articles-main {\n        flex: 1;\n        min-width: 0;\n    }\n\n    .search-section {\n        background: var(--bg-light);\n        padding: clamp(15px, 3vw, 25px);\n        border-radius: clamp(10px, 2vw, 15px);\n        margin-bottom: clamp(15px, 3vw, 25px);\n        border: 2px solid var(--gold);\n        box-shadow: 0 4px 15px var(--shadow-light);\n    }\n\n    .search-wrapper {\n        position: relative;\n        width: 100%;\n    }\n\n    .search-input {\n        width: 100%;\n        padding: clamp(12px, 2vw, 15px) clamp(40px, 8vw, 50px) clamp(12px, 2vw, 15px) clamp(15px, 3vw, 20px);\n        font-size: var(--font-base);\n        font-family: 'Josefin Sans', sans-serif;\n        border: 2px solid var(--border-light);\n        border-radius: 50px;\n        background: var(--bg-card);\n        color: var(--text-dark);\n        transition: all 0.3s ease;\n        outline: none;\n    }\n\n    .search-input:focus {\n        border-color: var(--gold);\n        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);\n    }\n\n    .search-icon {\n        position: absolute;\n        top: 50%;\n        right: clamp(15px, 3vw, 20px);\n        transform: translateY(-50%);\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        font-size: var(--font-lg);\n        pointer-events: none;\n    }\n\n    .filter-section {\n        background: var(--bg-light);\n        padding: clamp(15px, 3vw, 25px);\n        border-radius: clamp(10px, 2vw, 15px);\n        margin-bottom: clamp(20px, 4vw, 30px);\n        border: 2px solid var(--gold);\n        box-shadow: 0 4px 15px var(--shadow-light);\n    }\n\n    .filter-title {\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        font-size: var(--font-xl);\n        font-weight: 700;\n        margin-bottom: clamp(12px, 2vw, 15px);\n        display: flex;\n        align-items: center;\n        gap: clamp(8px, 1.5vw, 10px);\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.05em;\n    }\n\n    .filter-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        gap: clamp(8px, 1.5vw, 10px);\n    }\n\n    .filter-btn {\n        padding: clamp(10px, 2vw, 12px) clamp(20px, 3vw, 25px);\n        background: var(--bg-card);\n        color: var(--text-dark);\n        border: 2px solid var(--gold);\n        border-radius: 25px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-weight: 600;\n        font-size: var(--font-sm);\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.04em;\n        display: flex;\n        align-items: center;\n        gap: clamp(6px, 1vw, 8px);\n    }\n\n    .filter-btn:hover,\n    .filter-btn.active {\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        color: white;\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);\n    }\n\n    .articles-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: clamp(20px, 3vw, 25px);\n    }\n\n    @media (max-width: 1940px) {\n        .articles-grid { grid-template-columns: repeat(3, 1fr); }\n    }\n    @media (max-width: 1024px) {\n        .articles-grid { grid-template-columns: repeat(2, 1fr); }\n    }\n    @media (max-width: 768px) {\n        .articles-grid { grid-template-columns: 1fr; }\n    }\n\n    .article-card {\n        background: var(--bg-light);\n        border-radius: clamp(15px, 2vw, 20px);\n        overflow: hidden;\n        border: 2px solid var(--border-light);\n        box-shadow: 0 4px 20px var(--shadow-light);\n        transition: all 0.4s ease;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .article-card.hidden { display: none; }\n\n    .article-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.3);\n        border-color: var(--gold);\n    }\n\n    .article-image-wrapper {\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n    }\n\n    .article-card img {\n        width: 100%;\n        height: clamp(200px, 30vw, 350px);\n        object-fit: cover;\n        transition: transform 0.5s ease;\n    }\n\n    .article-card:hover img { transform: scale(1.08); }\n\n    .category-badge {\n        position: absolute;\n        top: clamp(12px, 2vw, 15px);\n        left: clamp(12px, 2vw, 15px);\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        color: white;\n        padding: clamp(6px, 1vw, 8px) clamp(12px, 2vw, 16px);\n        border-radius: 20px;\n        font-size: var(--font-xs);\n        font-weight: 700;\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.06em;\n        display: flex;\n        align-items: center;\n        gap: clamp(4px, 0.8vw, 6px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n        z-index: 2;\n    }\n\n    .article-card-content {\n        padding: clamp(15px, 3vw, 25px);\n        color: var(--text-dark);\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        gap: clamp(10px, 2vw, 15px);\n    }\n\n    .article-card-content h3 {\n        font-size: var(--font-xl);\n        margin: 0;\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        font-weight: 700;\n        line-height: 1.35;\n        flex: 1;\n        font-family: 'Cormorant Garamond', serif;\n    }\n\n    .article-meta {\n        display: flex;\n        flex-wrap: wrap;\n        gap: clamp(10px, 2vw, 15px);\n        font-size: var(--font-sm);\n        color: var(--text-gray);\n        font-family: 'Josefin Sans', sans-serif;\n    }\n\n    .article-meta-item {\n        display: flex;\n        align-items: center;\n        gap: clamp(4px, 0.8vw, 6px);\n    }\n\n    .article-meta-item i { color: var(--gold); }\n\n    .read-more-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: clamp(6px, 1vw, 10px);\n        margin: 0 clamp(15px, 3vw, 20px) clamp(15px, 3vw, 20px);\n        padding: clamp(12px, 2vw, 16px) 0;\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        color: white;\n        border-radius: clamp(10px, 2vw, 12px);\n        font-weight: 700;\n        font-size: var(--font-base);\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.05em;\n        cursor: pointer;\n        border: none;\n        width: calc(100% - clamp(30px, 6vw, 40px));\n        transition: all 0.3s ease;\n    }\n\n    .read-more-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);\n    }\n\n    .articles-sidebar {\n        width: clamp(280px, 25vw, 350px);\n        flex-shrink: 0;\n    }\n\n    .sidebar-section {\n        background: var(--bg-light);\n        border-radius: clamp(15px, 2vw, 20px);\n        padding: clamp(20px, 3vw, 25px);\n        margin-bottom: clamp(20px, 3vw, 25px);\n        border: 2px solid var(--border-light);\n        box-shadow: 0 4px 15px var(--shadow-light);\n    }\n\n    .sidebar-title {\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        color: white;\n        padding: clamp(12px, 2vw, 15px);\n        margin: -25px -25px 20px;\n        border-radius: 13px 13px 0 0;\n        font-size: var(--font-lg);\n        font-weight: 700;\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.05em;\n        text-align: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    }\n\n    .sidebar-list { list-style: none; }\n\n    .sidebar-item {\n        padding: clamp(12px, 2vw, 15px);\n        margin-bottom: 12px;\n        background: var(--bg-card);\n        border-radius: 10px;\n        color: var(--text-dark);\n        font-size: var(--font-sm);\n        font-family: 'Cormorant Garamond', serif;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        transition: all 0.3s ease;\n        border-left: 4px solid var(--gold);\n    }\n\n    .sidebar-item:hover { background: rgba(212, 175, 55, 0.1); }\n    .sidebar-item i { color: var(--gold); }\n\n    .faq-item {\n        padding: clamp(15px, 2.5vw, 18px);\n        margin-bottom: 15px;\n        background: var(--bg-card);\n        border-radius: 10px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n    }\n\n    .faq-item:hover { background: rgba(212, 175, 55, 0.05); }\n\n    .faq-question {\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        font-weight: 600;\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.03em;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n\n    .faq-answer {\n        color: var(--text-gray);\n        font-size: var(--font-sm);\n        font-family: 'Cormorant Garamond', serif;\n        display: none;\n        padding-top: 10px;\n        margin-top: 10px;\n        border-top: 1px solid var(--border-light);\n        line-height: 1.85;\n    }\n\n    .faq-item.active .faq-answer { display: block; }\n\n    .article-modal {\n        display: none;\n        position: fixed;\n        z-index: 9999;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.8);\n        backdrop-filter: blur(8px);\n    }\n\n    .modal-content {\n        background: var(--bg-light);\n        margin: 2% auto;\n        padding: 0;\n        border-radius: clamp(20px, 3vw, 30px);\n        width: 90%;\n        max-width: 900px;\n        border: 3px solid var(--gold);\n        max-height: 95vh;\n        overflow: hidden;\n    }\n\n    .modal-header {\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        padding: clamp(15px, 2vw, 20px) clamp(20px, 3vw, 30px);\n        display: flex;\n        justify-content: space-between;\n    }\n\n    .close-modal {\n        color: white;\n        cursor: pointer;\n        width: clamp(40px, 6vw, 50px);\n        height: clamp(40px, 6vw, 50px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(255, 255, 255, 0.2);\n        border-radius: 50%;\n        border: 2px solid white;\n        transition: all 0.3s ease;\n    }\n\n    .close-modal:hover { transform: rotate(90deg) scale(1.1); }\n\n    .modal-body {\n        padding: clamp(20px, 4vw, 30px);\n        overflow-y: auto;\n        max-height: calc(95vh - 90px);\n        font-family: 'Cormorant Garamond', serif;\n    }\n\n    .modal-body img {\n        width: 100%;\n        height: clamp(250px, 40vw, 500px);\n        object-fit: cover;\n        border-radius: 20px;\n        margin-bottom: 30px;\n        border: 3px solid var(--gold);\n    }\n\n    .modal-title {\n        font-size: var(--font-3xl);\n        margin-bottom: 20px;\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        font-weight: 700;\n        font-family: 'Cormorant Garamond', serif;\n        line-height: 1.25;\n    }\n\n    .modal-meta {\n        display: flex;\n        gap: 25px;\n        margin-bottom: 30px;\n        padding: 20px;\n        background: var(--bg-card);\n        border-radius: 15px;\n        flex-wrap: wrap;\n        font-family: 'Josefin Sans', sans-serif;\n    }\n\n    .modal-content-text {\n        line-height: 1.95;\n        font-size: var(--font-base);\n        padding: 25px;\n        background: var(--bg-card);\n        border-radius: 15px;\n    }\n\n    .pagination-wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 20px;\n        margin-top: 50px;\n        padding: 30px;\n        background: var(--bg-light);\n        border-radius: 15px;\n        border: 2px solid var(--border-light);\n        flex-wrap: wrap;\n        font-family: 'Josefin Sans', sans-serif;\n    }\n\n    .pagination {\n        display: flex;\n        gap: 8px;\n        list-style: none;\n        flex-wrap: wrap;\n    }\n\n    .pagination-btn {\n        padding: 12px 16px;\n        background: var(--bg-card);\n        color: var(--text-dark);\n        border: 2px solid var(--border-light);\n        border-radius: 8px;\n        cursor: pointer;\n        font-weight: 600;\n        font-family: 'Josefin Sans', sans-serif;\n        min-width: 45px;\n        text-align: center;\n        transition: all 0.3s ease;\n    }\n\n    .pagination-btn:hover:not(.disabled):not(.active) {\n        background: rgba(212, 175, 55, 0.1);\n        border-color: var(--gold);\n    }\n\n    .pagination-btn.active {\n        background: linear-gradient(135deg, var(--gold), var(--blue));\n        color: white;\n    }\n\n    .pagination-btn.disabled {\n        opacity: 0.4;\n        cursor: not-allowed;\n    }\n\n    .page-size-selector {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-family: 'Josefin Sans', sans-serif;\n    }\n\n    .page-size-selector select {\n        padding: 8px 12px;\n        border: 2px solid var(--border-light);\n        border-radius: 8px;\n        background: var(--bg-card);\n        cursor: pointer;\n        font-family: 'Josefin Sans', sans-serif;\n    }\n\n    .loading-state {\n        text-align: center;\n        padding: 60px;\n        font-size: var(--font-xl);\n        color: var(--gold);\n        font-family: 'Josefin Sans', sans-serif;\n        letter-spacing: 0.05em;\n    }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    .loading-state i {\n        animation: spin 1s linear infinite;\n        display: block;\n        margin-bottom: 20px;\n        font-size: 3rem;\n    }\n\n    @media (max-width: 1024px) {\n        .articles-container { flex-direction: column; }\n        .articles-sidebar { width: 100%; }\n    }\n\n    @media (max-width: 768px) {\n        .filter-buttons { flex-direction: column; }\n        .filter-btn { width: 100%; justify-content: center; }\n        .pagination-wrapper { flex-direction: column; }\n    }\n<\/style>\n\n<div id=\"articlesApp\"><\/div>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script>\n<script>\n(function() {\n    const lang = 'it';\n\n    async function fetchData() {\n        try {\n            const res = await fetch(`https:\/\/shazmlc.cloud\/webhook\/articles?lang=it`);\n            const data = await res.json();\n            return data && data[0] ? data[0] : null;\n        } catch (e) {\n            console.error(e);\n            return null;\n        }\n    }\n\n    async function fetchArticle(id) {\n        try {\n            const res = await fetch(`https:\/\/shazmlc.cloud\/webhook\/article?id=${id}&lang=it`);\n            const data = await res.json();\n            return Array.isArray(data) && data[0] ? data[0] : data;\n        } catch (e) {\n            console.error(e);\n            return null;\n        }\n    }\n\n    async function init() {\n        document.getElementById('articlesApp').innerHTML = `<div class=\"loading-state\"><i class=\"fas fa-spinner\"><\/i>Caricamento...<\/div>`;\n\n        const apiData = await fetchData();\n\n        if (!apiData || !apiData.articles || !apiData.articles.length) {\n            document.getElementById('articlesApp').innerHTML = '<div class=\"loading-state\">Nessun articolo trovato<\/div>';\n            return;\n        }\n\n        const articles = apiData.articles;\n        const t = apiData.general;\n        const categories = [...new Set(articles.map(a => a.category))];\n        const mostRead = [...articles].sort((a, b) => b.comments - a.comments).slice(0, 5);\n\n        const html = `\n        <div class=\"articles-container\" dir=\"ltr\">\n            <div class=\"articles-main\">\n                <div class=\"search-section\">\n                    <div class=\"search-wrapper\">\n                        <input type=\"text\" class=\"search-input\" id=\"articleSearch\" placeholder=\"${t.search}\">\n                        <i class=\"fas fa-search search-icon\"><\/i>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-section\">\n                    <h3 class=\"filter-title\"><i class=\"fas fa-filter\"><\/i> ${t.filter_title}<\/h3>\n                    <div class=\"filter-buttons\">\n                        <button class=\"filter-btn active\" data-category=\"all\"><i class=\"fas fa-th\"><\/i> ${t.all}<\/button>\n                        ${categories.map(c => `<button class=\"filter-btn\" data-category=\"${c}\"><i class=\"fas fa-folder\"><\/i> ${c}<\/button>`).join('')}\n                    <\/div>\n                <\/div>\n\n                <div class=\"articles-grid\">\n                    ${articles.map(a => `\n                        <div class=\"article-card\" data-category=\"${a.category}\" data-title=\"${a.title}\">\n                            <div class=\"article-image-wrapper\">\n                                <img decoding=\"async\" src=\"${a.image}\" alt=\"${a.title}\">\n                                <div class=\"category-badge\"><i class=\"fas fa-folder\"><\/i> ${a.category}<\/div>\n                            <\/div>\n                            <div class=\"article-card-content\">\n                                <h3>${a.title}<\/h3>\n                                <div class=\"article-meta\">\n                                    <div class=\"article-meta-item\"><i class=\"fas fa-calendar-alt\"><\/i> ${a.createdAt}<\/div>\n                                    <div class=\"article-meta-item\"><i class=\"fas fa-comments\"><\/i> ${a.comments} ${t.comments}<\/div>\n                                <\/div>\n                            <\/div>\n                            <button class=\"read-more-btn\" data-article-id=\"${a.id}\">\n                                <i class=\"fas fa-book-open\"><\/i> ${t.read_more}\n                            <\/button>\n                        <\/div>\n                    `).join('')}\n                <\/div>\n\n                <div class=\"pagination-wrapper\">\n                    <div class=\"page-size-selector\">\n                        <label>Articoli per pagina:<\/label>\n                        <select id=\"pageSize\">\n                            <option value=\"6\">6<\/option>\n                            <option value=\"9\" selected>9<\/option>\n                            <option value=\"12\">12<\/option>\n                            <option value=\"15\">15<\/option>\n                        <\/select>\n                    <\/div>\n                    <ul class=\"pagination\" id=\"pagination\"><\/ul>\n                    <div class=\"pagination-info\">\n                        <i class=\"fas fa-info-circle\"><\/i>\n                        <span id=\"paginationInfo\"><\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"articles-sidebar\">\n                <div class=\"sidebar-section\">\n                    <h3 class=\"sidebar-title\"><i class=\"fas fa-fire\"><\/i> ${t.most_read}<\/h3>\n                    <ul class=\"sidebar-list\">\n                        ${mostRead.map(a => `<li class=\"sidebar-item\" data-article-id=\"${a.id}\"><i class=\"fas fa-chevron-right\"><\/i> ${a.title}<\/li>`).join('')}\n                    <\/ul>\n                <\/div>\n\n                <div class=\"sidebar-section\">\n                    <h3 class=\"sidebar-title\"><i class=\"fas fa-link\"><\/i> ${t.related}<\/h3>\n                    <ul class=\"sidebar-list\">\n                        ${articles.slice(0, 5).map(a => `<li class=\"sidebar-item\" data-article-id=\"${a.id}\"><i class=\"fas fa-chevron-right\"><\/i> ${a.title}<\/li>`).join('')}\n                    <\/ul>\n                <\/div>\n\n                <div class=\"sidebar-section\">\n                    <h3 class=\"sidebar-title\"><i class=\"fas fa-question-circle\"><\/i> ${t.faq_name}<\/h3>\n                    <div class=\"faq-list\">\n                        ${t.faq.map(faq => `\n                            <div class=\"faq-item\">\n                                <div class=\"faq-question\"><i class=\"fas fa-question-circle\"><\/i> ${faq.question}<\/div>\n                                <div class=\"faq-answer\">${faq.answer}<\/div>\n                            <\/div>\n                        `).join('')}\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"articleModal\" class=\"article-modal\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <span><\/span>\n                    <span class=\"close-modal\"><i class=\"fas fa-times\"><\/i><\/span>\n                <\/div>\n                <div id=\"modalBody\" class=\"modal-body\"><\/div>\n            <\/div>\n        <\/div>\n        `;\n\n        document.getElementById('articlesApp').innerHTML = html;\n        initJS(t, articles);\n    }\n\n    function initJS(t, articlesData) {\n        jQuery(document).ready(function($) {\n            var currentPage = 1, articlesPerPage = 9;\n            var allArticles = $('.article-card').toArray();\n            var filteredArticles = allArticles;\n\n            function updatePagination() {\n                var start = (currentPage - 1) * articlesPerPage;\n                var end = start + articlesPerPage;\n                $('.article-card').addClass('hidden').hide();\n                filteredArticles.slice(start, end).forEach(a => $(a).removeClass('hidden').fadeIn(300));\n\n                var total = filteredArticles.length;\n                var from = total > 0 ? start + 1 : 0;\n                var to = Math.min(end, total);\n                $('#paginationInfo').text(`Visualizzazione ${from} \u2013 ${to} di ${total}`);\n            }\n\n            function renderPagination() {\n                var totalPages = Math.ceil(filteredArticles.length \/ articlesPerPage);\n                var pagination = $('#pagination');\n                pagination.empty();\n                if (totalPages <= 1) return;\n\n                pagination.append(`<li><button class=\"pagination-btn ${currentPage === 1 ? 'disabled' : ''}\" data-page=\"prev\"><i class=\"fas fa-chevron-left\"><\/i><\/button><\/li>`);\n\n                for (var i = 1; i <= Math.min(5, totalPages); i++) {\n                    pagination.append(`<li><button class=\"pagination-btn ${i === currentPage ? 'active' : ''}\" data-page=\"${i}\">${i}<\/button><\/li>`);\n                }\n\n                pagination.append(`<li><button class=\"pagination-btn ${currentPage === totalPages ? 'disabled' : ''}\" data-page=\"next\"><i class=\"fas fa-chevron-right\"><\/i><\/button><\/li>`);\n\n                $('.pagination-btn').on('click', function() {\n                    var page = $(this).data('page');\n                    if ($(this).hasClass('disabled')) return;\n                    if (page === 'prev') currentPage = Math.max(1, currentPage - 1);\n                    else if (page === 'next') currentPage = Math.min(totalPages, currentPage + 1);\n                    else currentPage = page;\n                    updatePagination();\n                    renderPagination();\n                });\n            }\n\n            $('#pageSize').on('change', function() {\n                articlesPerPage = parseInt($(this).val());\n                currentPage = 1;\n                updatePagination();\n                renderPagination();\n            });\n\n            $('#articleSearch').on('keyup', function() {\n                var term = $(this).val().toLowerCase();\n                filteredArticles = term === '' ? allArticles : allArticles.filter(a => {\n                    var title = $(a).data('title').toLowerCase();\n                    var cat = $(a).data('category').toLowerCase();\n                    return title.includes(term) || cat.includes(term);\n                });\n                currentPage = 1;\n                updatePagination();\n                renderPagination();\n            });\n\n            $('.filter-btn').on('click', function() {\n                var cat = $(this).data('category');\n                $('.filter-btn').removeClass('active');\n                $(this).addClass('active');\n                filteredArticles = cat === 'all' ? allArticles : allArticles.filter(a => $(a).data('category') === cat);\n                currentPage = 1;\n                updatePagination();\n                renderPagination();\n            });\n\n            $('.faq-item').on('click', function() {\n                $(this).toggleClass('active');\n            });\n\n            async function openModal(id) {\n                $('#articleModal').fadeIn(300);\n                $('#modalBody').html(`<div class=\"loading-state\"><i class=\"fas fa-spinner\"><\/i>${t.loading || 'Caricamento...'}<\/div>`);\n\n                const article = await fetchArticle(id);\n\n                if (article) {\n                    $('#modalBody').html(`\n                        ${article.image ? `<img decoding=\"async\" src=\"${article.image}\" alt=\"${article.title}\">` : ''}\n                        <h2 class=\"modal-title\">${article.title || ''}<\/h2>\n                        <div class=\"modal-meta\">\n                            <span><i class=\"fas fa-folder-open\"><\/i> ${article.category || ''}<\/span>\n                            <span><i class=\"fas fa-comments\"><\/i> ${article.comments || 0} ${t.comments}<\/span>\n                            <span><i class=\"fas fa-calendar-alt\"><\/i> ${article.createdAt || ''}<\/span>\n                        <\/div>\n                        <div class=\"modal-content-text\">${article.content || ''}<\/div>\n                    `);\n                } else {\n                    $('#modalBody').html('<div class=\"loading-state\">Errore nel caricamento dell\\'articolo<\/div>');\n                }\n            }\n\n            $('.sidebar-item, .read-more-btn').on('click', function() {\n                openModal($(this).data('article-id'));\n            });\n\n            $('.close-modal').on('click', () => $('#articleModal').fadeOut(300));\n            $(window).on('click', e => {\n                if ($(e.target).is('#articleModal')) $('#articleModal').fadeOut(300);\n            });\n\n            updatePagination();\n            renderPagination();\n        });\n    }\n\n    init();\n})();\n<\/script>\t\t\t\t<\/div>\n\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>Approfondimenti e articoli Esplora articoli scritti da esperti che offrono approfondimenti pratici e indicazioni strategiche<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45821","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/pages\/45821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/comments?post=45821"}],"version-history":[{"count":5,"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/pages\/45821\/revisions"}],"predecessor-version":[{"id":46339,"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/pages\/45821\/revisions\/46339"}],"wp:attachment":[{"href":"https:\/\/shazmlc.com\/it\/wp-json\/wp\/v2\/media?parent=45821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}