.bp-hub-past { padding-bottom: 120px; }
.bp-hub-past-banner { background: linear-gradient(90deg, #002257 41.83%, #3973CB 78.85%, #72AAFF 100%); padding: 30px 0; }
.bp-hub-past-controls { display: flex; justify-content: flex-end; gap: 16px; margin: 64px 0 32px; }
.bp-hub-pill {
    display: inline-flex; align-items: center; gap: 12px; min-width: 120px; justify-content: center;
    padding: 7px 24px; border: 1.5px solid #fff; border-radius: 999px; background: transparent;
    color: #fff; font: inherit; font-weight: 400; font-size: 1.25rem; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.bp-hub-pill:hover { background: rgba(255,255,255,.08); }
.bp-hub-dropdown { position: relative; }
.bp-hub-dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 14px); z-index: 20; min-width: 190px; margin: 0; padding: 0; list-style: none;
    background: #fff; border: 1px solid #A9C0EE; border-radius: 12px; overflow: visible; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.bp-hub-dropdown-menu::before {
    content: ''; position: absolute; top: -9px; right: 40px; border: 9px solid transparent; border-top: 0; border-bottom-color: #fff;
}
.bp-hub-dropdown-menu button {
    display: block; width: 100%; padding: 14px 20px; border: 0; background: transparent; text-align: left;
    color: #0D1530; cursor: pointer; font: inherit; font-size: 1.25rem; font-weight: 400;
}
.bp-hub-dropdown-menu li:first-child button { border-radius: 12px 12px 0 0; }
.bp-hub-dropdown-menu li:last-child button { border-radius: 0 0 12px 12px; }
.bp-hub-dropdown-menu button[aria-pressed="true"] { background: #D6DEF6; font-weight: 600; }
.bp-hub-dropdown-menu button:hover, .bp-hub-dropdown-menu button:focus-visible { background: #EEF2FC; outline: none; }
.bp-hub-dropdown-menu button[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2px #286DD9; }

.bp-hub-past-list {
    max-height: 780px; overflow-y: auto; padding-right: 30px; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 32px;
    scrollbar-width: auto; scrollbar-color: #2E6BE6 rgba(255,255,255,.85);
}
.bp-hub-past-list::-webkit-scrollbar { width: 10px; }
.bp-hub-past-list::-webkit-scrollbar-track { background: rgba(255,255,255,.85); border-radius: 10px; }
.bp-hub-past-list::-webkit-scrollbar-thumb { background: #2E6BE6; border-radius: 10px; }

.bp-hub-past-card {
    display: grid; grid-template-columns: 560px 1fr; gap: 32px; padding: 22px;
    background: linear-gradient(135deg, #000 0%, #000 55%, rgba(16, 32, 72, .9) 100%);
    border: 1px solid rgba(255,255,255,.18); border-radius: 28px;
}
.bp-hub-past-card[hidden] { display: none; }
.bp-hub-past-cover {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 18px;
    overflow: hidden; background: #111827; cursor: default;
}
button.bp-hub-past-cover { cursor: pointer; }
.bp-hub-past-cover img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-hub-play { position: absolute; left: 50%; top: 50%; width: 104px; height: auto; transform: translate(-50%, -50%); transition: transform 200ms; }
button.bp-hub-past-cover:hover .bp-hub-play { transform: translate(-50%, -50%) scale(1.08); }
.bp-hub-past-body h3 { margin: 6px 0 14px; font-size: 1.75rem; font-weight: 700; }
.bp-hub-past-body p { margin: 0 0 28px; font-size: 1.375rem; font-weight: 300; line-height: 1.35; }

.bp-hub-glass-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; border-radius: 999px;
    color: #fff; font: inherit; font-size: 1.25rem; text-decoration: none; border: 1px solid rgba(255,255,255,.35); cursor: pointer;
    background:
        radial-gradient(110.23% 82.81% at 50% 17.19%, rgba(255,255,255,.098) 0%, rgba(255,255,255,.038) 100%),
        radial-gradient(105.11% 170.6% at 105.11% -15.62%, rgba(7,19,59,.5) 19.66%, rgba(7,19,59,.06) 71.06%),
        radial-gradient(82.79% 104.69% at 20.17% -22.66%, #89A4FF 0%, rgba(0,48,206,.18) 100%),
        radial-gradient(58.24% 134.23% at 33.81% 109.38%, rgba(102,129,226,.81) 0%, rgba(102,129,226,0) 95.37%),
        #0029B3;
    box-shadow: 0 0 24px rgba(66, 110, 255, .45);
    transition: box-shadow 200ms, transform 200ms;
}
.bp-hub-glass-btn:hover { box-shadow: 0 0 36px rgba(66, 110, 255, .7); transform: translateY(-1px); }

/* Tablet: the fixed 560px cover column overflowed below ~1100px; split the card evenly instead. */
@media (min-width: 768px) and (max-width: 1099px) {
    .bp-hub-past-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px; align-items: center; }
    .bp-hub-past-body h3 { font-size: 1.375rem; }
    .bp-hub-past-body p { font-size: 1.0625rem; margin-bottom: 18px; }
    .bp-hub-glass-btn { font-size: 1.0625rem; padding: 9px 22px; }
    .bp-hub-play { width: 72px; }
}
@media (max-width: 767px) {
    .bp-hub-past { padding-bottom: 40px; }
    .bp-hub-past-banner { padding: 6px 0; }
    .bp-hub-past-banner .bp-hub-title { font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.04em; }
    .bp-hub-past-controls { margin: 40px 0 22px; gap: 8px; }
    .bp-hub-pill { box-sizing: border-box; min-width: 80px; padding: 4px 14px; font-size: .8125rem; gap: 8px; }
    .bp-hub-past-list { max-height: 282px; padding-right: 7px; gap: 14px; } /* 2 cards visible, rest scroll (design) */
    .bp-hub-past-list::-webkit-scrollbar { width: 4px; }
    .bp-hub-past-card { grid-template-columns: 116px 1fr; gap: 11px; padding: 11px 6px 11px 14px; align-items: start; border-radius: 18px; }
    .bp-hub-past-cover { border-radius: 10px; }
    .bp-hub-play { width: 36px; }
    .bp-hub-past-body h3 { font-size: .9375rem; margin: 0 0 4px; line-height: 1.3; }
    .bp-hub-past-body p { font-size: .625rem; line-height: 1.45; margin-bottom: 8px; }
    .bp-hub-glass-btn { font-size: .8125rem; padding: 4px 14px; gap: 6px; }
}