@import url("topbookie-article-sidebar.css");
.tb-public .tb-articles-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; color:var(--tb-link-muted); font-size:var(--tb-size-meta); }
/* Article Category presentation. Shared typography tokens remain authoritative. */
.tb-articles {
    color: var(--articles-ink);
    padding: 28px 0 48px;
}
.tb-articles *, .tb-articles *::before, .tb-articles *::after { box-sizing: border-box; }
.tb-articles a { text-decoration: none; }
.tb-articles a:focus-visible, .tb-articles button:focus-visible, .tb-articles input:focus-visible, .tb-articles select:focus-visible { outline: 3px solid var(--articles-red); outline-offset: 4px; }
.tb-articles-hero { position: relative; overflow: hidden; padding: 38px 40px; border-radius: var(--articles-radius); color: #fff; background: radial-gradient(circle at 92% 10%, rgba(227,27,54,.3), transparent 42%), linear-gradient(120deg, #061426, #102440); }
.tb-articles-hero::after { content: ''; position: absolute; width: 220px; height: 220px; right: 6%; top: -90px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.tb-articles-eyebrow, .tb-articles-hero-note { display: flex; align-items: center; gap: 10px; }
.tb-articles-eyebrow { color: #f8b8c2; letter-spacing: .08em; margin-bottom: 14px; }
.tb-articles-eyebrow > span { width: 22px; height: 3px; background: #ff4058; }
.tb-articles .tb-article-category-title { color: #fff; margin: 0 0 14px; }
.tb-articles-hero p { color: #d3dce9; max-width: 660px; margin: 0; }
.tb-articles-hero-note { color: #c0cddd; margin-top: 24px; }
.tb-articles-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; margin-top: 30px; align-items: start; }
.tb-articles-main, .tb-articles-sidebar { min-width: 0; }
.tb-articles-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 18px; }
.tb-articles .tb-articles-section-head h2, .tb-articles .tb-articles-empty h2 { margin: 0; }
.tb-articles-section-head > span { color: var(--articles-muted); white-space: nowrap; }
.tb-articles-list { display: grid; gap: 20px; }
.tb-article-card { display: grid; grid-template-columns: 32% minmax(0,1fr); border: 1px solid var(--articles-border); border-radius: var(--articles-radius); overflow: hidden; background: #fff; box-shadow: 0 5px 20px rgba(12,26,48,.035); transition: box-shadow .2s, border-color .2s; }
.tb-article-card:hover { border-color: #c8d1df; box-shadow: 0 10px 28px rgba(12,26,48,.09); }
.tb-article-image { position: relative; display: block; background: var(--articles-navy); min-width: 0; }
.tb-article-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.tb-article-card-content { padding: 24px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tb-article-badge { display: inline-block; max-width: 100%; background: #fff0f3; color: #b61229; padding: 5px 10px; border-radius: 6px; margin-bottom: 13px; }
.tb-articles .tb-article-card-title { margin: 0 0 12px; overflow-wrap: anywhere; }
.tb-articles .tb-article-description { color: var(--articles-muted); margin: 0 0 20px; overflow-wrap: anywhere; }
.tb-article-card-footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; margin-top: auto; padding-top: 15px; border-top: 1px solid #edf0f5; }
.tb-article-card-footer time { color: var(--articles-muted); }
.tb-article-card-footer time i { margin-right: 4px; }
.tb-article-read { color: #b61229; }
.tb-article-read:hover { color: var(--articles-navy); }
.tb-articles-sidebar { display: grid; gap: 20px; }
.tb-articles-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-articles .left-cat-news-bars { display: inline-flex; padding: 9px 12px; border: 1px solid var(--articles-border); border-radius: 999px; color: var(--articles-muted); background: #f7f9fc; }
.tb-articles .left-cat-news-bars:hover { border-color: #e31b36; color: #b61229; }
.tb-articles .left-cat-news-bars[aria-current=page] { background: var(--articles-navy); border-color: var(--articles-navy); color: #fff; }
.tb-articles-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 28px; }
.tb-articles-pagination > a, .tb-articles-pagination > .is-disabled { padding: 11px 16px; border: 1px solid var(--articles-border); border-radius: 9px; background: #fff; color: var(--articles-navy); }
.tb-articles-pagination > a:hover { border-color: var(--articles-red); color: #b61229; }
.tb-articles-pagination > .is-disabled { color: #7c8798; background: #f3f5f8; }
.tb-articles-page-count { color: var(--articles-muted); }
.tb-articles-empty { background: #fff; padding: 32px; border-radius: var(--articles-radius); border: 1px solid var(--articles-border); }
/* Match the modern Article Detail shell; override only the legacy container cap. */
@media (min-width: 1200px) {
    .content > .container:has(> main > .tb-articles) { width: calc(100% - 64px); max-width: 1480px !important; }
    .tb-articles-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; }
}
/* The shared header uses !important desktop sizing; contain its navigation
   on article pages only, without changing the shared component or other pages. */
@media (min-width: 768px) and (max-width: 1199px) {
    body:has(.tb-articles) #MainNav .tb-nav-inner { flex-wrap: wrap; }
    body:has(.tb-articles) #MainNav .tb-nav-collapse { display: contents !important; }
    body:has(.tb-articles) #MainNav .tb-primary-nav { order: 3; flex-basis: 100% !important; max-width: 100%; flex-wrap: wrap; justify-content: center; }
    body:has(.tb-articles) #MainNav .tb-nav-tools { order: 2; }
}
@media (max-width: 1199px) {
    .tb-articles-layout { grid-template-columns: minmax(0,1fr); }
    .tb-articles-list, .tb-articles-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
    .tb-articles-list { align-items: stretch; }
    .tb-article-card { display: flex; flex-direction: column; }
    .tb-article-image img { position: static; height: auto; aspect-ratio: 16 / 9; min-height: 0; }
    .tb-article-card-content { flex: 1; }
    .tb-articles-sidebar > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .tb-articles { padding-top: 18px; }
    .tb-articles-hero { padding: 28px 22px; }
    .tb-articles-layout { margin-top: 24px; }
    .tb-articles-list, .tb-articles-sidebar { grid-template-columns: minmax(0,1fr); }
    .tb-article-card-content { padding: 20px; }
    .tb-articles-pagination > a, .tb-articles-pagination > .is-disabled { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-articles * { transition: none; }
}