/* ================================================================
   Blog Suite v3.0 — Stylesheet
   - Font: fully inherits from active theme
   - Cards: no border, no background — image only has shadow + radius
   - Columns & aspect ratio driven by CSS custom properties
   ================================================================ */

.bs-wrap *,
.bs-wrap *::before,
.bs-wrap *::after { box-sizing: border-box; }

.bs-wrap {
    --bs-border:       #e5e7eb;
    --bs-text-muted:   #6b7280;
    --bs-link:         inherit;
    font-family:       inherit;
    font-size:         inherit;
    color:             inherit;
    line-height:       inherit;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.bs-hero {
    background-color: var(--bs-header-bg, #0f2044);
    color:            var(--bs-header-text, #fff);
    padding:          60px 0;
    width:            100%;
}
.bs-hero__title {
    font-size:   var(--bs-fs-header-title, clamp(26px, 5vw, 48px));
    font-weight: 700;
    margin:      0 0 10px;
    line-height: 1.15;
    color:       var(--bs-header-text, #fff) !important;
    font-family: inherit;
}
.bs-hero__subtitle {
    font-size:   var(--bs-fs-header-subtitle, 16px);
    opacity:     .85;
    margin:      0 0 20px;
    color:       inherit;
    font-family: inherit;
}
.bs-badges {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-top:  4px;
}
.bs-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    border:          1.5px solid rgba(255,255,255,.45);
    border-radius:   50px;
    padding:         5px 14px;
    font-size:       var(--bs-fs-header-badge, 13px);
    color:           inherit;
    text-decoration: none;
    font-family:     inherit;
    transition:      opacity .15s;
}
.bs-badge:hover { opacity: .8; }

/* ── Listing ──────────────────────────────────────────────────── */
.bs-listing {
    padding:    44px 0 60px;
    background: #fff;
    width:      100%;
}
.bs-listing__heading {
    font-size:   var(--bs-fs-listing-heading, 22px);
    font-weight: 700;
    margin:      0 0 28px;
    font-family: inherit;
}

/* ── Grid — columns driven by --bs-card-cols CSS var ─────────── */
.bs-grid {
    display:               grid;
    grid-template-columns: repeat(var(--bs-card-cols, 3), 1fr);
    gap:                   28px;
}
/* Explicit column overrides for related posts (always 3) */
.bs-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* List mode */
.bs-grid--list { grid-template-columns: 1fr !important; }
.bs-grid--list .bs-card { flex-direction: row; }
.bs-grid--list .bs-card__img-wrap { width: 260px; flex-shrink: 0; }
.bs-grid--list .bs-card__img { aspect-ratio: 4/3; border-radius: var(--bs-card-radius, 10px) 0 0 var(--bs-card-radius, 10px) !important; }
.bs-grid--list .bs-card__body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 8px; }

/* ── Card — no border, no background ─────────────────────────── */
.bs-card {
    background: transparent;
    border:     none;
    box-shadow: none;
    display:    flex;
    flex-direction: column;
    transition: transform .2s ease;
}
.bs-card:hover { transform: translateY(-2px); }

/* Image wrapper — this is where shadow + radius lives */
.bs-card__img-wrap {
    display:       block;
    overflow:      hidden;
    border-radius: var(--bs-card-radius, 10px);
    box-shadow:    0 4px 18px rgba(0,0,0,.10);
    transition:    box-shadow .2s ease;
    background:    #f3f4f6;
}
.bs-card:hover .bs-card__img-wrap {
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.bs-card__img {
    width:        100%;
    aspect-ratio: var(--bs-card-ratio, 16/10);
    object-fit:   cover;
    display:      block;
    border-radius: var(--bs-card-radius, 10px);
    transition:   transform .3s ease;
}
.bs-card:hover .bs-card__img { transform: scale(1.03); }
.bs-card__img--empty {
    width:           100%;
    aspect-ratio:    var(--bs-card-ratio, 16/10);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #f3f4f6;
    border-radius:   var(--bs-card-radius, 10px);
}

/* Card body — no card background, just text */
.bs-card__body {
    padding:        14px 0 0;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.bs-card__title {
    font-size:   var(--bs-fs-card-title, 15px);
    font-weight: 700;
    line-height: 1.4;
    margin:      0;
    font-family: inherit;
}
.bs-card__title a { color: inherit; text-decoration: none; }
.bs-card__title a:hover { text-decoration: underline; }
.bs-card__meta {
    font-size:   var(--bs-fs-card-meta, 12px);
    color:       var(--bs-text-muted);
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px;
    font-family: inherit;
}
.bs-meta-sep { opacity: .5; }
.bs-reading-time {
    display:     inline-flex;
    align-items: center;
    gap:         3px;
    font-size:   inherit;
    color:       var(--bs-text-muted);
}
.bs-card__excerpt {
    font-size:   var(--bs-fs-card-excerpt, 13px);
    color:       var(--bs-text-muted);
    margin:      0;
    line-height: 1.6;
    font-family: inherit;
}
.bs-card__more {
    display:         inline-block;
    margin-top:      4px;
    font-size:       var(--bs-fs-card-more, 13px);
    font-weight:     600;
    color:           inherit;
    text-decoration: none;
    font-family:     inherit;
}
.bs-card__more:hover { text-decoration: underline; }

/* ── Pagination ───────────────────────────────────────────────── */
.bs-pagination { margin-top: 48px; display: flex; justify-content: center; }
.bs-pagination .page-numbers { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; align-items:center; }
.bs-pagination .page-numbers li a,
.bs-pagination .page-numbers li span {
    display: inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--bs-border);
    font-size:14px; font-weight:500; text-decoration:none; color:inherit; transition:all .18s; font-family:inherit;
}
.bs-pagination .page-numbers li a:hover,
.bs-pagination .page-numbers li .current {
    background: var(--bs-header-bg, #0f2044); color:#fff; border-color:var(--bs-header-bg, #0f2044);
}
.bs-pagination .page-numbers li .dots { border:none; width:auto; }

/* ── Archive CTA Banner ───────────────────────────────────────── */
.bs-cta-banner {
    background-color: var(--bs-cta-bg, #0f2044);
    color:            var(--bs-cta-text, #fff);
    padding:          52px 0;
    width:            100%;
    border-radius:    var(--bs-cta-radius, 0px);
    overflow:         hidden;
}
.bs-cta-banner__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    flex-wrap:       wrap;
}
.bs-cta-banner h2 { font-size:var(--bs-fs-cta-title, clamp(18px,3vw,28px)); font-weight:700; margin:0 0 8px; color:var(--bs-cta-text, #fff) !important; font-family:inherit; }
.bs-cta-banner p  { margin:0; opacity:.85; font-size:var(--bs-fs-cta-subtitle, 15px); color:inherit; font-family:inherit; }

/* ── Buttons ──────────────────────────────────────────────────── */
.bs-btn {
    display:         inline-block;
    padding:         12px 28px;
    border-radius:   50px;
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    color:           #fff !important;
    background:      var(--bs-cta-btn, #f5a623);
    transition:      opacity .2s, transform .15s;
    white-space:     nowrap;
    border:          none;
    cursor:          pointer;
    font-family:     inherit;
}
.bs-btn:hover { opacity:.88; transform:translateY(-1px); text-decoration:none; }
.bs-btn--sidebar { display:block; text-align:center; width:100%; margin-top:12px; }
/* CTA button label sizes */
.bs-cta-banner .bs-btn { font-size:var(--bs-fs-cta-button, 15px); }
.bs-bottom-cta .bs-btn { font-size:var(--bs-fs-fcta-button, 15px); }
/* Archive CTA button — configurable text color & radius */
.bs-cta-banner .bs-btn {
    color:         var(--bs-cta-btn-text, #fff) !important;
    border-radius: var(--bs-cta-btn-radius, 50px);
}
/* Sidebar CTA button — configurable text color & radius */
.bs-sidebar-cta .bs-btn {
    color:         var(--bs-sidebar-cta-btn-text, #fff) !important;
    border-radius: var(--bs-sidebar-cta-btn-radius, 50px);
}
/* Footer CTA button — configurable text color & radius */
.bs-bottom-cta .bs-btn {
    color:         var(--bs-footer-cta-btn-text, #fff) !important;
    border-radius: var(--bs-footer-cta-btn-radius, 50px);
}

/* Empty state */
.bs-empty { text-align:center; padding:60px 0; color:var(--bs-text-muted); font-size:16px; }

/* ════════════════════════════════════════════════════════════════
   SINGLE POST
   ════════════════════════════════════════════════════════════════ */
.bs-single { background:#fff; }

/* Breadcrumb */
.bs-breadcrumb { border-bottom:1px solid var(--bs-border); width:100%; }
.bs-breadcrumb nav {
    display:flex; gap:6px; align-items:center; flex-wrap:wrap;
    font-size:13px; color:var(--bs-text-muted); padding:12px 24px; font-family:inherit;
}
.bs-breadcrumb a { color:inherit; text-decoration:none; }
.bs-breadcrumb a:hover { text-decoration:underline; }

/* Layout */
.bs-single__layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   48px;
    align-items:           start;
    padding:               40px 0 60px;
}

/* Post header */
.bs-post-header { margin-bottom:24px; }
.bs-post-title { font-size:var(--bs-fs-post-title, clamp(22px,4vw,38px)); font-weight:700; line-height:1.2; margin:0 0 14px; font-family:inherit; }
.bs-post-meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:var(--bs-fs-post-meta, 14px); color:var(--bs-text-muted); font-family:inherit; }
.bs-post-meta strong { color:inherit; }

/* Featured image */
.bs-featured-img { margin-bottom:28px; border-radius:10px; overflow:hidden; }
.bs-featured-img__img { width:100%; height:auto; display:block; }

/* Post content */
.bs-post-content { font-family:inherit; font-size:var(--bs-fs-post-content, inherit); line-height:inherit; color:inherit; margin-bottom:32px; }
.bs-post-content img { max-width:100%; height:auto; }

/* Social share */
.bs-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 28px; padding:18px 0; border-top:1px solid var(--bs-border); border-bottom:1px solid var(--bs-border); }
.bs-share__label { font-size:13px; font-weight:600; color:var(--bs-text-muted); font-family:inherit; }
.bs-share__btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:50px; font-size:13px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity .2s,transform .15s; font-family:inherit; line-height:1; }
.bs-share__btn:hover { opacity:.85; transform:translateY(-1px); }
.bs-share__btn--x   { background:#000; color:#fff; }
.bs-share__btn--li  { background:#0a66c2; color:#fff; }
.bs-share__btn--fb  { background:#1877f2; color:#fff; }
.bs-share__btn--copy{ background:#f0f0f5; color:#333; }

/* Author box */
.bs-author-box { display:flex; gap:18px; background:#f8f9fc; border:1px solid var(--bs-border); border-radius:10px; padding:22px; margin:0 0 28px; align-items:flex-start; }
.bs-author-box__avatar { border-radius:50%; width:64px; height:64px; object-fit:cover; flex-shrink:0; }
.bs-author-box__name  { font-weight:700; font-size:15px; margin-bottom:5px; font-family:inherit; }
.bs-author-box__bio   { font-size:13px; color:var(--bs-text-muted); line-height:1.6; margin:0 0 8px; font-family:inherit; }
.bs-author-box__link  { font-size:13px; text-decoration:none; font-weight:500; font-family:inherit; }
.bs-author-box__link:hover { text-decoration:underline; }

/* Footer CTA */
.bs-bottom-cta {
    background-color: var(--bs-footer-cta-bg, #0f2044);
    color:            var(--bs-footer-cta-text, #fff);
    border-radius:    var(--bs-footer-cta-radius, 10px);
    padding:          28px 24px;
    margin:           0 0 36px;
    display:          flex;
    flex-wrap:        wrap;
    align-items:      center;
    justify-content:  space-between;
    gap:              18px;
}
.bs-bottom-cta h3 { font-size:var(--bs-fs-fcta-title, 18px); font-weight:700; margin:0; color:var(--bs-footer-cta-text, #fff) !important; line-height:1.4; font-family:inherit; }

/* Related posts */
.bs-related { margin-top:48px; }
.bs-related__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.bs-related__all { font-size:var(--bs-fs-related-link, 14px); font-weight:500; text-decoration:none; font-family:inherit; }
.bs-related__all:hover { text-decoration:underline; }
/* Related-section font sizes (scoped to override shared listing/card rules) */
.bs-related .bs-listing__heading { font-size:var(--bs-fs-related-heading, 22px); }
.bs-related .bs-card__title { font-size:var(--bs-fs-related-title, 15px); }
.bs-related .bs-card__meta  { font-size:var(--bs-fs-related-meta, 12px); }

/* Sidebar */
.bs-single__sidebar { position:sticky; top:24px; }
.bs-sidebar-widget { border-radius:10px; padding:20px; margin-bottom:20px; border:1px solid var(--bs-border); background:#fff; }
.bs-sidebar-widget__title { font-size:var(--bs-fs-sidebar-wtitle, 14px); font-weight:700; margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--bs-border); font-family:inherit; }
.bs-sidebar-post { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--bs-border); }
.bs-sidebar-post:last-child { border-bottom:none; }
.bs-sidebar-post__img { width:58px; height:58px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.bs-sidebar-post__info { flex:1; min-width:0; }
.bs-sidebar-post__title { display:block; font-size:var(--bs-fs-sidebar-ptitle, 13px); font-weight:600; line-height:1.4; text-decoration:none; margin-bottom:4px; overflow-wrap:break-word; font-family:inherit; color:inherit; }
.bs-sidebar-post__title:hover { text-decoration:underline; }
.bs-sidebar-post__more { font-size:12px; font-weight:500; text-decoration:none; font-family:inherit; }
.bs-sidebar-post__more:hover { text-decoration:underline; }

/* Sidebar CTA */
.bs-sidebar-cta {
    background-color: var(--bs-sidebar-cta-bg, #0f2044) !important;
    color:            var(--bs-sidebar-cta-text, #fff) !important;
    border:           none !important;
    border-radius:    var(--bs-sidebar-cta-radius, 10px);
    text-align:       center;
}
.bs-sidebar-cta__title { font-size:var(--bs-fs-scta-title, 17px); font-weight:700; margin:0 0 8px; color:var(--bs-sidebar-cta-text, #fff) !important; font-family:inherit; }
.bs-sidebar-cta__sub   { font-size:var(--bs-fs-scta-subtitle, 13px); opacity:.85; margin:0; color:inherit; font-family:inherit; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width:960px) {
    .bs-grid               { grid-template-columns: repeat(2,1fr) !important; }
    .bs-grid--list         { grid-template-columns: 1fr !important; }
    .bs-grid--3            { grid-template-columns: repeat(2,1fr); }
    .bs-single__layout     { grid-template-columns: 1fr; gap:32px; }
    .bs-single__sidebar    { position:static; }
}
@media (max-width:640px) {
    .bs-hero               { padding:36px 0; }
    .bs-listing            { padding:28px 0 40px; }
    .bs-cta-banner         { padding:36px 0; }
    .bs-cta-banner__inner  { flex-direction:column; text-align:center; }
    .bs-grid               { grid-template-columns: 1fr !important; }
    .bs-grid--3            { grid-template-columns: 1fr !important; }
    .bs-grid--list .bs-card { flex-direction:column; }
    .bs-grid--list .bs-card__img-wrap { width:100%; }
    .bs-grid--list .bs-card__img { border-radius:var(--bs-card-radius,10px) !important; }
    .bs-single__layout     { padding:20px 0 40px; }
    .bs-author-box         { flex-direction:column; align-items:center; text-align:center; }
    .bs-bottom-cta         { flex-direction:column; text-align:center; }
    .bs-related__head      { flex-direction:column; align-items:flex-start; }
    .bs-share              { flex-wrap:wrap; }
    .bs-pagination .page-numbers li a,
    .bs-pagination .page-numbers li span { width:32px; height:32px; font-size:13px; }
}
@media (max-width:400px) {
    .bs-share__btn { padding:5px 10px; font-size:12px; }
}