{"id":2226,"date":"2024-10-21T09:59:33","date_gmt":"2024-10-21T09:59:33","guid":{"rendered":"https:\/\/themexriver.com\/wp\/eergx\/?page_id=2226"},"modified":"2026-02-16T08:41:49","modified_gmt":"2026-02-16T08:41:49","slug":"blogs","status":"publish","type":"page","link":"https:\/\/amirait.in\/wp-swi\/blogs\/","title":{"rendered":"Blog Grid"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2226\" class=\"elementor elementor-2226\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-20d9062 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"20d9062\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-058ec39\" data-id=\"058ec39\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-5a152ce e-flex e-con-boxed e-con e-parent\" data-id=\"5a152ce\" data-element_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-d2f88a7 elementor-widget elementor-widget-heading\" data-id=\"d2f88a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Blogs<\/h2>\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-1b2c74d e-flex e-con-boxed e-con e-parent\" data-id=\"1b2c74d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6609ea5 elementor-widget elementor-widget-shortcode\" data-id=\"6609ea5\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n    <div class=\"blog-category-row\">\r\n        <button class=\"cat-btn active\" data-category=\"all\">All<\/button>\r\n\r\n        <button class=\"cat-btn\" data-category=\"milestones-2\">Milestones<\/button><button class=\"cat-btn\" data-category=\"new\">new<\/button>    <\/div>\r\n\r\n    <div id=\"blog-results\" class=\"blog-grid\"><\/div>\r\n\r\n    <script>\r\n    document.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n        function loadPosts(category = \"all\") {\r\n            fetch(\"https:\/\/amirait.in\/wp-swi\/wp-admin\/admin-ajax.php?action=filter_posts&category=\" + category)\r\n                .then(res => res.text())\r\n                .then(data => {\r\n                    document.getElementById(\"blog-results\").innerHTML = data;\r\n                });\r\n        }\r\n\r\n        loadPosts();\r\n\r\n        document.querySelectorAll(\".cat-btn\").forEach(btn => {\r\n            btn.addEventListener(\"click\", function () {\r\n                document.querySelectorAll(\".cat-btn\").forEach(b => b.classList.remove(\"active\"));\r\n                this.classList.add(\"active\");\r\n\r\n                loadPosts(this.dataset.category);\r\n            });\r\n        });\r\n    });\r\n    <\/script>\r\n\r\n    <style>\r\n    .blog-section {\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 40px 20px;\r\n    }\r\n\r\n    \/* Category Filters \u2013 more modern pills *\/\r\n    .blog-category-row {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        margin-bottom: 40px;\r\n        justify-content: center;\r\n        overflow-x: auto;\r\n        padding-bottom: 10px;\r\n    }\r\n    .cat-btn {\r\n        padding: 10px 22px;\r\n        border-radius: 50px;\r\n        border: 1px solid #e2e8f0;\r\n        background: white;\r\n        color: #334155;\r\n        font-size: 15px;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        white-space: nowrap;\r\n    }\r\n    .cat-btn:hover {\r\n        background: #f1f5f9;\r\n        transform: translateY(-1px);\r\n    }\r\n    .cat-btn.active {\r\n        background: linear-gradient(135deg, #1fa84f, #14853c);\r\n        color: white;\r\n        border-color: transparent;\r\n        box-shadow: 0 4px 14px rgba(31,168,79,0.25);\r\n    }\r\n\r\n    \/* Make the whole card a flex column \u2192 content pushes button down *\/\r\n.blog-card {\r\n    background: white;\r\n    padding: 30px;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    border: 1px solid #e2e8f0;\r\n    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);\r\n    display: flex;                \/* \u2190 NEW: flex column *\/\r\n    flex-direction: column;       \/* \u2190 stack image \u2192 content \u2192 button *\/\r\n    height: 100%;                 \/* \u2190 important: makes cards same height in row *\/\r\n}\r\n\r\n\/* Hover stays the same *\/\r\n.blog-card:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);\r\n}\r\n\r\n\/* Image wrapper \u2013 no change needed, but ensure it doesn't grow\/shrink oddly *\/\r\n.blog-card .image-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    height: 220px;                \/* fixed height keeps consistency *\/\r\n    flex-shrink: 0;               \/* \u2190 prevents image area from shrinking *\/\r\n}\r\n\r\n\/* Content area \u2013 grows to fill space, text at top *\/\r\n.blog-card .content {\r\n    padding: 24px;\r\n    flex-grow: 1;                 \/* \u2190 NEW: takes remaining space *\/\r\n    display: flex;                \/* \u2190 optional but helpful *\/\r\n    flex-direction: column;       \/* stack title \u2192 excerpt \u2192 button *\/\r\n}\r\n\r\n\/* Title and excerpt \u2013 natural flow *\/\r\n.blog-card h3 {\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    margin-bottom: 12px;\r\n    line-height: 1.35;\r\n    color: #1e293b;\r\n}\r\n\r\n.blog-card .excerpt {\r\n    font-size: 15px;\r\n    color: #64748b;\r\n    line-height: 1.6;\r\n    margin-bottom: 20px;          \/* space before button *\/\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 3;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n    flex-grow: 1;                 \/* \u2190 optional: makes excerpt expand if needed *\/\r\n}\r\n\r\n\/* Read More button \u2013 pushed to bottom with auto margin *\/\r\n.read-more-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 10px 24px;\r\n    background: #1fa84f;\r\n    color: white;\r\n    font-weight: 600;\r\n    border-radius: 50px;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    margin-top: auto;             \/* \u2190 KEY: pushes button to bottom *\/\r\n    align-self: flex-start;       \/* \u2190 keeps it left-aligned (or change to center\/flex-end) *\/\r\n}\r\n\r\n\/* Optional: center the button instead *\/\r\n.read-more-btn.center {\r\n    align-self: center;\r\n}\r\n\r\n\/* Hover effects on button \u2013 unchanged *\/\r\n.read-more-btn:hover {\r\n    background: #14853c;\r\n    padding-right: 28px;\r\n    gap: 12px;\r\n}\r\n\r\n.read-more-btn::after {\r\n    \/*content: \"\u2192\";*\/\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.read-more-btn:hover::after {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\/* Ensure grid items stretch full height *\/\r\n.blog-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n    gap: 30px;\r\n    align-items: stretch;         \/* \u2190 NEW: makes sure cards stretch to same height in row *\/\r\n}\r\n    \r\n\r\n    @media (max-width: 640px) {\r\n        .blog-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n    <\/style>\r\n\r\n    \n<\/div>\n\t\t\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>Blogs<\/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":{"_acf_changed":false,"footnotes":""},"class_list":["post-2226","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/pages\/2226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/comments?post=2226"}],"version-history":[{"count":3,"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/pages\/2226\/revisions"}],"predecessor-version":[{"id":6875,"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/pages\/2226\/revisions\/6875"}],"wp:attachment":[{"href":"https:\/\/amirait.in\/wp-swi\/wp-json\/wp\/v2\/media?parent=2226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}