.vh-bgi-wrap {
    --bg:        #192230;
    --card:      #1e2a38;
    --card-2:    #222e3c;
    --hover:     #202d3c;
    --line:      rgba(99,99,99,0.25);
    --line-soft: rgba(99,99,99,0.12);
    --ink:       #e0e0e0;
    --ink-dim:   rgba(224,224,224,0.8);
    --ink-faint: rgba(224,224,224,0.65);
    --accent:    #ff9900;
    color: var(--ink);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
    width: 70%;
    margin-inline: auto;
}
@media (max-width: 1600px) { .vh-bgi-wrap { width: 80%; } }
@media (max-width: 1300px) { .vh-bgi-wrap { width: 88%; } }
@media (max-width: 1100px) { .vh-bgi-wrap { width: 92%; } }
@media (max-width: 700px)  { .vh-bgi-wrap { width: 100%; } }

/* ── Page title ────────────────────────────────────────────────────── */
.vh-bgi-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.25rem 0.25rem 0.4rem;
}
.vh-bgi-head .vh-bgi-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,153,0,0.1);
    border: 1px solid rgba(255,153,0,0.25);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; flex-shrink: 0;
}
.vh-bgi-head h1 {
    font-size: 1.05rem; font-weight: 700; color: var(--ink);
    margin: 0; line-height: 1.1;
}
.vh-bgi-head .sub {
    font-size: 0.62rem; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700;
    margin-left: auto;
}
.vh-bgi-head .sub strong { color: var(--ink-dim); }

/* ── Category filter strip ─────────────────────────────────────────── */
.vh-bgi-cats {
    background: var(--card);
    border: 1px solid rgba(99,99,99,0.12);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.vh-bgi-cats-label {
    font-size: 0.6rem; font-weight: 700;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.16em;
    margin-right: 0.25rem;
}
.vh-bgi-cat {
    --tcol: rgba(99,99,99,0.3);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--tcol);
    color: var(--ink-dim);
    text-decoration: none; cursor: pointer;
    transition: all 0.15s;
}
.vh-bgi-cat:hover { color: var(--ink); border-color: rgba(99,99,99,0.5); background: rgba(255,255,255,0.05); }
.vh-bgi-cat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tcol); }
.vh-bgi-cat .count { opacity: 0.5; font-weight: 500; font-variant-numeric: tabular-nums; }
.vh-bgi-cat.active {
    background: color-mix(in srgb, var(--tcol) 14%, transparent);
    color: var(--tcol);
    border-color: color-mix(in srgb, var(--tcol) 50%, transparent);
}
.vh-bgi-cat.active .count { opacity: 0.7; }

/* ── Card primitive (shared) ───────────────────────────────────────── */
.vh-bgi-card {
    background: var(--card); border-radius: 8px;
    border: 1px solid rgba(99,99,99,0.12);
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
    overflow: hidden;
    display: flex; flex-direction: column;
    cursor: pointer; text-decoration: none; color: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
    position: relative;
}
.vh-bgi-card:hover {
    border-color: rgba(255,153,0,0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}

.vh-bgi-banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    overflow: hidden;
    position: relative;
}
.vh-bgi-banner img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s;
}
.vh-bgi-card:hover .vh-bgi-banner img { transform: scale(1.04); }
.vh-bgi-banner-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,153,0,0.25);
    font-size: 2rem;
    background: linear-gradient(135deg, rgba(255,153,0,0.04), rgba(255,255,255,0.02));
}

.vh-bgi-card-cat {
    --tcol: #ff9900;
    position: absolute;
    top: 10px; left: 10px;
    z-index: 1;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: var(--tcol);
    border: 1px solid color-mix(in srgb, var(--tcol) 45%, transparent);
    backdrop-filter: blur(8px);
}
.vh-bgi-card-cat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tcol); }

.vh-bgi-body {
    padding: 0.85rem 0.95rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    flex: 1;
}
.vh-bgi-title {
    font-size: 0.95rem; font-weight: 700; color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    transition: color 0.18s;
}
.vh-bgi-card:hover .vh-bgi-title { color: var(--accent); }
.vh-bgi-short {
    font-size: 0.78rem; color: var(--ink-dim); line-height: 1.5;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.vh-bgi-short * { color: inherit !important; }

.vh-bgi-foot {
    margin-top: auto;
    padding: 0.6rem 0.95rem 0.7rem;
    border-top: 1px dashed var(--line-soft);
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem; color: var(--ink-faint);
}
.vh-bgi-author-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    overflow: hidden; min-width: 0;
}
.vh-bgi-author-chip a {
    color: var(--ink-dim); text-decoration: none; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.15s;
}
.vh-bgi-author-chip a:hover { color: var(--accent); }
.vh-bgi-foot-bits {
    display: inline-flex; align-items: center; gap: 0.5rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.vh-bgi-foot-bits i { opacity: 0.6; margin-right: 3px; }
.vh-bgi-foot-bits .pipe { width: 1px; height: 10px; background: rgba(99,99,99,0.2); }

/* ── Row 1: 1 large + 2 stacked ──────────────────────────────────────
   Anchored on a fixed row height so the big card and the 2-card stack
   line up edge-to-edge. The big card's banner becomes the upper ~58% of
   its column; the right column splits cleanly into two equal-height
   small cards. Without a fixed height the columns drift out of sync. */
.vh-bgi-row1 {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: 420px;
    gap: 1rem;
}
@media (max-width: 1100px) {
    .vh-bgi-row1 { grid-template-rows: 360px; }
}
@media (max-width: 900px) {
    .vh-bgi-row1 { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}

.vh-bgi-row1-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    min-height: 0;
}
@media (max-width: 900px) {
    .vh-bgi-row1-stack { grid-template-rows: auto auto; }
}

/* ── Big card (left of row 1) ───────────────────────────────────────
   The card itself fills the row-1 height (`height: 100%`); the banner
   takes a flexible share via `flex: 1` so it adapts to the row height
   instead of fighting it with `aspect-ratio`. */
.vh-bgi-big {
    height: 100%;
    min-height: 0;
}
.vh-bgi-big .vh-bgi-banner {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
}
.vh-bgi-big .vh-bgi-body {
    padding: 0.95rem 1.1rem 0.6rem;
    flex: 0 0 auto;
}
.vh-bgi-big .vh-bgi-title  { font-size: 1.2rem; -webkit-line-clamp: 2; }
.vh-bgi-big .vh-bgi-short  { -webkit-line-clamp: 2; font-size: 0.82rem; }

/* ── Small horizontal card (right column of row 1) ──────────────────
   Uses display: grid for the row, and the banner cell gets explicit
   `min-height: 0` so the inner image's `height: 100%` actually has a
   sized parent to anchor against. */
.vh-bgi-small {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-rows: 100%;
}
.vh-bgi-small .vh-bgi-banner {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
}
.vh-bgi-small .vh-bgi-card-cat {
    top: 8px; left: 8px;
    font-size: 0.55rem; padding: 2px 7px;
}
.vh-bgi-small-content {
    display: flex; flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.vh-bgi-small .vh-bgi-body {
    padding: 0.65rem 0.85rem 0.45rem;
    gap: 0.3rem;
    min-height: 0;
    overflow: hidden;
}
.vh-bgi-small .vh-bgi-title {
    font-size: 0.85rem;
    -webkit-line-clamp: 2;
}
.vh-bgi-small .vh-bgi-short {
    font-size: 0.72rem;
    -webkit-line-clamp: 2;
    line-height: 1.45;
}
.vh-bgi-small .vh-bgi-foot {
    padding: 0.45rem 0.85rem 0.55rem;
    font-size: 0.65rem;
}
.vh-bgi-small .vh-bgi-foot-bits {
    /* Hide the reading-time pipe in the cramped small card */
    gap: 0;
}
.vh-bgi-small .vh-bgi-foot-bits .pipe,
.vh-bgi-small .vh-bgi-foot-bits span:first-child { display: none; }

@media (max-width: 900px) {
    /* On narrow screens, big + smalls all stack with normal banner */
    .vh-bgi-big .vh-bgi-banner { flex: none; aspect-ratio: 16 / 9; }
    .vh-bgi-small {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .vh-bgi-small .vh-bgi-banner { aspect-ratio: 16 / 9; height: auto; }
}

/* ── 4-col grid (row 2+ on page 1, all rows on page 2+) ────────────── */
.vh-bgi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1300px) { .vh-bgi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .vh-bgi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vh-bgi-grid { grid-template-columns: 1fr; } }

/* ── Empty state ───────────────────────────────────────────────────── */
.vh-bgi-empty {
    padding: 3.5rem 1rem; text-align: center;
    color: var(--ink-faint); font-size: 0.85rem;
    background: var(--card);
    border: 1px dashed rgba(99,99,99,0.2);
    border-radius: 8px;
}
.vh-bgi-empty i {
    display: block; font-size: 2.2rem;
    color: rgba(255,153,0,0.2);
    margin-bottom: 0.7rem;
}

/* ── Pagination ────────────────────────────────────────────────────── */
.vh-bgi-pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; flex-wrap: wrap;
    background: var(--card);
    border: 1px solid rgba(99,99,99,0.12);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}
.vh-bgi-pagination .info {
    font-size: 0.7rem; color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.vh-bgi-pagination .info strong { color: var(--ink-dim); font-weight: 700; }
.vh-bgi-pages {
    display: inline-flex; align-items: stretch;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(99,99,99,0.2);
    border-radius: 5px;
    overflow: hidden;
}
.vh-bgi-pages a, .vh-bgi-pages span {
    background: none; border: 0;
    color: var(--ink-dim);
    font-size: 0.72rem; font-weight: 600;
    padding: 6px 11px;
    min-width: 32px; text-align: center;
    cursor: pointer; text-decoration: none;
    transition: color 0.15s, background 0.15s;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center;
}
.vh-bgi-pages a + a, .vh-bgi-pages a + span, .vh-bgi-pages span + a, .vh-bgi-pages span + span {
    border-left: 1px solid rgba(99,99,99,0.2);
}
.vh-bgi-pages a:hover { color: var(--accent); background: rgba(255,153,0,0.06); }
.vh-bgi-pages .active { color: var(--accent); background: rgba(255,153,0,0.1); }
.vh-bgi-pages .disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.vh-bgi-pages i { font-size: 0.6rem; }

/* Focus polish (keyboard navigation) */
.vh-bgi-card:focus-visible,
.vh-bgi-hero:focus-visible,
.vh-bgi-cat:focus-visible,
.vh-bgi-pages a:focus-visible,
.vh-bgi-author-chip a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 8px;
}
.vh-bgi-pages a:focus-visible { border-radius: 4px; outline-offset: -2px; }