/* Hub-only desktop list refinements. Shared navigation is owned by platform_navigation.css. */
@media (min-width: 761px) {
    body.kb-surface-hub #keybox-list [x-ref="contentWrapper"] > .grid,
    body.kb-surface-hub #keybox-list .kb-hub-keybox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }
}

body.kb-surface-hub #keybox-list .kb-hub-filter-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    width: 100% !important;
    margin-inline: auto !important;
}
body.kb-surface-hub #keybox-list .kb-hub-category-controls,
body.kb-surface-hub #keybox-list .kb-hub-sort-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: auto !important;
    margin-inline: 0 !important;
}

/* Keep card feedback inside the animated list viewport. The old upward hover
   translated first-row cards beyond the viewport's overflow clip. */
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .kb-keybox-card-header {
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .kb-keybox-card-title {
    line-height: 1.25 !important;
}
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .kb-keybox-download-count {
    min-height: 30px !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    border-radius: 999px !important;
}
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .kb-keybox-download-count i {
    margin-right: 0 !important;
}
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .kb-keybox-meta {
    gap: 8px !important;
}
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .kb-keybox-card-footer {
    margin-top: 16px !important;
    padding-top: 14px !important;
}
body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card .btn-download-card {
    min-height: 50px !important;
    border-radius: 16px !important;
}
@media (min-width: 761px) {
    body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card {
        padding: 18px 18px 16px !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    html body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card.is-visible:hover {
        transform: none !important;
        background: linear-gradient(152deg, rgba(255,255,255,.085), transparent 46%), #27272e !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.18),
            inset 0 1px 0 rgba(255,255,255,.11),
            0 18px 42px rgba(0,0,0,.30) !important;
    }
    html[data-kb-theme="light"] body.kb-surface-hub #keybox-list .keybox-card.kb-keybox-card.is-visible:hover {
        background: linear-gradient(152deg, #fff, rgba(255,255,255,.74) 48%), #fff !important;
        box-shadow:
            inset 0 0 0 1px rgba(17,17,22,.13),
            inset 0 1px 0 #fff,
            0 18px 38px rgba(24,24,31,.14) !important;
    }
}

/* Pagination/end-state is a grid item. Span both card columns and own a centered slot. */
body.kb-surface-hub #keybox-list .kb-hub-pagination,
body.kb-surface-hub #keybox-list .kb-keybox-pagination {
    grid-column: 1 / -1 !important;
    place-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    text-align: center !important;
}
body.kb-surface-hub #keybox-list .kb-keybox-pagination-slot {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
}
body.kb-surface-hub #keybox-list .kb-list-end-state,
body.kb-surface-hub #keybox-list .kb-load-more {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin-inline: auto !important;
}
body.kb-surface-hub #keybox-list .kb-list-end-state {
    width: max-content !important;
    max-width: calc(100vw - 40px) !important;
    text-align: center !important;
}

@media (max-width: 760px) {
    body.kb-surface-hub #keybox-list .kb-hub-filter-controls {
        gap: 8px !important;
    }
}