/* ================================================================
   BUN News Carousel v1.2 — Frontend Styles
   Font sizes forced with !important on specific rules only.
   No blanket margin/padding reset — that breaks card spacing.
   Titles/excerpts are <div> not <h3>/<h4>/<p> so theme heading
   selectors cannot override them.
================================================================ */

.bun-wrap {
    --bun-accent:       #cc0000;
    --bun-card-w:       270px;
    --bun-img-h:        165px;
    --bun-title-feat:   16px;
    --bun-title-grid:   14px;
    --bun-excerpt-size: 12px;
    --bun-outlet-size:  11px;
    --bun-date-size:    11px;

    /* Dark theme */
    --bun-bg:           #111111;
    --bun-card-bg:      #1a1a1a;
    --bun-card-bg2:     #222222;
    --bun-border:       #2c2c2c;
    --bun-text:         #ffffff;
    --bun-text-muted:   #aaaaaa;
    --bun-text-hint:    #666666;
    --bun-filter-bg:    #222222;
    --bun-divider:      #2c2c2c;
    --bun-more-color:   #555555;
    --bun-btn-text:     #cccccc;
    --bun-btn-bg:       #1e1e1e;
    --bun-btn-border:   #3a3a3a;

    background:    var(--bun-bg);
    color:         var(--bun-text);
    padding:       20px 18px 26px;
    border-radius: 6px;
    box-sizing:    border-box;
    /* Override theme body/wrapper font-size leaking in */
    font-size:     15px !important;
    line-height:   1.5  !important;
}

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

/* ── Light Theme ──────────────────────────────────────────── */
.bun-wrap.bun-light {
    --bun-bg:         transparent;
    --bun-card-bg:    #ffffff;
    --bun-card-bg2:   #f5f5f5;
    --bun-border:     #e0e0e0;
    --bun-text:       #111111;
    --bun-text-muted: #555555;
    --bun-text-hint:  #999999;
    --bun-filter-bg:  #f0f0f0;
    --bun-divider:    #dddddd;
    --bun-more-color: #aaaaaa;
    --bun-btn-text:   #333333;
    --bun-btn-bg:     #f5f5f5;
    --bun-btn-border: #dddddd;
}

/* ── Header ───────────────────────────────────────────────── */
.bun-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    flex-wrap:     wrap;
    margin-bottom: 14px;
}

.bun-label {
    background:     var(--bun-accent);
    color:          #fff !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 1.5px;
    padding:        5px 12px;
    text-transform: uppercase;
    flex-shrink:    0;
    line-height:    1.4 !important;
    display:        inline-block;
}

/* ── Filters ──────────────────────────────────────────────── */
.bun-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.bun-filter {
    background:      var(--bun-filter-bg) !important;
    border:          1px solid var(--bun-border) !important;
    color:           var(--bun-text-muted) !important;
    font-size:       11px !important;
    font-weight:     600 !important;
    padding:         4px 12px !important;
    cursor:          pointer;
    border-radius:   3px !important;
    transition:      background 0.18s, border-color 0.18s, color 0.18s;
    line-height:     1.6 !important;
    box-shadow:      none !important;
    text-decoration: none !important;
    margin:          0 !important;
}
.bun-filter:hover {
    border-color: var(--bun-accent) !important;
    color:        var(--bun-text) !important;
}
.bun-filter.active {
    background:   var(--bun-accent) !important;
    border-color: var(--bun-accent) !important;
    color:        #fff !important;
}

/* ── Featured Carousel ────────────────────────────────────── */
.bun-carousel {
    display:            flex;
    gap:                12px;
    overflow-x:         auto;
    padding-bottom:     8px;
    margin-bottom:      22px;
    scroll-snap-type:   x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:    thin;
    scrollbar-color:    var(--bun-accent) var(--bun-card-bg2);
    cursor:             grab;
    user-select:        none;
}
.bun-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.bun-carousel::-webkit-scrollbar        { height: 3px; }
.bun-carousel::-webkit-scrollbar-track  { background: var(--bun-card-bg2); }
.bun-carousel::-webkit-scrollbar-thumb  { background: var(--bun-accent); border-radius: 2px; }

/* ── Base Card link reset ─────────────────────────────────── */
.bun-wrap .bun-card {
    text-decoration: none !important;
    color:           var(--bun-text) !important;
    display:         block;
    transition:      border-color 0.18s;
}
.bun-wrap .bun-card:hover,
.bun-wrap .bun-card:visited,
.bun-wrap .bun-card:active,
.bun-wrap .bun-card:focus {
    text-decoration: none !important;
    color:           var(--bun-text) !important;
    outline:         none;
}

/* ── Featured Card ────────────────────────────────────────── */
.bun-feat-card {
    flex:              0 0 var(--bun-card-w);
    scroll-snap-align: start;
    background:        var(--bun-card-bg);
    border:            1px solid var(--bun-border);
    border-radius:     4px;
    overflow:          hidden;
    box-shadow:        none !important;
}
.bun-feat-card:hover { border-color: var(--bun-accent); }

/* ── Card Image ───────────────────────────────────────────── */
.bun-card-img {
    height:     var(--bun-img-h);
    overflow:   hidden;
    background: var(--bun-card-bg2);
    display:    block;
    position:   relative;
}
.bun-card-img img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    margin:     0 !important;
    padding:    0 !important;
    border:     0 !important;
    max-width:  none !important;
    transition: transform 0.3s;
}
.bun-feat-card:hover .bun-card-img img { transform: scale(1.04); }
.bun-card-img.bun-img-err img { display: none !important; }

/* ── Card Body ────────────────────────────────────────────── */
.bun-card-body {
    padding:        12px 14px 12px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    background:     var(--bun-card-bg);
    flex:           1;
}

/* ── Titles (DIV — not H3/H4, so theme can't target them) ─── */
.bun-wrap .bun-title {
    color:       var(--bun-text) !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
    display:     block !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.bun-wrap .bun-feat-title {
    font-size: var(--bun-title-feat) !important;
}
.bun-wrap .bun-grid-title {
    font-size: var(--bun-title-grid) !important;
}

/* ── Card Meta row ────────────────────────────────────────── */
/*
   [icon]  Outlet Name          Apr 1, 2026
           Author Name
*/
.bun-card-meta {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             8px;
    margin-top:      auto !important; /* push to bottom of flex card-body */
    padding-top:     2px;
    flex-shrink:     0;
}
.bun-meta-left {
    display:     flex;
    align-items: flex-start;
    gap:         7px;
    min-width:   0;
    flex:        1;
}
.bun-meta-icon {
    width:         28px !important;
    height:        28px !important;
    min-width:     28px !important;
    border-radius: 4px !important;
    object-fit:    cover !important;
    flex-shrink:   0;
    margin:        0 !important;
    padding:       0 !important;
    border:        none !important;
    display:       block !important;
    max-width:     none !important;
}
.bun-meta-icon-ph {
    display:       block;
    width:         28px;
    height:        28px;
    min-width:     28px;
    border-radius: 4px;
    background:    var(--bun-card-bg2);
    flex-shrink:   0;
}
.bun-meta-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
    overflow:       hidden;
}
.bun-wrap .bun-outlet {
    font-size:      var(--bun-outlet-size) !important;
    font-weight:    700 !important;
    color:          var(--bun-accent) !important;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    display:        block !important;
    line-height:    1.4 !important;
    margin:         0 !important;
    padding:        0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.bun-wrap .bun-meta-author {
    font-size:      var(--bun-date-size) !important;
    color:          var(--bun-text-muted) !important;
    font-weight:    400 !important;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    display:        block !important;
    line-height:    1.4 !important;
    margin:         0 !important;
    padding:        0 !important;
}
.bun-wrap .bun-date {
    font-size:   var(--bun-date-size) !important;
    color:       var(--bun-text-hint) !important;
    font-weight: 400 !important;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4 !important;
    margin:      0 !important;
    padding:     0 !important;
    display:     block !important;
}

/* ── More Stories Divider ─────────────────────────────────── */
.bun-more-label {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 14px;
    margin-top:    2px;
}
.bun-more-label::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--bun-divider);
}
.bun-more-label span {
    font-size:      10px !important;
    font-weight:    700 !important;
    letter-spacing: 1.2px;
    color:          var(--bun-more-color) !important;
    text-transform: uppercase;
    flex-shrink:    0;
    line-height:    1 !important;
}

/* ── Grid ─────────────────────────────────────────────────── */
.bun-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   14px;
    margin-bottom:         20px;
}
.bun-grid-card {
    background:     var(--bun-card-bg);
    border:         1px solid var(--bun-border);
    border-radius:  4px;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    box-shadow:     none !important;
}
.bun-grid-card:hover { border-color: var(--bun-accent); }

.bun-grid-img {
    height:      130px;
    overflow:    hidden;
    background:  var(--bun-card-bg2);
    flex-shrink: 0;
    display:     block;
    position:    relative;
}
.bun-grid-img img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    margin:     0 !important;
    padding:    0 !important;
    border:     0 !important;
    max-width:  none !important;
    transition: transform 0.3s;
}
.bun-grid-card:hover .bun-grid-img img { transform: scale(1.04); }
.bun-grid-img.bun-no-img    { background: var(--bun-card-bg2); }
.bun-grid-img.bun-img-err img { display: none !important; }

.bun-grid-body {
    padding:        10px 12px 12px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            7px;
    background:     var(--bun-card-bg);
}

/* ── Excerpt (DIV — not P) ────────────────────────────────── */
.bun-wrap .bun-excerpt {
    font-size:          var(--bun-excerpt-size) !important;
    color:              var(--bun-text-muted) !important;
    line-height:        1.55 !important;
    margin:             0 !important;
    padding:            0 !important;
    font-weight:        400 !important;
    background:         none !important;
    border:             none !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Load More ────────────────────────────────────────────── */
.bun-load-more-wrap {
    text-align:    center;
    padding:       16px 0 6px;
}
.bun-load-more {
    background:      var(--bun-btn-bg) !important;
    border:          1px solid var(--bun-btn-border) !important;
    color:           var(--bun-btn-text) !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    padding:         10px 36px !important;
    cursor:          pointer;
    border-radius:   3px !important;
    transition:      border-color 0.18s, color 0.18s;
    line-height:     1.4 !important;
    box-shadow:      none !important;
    display:         inline-block;
    letter-spacing:  0.3px;
    text-decoration: none !important;
    margin:          0 !important;
}
.bun-load-more:hover {
    border-color: var(--bun-accent) !important;
    color:        var(--bun-accent) !important;
}
.bun-load-more:disabled,
.bun-load-more.bun-loading {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* ── Filter: hidden ───────────────────────────────────────── */
.bun-card.bun-hidden { display: none !important; }

/* ── Empty state ──────────────────────────────────────────── */
.bun-no-items {
    background:    var(--bun-card-bg);
    border:        1px solid var(--bun-border);
    padding:       24px;
    color:         var(--bun-text-muted);
    border-radius: 4px;
    text-align:    center;
    font-size:     13px !important;
}
.bun-no-items a { color: var(--bun-accent) !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bun-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
    .bun-grid      { grid-template-columns: repeat(2, 1fr); }
    .bun-feat-card { flex-basis: 230px; }
}
@media (max-width: 520px) {
    .bun-wrap      { padding: 14px 10px 20px; }
    .bun-grid      { grid-template-columns: 1fr; gap: 10px; }
    .bun-grid-img  { height: 180px; }
    .bun-feat-card { flex-basis: 200px; }
    .bun-card-img  { height: 130px; }
    .bun-filter    { font-size: 10px !important; padding: 3px 9px !important; }
}