/*
 * Sparks Blog – Frontend Styles
 * Version: 1.0.0
 *
 * All values use CSS custom properties so Elementor / theme can override.
 */

/* ── Custom Properties ─────────────────────────────────────────────────── */
:root {
  --spb-primary:        #e91e8c;
  --spb-primary-hover:  #c4177a;
  --spb-dark:           #1a1a2e;
  --spb-text:           #374151;
  --spb-muted:          #6b7280;
  --spb-border:         #e5e7eb;
  --spb-bg:             #ffffff;
  --spb-card-bg:        #ffffff;
  --spb-badge-bg:       #1a1a2e;
  --spb-badge-color:    #ffffff;
  --spb-radius-card:    12px;
  --spb-radius-badge:   50px;
  --spb-radius-btn:     50px;
  --spb-shadow-card:    0 2px 16px rgba(0,0,0,.07);
  --spb-font-title:     inherit;
  --spb-transition:     all .22s cubic-bezier(.4,0,.2,1);
  --spb-grid-cols:      3;
  --spb-grid-gap:       24px;
}

/* ── Utility Reset ─────────────────────────────────────────────────────── */
.spb-featured-wrap *,
.spb-grid-section   *,
.spb-card           * {
  box-sizing: border-box;
}

/* ── No Thumbnail Placeholder ──────────────────────────────────────────── */
.spb-no-thumb {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}

.spb-no-thumb::after {
  content: "📷";
  font-size: 2rem;
  opacity: .35;
}

/* ── Badge ─────────────────────────────────────────────────────────────── */
.spb-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--spb-badge-bg);
  color:            var(--spb-badge-color);
  font-size:        .72rem;
  font-weight:      600;
  letter-spacing:   .04em;
  text-transform:   uppercase;
  padding:          .35em .85em;
  border-radius:    var(--spb-radius-badge);
  white-space:      nowrap;
  line-height:      1;
}

/* ── Meta row ──────────────────────────────────────────────────────────── */
.spb-featured-meta,
.spb-card-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem 1rem;
  align-items: center;
  margin-bottom: .65rem;
}

.spb-meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         .3rem;
  font-size:   .78rem;
  color:       var(--spb-muted);
  line-height: 1;
}

.spb-meta-item svg { flex-shrink: 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.spb-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              .4rem;
  cursor:           pointer;
  border:           2px solid transparent;
  font-weight:      700;
  letter-spacing:   .06em;
  text-transform:   uppercase;
  font-size:        .78rem;
  padding:          .7em 1.8em;
  border-radius:    var(--spb-radius-btn);
  text-decoration:  none;
  transition:       var(--spb-transition);
  line-height:      1;
}

.spb-btn-primary {
  background-color: var(--spb-primary);
  color:            #fff;
  border-color:     var(--spb-primary);
}

.spb-btn-primary:hover,
.spb-btn-primary:focus-visible {
  background-color: var(--spb-primary-hover);
  border-color:     var(--spb-primary-hover);
  color:            #fff;
  transform:        translateY(-1px);
  box-shadow:       0 6px 20px rgba(233,30,140,.3);
}

.spb-btn-outline {
  background-color: transparent;
  color:            var(--spb-primary);
  border-color:     var(--spb-primary);
}

.spb-btn-outline:hover,
.spb-btn-outline:focus-visible {
  background-color: var(--spb-primary);
  color:            #fff;
  transform:        translateY(-1px);
  box-shadow:       0 6px 20px rgba(233,30,140,.25);
}

/* ════════════════════════════════════════════════════════════════════════
   FEATURED POST
   ════════════════════════════════════════════════════════════════════════ */

.spb-featured-wrap {
  display:   flex;
  gap:       2.5rem;
  padding:   2rem 0;
  width:     100%;
}

/* Layout: split (side by side) */
.spb-layout-split {
  flex-direction: row;
  align-items:    center;
}

.spb-layout-split .spb-featured-image-col  { flex: 0 0 52%; max-width: 52%; }
.spb-layout-split .spb-featured-content-col { flex: 1; }

/* Layout: stacked */
.spb-layout-stacked {
  flex-direction: column;
}

.spb-layout-stacked .spb-featured-image-col { width: 100%; }

/* Alignment */
.spb-align-left   .spb-featured-content-col { text-align: left; }
.spb-align-center .spb-featured-content-col { text-align: center; align-items: center; display: flex; flex-direction: column; }
.spb-align-right  .spb-featured-content-col { text-align: right; align-items: flex-end; display: flex; flex-direction: column; }

/* Image col */
.spb-featured-image-col {
  position:      relative;
  border-radius: 12px;
  overflow:      hidden;
}

.spb-featured-image-col .spb-badge {
  position:  absolute;
  top:       1rem;
  right:     1rem;
  z-index:   2;
}

.spb-featured-img-link { display: block; }

.spb-featured-img {
  width:         100%;
  height:        auto;
  display:       block;
  object-fit:    cover;
  transition:    transform .4s ease;
  border-radius: inherit;
}

.spb-featured-image-col:hover .spb-featured-img { /* no zoom */ }

/* Content col */
.spb-featured-content-col { display: flex; flex-direction: column; gap: .75rem; }

.spb-featured-title {
  font-size:   clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  color:       var(--spb-dark);
  margin:      0;
}

.spb-featured-title a {
  color:           inherit;
  text-decoration: none;
  transition:      color .2s;
}

.spb-featured-title a:hover { color: var(--spb-primary); }

.spb-featured-excerpt {
  font-size:   1rem;
  line-height: 1.65;
  color:       var(--spb-muted);
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ════════════════════════════════════════════════════════════════════════
   CATEGORY LABEL BLOCK
   ════════════════════════════════════════════════════════════════════════ */

.spb-category-label {
  font-size:   .78rem;
  font-weight: 600;
  color:       var(--spb-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

/* ════════════════════════════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════════════════════════════ */

.spb-filter-bar {
  display:        flex;
  flex-wrap:      wrap;
  gap:            .5rem;
  margin-bottom:  2rem;
  align-items:    center;
}

.spb-filter-btn {
  cursor:           pointer;
  display:          inline-flex;
  align-items:      center;
  gap:              .35rem;
  background:       transparent;
  border:           1.5px solid var(--spb-border);
  color:            var(--spb-text);
  border-radius:    50px;
  padding:          .42em 1.1em;
  font-size:        .82rem;
  font-weight:      500;
  letter-spacing:   .01em;
  transition:       var(--spb-transition);
  white-space:      nowrap;
}

.spb-filter-btn:hover {
  border-color: var(--spb-primary);
  color:        var(--spb-primary);
}

.spb-filter-btn.spb-filter-active {
  background-color: var(--spb-dark);
  border-color:     var(--spb-dark);
  color:            #fff;
}

/* Category icon dots */
.spb-filter-btn::before {
  content:       '';
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    currentColor;
  opacity:       .6;
}

/* ════════════════════════════════════════════════════════════════════════
   BLOG GRID
   ════════════════════════════════════════════════════════════════════════ */

.spb-grid-section {
  padding: 1.5rem 0;
}

.spb-grid-posts {
  display:               grid;
  grid-template-columns: repeat(var(--spb-grid-cols, 3), 1fr);
  gap:                   var(--spb-grid-gap, 24px);
}

/* Dynamic column classes */
.spb-grid-cols-1 .spb-grid-posts { --spb-grid-cols: 1; }
.spb-grid-cols-2 .spb-grid-posts { --spb-grid-cols: 2; }
.spb-grid-cols-3 .spb-grid-posts { --spb-grid-cols: 3; }
.spb-grid-cols-4 .spb-grid-posts { --spb-grid-cols: 4; }
.spb-grid-cols-5 .spb-grid-posts { --spb-grid-cols: 5; }
.spb-grid-cols-6 .spb-grid-posts { --spb-grid-cols: 6; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.spb-card {
  background:    var(--spb-card-bg);
  border-radius: var(--spb-radius-card);
  box-shadow:    var(--spb-shadow-card);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    transform .22s ease, box-shadow .22s ease;
}

.spb-card:hover {
  /* No pop/lift effect — subtle only */
}

/* Animating in cards */
.spb-card.spb-card-enter {
  animation: spbFadeUp .35s ease both;
}

@keyframes spbFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Thumbnail */
.spb-card-thumb-wrap {
  position: relative;
  width:    100%;
  overflow: hidden;
}

.spb-card-img-link {
  position: absolute;
  inset:    0;
  display:  block;
}

.spb-card-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.spb-card:hover .spb-card-img { /* no zoom on hover */ }

/* ── Filter icon ───────────────────────────────────────────────────────── */
.spb-filter-icon {
  display:      inline-flex;
  align-items:  center;
  line-height:  1;
  font-style:   normal;
  /* Emoji/SVG icon sits before label with a small gap */
}

.spb-filter-icon svg {
  width:  1em;
  height: 1em;
  vertical-align: middle;
}

/* Badge inside card */
.spb-card .spb-badge {
  position: absolute;
  top:      .85rem;
  right:    .85rem;
  z-index:  2;
}

/* Card body */
.spb-card-body {
  padding:        1rem 1.25rem 1.5rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
}

.spb-card-meta {
  flex-wrap: wrap;
  gap:       .35rem .7rem;
}

.spb-card-title {
  font-size:   1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color:       var(--spb-dark);
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.spb-card-title a {
  color:           inherit;
  text-decoration: none;
  transition:      color .18s;
}

.spb-card-title a:hover { color: var(--spb-primary); }

/* ── Load More ─────────────────────────────────────────────────────────── */
.spb-load-more-wrap {
  display:         flex;
  justify-content: center;
  margin-top:      2.5rem;
}

.spb-load-more {
  min-width: 220px;
}

.spb-load-more[disabled] {
  opacity:    .5;
  cursor:     not-allowed;
  transform:  none !important;
  box-shadow: none !important;
}

/* Spinner inside load more */
.spb-load-more .spb-spinner {
  display:          inline-block;
  width:            14px;
  height:           14px;
  border:           2px solid currentColor;
  border-top-color: transparent;
  border-radius:    50%;
  animation:        spbSpin .6s linear infinite;
}

@keyframes spbSpin {
  to { transform: rotate(360deg); }
}

/* ── No posts ───────────────────────────────────────────────────────────── */
.spb-no-posts {
  color:       var(--spb-muted);
  font-size:   .95rem;
  padding:     2rem 0;
  text-align:  center;
  grid-column: 1 / -1;
  margin:      0;
}

/* ── Divider between featured and grid ─────────────────────────────────── */
.spb-section-divider {
  border: none;
  border-top: 1px solid var(--spb-border);
  margin: 2rem 0;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .spb-grid-cols-4 .spb-grid-posts,
  .spb-grid-cols-5 .spb-grid-posts,
  .spb-grid-cols-6 .spb-grid-posts { --spb-grid-cols: 3; }
}

@media (max-width: 768px) {
  .spb-layout-split {
    flex-direction: column;
  }

  .spb-layout-split .spb-featured-image-col,
  .spb-layout-split .spb-featured-content-col {
    flex:      unset;
    max-width: 100%;
    width:     100%;
  }

  .spb-grid-cols-3 .spb-grid-posts,
  .spb-grid-cols-4 .spb-grid-posts,
  .spb-grid-cols-5 .spb-grid-posts,
  .spb-grid-cols-6 .spb-grid-posts { --spb-grid-cols: 2; }
}

@media (max-width: 480px) {
  .spb-grid-posts { --spb-grid-cols: 1 !important; }

  .spb-filter-bar { gap: .4rem; }

  .spb-filter-btn { font-size: .75rem; padding: .38em .9em; }

  .spb-featured-title { font-size: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════════════════ */

@media print {
  .spb-load-more-wrap,
  .spb-filter-bar { display: none; }
  .spb-card { break-inside: avoid; }
}


/* ════════════════════════════════════════════════════════════════════════
   SINGLE POST TEMPLATE
   ════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
/*
 * The plugin does NOT try to break out of the Elementor container.
 * Instead, set your Elementor Section/Container to "Full Width" and
 * give it the padding you want. The plugin wrapper fills whatever
 * space Elementor gives it.
 *
 * The max-width + auto-margin approach below provides sensible reading
 * width when the Elementor container IS full-width, while keeping left/right
 * breathing room at all viewport sizes.
 */
.spb-single-wrap {
  width:      100%;
  max-width:  1200px;
  margin-left:  auto;
  margin-right: auto;
  padding-left:  clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
  box-sizing:   border-box;
}

/* Elementor widget container — just let it fill the column, no overrides */
.elementor-widget-spb_single_post > .elementor-widget-container {
  padding: 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.spb-breadcrumb {
  font-size:     .82rem;
  color:         var(--spb-muted);
  margin-bottom: 1rem;
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           .25rem;
}

.spb-breadcrumb a {
  color:           inherit;
  text-decoration: none;
  transition:      color .18s;
}

.spb-breadcrumb a:hover { color: var(--spb-primary); }

.spb-bc-sep {
  color:      var(--spb-border);
  font-size:  1rem;
  line-height: 1;
  margin:     0 .1rem;
}

/* ── Single Header ───────────────────────────────────────────────────── */
.spb-single-header {
  margin-bottom: 2rem;
}

.spb-single-badge-wrap {
  margin-bottom: .85rem;
}

.spb-single-badge {
  display:        inline-block;
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding:        .38em 1.1em;
  border-radius:  50px;
  border:         1.5px solid currentColor;
  background:     transparent;
  color:          var(--spb-dark);
}

.spb-single-badge[style] {
  border-color: transparent;
}

.spb-single-title {
  font-size:     clamp(1.8rem, 4vw, 2.8rem);
  font-weight:   900;
  line-height:   1.12;
  color:         var(--spb-dark);
  margin:        0 0 1.4rem;
}

/* ── Author Block ─────────────────────────────────────────────────────── */
/*
 * Layout (matches screenshot 3):
 *
 *  [ avatar ]  Author Name
 *              ───────────────────────
 *              📅 22 Jun, 2024   🕐 4 min read
 */
.spb-author-block {
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  margin-bottom: 1.5rem;
}

.spb-author-avatar {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  background:    #e5e7eb;
  display:       block;
}

/* Right column — name, HR, date+time */
.spb-author-right {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding-top:    .2rem;
}

.spb-author-name {
  font-weight:   700;
  font-size:     1rem;
  color:         var(--spb-dark);
  line-height:   1.2;
  margin-bottom: .45rem;
}

.spb-author-hr {
  border:     none;
  border-top: 1px solid var(--spb-border);
  margin:     0 0 .55rem;
  width:      auto;   /* only as wide as the right column, not full page */
}

.spb-author-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         .3rem 1.1rem;
  color:       var(--spb-muted);
}

/* ── Excerpt / Intro ──────────────────────────────────────────────────── */
.spb-single-excerpt {
  font-size:   1rem;
  line-height: 1.7;
  color:       var(--spb-text);
  margin:      0 0 1.75rem;
}

/* ── Featured Image ───────────────────────────────────────────────────── */
.spb-single-image-wrap {
  width:         100%;
  margin-bottom: 2.5rem;
  overflow:      hidden;
  border-radius: 10px;
  background:    #f3f4f6;
  line-height:   0;
  /* Use padding-bottom trick for reliable cross-browser aspect ratio */
  position:      relative;
  padding-bottom: 52%;          /* ~16:9 — change to 56.25% for exact 16:9 */
  height:        0;             /* collapses height so padding-bottom drives it */
}

.spb-single-featured-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

/* ── Two-column layout ───────────────────────────────────────────────── */
.spb-single-body {
  display:        flex;
  flex-direction: row;
  gap:            2.5rem;
  align-items:    flex-start;
  width:          100%;
  box-sizing:     border-box;
  position:       relative;
}

/* Sidebar — fixed 260px, never fights with content for space */
.spb-single-sidebar {
  flex:      0 0 260px;
  width:     260px;
  min-width: 0;
  order:     0;
}

/* Default state */
.spb-sidebar-sticky {
  width: 100%;
}

/* JS adds this when sidebar sticks to viewport */
.spb-sidebar-sticky.is-sticky {
  position:    fixed;
  top:         2rem;
  z-index:     10;
  will-change: transform;
}

/* JS adds this when sidebar reaches bottom of content */
.spb-sidebar-sticky.is-bottom {
  position: absolute;
  bottom:   0;
  top:      auto;
}

/* Content — fills all remaining space, never overflows */
.spb-single-content {
  flex:     1 1 0;
  min-width: 0;
  max-width: 100%;
  order:     1;
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--spb-text);
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* ── Content typography ──────────────────────────────────────────────── */
.spb-single-content h1,
.spb-single-content h2,
.spb-single-content h3,
.spb-single-content h4,
.spb-single-content h5,
.spb-single-content h6 {
  color:       var(--spb-dark);
  font-weight: 800;
  line-height: 1.25;
  margin:      1.75em 0 .55em;
}

.spb-single-content h2 { font-size: 1.5rem; }
.spb-single-content h3 { font-size: 1.2rem; }

.spb-single-content p  { margin: 0 0 1.15em; }
.spb-single-content a  { color: var(--spb-primary); text-decoration: underline; }
.spb-single-content img { max-width: 100%; height: auto; border-radius: 6px; }
.spb-single-content ul,
.spb-single-content ol  { padding-left: 1.5em; margin: 0 0 1.15em; }
.spb-single-content li  { margin-bottom: .4em; }
.spb-single-content blockquote {
  border-left:  4px solid var(--spb-primary);
  padding-left: 1rem;
  margin:       1.5em 0;
  color:        var(--spb-muted);
  font-style:   italic;
}

/* Smooth scroll to anchors */
html { scroll-behavior: smooth; }
.spb-single-content [id] { scroll-margin-top: 5rem; }

/* ── Sidebar Card ────────────────────────────────────────────────────── */
.spb-sidebar-card {
  background:     #3b3bcc;
  color:          #ffffff;
  border-radius:  16px;
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0;
  width:          100%;
  box-sizing:     border-box;
}

.spb-sidebar-section {
  padding-bottom: 1.25rem;
  margin-bottom:  1.25rem;
  border-bottom:  1px solid rgba(255,255,255,.2);
}

.spb-sidebar-section:last-child {
  padding-bottom: 0;
  margin-bottom:  0;
  border-bottom:  none;
}

.spb-sidebar-heading {
  font-size:   1rem;
  font-weight: 700;
  color:       #ffffff;
  margin:      0 0 .85rem;
  line-height: 1.2;
}

/* ── TOC ──────────────────────────────────────────────────────────────── */
.spb-toc-list,
.spb-toc-sub {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            .45rem;
}

.spb-toc-sub {
  margin-top:  .4rem;
  padding-left: .9rem;
  gap:          .35rem;
}

.spb-toc-item { line-height: 1.35; }

/* H2 links — primary level */
.spb-toc-h2 > .spb-toc-link {
  color:       #ffffff;
  font-size:   .86rem;
  font-weight: 700;
}

/* H3 links — indented secondary level */
.spb-toc-h3 > .spb-toc-link {
  color:       rgba(255,255,255,.75);
  font-size:   .8rem;
  font-weight: 500;
}

.spb-toc-link {
  text-decoration: none;
  transition:      color .15s;
  display:         block;
  line-height:     1.35;
}

.spb-toc-link:hover,
.spb-toc-link:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ── Newsletter ───────────────────────────────────────────────────────── */
.spb-newsletter-form { width: 100%; }

.spb-newsletter-row {
  display:       flex;
  flex-direction: column;
  gap:           .5rem;
}

.spb-newsletter-input {
  width:         100%;
  border:        none;
  outline:       none;
  padding:       .6em .9em;
  font-size:     .85rem;
  color:         #374151;
  background:    #ffffff;
  border-radius: 50px;
  box-sizing:    border-box;
}

.spb-newsletter-btn {
  background:    #e91e8c;
  color:         #fff;
  border:        none;
  cursor:        pointer;
  font-size:     .82rem;
  font-weight:   700;
  padding:       .6em 1.2em;
  border-radius: 50px;
  white-space:   nowrap;
  transition:    background .2s;
  text-align:    center;
  width:         100%;
}

.spb-newsletter-btn:hover { background: #c4177a; }

.spb-newsletter-msg {
  font-size: .8rem;
  margin:    .4rem 0 0;
  color:     rgba(255,255,255,.85);
}

/* ── Social share ─────────────────────────────────────────────────────── */
.spb-share-row {
  display:   flex;
  gap:       .6rem;
  flex-wrap: wrap;
}

.spb-share-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  border-radius:   50%;
  background:      #e91e8c;
  color:           #fff;
  text-decoration: none;
  transition:      transform .18s, filter .18s;
  flex-shrink:     0;
}

.spb-share-btn:hover {
  transform: scale(1.1);
  filter:    brightness(1.1);
}

.spb-share-btn svg {
  width:   18px;
  height:  18px;
  display: block;
  fill:    currentColor;
}

/* ── CTA Button ───────────────────────────────────────────────────────── */
.spb-cta-section { padding-bottom: 0; border-bottom: none; }

.spb-cta-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  padding:         .8em 1em;
  background:      #f5a623;
  color:           #fff;
  font-size:       .8rem;
  font-weight:     900;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  text-decoration: none;
  border-radius:   50px;
  border:          none;
  cursor:          pointer;
  transition:      filter .2s;
  box-sizing:      border-box;
}

.spb-cta-btn:hover { filter: brightness(1.08); }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE – SINGLE POST
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet landscape (1024px) — sidebar gets narrower */
@media (max-width: 1024px) {
  .spb-single-sidebar {
    flex:  0 0 220px;
    width: 220px;
  }
  .spb-single-body { gap: 1.75rem; }
}

/* Tablet portrait / small laptop (960px) — stack vertically */
@media (max-width: 960px) {
  .spb-single-body {
    flex-direction: column;
    align-items:    stretch;
    gap:            2rem;
  }

  .spb-single-sidebar {
    flex:  unset;
    width: 100%;
    order: 1;
  }

  .spb-single-content { order: 0; }

  /* Disable JS sticky on tablet/mobile */
  .spb-sidebar-sticky,
  .spb-sidebar-sticky.is-sticky,
  .spb-sidebar-sticky.is-bottom {
    position: static !important;
    top:      auto !important;
    bottom:   auto !important;
    width:    100% !important;
  }
}

@media (max-width: 480px) {
  .spb-single-title  { font-size: 1.65rem; }
  .spb-author-avatar { width: 44px; height: 44px; }
}


/* ════════════════════════════════════════════════════════════════════════
   RELATED POSTS
   ════════════════════════════════════════════════════════════════════════ */

.spb-related-wrap {
  padding: 2.5rem 0 0;
  width:   100%;
}

.spb-related-title {
  font-size:     1.6rem;
  font-weight:   800;
  color:         var(--spb-dark);
  text-align:    center;
  margin:        0 0 1.75rem;
  line-height:   1.2;
}

.spb-related-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}

/* ── Related Card ─────────────────────────────────────────────────────── */
.spb-related-card {
  background:    var(--spb-card-bg, #ffffff);
  border-radius: var(--spb-radius-card, 12px);
  box-shadow:    var(--spb-shadow-card, 0 2px 16px rgba(0,0,0,.07));
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    box-shadow .2s ease;
}

.spb-related-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}

/* Thumbnail */
.spb-related-thumb {
  position:      relative;
  width:         100%;
  padding-bottom: 56.25%;   /* 16:9 default */
  overflow:      hidden;
  background:    #f3f4f6;
}

.spb-related-img-link {
  position: absolute;
  inset:    0;
  display:  block;
}

.spb-related-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
  transition: transform .35s ease;
}

.spb-related-card:hover .spb-related-img {
  transform: scale(1.03);
}

/* Badge on thumbnail */
.spb-related-badge {
  position: absolute;
  top:      .75rem;
  right:    .75rem;
  z-index:  2;
}

/* Card body */
.spb-related-body {
  padding:        1rem 1.15rem 1.35rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            .45rem;
}

.spb-related-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .3rem .7rem;
  align-items: center;
}

.spb-related-title-card {
  font-size:   1rem;
  font-weight: 700;
  line-height: 1.3;
  color:       var(--spb-dark);
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.spb-related-title-card a {
  color:           inherit;
  text-decoration: none;
  transition:      color .18s;
}

.spb-related-title-card a:hover { color: var(--spb-primary); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .spb-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .spb-related-grid { grid-template-columns: 1fr; }
  .spb-related-title { font-size: 1.3rem; }
}