{"id":2114,"date":"2026-08-05T10:02:43","date_gmt":"2026-08-05T10:02:43","guid":{"rendered":"https:\/\/tonytribble.com\/?page_id=2114"},"modified":"2026-08-11T03:13:46","modified_gmt":"2026-08-11T03:13:46","slug":"blog","status":"publish","type":"page","link":"https:\/\/tonytribble.com\/es\/blog\/","title":{"rendered":"Blogs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2114\" class=\"elementor elementor-2114\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b4d100 e-flex e-con-boxed e-con e-parent\" data-id=\"4b4d100\" 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-2bee39e elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"2bee39e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">BLOGS<\/h1>\t\t\t\t<\/div>\n\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-dec3cd8 e-flex e-con-boxed e-con e-parent\" data-id=\"dec3cd8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9334202 elementor-widget elementor-widget-html\" data-id=\"9334202\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n<style>\r\n  #blog-grid-app, #blog-grid-app * { box-sizing: border-box; }\r\n\r\n  #blog-grid-app {\r\n    --navy-deep: #1e2645;\r\n    --navy-deep-rgb: 30, 38, 69;\r\n    --gold: #d9a441;\r\n    --gold-light: #f0c876;\r\n    --muted: #6b7089;\r\n    font-family: 'Inter', sans-serif !important;\r\n    max-width: 1240px;\r\n    margin: 0 auto;\r\n    padding: 70px 24px 90px;\r\n  }\r\n\r\n  #blog-grid-app h1, #blog-grid-app h2, #blog-grid-app h3,\r\n  #blog-grid-app p, #blog-grid-app a, #blog-grid-app button, #blog-grid-app input, #blog-grid-app select {\r\n    all: revert;\r\n    box-sizing: border-box;\r\n    font-family: 'Inter', sans-serif;\r\n  }\r\n\r\n  \/* ---------- Header ---------- *\/\r\n  #blog-grid-app .bg-head {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n    margin-bottom: 34px;\r\n  }\r\n  #blog-grid-app .bg-eyebrow {\r\n    font-size: 12px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: uppercase !important;\r\n    letter-spacing: .12em !important;\r\n    color: var(--gold) !important;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin: 0 !important;\r\n  }\r\n  #blog-grid-app .bg-eyebrow::before {\r\n    content: '';\r\n    width: 22px;\r\n    height: 2px;\r\n    background: var(--gold);\r\n    display: inline-block;\r\n  }\r\n  #blog-grid-app .bg-head h2 {\r\n    font-family: 'Fraunces', serif !important;\r\n    font-size: 32px !important;\r\n    font-weight: 600 !important;\r\n    color: var(--navy-deep) !important;\r\n    margin: 12px 0 0 !important;\r\n    line-height: 1.2 !important;\r\n  }\r\n  #blog-grid-app .bg-head p {\r\n    color: var(--muted) !important;\r\n    font-size: 15px !important;\r\n    max-width: 56ch;\r\n    margin: 6px 0 0 !important;\r\n    line-height: 1.6 !important;\r\n  }\r\n\r\n  \/* ---------- Controls Bar ---------- *\/\r\n  #blog-grid-app .bg-controls {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 18px;\r\n    margin-bottom: 36px;\r\n    padding-bottom: 26px;\r\n    border-bottom: 1px solid rgba(var(--navy-deep-rgb), .08);\r\n  }\r\n\r\n  #blog-grid-app .bg-search-sort {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n  @media (min-width: 720px) {\r\n    #blog-grid-app .bg-search-sort { flex-direction: row; align-items: center; justify-content: space-between; }\r\n  }\r\n\r\n  #blog-grid-app .bg-search {\r\n    position: relative;\r\n    flex: 1;\r\n    max-width: 380px;\r\n  }\r\n  #blog-grid-app .bg-search input {\r\n    width: 100% !important;\r\n    padding: 11px 16px 11px 40px !important;\r\n    border-radius: 999px !important;\r\n    border: 1px solid rgba(var(--navy-deep-rgb), .15) !important;\r\n    background: #fff !important;\r\n    font-size: 13.5px !important;\r\n    color: var(--navy-deep) !important;\r\n    outline: none !important;\r\n    transition: border-color .25s ease, box-shadow .25s ease;\r\n  }\r\n  #blog-grid-app .bg-search input:focus {\r\n    border-color: var(--gold) !important;\r\n    box-shadow: 0 0 0 3px rgba(217,164,65,.15) !important;\r\n  }\r\n  #blog-grid-app .bg-search i {\r\n    position: absolute;\r\n    left: 16px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: rgba(var(--navy-deep-rgb), .35);\r\n    font-size: 13px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  #blog-grid-app .bg-sort {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n  #blog-grid-app .bg-sort label {\r\n    font-size: 12px !important;\r\n    font-weight: 700 !important;\r\n    color: var(--muted) !important;\r\n    text-transform: uppercase;\r\n    letter-spacing: .06em;\r\n    white-space: nowrap;\r\n  }\r\n  #blog-grid-app .bg-sort select {\r\n    padding: 10px 34px 10px 14px !important;\r\n    border-radius: 999px !important;\r\n    border: 1px solid rgba(var(--navy-deep-rgb), .15) !important;\r\n    background: #fff url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%231e2645' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'\/%3E%3C\/svg%3E\") no-repeat right 14px center \/ 10px !important;\r\n    background-color: #fff !important;\r\n    font-size: 13px !important;\r\n    font-weight: 600 !important;\r\n    color: var(--navy-deep) !important;\r\n    cursor: pointer;\r\n    appearance: none !important;\r\n    -webkit-appearance: none !important;\r\n    outline: none !important;\r\n  }\r\n  #blog-grid-app .bg-sort select:focus { border-color: var(--gold) !important; }\r\n\r\n  \/* ---------- Category Pills ---------- *\/\r\n  #blog-grid-app .bg-cats {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 9px;\r\n  }\r\n  #blog-grid-app .bg-cat-pill {\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 9px 18px !important;\r\n    border-radius: 999px !important;\r\n    border: 1px solid rgba(var(--navy-deep-rgb), .16) !important;\r\n    background: #fff !important;\r\n    color: var(--navy-deep) !important;\r\n    font-size: 13px !important;\r\n    font-weight: 600 !important;\r\n    cursor: pointer;\r\n    transition: all .25s ease;\r\n    white-space: nowrap;\r\n  }\r\n  #blog-grid-app .bg-cat-pill .cnt {\r\n    color: rgba(var(--navy-deep-rgb), .4);\r\n    font-weight: 600;\r\n  }\r\n  #blog-grid-app .bg-cat-pill:hover {\r\n    border-color: var(--gold) !important;\r\n    background: rgba(217,164,65,.06) !important;\r\n  }\r\n  #blog-grid-app .bg-cat-pill.active {\r\n    background: var(--navy-deep) !important;\r\n    border-color: var(--navy-deep) !important;\r\n    color: #fff !important;\r\n  }\r\n  #blog-grid-app .bg-cat-pill.active .cnt { color: var(--gold-light); }\r\n\r\n  \/* ---------- Grid ---------- *\/\r\n  #blog-grid-app .bg-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n    gap: 28px;\r\n  }\r\n\r\n  #blog-grid-app .bg-card {\r\n    background: #fff;\r\n    border: 1px solid rgba(0,0,0,.04);\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n    box-shadow: 0 15px 40px -10px rgba(30,38,69,.06);\r\n    transition: all .35s cubic-bezier(.165,.84,.44,1);\r\n    display: flex;\r\n    flex-direction: column;\r\n    text-decoration: none !important;\r\n  }\r\n  #blog-grid-app .bg-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 20px 44px -10px rgba(217,164,65,.2);\r\n    border-color: rgba(217,164,65,.3);\r\n  }\r\n\r\n  #blog-grid-app .bg-card-thumb {\r\n    position: relative;\r\n    aspect-ratio: 16\/10;\r\n    background: linear-gradient(150deg, #f1ede4, #e7e1d3);\r\n    background-size: cover;\r\n    background-position: center;\r\n    overflow: hidden;\r\n  }\r\n  #blog-grid-app .bg-card-thumb .noimg {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: rgba(30,38,69,.25);\r\n    font-size: 26px;\r\n  }\r\n  #blog-grid-app .bg-card-badge {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: 12px;\r\n    background: rgba(var(--navy-deep-rgb), .88);\r\n    color: var(--gold) !important;\r\n    font-size: 10.5px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: uppercase;\r\n    letter-spacing: .06em;\r\n    padding: 6px 12px;\r\n    border-radius: 999px;\r\n    backdrop-filter: blur(3px);\r\n  }\r\n\r\n  #blog-grid-app .bg-card-body {\r\n    padding: 20px 20px 22px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n    flex: 1;\r\n  }\r\n  #blog-grid-app .bg-card-date {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 11.5px !important;\r\n    font-weight: 700 !important;\r\n    color: var(--muted) !important;\r\n    text-transform: uppercase;\r\n    letter-spacing: .04em;\r\n  }\r\n  #blog-grid-app .bg-card-date i { font-size: 10px; color: var(--gold); }\r\n  #blog-grid-app .bg-card-title {\r\n    font-family: 'Fraunces', serif !important;\r\n    font-size: 18.5px !important;\r\n    font-weight: 600 !important;\r\n    color: var(--navy-deep) !important;\r\n    line-height: 1.35 !important;\r\n    margin: 0 !important;\r\n  }\r\n  #blog-grid-app .bg-card-excerpt {\r\n    font-size: 13.5px !important;\r\n    line-height: 1.6 !important;\r\n    color: var(--muted) !important;\r\n    margin: 0 !important;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 3;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n  }\r\n  #blog-grid-app .bg-card-readmore {\r\n    margin-top: auto;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 12.5px !important;\r\n    font-weight: 700 !important;\r\n    color: var(--gold) !important;\r\n    transition: gap .2s ease;\r\n  }\r\n  #blog-grid-app .bg-card:hover .bg-card-readmore { gap: 9px; }\r\n\r\n  \/* ---------- Loading skeletons ---------- *\/\r\n  #blog-grid-app .bg-skel {\r\n    background: #fff;\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(0,0,0,.04);\r\n  }\r\n  #blog-grid-app .bg-skel .sk-thumb { aspect-ratio: 16\/10; background: #eee; position: relative; overflow: hidden; }\r\n  #blog-grid-app .bg-skel .sk-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }\r\n  #blog-grid-app .bg-skel .sk-line { height: 12px; border-radius: 6px; background: #eee; position: relative; overflow: hidden; }\r\n  #blog-grid-app .bg-skel .sk-line.w60 { width: 60%; }\r\n  #blog-grid-app .bg-skel .sk-line.w90 { width: 90%; }\r\n  #blog-grid-app .bg-skel .sk-line.w40 { width: 40%; height: 10px; }\r\n  #blog-grid-app .bg-skel .sk-thumb::after,\r\n  #blog-grid-app .bg-skel .sk-line::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    transform: translateX(-100%);\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);\r\n    animation: bg-shimmer 1.3s infinite;\r\n  }\r\n  @keyframes bg-shimmer { 100% { transform: translateX(100%); } }\r\n\r\n  \/* ---------- Empty \/ error states ---------- *\/\r\n  #blog-grid-app .bg-empty {\r\n    grid-column: 1 \/ -1;\r\n    text-align: center;\r\n    padding: 70px 20px;\r\n    color: var(--muted);\r\n  }\r\n  #blog-grid-app .bg-empty i { font-size: 30px; color: var(--gold); margin-bottom: 14px; display: block; }\r\n  #blog-grid-app .bg-empty h3 {\r\n    font-family: 'Fraunces', serif !important;\r\n    color: var(--navy-deep) !important;\r\n    font-size: 19px !important;\r\n    margin: 0 0 6px !important;\r\n  }\r\n  #blog-grid-app .bg-empty p { font-size: 13.5px !important; margin: 0 !important; }\r\n  #blog-grid-app .bg-empty button {\r\n    margin-top: 18px;\r\n    padding: 10px 22px !important;\r\n    border-radius: 999px !important;\r\n    border: 1px solid rgba(var(--navy-deep-rgb), .18) !important;\r\n    background: #fff !important;\r\n    color: var(--navy-deep) !important;\r\n    font-size: 13px !important;\r\n    font-weight: 700 !important;\r\n    cursor: pointer;\r\n  }\r\n\r\n  \/* ---------- Load more ---------- *\/\r\n  #blog-grid-app .bg-loadmore-wrap { display: flex; justify-content: center; margin-top: 44px; }\r\n  #blog-grid-app .bg-loadmore {\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    gap: 9px;\r\n    padding: 13px 30px !important;\r\n    border-radius: 999px !important;\r\n    border: none !important;\r\n    background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;\r\n    color: var(--navy-deep) !important;\r\n    font-size: 13.5px !important;\r\n    font-weight: 700 !important;\r\n    cursor: pointer;\r\n    transition: all .3s cubic-bezier(.165,.84,.44,1);\r\n  }\r\n  #blog-grid-app .bg-loadmore:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(217,164,65,.45); }\r\n  #blog-grid-app .bg-loadmore:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }\r\n  #blog-grid-app .bg-loadmore i.fa-spin { font-size: 12px; }\r\n\r\n  #blog-grid-app .bg-count {\r\n    font-size: 12.5px !important;\r\n    color: var(--muted) !important;\r\n    margin: -18px 0 22px !important;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    #blog-grid-app { padding: 44px 16px 60px; }\r\n    #blog-grid-app .bg-head h2 { font-size: 25px !important; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"blog-grid-app\">\r\n\r\n  <div class=\"bg-head\">\r\n    <div class=\"bg-eyebrow\">The Blog<\/div>\r\n    <h2>News, Tips &amp; Updates<\/h2>\r\n    <p>Straight talk on vehicle protection plans, dealership news, and everything else worth knowing before your next car.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"bg-controls\">\r\n    <div class=\"bg-search-sort\">\r\n      <div class=\"bg-search\">\r\n        <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n        <input type=\"text\" id=\"bg-search-input\" placeholder=\"Search articles...\">\r\n      <\/div>\r\n      <div class=\"bg-sort\">\r\n        <label for=\"bg-sort-select\">Sort<\/label>\r\n        <select id=\"bg-sort-select\">\r\n          <option value=\"date-desc\">Newest first<\/option>\r\n          <option value=\"date-asc\">Oldest first<\/option>\r\n          <option value=\"title-asc\">Title A\u2013Z<\/option>\r\n        <\/select>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bg-cats\" id=\"bg-cats\"><\/div>\r\n  <\/div>\r\n\r\n  <p class=\"bg-count\" id=\"bg-count\"><\/p>\r\n\r\n  <div class=\"bg-grid\" id=\"bg-grid\"><\/div>\r\n\r\n  <div class=\"bg-loadmore-wrap\" id=\"bg-loadmore-wrap\" style=\"display:none;\">\r\n    <button class=\"bg-loadmore\" id=\"bg-loadmore-btn\">\r\n      <span id=\"bg-loadmore-label\">Load More Articles<\/span>\r\n    <\/button>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  var API_BASE = window.location.origin + '\/wp-json\/wp\/v2';\r\n  var PER_PAGE = 9;\r\n\r\n  var els = {\r\n    cats: document.getElementById('bg-cats'),\r\n    grid: document.getElementById('bg-grid'),\r\n    count: document.getElementById('bg-count'),\r\n    search: document.getElementById('bg-search-input'),\r\n    sort: document.getElementById('bg-sort-select'),\r\n    loadWrap: document.getElementById('bg-loadmore-wrap'),\r\n    loadBtn: document.getElementById('bg-loadmore-btn'),\r\n    loadLabel: document.getElementById('bg-loadmore-label')\r\n  };\r\n\r\n  var state = {\r\n    category: 0,        \/\/ 0 = all\r\n    search: '',\r\n    orderby: 'date',\r\n    order: 'desc',\r\n    page: 1,\r\n    totalPages: 1,\r\n    totalPosts: 0,\r\n    posts: [],\r\n    loading: false,\r\n    searchDebounce: null\r\n  };\r\n\r\n  function escapeHtml(str) {\r\n    var d = document.createElement('div');\r\n    d.textContent = str || '';\r\n    return d.innerHTML;\r\n  }\r\n\r\n  function stripAndTrim(html, maxLen) {\r\n    var d = document.createElement('div');\r\n    d.innerHTML = html || '';\r\n    var text = (d.textContent || d.innerText || '').replace(\/\\s+\/g, ' ').trim();\r\n    if (text.length > maxLen) text = text.slice(0, maxLen).replace(\/\\s+\\S*$\/, '') + '\u2026';\r\n    return text;\r\n  }\r\n\r\n  function formatDate(dateStr) {\r\n    var d = new Date(dateStr);\r\n    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\r\n  }\r\n\r\n  \/* ---------------- Categories ---------------- *\/\r\n  function loadCategories() {\r\n    fetch(API_BASE + '\/categories?per_page=100&hide_empty=true&orderby=count&order=desc')\r\n      .then(function (r) { return r.ok ? r.json() : Promise.reject(r); })\r\n      .then(function (cats) { renderCategoryPills(cats); })\r\n      .catch(function () {\r\n        els.cats.innerHTML = '';\r\n      });\r\n  }\r\n\r\n  function renderCategoryPills(cats) {\r\n    var totalCount = cats.reduce(function (sum, c) { return sum + c.count; }, 0);\r\n    var html = '<button type=\"button\" class=\"bg-cat-pill active\" data-id=\"0\">All Posts <span class=\"cnt\">(' + totalCount + ')<\/span><\/button>';\r\n    cats.forEach(function (c) {\r\n      html += '<button type=\"button\" class=\"bg-cat-pill\" data-id=\"' + c.id + '\">' +\r\n        escapeHtml(c.name) + ' <span class=\"cnt\">(' + c.count + ')<\/span><\/button>';\r\n    });\r\n    els.cats.innerHTML = html;\r\n\r\n    els.cats.querySelectorAll('.bg-cat-pill').forEach(function (btn) {\r\n      btn.addEventListener('click', function () {\r\n        els.cats.querySelectorAll('.bg-cat-pill').forEach(function (b) { b.classList.remove('active'); });\r\n        btn.classList.add('active');\r\n        state.category = parseInt(btn.getAttribute('data-id'), 10);\r\n        resetAndFetch();\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* ---------------- Posts ---------------- *\/\r\n  function buildPostsUrl() {\r\n    var params = new URLSearchParams();\r\n    params.set('_embed', 'wp:featuredmedia,wp:term');\r\n    params.set('per_page', PER_PAGE);\r\n    params.set('page', state.page);\r\n    params.set('orderby', state.orderby);\r\n    params.set('order', state.order);\r\n    if (state.category) params.set('categories', state.category);\r\n    if (state.search) params.set('search', state.search);\r\n    return API_BASE + '\/posts?' + params.toString();\r\n  }\r\n\r\n  function resetAndFetch() {\r\n    state.page = 1;\r\n    state.posts = [];\r\n    els.grid.innerHTML = '';\r\n    fetchPosts();\r\n  }\r\n\r\n  function fetchPosts() {\r\n    state.loading = true;\r\n    renderLoadingSkeleton(state.page === 1 ? PER_PAGE : 3);\r\n    updateLoadMoreUI();\r\n\r\n    fetch(buildPostsUrl())\r\n      .then(function (r) {\r\n        if (!r.ok) return Promise.reject(r);\r\n        state.totalPages = parseInt(r.headers.get('X-WP-TotalPages') || '1', 10);\r\n        state.totalPosts = parseInt(r.headers.get('X-WP-Total') || '0', 10);\r\n        return r.json();\r\n      })\r\n      .then(function (posts) {\r\n        state.loading = false;\r\n        if (state.page === 1) {\r\n          state.posts = posts;\r\n        } else {\r\n          state.posts = state.posts.concat(posts);\r\n        }\r\n        renderPosts();\r\n        updateCount();\r\n        updateLoadMoreUI();\r\n      })\r\n      .catch(function () {\r\n        state.loading = false;\r\n        renderError();\r\n        updateLoadMoreUI();\r\n      });\r\n  }\r\n\r\n  function renderLoadingSkeleton(n) {\r\n    if (state.page > 1) return; \/\/ don't wipe existing cards on load-more\r\n    var html = '';\r\n    for (var i = 0; i < n; i++) {\r\n      html += '<div class=\"bg-skel\">' +\r\n                '<div class=\"sk-thumb\"><\/div>' +\r\n                '<div class=\"sk-body\">' +\r\n                  '<div class=\"sk-line w40\"><\/div>' +\r\n                  '<div class=\"sk-line w90\"><\/div>' +\r\n                  '<div class=\"sk-line w60\"><\/div>' +\r\n                '<\/div>' +\r\n              '<\/div>';\r\n    }\r\n    els.grid.innerHTML = html;\r\n  }\r\n\r\n  function renderPosts() {\r\n    if (!state.posts.length) {\r\n      els.grid.innerHTML = '<div class=\"bg-empty\">' +\r\n        '<i class=\"fa-regular fa-newspaper\"><\/i>' +\r\n        '<h3>No articles found<\/h3>' +\r\n        '<p>Try a different search term or category.<\/p>' +\r\n        '<button type=\"button\" id=\"bg-empty-reset\">Clear filters<\/button>' +\r\n        '<\/div>';\r\n      var resetBtn = document.getElementById('bg-empty-reset');\r\n      if (resetBtn) resetBtn.addEventListener('click', clearFilters);\r\n      return;\r\n    }\r\n\r\n    var html = state.posts.map(function (post) {\r\n      var embedded = post._embedded || {};\r\n      var media = embedded['wp:featuredmedia'] && embedded['wp:featuredmedia'][0];\r\n      var imgUrl = media && media.source_url ? media.source_url : '';\r\n      var terms = embedded['wp:term'] || [];\r\n      var catName = '';\r\n      if (terms[0] && terms[0][0]) catName = terms[0][0].name;\r\n\r\n      var thumbStyle = imgUrl ? ' style=\"background-image:url(\\'' + imgUrl + '\\');\"' : '';\r\n      var thumbInner = imgUrl ? '' : '<div class=\"noimg\"><i class=\"fa-regular fa-image\"><\/i><\/div>';\r\n      var badge = catName ? '<span class=\"bg-card-badge\">' + escapeHtml(catName) + '<\/span>' : '';\r\n\r\n      var title = stripAndTrim(post.title ? post.title.rendered : '', 90);\r\n      var excerpt = stripAndTrim(post.excerpt ? post.excerpt.rendered : '', 130);\r\n\r\n      return '<a class=\"bg-card\" href=\"' + post.link + '\">' +\r\n               '<div class=\"bg-card-thumb\"' + thumbStyle + '>' + thumbInner + badge + '<\/div>' +\r\n               '<div class=\"bg-card-body\">' +\r\n                 '<div class=\"bg-card-date\"><i class=\"fa-regular fa-calendar\"><\/i>' + formatDate(post.date) + '<\/div>' +\r\n                 '<h3 class=\"bg-card-title\">' + title + '<\/h3>' +\r\n                 '<p class=\"bg-card-excerpt\">' + excerpt + '<\/p>' +\r\n                 '<span class=\"bg-card-readmore\">Read Article <i class=\"fa-solid fa-arrow-right\"><\/i><\/span>' +\r\n               '<\/div>' +\r\n             '<\/a>';\r\n    }).join('');\r\n\r\n    els.grid.innerHTML = html;\r\n  }\r\n\r\n  function renderError() {\r\n    els.grid.innerHTML = '<div class=\"bg-empty\">' +\r\n      '<i class=\"fa-solid fa-triangle-exclamation\"><\/i>' +\r\n      '<h3>Couldn\\'t load articles<\/h3>' +\r\n      '<p>Something went wrong reaching the blog. Please try again.<\/p>' +\r\n      '<button type=\"button\" id=\"bg-error-retry\">Retry<\/button>' +\r\n      '<\/div>';\r\n    var retryBtn = document.getElementById('bg-error-retry');\r\n    if (retryBtn) retryBtn.addEventListener('click', resetAndFetch);\r\n  }\r\n\r\n  function updateCount() {\r\n    if (!state.totalPosts) { els.count.textContent = ''; return; }\r\n    els.count.textContent = 'Showing ' + state.posts.length + ' of ' + state.totalPosts + ' article' + (state.totalPosts === 1 ? '' : 's');\r\n  }\r\n\r\n  function updateLoadMoreUI() {\r\n    var hasMore = state.page < state.totalPages;\r\n    els.loadWrap.style.display = (hasMore || state.loading) && state.posts.length ? 'flex' : 'none';\r\n    els.loadBtn.disabled = state.loading;\r\n    els.loadLabel.innerHTML = state.loading\r\n      ? '<i class=\"fa-solid fa-spinner fa-spin\"><\/i> Loading...'\r\n      : 'Load More Articles';\r\n  }\r\n\r\n  \/* ---------------- Filters ---------------- *\/\r\n  function clearFilters() {\r\n    state.category = 0;\r\n    state.search = '';\r\n    state.orderby = 'date';\r\n    state.order = 'desc';\r\n    els.search.value = '';\r\n    els.sort.value = 'date-desc';\r\n    els.cats.querySelectorAll('.bg-cat-pill').forEach(function (b, i) {\r\n      b.classList.toggle('active', i === 0);\r\n    });\r\n    resetAndFetch();\r\n  }\r\n\r\n  els.search.addEventListener('input', function () {\r\n    clearTimeout(state.searchDebounce);\r\n    var val = els.search.value;\r\n    state.searchDebounce = setTimeout(function () {\r\n      state.search = val.trim();\r\n      resetAndFetch();\r\n    }, 400);\r\n  });\r\n\r\n  els.sort.addEventListener('change', function () {\r\n    var v = els.sort.value.split('-');\r\n    state.orderby = v[0];\r\n    state.order = v[1];\r\n    resetAndFetch();\r\n  });\r\n\r\n  els.loadBtn.addEventListener('click', function () {\r\n    if (state.loading || state.page >= state.totalPages) return;\r\n    state.page += 1;\r\n    fetchPosts();\r\n  });\r\n\r\n  \/* ---------------- Init ---------------- *\/\r\n  loadCategories();\r\n  fetchPosts();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\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 The Blog News, Tips &amp; Updates Straight talk on vehicle protection plans, dealership news, and everything else worth knowing before your next car. Sort Newest firstOldest firstTitle A\u2013Z Load More Articles<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-2114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/pages\/2114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/comments?post=2114"}],"version-history":[{"count":11,"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/pages\/2114\/revisions"}],"predecessor-version":[{"id":2215,"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/pages\/2114\/revisions\/2215"}],"wp:attachment":[{"href":"https:\/\/tonytribble.com\/es\/wp-json\/wp\/v2\/media?parent=2114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}