{"id":79,"date":"2026-01-20T22:27:26","date_gmt":"2026-01-20T21:27:26","guid":{"rendered":"https:\/\/suapify.com\/en\/blog\/"},"modified":"2026-03-02T05:21:08","modified_gmt":"2026-03-02T04:21:08","slug":"blog","status":"publish","type":"page","link":"https:\/\/suapify.com\/en\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"\n<!-- =====================================================\n     SUAPIFY \u2014 BLOG PAGE (Body Only)\n     Paste into WordPress page via Custom HTML block.\n     Fetches posts dynamically via WordPress REST API.\n     Google Fonts (add to theme <head> if not present):\n     https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\n===================================================== -->\n\n<style>\n\/* \u2500\u2500\u2500 RESET & TOKENS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-wrap *, .bl-wrap *::before, .bl-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }\n.bl-wrap {\n  --blue:       #1E10C1;\n  --blue-dark:  #150C8A;\n  --blue-glow:  rgba(30,16,193,0.1);\n  --blue-soft:  #F0EEFF;\n  --white:      #ffffff;\n  --off:        #F6F6FB;\n  --ink:        #0D0B2B;\n  --muted:      #7B7A9A;\n  --border:     rgba(30,16,193,0.09);\n  --radius:     16px;\n  --radius-sm:  8px;\n  font-family: 'DM Sans', sans-serif;\n  color: var(--ink);\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n.bl-wrap h1,.bl-wrap h2,.bl-wrap h3,.bl-wrap h4 { font-family: 'Syne', sans-serif; }\n\n\/* \u2500\u2500\u2500 COMMON \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); background: var(--blue-glow); padding: 0.3rem 0.85rem; border-radius: 50px; }\n.bl-tag-white { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }\n.bl-tag-dark { background: var(--ink); color: var(--white); }\n\n.bl-btn-blue { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--blue); color: var(--white); font-family: 'DM Sans',sans-serif; font-weight: 600; font-size: 0.9rem; padding: 0.75rem 2rem; border-radius: 50px; text-decoration: none; border: none; cursor: pointer; transition: background .2s, transform .15s; }\n.bl-btn-blue:hover { background: var(--blue-dark); transform: translateY(-2px); color: var(--white); }\n.bl-btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--blue); font-family: 'DM Sans',sans-serif; font-weight: 600; font-size: 0.9rem; padding: 0.75rem 2rem; border-radius: 50px; text-decoration: none; border: 1.5px solid var(--blue); cursor: pointer; transition: all .2s; }\n.bl-btn-outline:hover { background: var(--blue); color: var(--white); }\n\n@keyframes bl-up   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }\n@keyframes bl-spin { to { transform:rotate(360deg); } }\n@keyframes bl-pulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }\n\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-hero {\n  background: var(--ink);\n  position: relative;\n  overflow: hidden;\n  padding: 80px 6% 72px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 4rem;\n  align-items: center;\n}\n.bl-hero-grid {\n  position: absolute; inset: 0; pointer-events: none; opacity: 0.05;\n  background-image: linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);\n  background-size: 44px 44px;\n}\n.bl-hero-blob { position: absolute; border-radius: 50%; pointer-events: none; }\n.bl-hero-blob.a { width: 500px; height: 500px; top: -160px; right: -80px; background: rgba(30,16,193,0.18); filter: blur(80px); }\n.bl-hero-blob.b { width: 300px; height: 300px; bottom: -100px; left: 5%; background: rgba(30,16,193,0.1); filter: blur(60px); }\n\n.bl-hero-left { position: relative; animation: bl-up .7s ease both; }\n.bl-hero-eyebrow { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; }\n.bl-hero-eyebrow-line { width: 30px; height: 2px; background: var(--blue); border-radius: 2px; }\n.bl-hero-eyebrow span { font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); }\n.bl-hero h1 { font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 800; color: var(--white); letter-spacing: -1.5px; line-height: 1.0; margin-bottom: 1.2rem; }\n.bl-hero h1 em { font-style: normal; color: var(--blue); }\n.bl-hero-desc { color: rgba(255,255,255,0.55); font-size: 1rem; line-height: 1.72; font-weight: 300; max-width: 420px; margin-bottom: 2rem; }\n\n\/* Search bar *\/\n.bl-search {\n  display: flex;\n  align-items: center;\n  background: rgba(255,255,255,0.07);\n  border: 1.5px solid rgba(255,255,255,0.12);\n  border-radius: 50px;\n  padding: 0 1rem;\n  gap: 0.6rem;\n  max-width: 380px;\n  transition: border-color .2s, background .2s;\n}\n.bl-search:focus-within { border-color: var(--blue); background: rgba(255,255,255,0.1); }\n.bl-search svg { flex-shrink: 0; color: rgba(255,255,255,0.4); }\n.bl-search input {\n  flex: 1; border: none; background: transparent; font-family: 'DM Sans',sans-serif;\n  font-size: 0.9rem; color: var(--white); padding: 0.75rem 0; outline: none;\n}\n.bl-search input::placeholder { color: rgba(255,255,255,0.35); }\n\n\/* Hero stats *\/\n.bl-hero-stats { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; animation: bl-up .8s ease .15s both; }\n.bl-hero-stat strong { display: block; font-family: 'Syne',sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--white); line-height: 1; }\n.bl-hero-stat span { font-size: 0.75rem; color: rgba(255,255,255,0.4); font-weight: 300; }\n\n\/* Hero right \u2014 category cloud *\/\n.bl-hero-right { position: relative; animation: bl-up .8s ease .1s both; }\n.bl-category-cloud-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 1.2rem; }\n.bl-category-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; }\n.bl-cat-pill {\n  display: flex; align-items: center; gap: 0.4rem;\n  background: rgba(255,255,255,0.06);\n  border: 1px solid rgba(255,255,255,0.1);\n  color: rgba(255,255,255,0.7);\n  font-family: 'DM Sans',sans-serif; font-size: 0.83rem; font-weight: 500;\n  padding: 0.45rem 1rem; border-radius: 50px; cursor: pointer;\n  transition: all .2s; text-decoration: none;\n}\n.bl-cat-pill:hover, .bl-cat-pill.active {\n  background: var(--blue); border-color: var(--blue); color: var(--white);\n}\n.bl-cat-pill.active { font-weight: 700; }\n.bl-cat-count { font-size: 0.7rem; opacity: 0.6; }\n\n\/* \u2500\u2500\u2500 LATEST POST (FEATURE) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-featured-section { background: var(--white); padding: 72px 6% 0; }\n.bl-section-label {\n  display: flex; align-items: center; gap: 1rem; margin-bottom: 2.2rem;\n}\n.bl-section-label-text { font-size: 0.68rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }\n.bl-section-label-line { flex: 1; height: 1px; background: var(--border); }\n\n.bl-feature-card {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  border-radius: var(--radius);\n  overflow: hidden;\n  border: 1.5px solid var(--border);\n  transition: box-shadow .25s;\n  text-decoration: none;\n  color: var(--ink);\n  min-height: 380px;\n}\n.bl-feature-card:hover { box-shadow: 0 24px 60px var(--blue-glow); }\n\n.bl-feature-img {\n  position: relative; overflow: hidden; background: var(--off); min-height: 340px;\n}\n.bl-feature-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n  transition: transform .5s ease;\n}\n.bl-feature-card:hover .bl-feature-img img { transform: scale(1.04); }\n.bl-feature-img-placeholder {\n  width: 100%; height: 100%; min-height: 340px;\n  background: linear-gradient(135deg, #1E10C1 0%, #4030E8 50%, #7B5CF6 100%);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 4rem; opacity: 0.6;\n}\n.bl-feature-badge {\n  position: absolute; top: 1.2rem; left: 1.2rem;\n  background: var(--blue); color: var(--white);\n  font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;\n  padding: 0.3rem 0.8rem; border-radius: 50px;\n}\n\n.bl-feature-body { padding: 2.5rem 2.8rem; display: flex; flex-direction: column; justify-content: center; }\n.bl-feature-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }\n.bl-feature-cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }\n.bl-feature-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }\n.bl-feature-date { font-size: 0.78rem; color: var(--muted); font-weight: 300; }\n.bl-feature-body h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 1rem; }\n.bl-feature-body h2:hover { color: var(--blue); }\n.bl-feature-excerpt { font-size: 0.95rem; color: var(--muted); line-height: 1.74; font-weight: 300; margin-bottom: 1.8rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }\n.bl-feature-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }\n.bl-feature-author { display: flex; align-items: center; gap: 0.6rem; }\n.bl-feature-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-glow); border: 2px solid var(--border); object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--blue); flex-shrink: 0; }\n.bl-feature-author-name { font-size: 0.82rem; font-weight: 600; }\n.bl-feature-read-time { font-size: 0.75rem; color: var(--muted); font-weight: 300; }\n.bl-read-more { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--blue); text-decoration: none; transition: gap .2s; }\n.bl-read-more:hover { gap: 0.7rem; }\n.bl-read-more svg { transition: transform .2s; }\n.bl-read-more:hover svg { transform: translateX(3px); }\n\n\/* \u2500\u2500\u2500 FILTER BAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-filter-bar { background: var(--white); padding: 40px 6% 0; position: sticky; top: 68px; z-index: 10; }\n.bl-filter-inner { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; padding-bottom: 1px; scrollbar-width: none; border-bottom: 1px solid var(--border); padding-bottom: 0; }\n.bl-filter-inner::-webkit-scrollbar { display: none; }\n.bl-filter-btn {\n  display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0;\n  background: none; border: none; cursor: pointer;\n  font-family: 'DM Sans',sans-serif; font-size: 0.87rem; font-weight: 500;\n  color: var(--muted); padding: 0.75rem 1rem; border-radius: 0;\n  transition: color .2s; position: relative; white-space: nowrap;\n}\n.bl-filter-btn::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .2s; }\n.bl-filter-btn:hover { color: var(--ink); }\n.bl-filter-btn.active { color: var(--blue); font-weight: 700; }\n.bl-filter-btn.active::after { transform: scaleX(1); }\n\n\/* \u2500\u2500\u2500 GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-grid-section { background: var(--white); padding: 48px 6% 80px; }\n.bl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }\n\n\/* Post card *\/\n.bl-card {\n  border-radius: var(--radius);\n  border: 1.5px solid var(--border);\n  overflow: hidden;\n  background: var(--white);\n  transition: transform .22s, box-shadow .22s;\n  display: flex; flex-direction: column;\n  text-decoration: none; color: var(--ink);\n}\n.bl-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px var(--blue-glow); }\n\n.bl-card-img { position: relative; overflow: hidden; aspect-ratio: 16\/10; background: var(--off); flex-shrink: 0; }\n.bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }\n.bl-card:hover .bl-card-img img { transform: scale(1.06); }\n.bl-card-img-placeholder {\n  width: 100%; height: 100%;\n  background: linear-gradient(135deg, var(--blue-soft) 0%, #ddd8ff 100%);\n  display: flex; align-items: center; justify-content: center; font-size: 2.5rem; opacity: 0.7;\n}\n.bl-card-cat-badge {\n  position: absolute; top: 0.85rem; left: 0.85rem;\n  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);\n  color: var(--blue); font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;\n  padding: 0.25rem 0.7rem; border-radius: 50px;\n}\n\n.bl-card-body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }\n.bl-card-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }\n.bl-card-date { font-size: 0.74rem; color: var(--muted); font-weight: 300; }\n.bl-card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }\n.bl-card-read { font-size: 0.74rem; color: var(--muted); font-weight: 300; }\n.bl-card-body h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.65rem; letter-spacing: -0.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n.bl-card:hover h3 { color: var(--blue); }\n.bl-card-excerpt { font-size: 0.85rem; color: var(--muted); line-height: 1.68; font-weight: 300; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }\n.bl-card-footer { margin-top: 1.2rem; display: flex; align-items: center; justify-content: space-between; }\n.bl-card-author { font-size: 0.76rem; color: var(--muted); font-weight: 300; }\n.bl-card-arrow { color: var(--blue); font-size: 1rem; font-weight: 700; transition: transform .2s; }\n.bl-card:hover .bl-card-arrow { transform: translateX(4px); }\n\n\/* Loading \/ empty states *\/\n.bl-loading { grid-column: 1 \/ -1; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 0; }\n.bl-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: bl-spin 0.7s linear infinite; }\n.bl-loading-text { font-size: 0.88rem; color: var(--muted); font-weight: 300; }\n\n.bl-skeleton { border-radius: var(--radius); border: 1.5px solid var(--border); overflow: hidden; }\n.bl-skel-img { height: 180px; background: linear-gradient(90deg, var(--off) 25%, #eeedf8 50%, var(--off) 75%); background-size: 200% 100%; animation: bl-shimmer 1.5s infinite; }\n.bl-skel-body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }\n.bl-skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--off) 25%, #eeedf8 50%, var(--off) 75%); background-size: 200% 100%; animation: bl-shimmer 1.5s infinite; }\n.bl-skel-line.w80 { width: 80%; }\n.bl-skel-line.w60 { width: 60%; }\n.bl-skel-line.w40 { width: 40%; }\n@keyframes bl-shimmer { to { background-position: -200% 0; } }\n\n.bl-empty { grid-column: 1 \/ -1; text-align: center; padding: 5rem 2rem; }\n.bl-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }\n.bl-empty h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--muted); }\n.bl-empty p { font-size: 0.9rem; color: var(--muted); font-weight: 300; }\n\n\/* \u2500\u2500\u2500 LOAD MORE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-loadmore-wrap { display: flex; justify-content: center; margin-top: 3rem; }\n.bl-loadmore-btn {\n  display: inline-flex; align-items: center; gap: 0.6rem;\n  background: var(--off); border: 1.5px solid var(--border); border-radius: 50px;\n  font-family: 'DM Sans',sans-serif; font-size: 0.9rem; font-weight: 600;\n  color: var(--ink); padding: 0.8rem 2.2rem; cursor: pointer;\n  transition: all .2s;\n}\n.bl-loadmore-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }\n.bl-loadmore-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n\/* \u2500\u2500\u2500 NEWSLETTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bl-newsletter { background: var(--blue); position: relative; overflow: hidden; padding: 72px 6%; }\n.bl-nl-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px); background-size: 40px 40px; }\n.bl-newsletter-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }\n.bl-newsletter-left h2 { font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 800; color: var(--white); letter-spacing: -0.5px; margin-bottom: 0.8rem; }\n.bl-newsletter-left p { color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.7; font-weight: 300; }\n.bl-nl-form { display: flex; gap: 0.75rem; }\n.bl-nl-input {\n  flex: 1; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);\n  border-radius: 50px; padding: 0.8rem 1.4rem;\n  font-family: 'DM Sans',sans-serif; font-size: 0.9rem; color: var(--white);\n  outline: none; transition: border-color .2s;\n}\n.bl-nl-input::placeholder { color: rgba(255,255,255,0.4); }\n.bl-nl-input:focus { border-color: rgba(255,255,255,0.6); }\n.bl-nl-btn {\n  flex-shrink: 0; background: var(--white); color: var(--blue);\n  font-family: 'DM Sans',sans-serif; font-weight: 700; font-size: 0.9rem;\n  padding: 0.8rem 1.8rem; border-radius: 50px; border: none; cursor: pointer;\n  transition: all .2s; white-space: nowrap;\n}\n.bl-nl-btn:hover { background: var(--off); transform: translateY(-2px); }\n.bl-nl-note { font-size: 0.76rem; color: rgba(255,255,255,0.35); margin-top: 0.7rem; font-weight: 300; }\n\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 1024px) { .bl-grid { grid-template-columns: repeat(2,1fr); } }\n@media (max-width: 860px) {\n  .bl-hero { grid-template-columns: 1fr; gap: 2.5rem; }\n  .bl-hero-right { display: none; }\n  .bl-feature-card { grid-template-columns: 1fr; min-height: auto; }\n  .bl-feature-img { min-height: 240px; }\n  .bl-feature-body { padding: 1.8rem 2rem; }\n  .bl-newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }\n  .bl-nl-form { flex-direction: column; }\n}\n@media (max-width: 600px) {\n  .bl-hero { padding: 60px 5% 56px; }\n  .bl-featured-section, .bl-grid-section, .bl-newsletter { padding-left: 5%; padding-right: 5%; }\n  .bl-filter-bar { padding-left: 5%; padding-right: 5%; }\n  .bl-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<div class=\"bl-wrap\">\n\n<!-- \u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"bl-hero\">\n  <div class=\"bl-hero-grid\"><\/div>\n  <div class=\"bl-hero-blob a\"><\/div>\n  <div class=\"bl-hero-blob b\"><\/div>\n\n  <div class=\"bl-hero-left\">\n    <div class=\"bl-hero-eyebrow\">\n      <div class=\"bl-hero-eyebrow-line\"><\/div>\n      <span>The Suapify Blog<\/span>\n    <\/div>\n    <h1>Insights, Tips &#038;<br><em>Industry News.<\/em><\/h1>\n    <p class=\"bl-hero-desc\">Shipping guides, sourcing strategies, eCommerce advice, and everything in between \u2014 written for buyers and sellers who want to do more with Mexico.<\/p>\n\n    <div class=\"bl-search\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\n      <input type=\"text\" id=\"bl-search-input\" placeholder=\"Search articles\u2026\" autocomplete=\"off\">\n    <\/div>\n\n    <div class=\"bl-hero-stats\">\n      <div class=\"bl-hero-stat\">\n        <strong id=\"bl-total-posts\">\u2014<\/strong>\n        <span>Articles published<\/span>\n      <\/div>\n      <div class=\"bl-hero-stat\">\n        <strong id=\"bl-total-cats\">\u2014<\/strong>\n        <span>Topics covered<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"bl-hero-right\">\n    <div class=\"bl-category-cloud-title\">Browse by topic<\/div>\n    <div class=\"bl-category-cloud\" id=\"bl-cat-cloud\">\n      <!-- populated by JS -->\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 LATEST POST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"bl-featured-section\" id=\"bl-featured-section\">\n  <div class=\"bl-section-label\">\n    <span class=\"bl-section-label-text\">\u2726 Latest Post<\/span>\n    <div class=\"bl-section-label-line\"><\/div>\n  <\/div>\n  <div id=\"bl-feature-wrap\">\n    <!-- Skeleton -->\n    <div class=\"bl-feature-card bl-skeleton\" style=\"display:grid;grid-template-columns:1fr 1fr;min-height:340px;border-radius:16px;overflow:hidden;\">\n      <div class=\"bl-skel-img\" style=\"min-height:340px\"><\/div>\n      <div class=\"bl-skel-body\" style=\"padding:2.5rem 2.8rem;justify-content:center;\">\n        <div class=\"bl-skel-line w40\" style=\"height:10px\"><\/div>\n        <div class=\"bl-skel-line w80\" style=\"height:28px;margin-top:.5rem\"><\/div>\n        <div class=\"bl-skel-line\" style=\"height:28px;margin-top:.3rem\"><\/div>\n        <div class=\"bl-skel-line w60\" style=\"height:14px;margin-top:.8rem\"><\/div>\n        <div class=\"bl-skel-line\" style=\"height:14px;margin-top:.3rem\"><\/div>\n        <div class=\"bl-skel-line w80\" style=\"height:14px;margin-top:.3rem\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 FILTER BAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"bl-filter-bar\">\n  <div class=\"bl-filter-inner\" id=\"bl-filters\">\n    <button class=\"bl-filter-btn active\" data-cat=\"all\">All Posts<\/button>\n    <!-- more tabs added by JS -->\n  <\/div>\n<\/div>\n\n<!-- \u2500\u2500\u2500 GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"bl-grid-section\">\n  <div class=\"bl-grid\" id=\"bl-grid\">\n    <!-- skeleton cards -->\n    <div class=\"bl-skeleton\"><div class=\"bl-skel-img\"><\/div><div class=\"bl-skel-body\"><div class=\"bl-skel-line w40\"><\/div><div class=\"bl-skel-line w80\" style=\"height:20px;margin-top:.5rem\"><\/div><div class=\"bl-skel-line\" style=\"height:20px;margin-top:.3rem\"><\/div><div class=\"bl-skel-line w60\"><\/div><div class=\"bl-skel-line w80\"><\/div><\/div><\/div>\n    <div class=\"bl-skeleton\"><div class=\"bl-skel-img\"><\/div><div class=\"bl-skel-body\"><div class=\"bl-skel-line w40\"><\/div><div class=\"bl-skel-line w80\" style=\"height:20px;margin-top:.5rem\"><\/div><div class=\"bl-skel-line\" style=\"height:20px;margin-top:.3rem\"><\/div><div class=\"bl-skel-line w60\"><\/div><div class=\"bl-skel-line w80\"><\/div><\/div><\/div>\n    <div class=\"bl-skeleton\"><div class=\"bl-skel-img\"><\/div><div class=\"bl-skel-body\"><div class=\"bl-skel-line w40\"><\/div><div class=\"bl-skel-line w80\" style=\"height:20px;margin-top:.5rem\"><\/div><div class=\"bl-skel-line\" style=\"height:20px;margin-top:.3rem\"><\/div><div class=\"bl-skel-line w60\"><\/div><div class=\"bl-skel-line w80\"><\/div><\/div><\/div>\n  <\/div>\n  <div class=\"bl-loadmore-wrap\" id=\"bl-loadmore-wrap\" style=\"display:none;\">\n    <button class=\"bl-loadmore-btn\" id=\"bl-loadmore\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n      Load More Articles\n    <\/button>\n  <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 NEWSLETTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"bl-newsletter\">\n  <div class=\"bl-nl-grid\"><\/div>\n  <div class=\"bl-newsletter-inner\">\n    <div class=\"bl-newsletter-left\">\n      <div class=\"bl-tag bl-tag-white\" style=\"margin-bottom:1rem\">Stay in the Loop<\/div>\n      <h2>Get the Latest Straight<br>to Your Inbox<\/h2>\n      <p>New shipping guides, sourcing tips, and eCommerce strategies \u2014 delivered whenever we publish something worth reading. No spam, ever.<\/p>\n    <\/div>\n    <div class=\"bl-newsletter-right\">\n      <div class=\"bl-nl-form\">\n        <input type=\"email\" class=\"bl-nl-input\" placeholder=\"your@email.com\">\n        <button class=\"bl-nl-btn\">Subscribe \u2192<\/button>\n      <\/div>\n      <p class=\"bl-nl-note\">By subscribing you agree to receive email updates from Suapify. Unsubscribe anytime.<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div><!-- \/.bl-wrap -->\n\n<script>\n(function () {\n  'use strict';\n\n  \/* \u2500\u2500 CONFIG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var API_BASE   = 'https:\/\/suapify.com\/en\/wp-json\/wp\/v2';\n  var PER_PAGE   = 9;       \/\/ posts per grid page\n  var SITE_LANG  = 'en';    \/\/ adjust if WPML uses a different param\n\n  \/* \u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var state = {\n    allPosts:   [],   \/\/ full post list (for client-side filtering)\n    categories: {},   \/\/ id \u2192 {name, count}\n    activeCat:  'all',\n    page:       1,\n    totalPages: 1,\n    loading:    false,\n    searchTerm: ''\n  };\n\n  \/* \u2500\u2500 DOM REFS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var grid       = document.getElementById('bl-grid');\n  var featureWrap = document.getElementById('bl-feature-wrap');\n  var filtersEl   = document.getElementById('bl-filters');\n  var catCloud    = document.getElementById('bl-cat-cloud');\n  var loadMoreWrap = document.getElementById('bl-loadmore-wrap');\n  var loadMoreBtn  = document.getElementById('bl-loadmore');\n  var totalPostsEl = document.getElementById('bl-total-posts');\n  var totalCatsEl  = document.getElementById('bl-total-cats');\n  var searchInput  = document.getElementById('bl-search-input');\n\n  \/* \u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function apiUrl(path, params) {\n    var u = API_BASE + path + '?';\n    var p = Object.assign({ per_page: PER_PAGE, _embed: 1 }, params || {});\n    return u + Object.entries(p).map(function (kv) { return kv[0] + '=' + encodeURIComponent(kv[1]); }).join('&');\n  }\n\n  function formatDate(iso) {\n    var d = new Date(iso);\n    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\n  }\n\n  function readTime(html) {\n    var text = html.replace(\/<[^>]+>\/g, '');\n    var words = text.trim().split(\/\\s+\/).length;\n    return Math.max(1, Math.round(words \/ 200)) + ' min read';\n  }\n\n  function getFeaturedImg(post) {\n    try {\n      var media = post._embedded['wp:featuredmedia'];\n      if (media && media[0] && media[0].source_url) return media[0].source_url;\n    } catch (e) {}\n    return null;\n  }\n\n  function getCatName(post) {\n    try {\n      var terms = post._embedded['wp:term'];\n      if (terms && terms[0] && terms[0][0]) return terms[0][0].name;\n    } catch (e) {}\n    return 'General';\n  }\n\n  function getAuthor(post) {\n    try {\n      var authors = post._embedded.author;\n      if (authors && authors[0]) return authors[0].name;\n    } catch (e) {}\n    return 'Suapify';\n  }\n\n  function stripHtml(html) { var tmp = document.createElement('div'); tmp.innerHTML = html; return tmp.textContent || tmp.innerText || ''; }\n\n  \/* \u2500\u2500 RENDER: featured card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function renderFeature(post) {\n    var img = getFeaturedImg(post);\n    var cat = getCatName(post);\n    var author = getAuthor(post);\n    var date = formatDate(post.date);\n    var rt = readTime(post.content.rendered);\n    var title = stripHtml(post.title.rendered);\n    var excerpt = stripHtml(post.excerpt.rendered);\n    var url = post.link;\n\n    featureWrap.innerHTML =\n      '<a href=\"' + url + '\" class=\"bl-feature-card\">' +\n        '<div class=\"bl-feature-img\">' +\n          (img\n            ? '<img decoding=\"async\" src=\"' + img + '\" alt=\"' + title + '\" loading=\"lazy\">'\n            : '<div class=\"bl-feature-img-placeholder\">\u270d\ufe0f<\/div>') +\n          '<span class=\"bl-feature-badge\">Latest<\/span>' +\n        '<\/div>' +\n        '<div class=\"bl-feature-body\">' +\n          '<div class=\"bl-feature-meta\">' +\n            '<span class=\"bl-feature-cat\">' + cat + '<\/span>' +\n            '<span class=\"bl-feature-dot\"><\/span>' +\n            '<span class=\"bl-feature-date\">' + date + '<\/span>' +\n          '<\/div>' +\n          '<h2>' + title + '<\/h2>' +\n          '<p class=\"bl-feature-excerpt\">' + excerpt + '<\/p>' +\n          '<div class=\"bl-feature-footer\">' +\n            '<div class=\"bl-feature-author\">' +\n              '<div class=\"bl-feature-avatar\">' + (author[0] || 'S') + '<\/div>' +\n              '<div>' +\n                '<div class=\"bl-feature-author-name\">' + author + '<\/div>' +\n                '<div class=\"bl-feature-read-time\">' + rt + '<\/div>' +\n              '<\/div>' +\n            '<\/div>' +\n            '<span class=\"bl-read-more\">Read article <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>' +\n          '<\/div>' +\n        '<\/div>' +\n      '<\/a>';\n  }\n\n  \/* \u2500\u2500 RENDER: grid card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function renderCard(post) {\n    var img = getFeaturedImg(post);\n    var cat = getCatName(post);\n    var author = getAuthor(post);\n    var date = formatDate(post.date);\n    var rt = readTime(post.content.rendered);\n    var title = stripHtml(post.title.rendered);\n    var excerpt = stripHtml(post.excerpt.rendered);\n    var url = post.link;\n\n    return '<a href=\"' + url + '\" class=\"bl-card\">' +\n      '<div class=\"bl-card-img\">' +\n        (img\n          ? '<img decoding=\"async\" src=\"' + img + '\" alt=\"' + title + '\" loading=\"lazy\">'\n          : '<div class=\"bl-card-img-placeholder\">\ud83d\udcdd<\/div>') +\n        '<span class=\"bl-card-cat-badge\">' + cat + '<\/span>' +\n      '<\/div>' +\n      '<div class=\"bl-card-body\">' +\n        '<div class=\"bl-card-meta\">' +\n          '<span class=\"bl-card-date\">' + date + '<\/span>' +\n          '<span class=\"bl-card-dot\"><\/span>' +\n          '<span class=\"bl-card-read\">' + rt + '<\/span>' +\n        '<\/div>' +\n        '<h3>' + title + '<\/h3>' +\n        '<p class=\"bl-card-excerpt\">' + excerpt + '<\/p>' +\n        '<div class=\"bl-card-footer\">' +\n          '<span class=\"bl-card-author\">By ' + author + '<\/span>' +\n          '<span class=\"bl-card-arrow\">\u2192<\/span>' +\n        '<\/div>' +\n      '<\/div>' +\n    '<\/a>';\n  }\n\n  \/* \u2500\u2500 RENDER: filter tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function renderFilters() {\n    var html = '<button class=\"bl-filter-btn' + (state.activeCat === 'all' ? ' active' : '') + '\" data-cat=\"all\">All Posts<\/button>';\n    Object.entries(state.categories).forEach(function (entry) {\n      var id = entry[0], cat = entry[1];\n      html += '<button class=\"bl-filter-btn' + (state.activeCat == id ? ' active' : '') + '\" data-cat=\"' + id + '\">' + cat.name + ' <span style=\"opacity:.45;font-size:.75em\">(' + cat.count + ')<\/span><\/button>';\n    });\n    filtersEl.innerHTML = html;\n    filtersEl.querySelectorAll('.bl-filter-btn').forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        state.activeCat = this.dataset.cat;\n        state.page = 1;\n        filtersEl.querySelectorAll('.bl-filter-btn').forEach(function (b) { b.classList.remove('active'); });\n        this.classList.add('active');\n        loadPosts(true);\n      });\n    });\n  }\n\n  \/* \u2500\u2500 RENDER: category cloud \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function renderCloud() {\n    var all = '<button class=\"bl-cat-pill' + (state.activeCat === 'all' ? ' active' : '') + '\" data-cat=\"all\">All \u2726<\/button>';\n    Object.entries(state.categories).forEach(function (entry) {\n      var id = entry[0], cat = entry[1];\n      all += '<button class=\"bl-cat-pill' + (state.activeCat == id ? ' active' : '') + '\" data-cat=\"' + id + '\">' + cat.name + ' <span class=\"bl-cat-count\">' + cat.count + '<\/span><\/button>';\n    });\n    catCloud.innerHTML = all;\n    catCloud.querySelectorAll('.bl-cat-pill').forEach(function (pill) {\n      pill.addEventListener('click', function () {\n        state.activeCat = this.dataset.cat;\n        state.page = 1;\n        catCloud.querySelectorAll('.bl-cat-pill').forEach(function (p) { p.classList.remove('active'); });\n        this.classList.add('active');\n        \/\/ sync filter bar\n        filtersEl.querySelectorAll('.bl-filter-btn').forEach(function (b) {\n          b.classList.toggle('active', b.dataset.cat === state.activeCat);\n        });\n        loadPosts(true);\n      });\n    });\n  }\n\n  \/* \u2500\u2500 GRID: show loading skeletons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function showGridSkeleton() {\n    var sk = '';\n    for (var i = 0; i < 3; i++) {\n      sk += '<div class=\"bl-skeleton\"><div class=\"bl-skel-img\"><\/div><div class=\"bl-skel-body\">' +\n            '<div class=\"bl-skel-line w40\"><\/div>' +\n            '<div class=\"bl-skel-line w80\" style=\"height:20px;margin-top:.5rem\"><\/div>' +\n            '<div class=\"bl-skel-line\" style=\"height:20px;margin-top:.3rem\"><\/div>' +\n            '<div class=\"bl-skel-line w60\"><\/div><div class=\"bl-skel-line w80\"><\/div><\/div><\/div>';\n    }\n    grid.innerHTML = sk;\n  }\n\n  \/* \u2500\u2500 FETCH: categories \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function loadCategories() {\n    fetch(apiUrl('\/categories', { per_page: 100, hide_empty: 1 }))\n      .then(function (r) { return r.json(); })\n      .then(function (cats) {\n        cats.forEach(function (c) {\n          if (c.slug !== 'uncategorized') {\n            state.categories[c.id] = { name: c.name, count: c.count };\n          }\n        });\n        if (totalCatsEl) totalCatsEl.textContent = cats.length;\n        renderFilters();\n        renderCloud();\n      })\n      .catch(function () {});\n  }\n\n  \/* \u2500\u2500 FETCH: posts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function loadPosts(reset) {\n    if (state.loading) return;\n    state.loading = true;\n\n    if (reset) {\n      state.page = 1;\n      showGridSkeleton();\n      loadMoreWrap.style.display = 'none';\n    } else {\n      loadMoreBtn.disabled = true;\n      loadMoreBtn.textContent = 'Loading\u2026';\n    }\n\n    var params = { page: state.page, per_page: PER_PAGE };\n    if (state.activeCat !== 'all') params.categories = state.activeCat;\n    if (state.searchTerm.length > 1) params.search = state.searchTerm;\n\n    fetch(apiUrl('\/posts', params))\n      .then(function (r) {\n        state.totalPages = parseInt(r.headers.get('X-WP-TotalPages') || 1);\n        var total = parseInt(r.headers.get('X-WP-Total') || 0);\n        if (totalPostsEl && state.activeCat === 'all' && !state.searchTerm) {\n          totalPostsEl.textContent = total;\n        }\n        return r.json();\n      })\n      .then(function (posts) {\n        if (reset) {\n          grid.innerHTML = '';\n          \/\/ Render latest post as feature if we're on first page, all category, no search\n          if (posts.length > 0 && state.page === 1 && state.activeCat === 'all' && !state.searchTerm) {\n            renderFeature(posts[0]);\n            posts = posts.slice(1);\n          } else if (posts.length === 0) {\n            \/\/ Show \"latest\" skeleton remains or hide\n            if (state.activeCat !== 'all' || state.searchTerm) {\n              \/\/ don't re-render feature for filtered views\n            }\n          }\n        }\n\n        if (posts.length === 0 && reset) {\n          grid.innerHTML = '<div class=\"bl-empty\"><div class=\"bl-empty-icon\">\ud83d\udd0d<\/div><h3>No articles found<\/h3><p>Try a different search term or category.<\/p><\/div>';\n          loadMoreWrap.style.display = 'none';\n        } else {\n          var html = '';\n          posts.forEach(function (p) { html += renderCard(p); });\n          if (reset) { grid.innerHTML = html; }\n          else { grid.insertAdjacentHTML('beforeend', html); }\n\n          \/\/ Animate new cards in\n          var cards = grid.querySelectorAll('.bl-card');\n          cards.forEach(function (card, i) {\n            card.style.opacity = '0';\n            card.style.transform = 'translateY(18px)';\n            card.style.transition = 'opacity .45s ease ' + (i % PER_PAGE * 60) + 'ms, transform .45s ease ' + (i % PER_PAGE * 60) + 'ms';\n            setTimeout(function () {\n              card.style.opacity = '1';\n              card.style.transform = 'translateY(0)';\n            }, 30);\n          });\n\n          \/\/ Load more button\n          if (state.page < state.totalPages) {\n            loadMoreWrap.style.display = 'flex';\n            loadMoreBtn.disabled = false;\n            loadMoreBtn.innerHTML = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg> Load More Articles';\n          } else {\n            loadMoreWrap.style.display = 'none';\n          }\n        }\n        state.loading = false;\n      })\n      .catch(function () {\n        grid.innerHTML = '<div class=\"bl-empty\"><div class=\"bl-empty-icon\">\u26a0\ufe0f<\/div><h3>Could not load articles<\/h3><p>Please check back shortly.<\/p><\/div>';\n        state.loading = false;\n      });\n  }\n\n  \/* \u2500\u2500 SEARCH \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var searchTimer;\n  if (searchInput) {\n    searchInput.addEventListener('input', function () {\n      clearTimeout(searchTimer);\n      var term = this.value.trim();\n      searchTimer = setTimeout(function () {\n        state.searchTerm = term;\n        state.activeCat = 'all';\n        \/\/ sync filter bar\n        filtersEl.querySelectorAll('.bl-filter-btn').forEach(function (b) {\n          b.classList.toggle('active', b.dataset.cat === 'all');\n        });\n        loadPosts(true);\n      }, 380);\n    });\n  }\n\n  \/* \u2500\u2500 LOAD MORE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  if (loadMoreBtn) {\n    loadMoreBtn.addEventListener('click', function () {\n      state.page++;\n      loadPosts(false);\n    });\n  }\n\n  \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  if (window.IntersectionObserver) {\n    var obs = new IntersectionObserver(function (entries) {\n      entries.forEach(function (e) {\n        if (!e.isIntersecting) return;\n        e.target.style.opacity = '1';\n        e.target.style.transform = 'translateY(0)';\n        obs.unobserve(e.target);\n      });\n    }, { threshold: 0.07 });\n\n    ['.bl-feature-card', '.bl-newsletter-inner'].forEach(function (sel) {\n      var el = document.querySelector(sel);\n      if (!el) return;\n      el.style.opacity = '0';\n      el.style.transform = 'translateY(20px)';\n      el.style.transition = 'opacity .6s ease, transform .6s ease';\n      obs.observe(el);\n    });\n  }\n\n  \/* \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  loadCategories();\n  loadPosts(true);\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>The Suapify Blog Insights, Tips &#038;Industry News. Shipping guides, sourcing strategies, eCommerce advice, and everything in between \u2014 written for&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-79","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/pages\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":2,"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/pages\/79\/revisions"}],"predecessor-version":[{"id":5747,"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/pages\/79\/revisions\/5747"}],"wp:attachment":[{"href":"https:\/\/suapify.com\/en\/wp-json\/wp\/v2\/media?parent=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}