/*
 * Xecta Medical Billing — Blog Stylesheet
 * File   : assets/css/blog.css
 * Enqueue: functions.php  →  xecta_blog_enqueue_assets()
 *
 * CSS SECTIONS:
 *   1. Variables & Reset       ← shared across all blog templates
 *   2. Shared Components       ← buttons, breadcrumbs, pagination, tag pills
 *   3. Single Post  (.xsp-)    ← single.php
 *   4. Blog Home    (.xhm-)    ← home.php     (added when that file is built)
 *   5. Archive      (.xar-)    ← archive.php  (added later)
 *   6. Author Page  (.xau-)    ← author.php   (added later)
 *   7. Search       (.xsr-)    ← search.php   (added later)
 *   8. Responsive              ← all breakpoints consolidated
 *
 * PREFIX GUIDE:
 *   .xsp-  single post elements
 *   .xhm-  blog home / listing (home.php)
 *   .xar-  archive  (archive.php)
 *   .xau-  author   (author.php)
 *   .xsr-  search   (search.php)
 *   .xblog- shared across all templates above
 */

/* ════════════════════════════════════════════════════════════
   1. VARIABLES & RESET
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand */
  --blog-brand:      #E8177A;
  --blog-brand2:     #be185d;
  --blog-brand-l:    #fce8f2;
  --blog-brand-xl:   #fef5f9;

  /* Semantic colours */
  --blog-green:      #059669;
  --blog-green-l:    #d1fae5;
  --blog-amber:      #d97706;
  --blog-amber-l:    #fef3c7;
  --blog-blue:       #0369a1;
  --blog-blue-l:     #e0f2fe;
  --blog-purple:     #7c3aed;
  --blog-purple-l:   #ede9fe;
  --blog-red:        #dc2626;
  --blog-red-l:      #fee2e2;

  /* Text */
  --blog-text:       #0d0d1e;
  --blog-t2:         #4e4e68;
  --blog-t3:         #9090aa;

  /* Surfaces */
  --blog-border:     #e4e4f0;
  --blog-bg:         #fff;
  --blog-bg2:        #f7f7fb;
  --blog-dark:       #0d0d1e;

  /* Gradients */
  --blog-grad:       linear-gradient(135deg, #EFF4FF 0%, #FFE8F4 100%);

  /* Geometry */
  --blog-r:          10px;
  --blog-rl:         16px;
  --blog-max-w:      1180px;

  /* Shadows */
  --blog-sh:         0 8px 32px rgba(13,13,30,.08);
  --blog-sh2:        0 16px 56px rgba(232,23,122,.1);

  /* Shorthand aliases for backwards compat (single.php was --sp-) */
  --sp:              var(--blog-brand);
  --sp2:             var(--blog-brand2);
  --sp-l:            var(--blog-brand-l);
  --sp-xl:           var(--blog-brand-xl);
  --sp-green:        var(--blog-green);
  --sp-green-l:      var(--blog-green-l);
  --sp-amber:        var(--blog-amber);
  --sp-amber-l:      var(--blog-amber-l);
  --sp-blue:         var(--blog-blue);
  --sp-blue-l:       var(--blog-blue-l);
  --sp-purple:       var(--blog-purple);
  --sp-purple-l:     var(--blog-purple-l);
  --sp-red:          var(--blog-red);
  --sp-red-l:        var(--blog-red-l);
  --sp-text:         var(--blog-text);
  --sp-t2:           var(--blog-t2);
  --sp-t3:           var(--blog-t3);
  --sp-border:       var(--blog-border);
  --sp-bg:           var(--blog-bg);
  --sp-bg2:          var(--blog-bg2);
  --sp-dark:         var(--blog-dark);
  --sp-r:            var(--blog-r);
  --sp-rl:           var(--blog-rl);
  --sp-sh:           var(--blog-sh);
  --sp-sh2:          var(--blog-sh2);
  --sp-content-width: var(--blog-max-w);
}

/* Base reset — applied to all blog template wrappers */
.xsp, .xhm, .xar, .xau, .xsr, .xcs {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--blog-text);
  line-height: 1.7;
}
.xsp *, .xhm *, .xar *, .xau *, .xsr *, .xcs * { box-sizing: border-box; }
.xsp h1,.xsp h2,.xsp h3,.xsp h4,.xsp h5,
.xhm h1,.xhm h2,.xhm h3,.xhm h4,
.xar h1,.xar h2,.xar h3,.xar h4,
.xau h1,.xau h2,.xau h3,
.xsr h1,.xsr h2,.xsr h3 {
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
}
.xsp a,.xhm a,.xar a,.xau a,.xsr a,.xcs a { text-decoration: none; }
.xsp p,.xhm p,.xar p,.xau p,.xsr p,.xcs p { margin: 0; }

/* ════════════════════════════════════════════════════════════
   2. SHARED COMPONENTS
   Used across multiple templates — prefix: .xblog-
   ════════════════════════════════════════════════════════════ */

/* Layout containers */
.xblog-w  { max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; }
.xblog-wn { max-width: 900px;             margin: 0 auto; padding: 0 48px; }

/* Section eyebrow tag */
.xblog-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blog-brand);
  display: inline-block; margin-bottom: 12px;
}

/* Buttons */
.xblog-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 24px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; position: relative; overflow: hidden;
  transition: color .36s; white-space: nowrap;
  border: none; text-decoration: none; border-radius: var(--blog-r);
}
.xblog-btn > span, .xblog-btn > svg { position: relative; z-index: 1; }
.xblog-btn::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 0; height: 100%;
  transition: width .38s cubic-bezier(.4,0,.2,1); z-index: 0;
}
.xblog-btn:hover::before { width: 100%; }
.xblog-btn-p  { background: var(--blog-brand); color: #fff; }
.xblog-btn-p::before { background: var(--blog-brand2); }
.xblog-btn-p:hover { color: #fff; }
.xblog-btn-g  { background: transparent; color: var(--blog-brand); border: 1.5px solid var(--blog-brand) !important; }
.xblog-btn-g::before { background: var(--blog-brand); }
.xblog-btn-g:hover { color: #fff; }
.xblog-btn-dark { background: var(--blog-dark); color: #fff; }
.xblog-btn-dark::before { background: rgba(255,255,255,.09); }
.xblog-btn-dark:hover { color: #fff; }
.xblog-btn-w  { background: #fff; color: var(--blog-text); }
.xblog-btn-w::before { background: var(--blog-brand); }
.xblog-btn-w:hover { color: #fff; }
.xblog-btn-wo { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35) !important; }
.xblog-btn-wo::before { background: rgba(255,255,255,.12); }
.xblog-btn-wo:hover { color: #fff; }

/* Breadcrumb bar */
.xblog-bc-bar {
  background: var(--blog-bg); border-bottom: 1px solid var(--blog-border);
  padding: 12px 0;
}
.xblog-bc-inner {
  max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.xblog-bc-item { font-size: 13px; font-weight: 600; color: var(--blog-t2); }
.xblog-bc-item a { color: var(--blog-brand); }
.xblog-bc-item a:hover { text-decoration: underline; }
.xblog-bc-sep { color: var(--blog-t3); font-size: 12px; }
.xblog-bc-current {
  color: var(--blog-t3); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.xblog-bc-cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--blog-brand); background: var(--blog-brand-l);
  padding: 3px 9px; border-radius: 4px; margin-left: 6px; text-decoration: none;
}
.xblog-bc-cat:hover { background: var(--blog-brand); color: #fff; }

/* Pagination */
.xblog-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 36px 0; flex-wrap: wrap;
}
.xblog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--blog-r);
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--blog-t2); background: var(--blog-bg2);
  border: 1px solid var(--blog-border); transition: all .2s; text-decoration: none;
}
.xblog-pagination .page-numbers:hover,
.xblog-pagination .page-numbers.current {
  background: var(--blog-brand); color: #fff; border-color: var(--blog-brand);
}
.xblog-pagination .page-numbers.next,
.xblog-pagination .page-numbers.prev {
  width: auto; padding: 0 14px; gap: 5px;
}

/* Post card (shared between home, archive, author, search) */
.xblog-card {
  background: var(--blog-bg); border: 1px solid var(--blog-border);
  border-radius: var(--blog-rl); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.xblog-card:hover { box-shadow: var(--blog-sh2); transform: translateY(-4px); }
.xblog-card-img-wrap {
  overflow: hidden; height: 210px; flex-shrink: 0;
  display: block; background: var(--blog-bg2);
}
.xblog-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; display: block;
}
.xblog-card:hover .xblog-card-img { transform: scale(1.05); }
.xblog-card-img-ph {
  width: 100%; height: 100%;
  background: var(--blog-grad);
  display: flex; align-items: center; justify-content: center;
}
.xblog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.xblog-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.xblog-card-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--blog-brand); background: var(--blog-brand-l);
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  transition: background .2s, color .2s; white-space: nowrap;
  text-decoration: none; border: none;
}
.xblog-card-cat:hover { background: var(--blog-brand); color: #fff; }
.xblog-card-date { font-size: 11px; color: var(--blog-t3); font-weight: 600; }
.xblog-card-title { font-size: 16px; font-weight: 700; color: var(--blog-text); line-height: 1.4; margin-bottom: 9px; }
.xblog-card-title a { color: var(--blog-text); transition: color .2s; }
.xblog-card-title a:hover { color: var(--blog-brand); }
.xblog-card-exc { font-size: 13px; color: var(--blog-t2); line-height: 1.65; flex: 1; margin-bottom: 10px; }
.xblog-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.xblog-card-tag {
  font-size: 10px; font-weight: 600; color: var(--blog-t3);
  background: var(--blog-bg2); border: 1px solid var(--blog-border);
  border-radius: 4px; padding: 2px 7px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.xblog-card-tag:hover { color: var(--blog-brand); border-color: var(--blog-brand-l); }
.xblog-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--blog-border); margin-top: auto;
}
.xblog-card-author {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--blog-t2); font-weight: 600;
}
.xblog-card-author-ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blog-brand); color: #fff;
  font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.xblog-read-time { font-size: 11px; color: var(--blog-t3); font-weight: 600; }
.xblog-card-read-more {
  font-size: 12px; font-weight: 700; color: var(--blog-brand);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; transition: gap .2s;
}
.xblog-card-read-more:hover { gap: 7px; }

/* Skeleton loader */
@keyframes xblogPulse { 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
.xblog-skeleton {
  background: var(--blog-bg); border: 1px solid var(--blog-border);
  border-radius: var(--blog-rl); overflow: hidden;
}
.xblog-sk-img { height: 210px; background: var(--blog-bg2); }
.xblog-sk-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.xblog-sk-line { height: 12px; border-radius: 6px; background: var(--blog-bg2); }
.xblog-sk-short { width: 40%; }
.xblog-sk-long  { width: 90%; height: 18px; }
.xblog-sk-medium{ width: 70%; }
.xblog-sk-pulse { animation: xblogPulse 1.4s ease infinite; }

/* Sidebar shared styles */
.xblog-sb-card {
  background: var(--blog-bg); border: 1px solid var(--blog-border);
  border-radius: var(--blog-r); overflow: hidden;
}
.xblog-sb-hdr {
  padding: 12px 16px; background: var(--blog-dark);
  display: flex; align-items: center; gap: 8px;
}
.xblog-sb-hdr svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; opacity: .6; }
.xblog-sb-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.xblog-sb-body { padding: 14px 16px; }

/* Sidebar search */
.xblog-sb-search { position: relative; }
.xblog-sb-search > svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--blog-t3); fill: none; stroke-width: 2;
  pointer-events: none;
}
.xblog-sb-search-input {
  width: 100%; padding: 9px 40px 9px 32px;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  border: 1.5px solid var(--blog-border); border-radius: 7px;
  outline: none; color: var(--blog-text); background: var(--blog-bg);
  transition: border-color .2s;
}
.xblog-sb-search-input:focus { border-color: var(--blog-brand); }
.xblog-sb-search-input::placeholder { color: var(--blog-t3); }
.xblog-sb-search-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: var(--blog-brand); color: #fff; border: none; border-radius: 5px;
  padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; transition: background .2s;
}
.xblog-sb-search-btn:hover { background: var(--blog-brand2); }

/* Sidebar categories */
.xblog-sb-cats { list-style: none; padding: 0; margin: 0; }
.xblog-sb-cat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--blog-border);
}
.xblog-sb-cat-item:last-child { border-bottom: none; }
.xblog-sb-cat-link { font-size: 13px; color: var(--blog-t2); font-weight: 600; transition: color .2s; text-decoration: none; }
.xblog-sb-cat-link:hover { color: var(--blog-brand); }
.xblog-sb-cat-count {
  font-size: 10px; font-weight: 700; color: var(--blog-t3);
  background: var(--blog-bg2); border: 1px solid var(--blog-border);
  padding: 2px 7px; border-radius: 10px;
}

/* Sidebar recent posts */
.xblog-sb-recent { list-style: none; padding: 0; margin: 0; }
.xblog-sb-recent-item {
  padding: 10px 0; border-bottom: 1px solid var(--blog-border);
  display: flex; gap: 10px; align-items: flex-start;
}
.xblog-sb-recent-item:last-child { border-bottom: none; }
.xblog-sb-recent-img {
  width: 56px; height: 42px; flex-shrink: 0;
  border-radius: 5px; overflow: hidden; background: var(--blog-bg2);
}
.xblog-sb-recent-img img { width: 100%; height: 100%; object-fit: cover; }
.xblog-sb-recent-title { font-size: 12px; font-weight: 700; color: var(--blog-text); line-height: 1.35; margin-bottom: 3px; }
.xblog-sb-recent-title a { color: var(--blog-text); transition: color .2s; }
.xblog-sb-recent-title a:hover { color: var(--blog-brand); }
.xblog-sb-recent-date { font-size: 10px; color: var(--blog-t3); font-weight: 600; }

/* Sidebar tags */
.xblog-sb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xblog-sb-tag {
  font-size: 11px; font-weight: 600; color: var(--blog-t2);
  background: var(--blog-bg2); border: 1px solid var(--blog-border);
  border-radius: 4px; padding: 3px 9px; text-decoration: none;
  transition: all .2s; white-space: nowrap;
}
.xblog-sb-tag:hover { border-color: var(--blog-brand); color: var(--blog-brand); background: var(--blog-brand-xl); }

/* Sidebar CTA card */
.xblog-sb-cta {
  background: linear-gradient(135deg, var(--blog-brand) 0%, var(--blog-brand2) 100%);
  border-radius: var(--blog-r); padding: 20px; text-align: center;
}
.xblog-sb-cta-ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.xblog-sb-cta-ico svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.75; }
.xblog-sb-cta h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.xblog-sb-cta p  { font-size: 12px; color: rgba(255,255,255,.8); margin-bottom: 14px; line-height: 1.6; }
.xblog-sb-cta-btn {
  display: block; background: #fff; color: var(--blog-brand);
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  border-radius: 6px; padding: 9px 14px; margin-bottom: 8px;
  position: relative; overflow: hidden; text-decoration: none;
  transition: transform .2s;
}
.xblog-sb-cta-btn::before {
  content: ''; position: absolute; top:0; left:0; width:0; height:100%;
  background: var(--blog-dark); transition: width .35s; z-index:0;
}
.xblog-sb-cta-btn:hover::before { width: 100%; }
.xblog-sb-cta-btn span { position: relative; z-index:1; color: var(--blog-brand); }
.xblog-sb-cta-btn:hover span { color: #fff; }
.xblog-sb-cta-tel { font-size: 11px; color: rgba(255,255,255,.7); font-weight: 600; text-decoration: none; display: block; }
.xblog-sb-cta-tel:hover { color: #fff; }

/* Author meta badge */
.xblog-author-verified {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blog-bg); border: 1px solid var(--blog-border);
  border-radius: 20px; padding: 4px 11px; font-size: 11px; color: var(--blog-t2);
}
.xblog-author-verified svg { width: 10px; height: 10px; stroke: var(--blog-green); fill: none; stroke-width: 2.5; }

/* Empty / error states */
.xblog-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 20px; text-align: center; gap: 12px;
}
.xblog-empty-ico { opacity: .4; }
.xblog-empty-title { font-size: 20px; font-weight: 700; color: var(--blog-text); }
.xblog-empty-sub { font-size: 15px; color: var(--blog-t2); }

/* Active filter bar (used by home.php, archive.php, search.php) */
.xblog-filter-active-bar {
  display: none; padding: 10px 0;
  background: var(--blog-brand-xl); border-bottom: 1px solid var(--blog-brand-l);
}
.xblog-filter-inner {
  max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.xblog-filter-lbl { font-size: 12px; font-weight: 700; color: var(--blog-t2); }
.xblog-filter-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--blog-brand);
  background: #fff; border: 1px solid var(--blog-brand-l);
  border-radius: 20px; padding: 3px 10px 3px 12px;
}
.xblog-filter-rm {
  background: none; border: none; color: var(--blog-t3);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 4px;
  transition: color .2s;
}
.xblog-filter-rm:hover { color: var(--blog-text); }
.xblog-clear-all {
  background: none; border: none; font-size: 12px; font-weight: 700;
  color: var(--blog-t3); cursor: pointer; padding: 4px 8px; border-radius: 4px;
  transition: color .2s; margin-left: auto;
}
.xblog-clear-all:hover { color: var(--blog-brand); }

/* Sticky category pills bar */
.xblog-filter-sec {
  background: var(--blog-bg); border-bottom: 1px solid var(--blog-border);
  padding: 14px 0; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(13,13,30,.06);
}
.xblog-filter-bar {
  max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; overflow: hidden;
}
.xblog-filter-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blog-t3); white-space: nowrap; flex-shrink: 0;
}
.xblog-pills-wrap { flex: 1; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.xblog-pills-wrap::-webkit-scrollbar { display: none; }
.xblog-pills { display: flex; gap: 8px; white-space: nowrap; padding-bottom: 2px; }
.xblog-pill {
  padding: 6px 14px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--blog-t2); background: var(--blog-bg2);
  border: 1px solid var(--blog-border); border-radius: 20px;
  cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.xblog-pill:hover { border-color: var(--blog-brand); color: var(--blog-brand); background: var(--blog-brand-xl); }
.xblog-pill.active { background: var(--blog-brand); color: #fff; border-color: var(--blog-brand); }
.xblog-pill-count { font-size: 10px; opacity: .7; }
.xblog-sort-group { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.xblog-sort-btn {
  padding: 5px 11px;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--blog-t2); background: transparent;
  border: 1px solid var(--blog-border); border-radius: 6px;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.xblog-sort-btn:hover, .xblog-sort-btn.active {
  background: var(--blog-dark); color: #fff; border-color: var(--blog-dark);
}

/* Tag cloud */
.xblog-tag-cloud-sec {
  background: var(--blog-bg2); padding: 22px 0;
  border-bottom: 1px solid var(--blog-border);
}
.xblog-tag-cloud-inner {
  max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.xblog-tag-cloud-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blog-t3); flex-shrink: 0;
}
.xblog-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.xblog-tag-cloud-pill {
  padding: 4px 12px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--blog-t2); background: var(--blog-bg);
  border: 1px solid var(--blog-border); border-radius: 20px;
  cursor: pointer; transition: all .2s;
}
.xblog-tag-cloud-pill:hover { border-color: var(--blog-brand); color: var(--blog-brand); }
.xblog-tag-cloud-pill.active { background: var(--blog-brand-l); color: var(--blog-brand); border-color: var(--blog-brand); }

/* Load more */
.xblog-load-more-area { text-align: center; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--blog-border); }
.xblog-load-more-btn {
  display: none; background: var(--blog-dark); color: #fff;
  border: none; border-radius: var(--blog-r); padding: 13px 28px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; position: relative; overflow: hidden;
  transition: background .2s; gap: 8px;
  justify-content: center; align-items: center;
}
.xblog-load-more-btn::before {
  content: ''; position: absolute; top:0; left:0; width:0; height:100%;
  background: var(--blog-brand); transition: width .38s cubic-bezier(.4,0,.2,1);
}
.xblog-load-more-btn:hover::before { width: 100%; }
.xblog-load-more-btn span, .xblog-load-more-btn svg { position: relative; z-index:1; }
.xblog-load-more-spinner {
  display: none; justify-content: center; align-items: center;
  gap: 10px; padding: 20px; color: var(--blog-t3); font-size: 14px;
}
@keyframes xblogSpin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
.xblog-load-more-spinner svg { animation: xblogSpin 1.2s linear infinite; }

/* Post counter */
.xblog-post-counter { font-size: 13px; color: var(--blog-t3); font-weight: 600; }

/* Section header row */
.xblog-sec-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; gap: 12px; flex-wrap: wrap;
}
.xblog-sec-h2 {
  font-size: clamp(20px,2.2vw,28px); font-weight: 700;
  color: var(--blog-text); letter-spacing: -.3px;
}

/* Hero (blog listing pages) */
.xblog-hero {
  background: var(--blog-grad); position: relative; overflow: hidden;
  border-bottom: 1px solid var(--blog-border); padding: 156px 0 64px;
}
.xblog-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blog-brand) 0%, #7c3aed 60%, var(--blog-blue) 100%);
}
.xblog-hero::after {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,23,122,.06) 0%, transparent 70%);
  top: -120px; right: -80px; pointer-events: none;
}
.xblog-hero-inner { position: relative; z-index: 1; max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; }
.xblog-hero-h1 {
  font-size: clamp(30px, 4vw, 52px); font-weight: 700;
  line-height: 1.1; letter-spacing: -2px; color: var(--blog-text);
  margin: 0 0 14px; max-width: 680px;
}
.xblog-hero-h1 em { color: #000; font-style: normal; }
.xblog-hero-sub { font-size: 17px; color: var(--blog-t2); line-height: 1.7; max-width: 560px; margin: 0 0 28px; }
.xblog-hero-stats-row { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.xblog-hero-stat-n { font-size: 22px; font-weight: 700; color: var(--blog-brand); line-height: 1; }
.xblog-hero-stat-l { font-size: 13px; color: var(--blog-t2); font-weight: 600; }
.xblog-hero-divider { width: 1px; height: 24px; background: var(--blog-border); }
.xblog-hero-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--blog-t2); }
.xblog-hero-meta svg { width: 13px; height: 13px; stroke: var(--blog-t3); fill: none; stroke-width: 2; }

/* Search bar (hero) */
.xblog-search-wrap { position: relative; max-width: 560px; }
.xblog-search-wrap > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--blog-t3); fill: none; stroke-width: 2; pointer-events: none;
}
.xblog-search-input {
  width: 100%; padding: 13px 52px 13px 42px;
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500;
  border: 1.5px solid var(--blog-border); border-radius: var(--blog-r);
  background: #fff; color: var(--blog-text); outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(13,13,30,.07);
}
.xblog-search-input:focus { border-color: var(--blog-brand); box-shadow: 0 0 0 3px rgba(232,23,122,.1); }
.xblog-search-input::placeholder { color: var(--blog-t3); }
.xblog-search-submit {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: var(--blog-brand); color: #fff; border: none; border-radius: 7px;
  padding: 7px 14px; font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s;
}
.xblog-search-submit:hover { background: var(--blog-brand2); }

/* Trust badges */
.xblog-trust-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.xblog-trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--blog-t2);
  background: #fff; border: 1px solid var(--blog-border);
  border-radius: 20px; padding: 4px 11px;
  box-shadow: 0 4px 20px rgba(13,13,30,.07);
}
.xblog-trust-badge svg { width: 10px; height: 10px; stroke: var(--blog-green); fill: none; stroke-width: 2.5; }

/* Reading progress bar */
#xsp-progress-wrap { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; }
#xsp-progress { height: 100%; background: linear-gradient(90deg, var(--blog-brand), #7c3aed); width: 0; transition: width .1s linear; }

/* ════════════════════════════════════════════════════════════
   3. SINGLE POST  (.xsp-)
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

.xsp *{box-sizing:border-box}
.xsp{font-family:'Space Grotesk',sans-serif;color:var(--sp-text);line-height:1.7}
.xsp h1,.xsp h2,.xsp h3,.xsp h4,.xsp h5{font-family:'Space Grotesk',sans-serif;margin:0}
.xsp a{text-decoration:none}
.xsp p{margin:0}

/* ── READING PROGRESS ─────────────────────────────────────────── */
#xsp-progress-wrap{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:9999}
#xsp-progress{height:100%;background:linear-gradient(90deg,var(--sp),#7c3aed);width:0%;transition:width .1s linear}

/* ── BREADCRUMB ───────────────────────────────────────────────── */
.xsp-bc-bar{background:var(--sp-bg);border-bottom:1px solid var(--sp-border);padding:12px 0}
.xsp-bc-inner{max-width:var(--sp-content-width);margin:0 auto;padding:0 48px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xsp-bc-item{font-size:13px;font-weight:600;color:var(--sp-t2)}
.xsp-bc-item a{color:var(--sp)}.xsp-bc-item a:hover{text-decoration:underline}
.xsp-bc-sep{color:var(--sp-t3);font-size:12px}
.xsp-bc-current{color:var(--sp-t3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.xsp-bc-cat{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sp);background:var(--sp-l);padding:3px 9px;border-radius:4px;margin-left:6px;text-decoration:none}
.xsp-bc-cat:hover{background:var(--sp);color:#fff}

/* ── FEATURED IMAGE ───────────────────────────────────────────── */
.xsp-hero-img-wrap{width:100%;max-height:520px;overflow:hidden;background:linear-gradient(135deg,#EFF4FF,#FFE8F4)}
.xsp-hero-img{width:100%;max-height:520px;object-fit:cover;display:block}
.xsp-hero-img-ph{width:100%;height:360px;background:linear-gradient(135deg,#EFF4FF 0%,#FFE8F4 100%);display:flex;align-items:center;justify-content:center;gap:12px;border-bottom:1px solid var(--sp-border)}
.xsp-hero-img-ph svg{opacity:.3}
.xsp-hero-img-ph span{font-size:13px;color:var(--sp-t3);font-weight:600}

/* ── POST HEADER ──────────────────────────────────────────────── */
.xsp-post-hdr{background:var(--sp-bg);border-bottom:1px solid var(--sp-border);padding:32px 0 28px}
.xsp-post-hdr-inner{max-width:var(--sp-content-width);margin:0 auto;padding:0 48px}
.xsp-post-cat-row{margin-bottom:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xsp-post-cat-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sp);background:var(--sp-l);padding:4px 10px;border-radius:5px;text-decoration:none}
.xsp-post-cat-badge:hover{background:var(--sp);color:#fff}
.xsp-post-title{font-size:clamp(26px,3.8vw,48px);font-weight:700;color:var(--sp-text);line-height:1.15;letter-spacing:-.8px;margin-bottom:18px;max-width:800px}
.xsp-post-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.xsp-meta-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sp-t2);font-weight:600}
.xsp-meta-item svg{width:13px;height:13px;stroke:var(--sp-t3);fill:none;stroke-width:2}
.xsp-meta-sep{width:4px;height:4px;border-radius:50%;background:var(--sp-border)}
.xsp-author-meta-ico{width:28px;height:28px;border-radius:50%;background:var(--sp);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.xsp-meta-item a{color:var(--sp-t2)}.xsp-meta-item a:hover{color:var(--sp)}
.xsp-updated-note{font-size:11px;color:var(--sp-t3);font-style:italic;background:var(--sp-bg2);padding:3px 9px;border-radius:4px;border:1px solid var(--sp-border)}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.xsp-layout-outer{background:var(--sp-bg);padding:44px 0 72px}
.xsp-layout-inner{max-width:var(--sp-content-width);margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}

/* ── ARTICLE CONTENT ──────────────────────────────────────────── */
.xsp-article{}

/* TOC ── */
.xsp-toc-wrap{background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:var(--sp-r);padding:18px 20px;margin-bottom:32px;border-left:4px solid var(--sp)}
.xsp-toc-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.xsp-toc-title{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sp-t2)}
.xsp-toc-toggle{background:none;border:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--sp);padding:3px 8px;border-radius:4px;transition:background .2s}
.xsp-toc-toggle:hover{background:var(--sp-l)}
#xsp-toc-list{margin:12px 0 2px;padding:0;list-style:none;display:block}
.xsp-toc-item{border-bottom:1px solid var(--sp-border)}
.xsp-toc-item:last-child{border-bottom:none}
.xsp-toc-item a{display:block;padding:7px 0;font-size:13px;color:var(--sp-t2);font-weight:600;transition:color .2s;line-height:1.4}
.xsp-toc-item a:hover,.xsp-toc-item a.active{color:var(--sp)}
.xsp-toc-h3 a{padding-left:16px;font-weight:500;font-size:12px}

/* POST BODY ── */
.xsp-content{font-size:16px;color:var(--sp-t2);line-height:1.85}
.xsp-content h2{font-size:clamp(20px,2.2vw,27px);font-weight:700;color:var(--sp-text);letter-spacing:-.3px;margin:44px 0 16px;padding-top:4px;line-height:1.25}
.xsp-content h3{font-size:clamp(17px,1.8vw,22px);font-weight:700;color:var(--sp-text);letter-spacing:-.2px;margin:32px 0 12px;line-height:1.3}
.xsp-content h4{font-size:17px;font-weight:700;color:var(--sp-text);margin:24px 0 10px}
.xsp-content p{margin:0 0 18px;line-height:1.85}
.xsp-content p:last-child{margin-bottom:0}
.xsp-content ul,.xsp-content ol{margin:0 0 18px;padding-left:22px}
.xsp-content li{margin-bottom:8px;line-height:1.7}
.xsp-content ul li::marker{color:var(--sp)}
.xsp-content ol li::marker{color:var(--sp);font-weight:700}
.xsp-content strong{color:var(--sp-text);font-weight:700}
.xsp-content em{font-style:italic}
.xsp-content a{color:var(--sp);font-weight:600}
.xsp-content a:hover{text-decoration:underline}
.xsp-content blockquote{border-left:4px solid var(--sp);background:var(--sp-xl);padding:16px 20px;margin:24px 0;border-radius:0 var(--sp-r) var(--sp-r) 0;font-size:17px;font-style:italic;color:var(--sp-text)}
.xsp-content blockquote p{margin:0;font-size:17px}
.xsp-content code{font-family:monospace;font-size:14px;background:var(--sp-bg2);border:1px solid var(--sp-border);padding:2px 6px;border-radius:4px;color:var(--sp-text)}
.xsp-content pre{background:var(--sp-dark);padding:18px 20px;border-radius:var(--sp-r);overflow-x:auto;margin:0 0 18px}
.xsp-content pre code{background:none;border:none;padding:0;color:#e2e8f0;font-size:13px}
.xsp-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.xsp-content table th{background:var(--sp-dark);color:#fff;padding:10px 14px;text-align:left;font-size:13px}
.xsp-content table td{padding:10px 14px;border-bottom:1px solid var(--sp-border)}
.xsp-content table tr:nth-child(even) td{background:var(--sp-bg2)}
.xsp-content img{max-width:100%;height:auto;border-radius:var(--sp-r);display:block;margin:20px auto}
.xsp-content .wp-caption{max-width:100%;text-align:center;font-size:13px;color:var(--sp-t3);margin:20px auto}
.xsp-content .wp-caption-text{margin-top:6px}
/* Quick Answer Box style (if editors use it) */
.xsp-content .quick-answer-box,.xsp-content .xsp-qa-box{background:var(--sp-xl);border-left:4px solid var(--sp);border-radius:0 var(--sp-r) var(--sp-r) 0;padding:16px 20px;margin:24px 0;font-size:15px}
.xsp-content .xsp-callout{background:var(--sp-blue-l);border:1px solid var(--sp-border);border-radius:var(--sp-r);padding:16px 20px;margin:24px 0;font-size:15px}
.xsp-content hr{border:none;border-top:1px solid var(--sp-border);margin:36px 0}
/* Anchor offsets for sticky header */
.xsp-content h2[id],.xsp-content h3[id]{scroll-margin-top:90px}

/* POST TAGS ── */
.xsp-post-tags{margin-top:40px;padding-top:24px;border-top:1px solid var(--sp-border)}
.xsp-post-tags-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--sp-t3);margin-bottom:10px;display:block}
.xsp-post-tags-list{display:flex;flex-wrap:wrap;gap:7px}
.xsp-post-tag{font-size:12px;font-weight:600;color:var(--sp-t2);background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:4px;padding:4px 11px;text-decoration:none;transition:all .2s}
.xsp-post-tag:hover{border-color:var(--sp);color:var(--sp);background:var(--sp-xl)}

/* SHARE BAR ── */
.xsp-share-bar{margin-top:28px;padding:18px 20px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:var(--sp-r);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.xsp-share-lbl{font-size:12px;font-weight:700;color:var(--sp-t2);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.xsp-share-btns{display:flex;gap:8px;flex-wrap:wrap}
.xsp-share-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;border-radius:6px;cursor:pointer;border:1px solid var(--sp-border);background:var(--sp-bg);color:var(--sp-t2);transition:all .2s}
.xsp-share-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.xsp-share-btn:hover{border-color:var(--sp);color:var(--sp);background:var(--sp-xl)}
.xsp-share-btn.linkedin:hover{border-color:#0077b5;color:#0077b5;background:#e8f4fd}

/* AUTHOR BOX ── */
.xsp-author-box{margin-top:40px;padding:28px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:var(--sp-rl);border-top:4px solid var(--sp)}
.xsp-author-box-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-t3);margin-bottom:16px;display:block}
.xsp-author-row{display:flex;gap:18px;align-items:flex-start}
.xsp-author-ava{width:60px;height:60px;min-width:60px;border-radius:50%;background:var(--sp);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;flex-shrink:0}
.xsp-author-name{font-size:16px;font-weight:700;color:var(--sp-text);margin-bottom:3px}
.xsp-author-cred{font-size:12px;color:var(--sp);font-weight:700;margin-bottom:9px;letter-spacing:.3px}
.xsp-author-bio{font-size:14px;color:var(--sp-t2);line-height:1.75}
.xsp-author-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--sp);margin-top:10px}
.xsp-author-link svg{width:11px;height:11px;stroke:var(--sp);fill:none;stroke-width:2.5;transition:transform .2s}
.xsp-author-link:hover svg{transform:translateX(3px)}
.xsp-author-verified{display:inline-flex;align-items:center;gap:5px;background:var(--sp-bg);border:1px solid var(--sp-border);border-radius:20px;padding:4px 11px;font-size:11px;color:var(--sp-t2);margin-top:10px;margin-left:8px}
.xsp-author-verified svg{width:10px;height:10px;stroke:var(--sp-green);fill:none;stroke-width:2.5}

/* PREV/NEXT NAV ── */
.xsp-post-nav{margin-top:36px;padding-top:28px;border-top:1px solid var(--sp-border);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xsp-nav-item{padding:16px 18px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:var(--sp-r);text-decoration:none;transition:box-shadow .3s,border-color .3s,transform .3s;display:flex;flex-direction:column;gap:4px}
.xsp-nav-item:hover{box-shadow:var(--sp-sh2);border-color:var(--sp-l);transform:translateY(-2px)}
.xsp-nav-item.prev{align-items:flex-start}
.xsp-nav-item.next{align-items:flex-end;text-align:right}
.xsp-nav-dir{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--sp-t3);display:flex;align-items:center;gap:4px}
.xsp-nav-dir svg{width:11px;height:11px;stroke:var(--sp-t3);fill:none;stroke-width:2.5}
.xsp-nav-title{font-size:13px;font-weight:700;color:var(--sp-text);line-height:1.4}
.xsp-nav-cat{font-size:10px;color:var(--sp);font-weight:600}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
#xsp-sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:20px}
.xsp-sidebar-card{background:var(--sp-bg);border:1px solid var(--sp-border);border-radius:var(--sp-r);overflow:hidden}
.xsp-sb-hdr{padding:12px 16px;background:var(--sp-dark);display:flex;align-items:center;gap:8px}
.xsp-sb-hdr svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;opacity:.6}
.xsp-sb-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.xsp-sb-body{padding:14px 16px}

/* Search ── */
.xsp-sb-search{position:relative}
.xsp-sb-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--sp-t3);fill:none;stroke-width:2;pointer-events:none}
#xsp-sidebar-search{width:100%;padding:9px 40px 9px 32px;font-family:'Space Grotesk',sans-serif;font-size:13px;border:1.5px solid var(--sp-border);border-radius:7px;outline:none;color:var(--sp-text);background:var(--sp-bg);transition:border-color .2s}
#xsp-sidebar-search:focus{border-color:var(--sp)}
#xsp-sidebar-search::placeholder{color:var(--sp-t3)}
.xsp-sb-search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:var(--sp);color:#fff;border:none;border-radius:5px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:background .2s}
.xsp-sb-search-btn:hover{background:var(--sp2)}

/* Sidebar TOC ── */
#xsp-sidebar-toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.xsp-toc-item a{display:block;padding:6px 0;font-size:12px;color:var(--sp-t2);border-bottom:1px solid var(--sp-border);transition:color .2s;line-height:1.4}
.xsp-toc-item:last-child a{border-bottom:none}
.xsp-toc-item a:hover,.xsp-toc-item a.active{color:var(--sp)}
.xsp-toc-h3 a{padding-left:12px;font-size:11px}

/* Categories ── */
.xsp-sb-cats{list-style:none;padding:0;margin:0}
.xsp-sb-cat-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--sp-border)}
.xsp-sb-cat-item:last-child{border-bottom:none}
.xsp-sb-cat-link{font-size:13px;color:var(--sp-t2);font-weight:600;transition:color .2s}
.xsp-sb-cat-link:hover{color:var(--sp)}
.xsp-sb-cat-count{font-size:10px;font-weight:700;color:var(--sp-t3);background:var(--sp-bg2);border:1px solid var(--sp-border);padding:2px 7px;border-radius:10px}

/* Recent Posts ── */
.xsp-sb-recent{list-style:none;padding:0;margin:0}
.xsp-sb-recent-item{padding:10px 0;border-bottom:1px solid var(--sp-border);display:flex;gap:10px;align-items:flex-start}
.xsp-sb-recent-item:last-child{border-bottom:none}
.xsp-sb-recent-img{width:56px;height:42px;flex-shrink:0;border-radius:5px;overflow:hidden;background:var(--sp-bg2)}
.xsp-sb-recent-img img{width:100%;height:100%;object-fit:cover}
.xsp-sb-recent-title{font-size:12px;font-weight:700;color:var(--sp-text);line-height:1.35;margin-bottom:3px}
.xsp-sb-recent-title a{color:var(--sp-text);transition:color .2s}.xsp-sb-recent-title a:hover{color:var(--sp)}
.xsp-sb-recent-date{font-size:10px;color:var(--sp-t3);font-weight:600}

/* Tags ── */
.xsp-sb-tags{display:flex;flex-wrap:wrap;gap:6px}
.xsp-sb-tag{font-size:11px;font-weight:600;color:var(--sp-t2);background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:4px;padding:3px 9px;text-decoration:none;transition:all .2s;white-space:nowrap}
.xsp-sb-tag:hover{border-color:var(--sp);color:var(--sp);background:var(--sp-xl)}

/* CTA Card ── */
.xsp-sb-cta{background:linear-gradient(135deg,var(--sp) 0%,var(--sp2) 100%);border-radius:var(--sp-r);padding:20px;text-align:center}
.xsp-sb-cta-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.xsp-sb-cta-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.75}
.xsp-sb-cta h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3}
.xsp-sb-cta p{font-size:12px;color:rgba(255,255,255,.8);margin-bottom:14px;line-height:1.6}
.xsp-sb-cta-btn{display:block;background:#fff;color:var(--sp);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;border-radius:6px;padding:9px 14px;transition:background .2s,transform .2s;text-decoration:none;margin-bottom:8px;position:relative;overflow:hidden}
.xsp-sb-cta-btn::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--sp-dark);transition:width .35s;z-index:0}
.xsp-sb-cta-btn:hover::before{width:100%}
.xsp-sb-cta-btn span{position:relative;z-index:1;color:var(--sp)}
.xsp-sb-cta-btn:hover span{color:#fff}
.xsp-sb-cta-tel{font-size:11px;color:rgba(255,255,255,.7);font-weight:600;text-decoration:none;display:block}
.xsp-sb-cta-tel:hover{color:#fff}

/* ── RELATED POSTS ────────────────────────────────────────────── */
.xsp-related-sec{background:var(--sp-bg2);padding:64px 0;border-top:1px solid var(--sp-border)}
.xsp-related-inner{max-width:var(--sp-content-width);margin:0 auto;padding:0 48px}
.xsp-related-h2{font-size:clamp(20px,2.2vw,28px);font-weight:700;color:var(--sp-text);letter-spacing:-.3px;margin:0 0 28px}
.xsp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.xsp-related-card{background:var(--sp-bg);border:1px solid var(--sp-border);border-radius:var(--sp-rl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.xsp-related-card:hover{box-shadow:var(--sp-sh2);transform:translateY(-4px)}
.xsp-related-img-wrap{overflow:hidden;height:180px;flex-shrink:0;display:block;background:var(--sp-bg2)}
.xsp-related-img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.xsp-related-card:hover .xsp-related-img{transform:scale(1.05)}
.xsp-related-img-ph{width:100%;height:100%;background:linear-gradient(135deg,#EFF4FF,#FFE8F4);display:flex;align-items:center;justify-content:center}
.xsp-related-body{padding:18px;flex:1;display:flex;flex-direction:column}
.xsp-related-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sp);background:var(--sp-l);padding:2px 8px;border-radius:4px;display:inline-block;margin-bottom:9px}
.xsp-related-title{font-size:15px;font-weight:700;color:var(--sp-text);line-height:1.4;margin-bottom:8px}
.xsp-related-title a{color:var(--sp-text);transition:color .2s}.xsp-related-title a:hover{color:var(--sp)}
.xsp-related-meta{font-size:11px;color:var(--sp-t3);font-weight:600;margin-top:auto;padding-top:10px;border-top:1px solid var(--sp-border)}
.xsp-related-read-more{font-size:12px;font-weight:700;color:var(--sp);display:inline-flex;align-items:center;gap:4px;margin-top:8px;transition:gap .2s}
.xsp-related-read-more:hover{gap:7px}
.xsp-related-read-more svg{width:11px;height:11px;stroke:var(--sp);fill:none;stroke-width:2.5}

/* ── COMMENTS ─────────────────────────────────────────────────── */
.xsp-comments-sec{background:var(--sp-bg);padding:56px 0;border-top:1px solid var(--sp-border)}
.xsp-comments-inner{max-width:var(--sp-content-width);margin:0 auto;padding:0 48px;max-width:780px}
.xsp-comments-sec .comment-form input[type="text"],
.xsp-comments-sec .comment-form input[type="email"],
.xsp-comments-sec .comment-form input[type="url"],
.xsp-comments-sec .comment-form textarea{width:100%;padding:10px 14px;font-family:'Space Grotesk',sans-serif;font-size:14px;border:1.5px solid var(--sp-border);border-radius:var(--sp-r);outline:none;transition:border-color .2s;background:var(--sp-bg)}
.xsp-comments-sec .comment-form input:focus,
.xsp-comments-sec .comment-form textarea:focus{border-color:var(--sp)}
.xsp-comments-sec .comment-form .submit{background:var(--sp);color:#fff;border:none;border-radius:var(--sp-r);padding:11px 24px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.xsp-comments-sec .comment-form .submit:hover{background:var(--sp2)}
.xsp-comments-sec h3.comments-title,
.xsp-comments-sec h3#reply-title{font-size:22px;font-weight:700;color:var(--sp-text);margin-bottom:20px}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:1100px){
  .xsp-layout-inner{grid-template-columns:1fr 300px;gap:36px;padding:0 28px}
  .xsp-post-hdr-inner,.xsp-bc-inner,.xsp-related-inner,.xsp-comments-inner{padding:0 28px}
}
@media(max-width:900px){
  .xsp-layout-inner{grid-template-columns:1fr;padding:0 28px}
  #xsp-sidebar{position:static;top:auto}
  .xsp-related-grid{grid-template-columns:repeat(2,1fr)}
  .xsp-post-nav{grid-template-columns:1fr}
  .xsp-layout-inner,.xsp-post-hdr-inner,.xsp-bc-inner,.xsp-related-inner,.xsp-comments-inner{padding:0 28px}
}
@media(max-width:680px){
  .xsp-layout-inner,.xsp-post-hdr-inner,.xsp-bc-inner,.xsp-related-inner,.xsp-comments-inner{padding:0 18px}
  .xsp-post-title{letter-spacing:-.5px}
  .xsp-related-grid{grid-template-columns:1fr}
  .xsp-author-row{flex-direction:column}
  .xsp-hero-img-wrap{max-height:280px}
  .xsp-hero-img{max-height:280px}
}

/* ════════════════════════════════════════════════════════════
   4. BLOG HOME  (.xhm-)
   Populated when home.php is built
   ════════════════════════════════════════════════════════════ */
/* home.php uses shared .xblog-* components + these page-specific overrides */
.xhm { }
.xhm-main { background: var(--blog-bg); padding: 48px 0 72px; }
.xhm-inner { max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; }
.xhm-grid  { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.xhm-posts { flex: 1; }
.xhm-posts-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
#xhm-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px; }

/* ════════════════════════════════════════════════════════════
   5. ARCHIVE  (.xar-)
   Populated when archive.php is built
   ════════════════════════════════════════════════════════════ */
.xar { }
.xar-main { background: var(--blog-bg); padding: 48px 0 72px; }
.xar-inner { max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; }
.xar-grid  { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.xar-posts-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
#xar-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px; }

/* ════════════════════════════════════════════════════════════
   6. AUTHOR  (.xau-)
   Populated when author.php is built
   ════════════════════════════════════════════════════════════ */
.xau { }
.xau-profile-bar { background: var(--blog-bg2); padding: 48px 0; border-bottom: 1px solid var(--blog-border); }
.xau-profile-inner { max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; display: flex; gap: 28px; align-items: flex-start; }
.xau-ava { width: 80px; height: 80px; min-width: 80px; border-radius: 50%; background: var(--blog-brand); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; flex-shrink: 0; }
.xau-name { font-size: clamp(22px,2.5vw,32px); font-weight: 700; color: var(--blog-text); margin-bottom: 4px; }
.xau-cred { font-size: 13px; color: var(--blog-brand); font-weight: 700; margin-bottom: 10px; }
.xau-bio  { font-size: 15px; color: var(--blog-t2); line-height: 1.75; max-width: 640px; }
.xau-main { background: var(--blog-bg); padding: 48px 0 72px; }
.xau-inner{ max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; }
.xau-posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

/* ════════════════════════════════════════════════════════════
   7. SEARCH  (.xsr-)
   Populated when search.php is built
   ════════════════════════════════════════════════════════════ */
.xsr { }
.xsr-hero { background: var(--blog-grad); padding: 48px 0; border-bottom: 1px solid var(--blog-border); }
.xsr-hero-inner { max-width: var(--blog-max-w); margin-top: 0 auto; padding: 0 48px; }
.xsr-hero-label { font-size: 13px; color: var(--blog-t2); margin-bottom: 8px; }
.xsr-hero-label strong { color: var(--blog-text); }
.xsr-main  { background: var(--blog-bg); padding: 48px 0 72px; }
.xsr-inner { max-width: var(--blog-max-w); margin: 0 auto; padding: 0 48px; }
.xsr-grid  { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.xsr-posts-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
#xsr-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px; }


/* ════════════════════════════════════════════════════════════
   MARLAB THEME INTEGRATION
   — Full-bleed sections (escape theme container)
   — Transparent header offset
   ════════════════════════════════════════════════════════════

   ABOUT THE FULL-BLEED ESCAPE
   Marlab's get_header() wraps content in a container div
   (typically max-width: 1200px or similar). This technique
   uses viewport units to push sections back to full width.
   Works as long as no ancestor has overflow:hidden.

   ABOUT THE HEADER OFFSET
   Marlab uses a fixed transparent header. Adjust the
   --marlab-header-h variable below to match your theme's
   exact header height. Check via DevTools → inspect header
   element → computed height. Typical Marlab values: 80–100px.
*/

:root {
  --marlab-header-h: 90px;   /* ← adjust if header is taller/shorter */
}

/* Full-bleed: every direct child of a blog template wrapper
   expands to fill the full viewport width, regardless of the
   Marlab container it's sitting inside. */
.xhm > *,
.xar > *,
.xau > *,
.xsr > * {
  position: relative;
  left:         50%;
  right:        50%;
  margin-left:  -50vw;
  margin-right: -50vw;
  width:         100vw;
  max-width:     100vw;
  box-sizing:    border-box;
}

/* Case studies wrapper breaks out as a UNIT — not its children individually.
   Reason: Marlab applies its standard page container (with possible overflow:hidden)
   to CPT archive pages but not to the blog home page (home.php).
   Making .xcs itself escape means Marlab's container cannot clip its contents. */
.xcs {
  position: relative;
  left:         50%;
  right:        50%;
  margin-left:  -50vw;
  margin-right: -50vw;
  width:         100vw;
  max-width:     100vw;
  box-sizing:    border-box;
  overflow-x:    hidden;
}

/* The inner wrappers (.xblog-w, .xhm-inner etc.) already have
   their own max-width + auto margins, so content stays centred. */

/* Header offset — push the hero below Marlab's fixed transparent header */
.xhm  > .xblog-hero,
.xar  > .xblog-hero,
.xau  > .xau-profile-bar,
.xsr  > .xsr-hero {
  padding-top: calc(56px + var(--marlab-header-h));
}

/* Case studies: .xcs is the full-width breakout element.
   Target hero directly (no child combinator needed). */
.xcs .xblog-hero {
  padding-top: calc(56px + var(--marlab-header-h));
}

/* single-post.php breadcrumb also needs the offset */
.xsp .xsp-bc-bar {
  padding-top: calc(12px + var(--marlab-header-h));
  padding-bottom: 12px;
}

/* single-post.php hero image sits right under the breadcrumb,
   no extra offset needed since breadcrumb has it */


/* ════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .xblog-w, .xblog-wn,
  .xblog-hero-inner, .xblog-filter-inner, .xblog-filter-bar,
  .xhm-inner, .xar-inner, .xau-inner, .xau-profile-inner, .xsr-inner {
    padding: 0 28px;
  }
  .xhm-grid, .xar-grid, .xsr-grid { grid-template-columns: 1fr 280px; gap: 32px; }
  /* single.php */
  .xsp-layout-inner { grid-template-columns: 1fr 280px; gap: 32px; padding: 0 28px; }
  .xsp-post-hdr-inner, .xsp-bc-inner, .xsp-related-inner, .xsp-comments-inner { padding: 0 28px; }
}
@media(max-width:900px) {
  .xhm-grid, .xar-grid, .xsr-grid { grid-template-columns: 1fr; }
  #xhm-sidebar, #xar-sidebar, #xsr-sidebar { position: static; }
  .xhm-posts-grid, .xar-posts-grid { grid-template-columns: 1fr; }
  .xau-posts-grid { grid-template-columns: repeat(2,1fr); }
  /* single */
  .xsp-layout-inner { grid-template-columns: 1fr; }
  #xsp-sidebar { position: static; top: auto; }
  .xsp-related-grid { grid-template-columns: repeat(2,1fr); }
  .xsp-post-nav { grid-template-columns: 1fr; }
}
@media(max-width:680px) {
  .xblog-w, .xblog-wn,
  .xblog-hero-inner, .xblog-filter-inner, .xblog-filter-bar,
  .xhm-inner, .xar-inner, .xau-inner, .xau-profile-inner, .xsr-inner { padding: 0 18px; }
  .xsp-layout-inner, .xsp-post-hdr-inner, .xsp-bc-inner, .xsp-related-inner, .xsp-comments-inner { padding: 0 18px; }
  .xau-posts-grid, .xsp-related-grid { grid-template-columns: 1fr; }
  .xau-profile-inner { flex-direction: column; }
  .xsp-author-row { flex-direction: column; }
  .xsp-hero-img-wrap { max-height: 260px; }
  .xsp-hero-img { max-height: 260px; }
  .xblog-sort-group { display: none; }
  .xblog-hero { padding: 40px 0 48px; }
}

/* ── CASE STUDIES (.xcs) RESPONSIVE ──────────────────────────── */
/* Breakpoints mirror the blog template breakpoints above          */
@media(max-width:1100px) {
  /* xar-inner is already covered above; .xcs uses xar-inner */
}
@media(max-width:900px) {
  /* xcs-card-featured already defined in archive-case-studies.php inline CSS */
}
@media(max-width:680px) {
  /* Reduce header offset slightly — mobile header is typically shorter */
  .xcs .xblog-hero,
  .xhm  > .xblog-hero,
  .xar  > .xblog-hero,
  .xau  > .xau-profile-bar,
  .xsr  > .xsr-hero {
    padding-top: calc(36px + var(--marlab-header-h));
  }
}

.xblog-hero-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;

  margin-bottom:22px;

  font-size:13px;
  font-weight:600;
}

.xblog-hero-breadcrumbs .xblog-bc-item a{
  color:var(--blog-brand);
}

.xblog-hero-breadcrumbs .xblog-bc-current{
  color:var(--blog-t2);
}

.xblog-hero-breadcrumbs .xblog-bc-sep{
  color:var(--blog-t3);
}