.ss-blog-container {
    max-width: var(--ss-canvas-max, 1280px);
    margin: 0 auto;
    padding: var(--ss-canvas-section-y, 48px) var(--ss-canvas-pad, 20px) 80px;
    box-sizing: border-box;
}

.ss-blog-hero {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.ss-blog-hero .ss-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ss-violet, #6e5ce6);
}

.ss-blog-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    letter-spacing: -0.03em;
    color: var(--ss-ink);
}

.ss-blog-hero p {
    margin: 0 auto;
    max-width: 42ch;
    color: var(--ss-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* -----------------------------
   SEARCH
-----------------------------*/
.ss-blog-search {
    text-align: center;
    margin-bottom: 30px;
}
#ss-blog-search-input {
    width: 100%;
    max-width: 450px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--ss-border, #ccc);
    font-size: 16px;
    background: var(--ss-card, #fff);
    color: var(--ss-text, #111);
}

/* -----------------------------
   FILTERS
-----------------------------*/
.ss-blog-filters {
    text-align: center;
    margin-bottom: 25px;
}
.ss-filter-btn {
    padding: 10px 18px;
    margin: 5px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: var(--ss-card, #eee);
    color: var(--ss-text, #111);
    transition: .2s;
}
.ss-filter-btn.active,
.ss-filter-btn:hover {
    background: var(--ss-primary, #7b5cff);
    color: #fff;
}

/* -----------------------------
   GRID
-----------------------------*/
.ss-blog-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.ss-blog-card {
    background: var(--ss-card, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px var(--ss-shadow, rgba(0,0,0,.06));
    transition: .2s;
}
.ss-blog-card:hover {
    transform: translateY(-5px);
}

/* -----------------------------
   THUMB
-----------------------------*/
.ss-blog-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* -----------------------------
   CONTENT
-----------------------------*/
.ss-blog-content {
    padding: 18px;
}
.ss-blog-content h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--ss-text, #111);
}
.ss-blog-content p {
    font-size: 15px;
    opacity: .8;
    color: var(--ss-text, #111);
}

/* -----------------------------
   PAGINATION
-----------------------------*/
.ss-blog-pagination {
    text-align: center;
    margin-top: 30px;
}
.ss-blog-pagination a,
.ss-blog-pagination span {
    padding: 10px 15px;
    margin: 5px;
    border-radius: 6px;
    background: var(--ss-card, #f2f2f2);
    color: var(--ss-text, #111);
}
.ss-blog-pagination .current {
    background: var(--ss-primary, #7b5cff);
    color: #fff;
}

/* =============================
   SoulfulSync Thumbnail Blur BG
============================= */

.ss-blog-thumb {
  width:100%; height:220px; border-radius:14px 14px 0 0; overflow:hidden;
  position:relative; background:transparent;
}

/* Blur background */
.ss-blog-thumb.ss-has-bg::before {
  content:""; position:absolute; inset:0;
  background-image: var(--thumb-bg, none);
  background-size: cover; background-position:center;
  filter: blur(18px);
  transform: scale(1.1);
  opacity:.35;
}

/* Main image */
.ss-blog-thumb img.wp-post-image{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-position:center; display:block;
  transition: transform .25s ease, opacity .25s ease, object-fit .25s ease;
}

/* Hover */
.ss-blog-card:hover .ss-blog-thumb img{
  transform:scale(1.03);
}

/* ============================
   DARK MODE FIX — SoulfulSync
============================ */

html[data-theme="dark"] .ss-blog-card {
    background: var(--ss-card, #18181c);
}

html[data-theme="dark"] .ss-blog-content h3,
html[data-theme="dark"] .ss-blog-content p {
    color: var(--ss-text, #f0f0f0) !important;
    opacity: .9;
}

html[data-theme="dark"] #ss-blog-search-input {
    background: var(--ss-card, #18181c);
    color: var(--ss-text, #f0f0f0);
    border-color: var(--ss-border, #2a2a2e);
}

html[data-theme="dark"] .ss-filter-btn {
    background: #2d2d33;
    color: var(--ss-text, #f0f0f0);
}

html[data-theme="dark"] .ss-filter-btn.active {
    background: var(--ss-primary);
    color: #fff;
}

html[data-theme="dark"] .ss-blog-pagination a,
html[data-theme="dark"] .ss-blog-pagination span {
    background: #2d2d33;
    color: var(--ss-text);
}

/* -----------------------------
   RESPONSIVE
-----------------------------*/
@media (max-width: 900px) {
    .ss-blog-container {
        padding-bottom: calc(var(--ss-mobile-menu-offset, 90px) + 40px);
    }

    .ss-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .ss-blog-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .ss-filter-btn {
        margin: 0;
    }

    #ss-blog-search-input {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .ss-blog-grid {
        grid-template-columns: 1fr;
    }

    .ss-blog-thumb,
    .ss-blog-thumb img {
        height: 200px;
    }
}