/* Scoped to this component; other Top 10 grids and carousels are unaffected. */
.acbnr-top10-carousel {
    --top10-gutter: max(24px, calc((100% - 1200px) / 2));
    box-sizing: border-box;
    /* Auto width includes Gutenberg’s negative full-width margins. */
    width: auto;
    max-width: none !important;
    padding-block: 0 40px;
    color: #000;
}
.acbnr-top10-carousel *, .acbnr-top10-carousel *::before, .acbnr-top10-carousel *::after { box-sizing: border-box; }
.acbnr-top10-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    padding-inline: var(--top10-gutter);
    padding-bottom: 24px;
}
.acbnr-top10-carousel__header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font: 400 36px/1.35 'AC Nord Display', sans-serif;
    letter-spacing: normal;
}
.acbnr-top10-carousel__header h2 strong { font-weight: 700; }
.acbnr-top10-carousel__header h2 img { display: block; flex: 0 0 24px; width: 24px; height: 24px; }
.acbnr-top10-carousel__controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ece8df;
    color: #681b1b;
}
.acbnr-top10-carousel__controls:not(:has(button:not([hidden]), a)) { display: none; }
.acbnr-top10-carousel__controls:not(:has(button:not([hidden]))) .acbnr-top10-carousel__divider { display: none; }
.acbnr-top10-carousel__controls button {
    appearance: none;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.acbnr-top10-carousel__controls button[hidden] { display: none; }
.acbnr-top10-carousel__controls button:disabled { opacity: .35; cursor: default; }
.acbnr-top10-carousel__controls button img { display: block; width: 32px; height: 32px; }
.acbnr-top10-carousel__controls [data-direction="-1"] img { transform: rotate(180deg); }
.acbnr-top10-carousel__divider { width: 1px; height: 14px; margin-inline: 4px; }
.acbnr-top10-carousel__controls a { padding: 4px 12px; font: 700 16px/20px 'AC Nord Text', sans-serif; color: inherit; text-decoration: none; }
.acbnr-top10-carousel__track {
    display: flex;
    gap: 24px;
    width: 100%;
    margin: 0;
    /* Reserve room for the 12px hover lift and shadow without moving the resting row. */
    margin-top: -24px;
    padding: 24px var(--top10-gutter) 14px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--top10-gutter);
    scrollbar-width: none;
}
.acbnr-top10-carousel__track::-webkit-scrollbar {
    display: none;
}
.acbnr-top10-carousel__card {
    --card-bg: #b8d9ec;
    --rank-color: #000;
    flex: 0 0 360px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #fefefe;
    box-shadow: 0 5px 10px rgb(0 0 0 / 15%);
    scroll-snap-align: start;
    transition: transform .3s ease-out;
    font-family: 'AC Nord Text', sans-serif;
}
.acbnr-top10-carousel__palette-2 { --card-bg: #ece8df; --rank-color: #9e6934; }
.acbnr-top10-carousel__palette-3 { --card-bg: #681b1b; --rank-color: #fff; }
.acbnr-top10-carousel__palette-4 { --card-bg: #ff0025; --rank-color: #fff; }
.acbnr-top10-carousel__palette-5 { --card-bg: #9e6934; --rank-color: #fff; }
.acbnr-top10-carousel__link { display: block; height: 100%; color: inherit !important; text-decoration: none !important; }
.acbnr-top10-carousel__art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--card-bg); }
.acbnr-top10-carousel__rank {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 20px;
    color: var(--rank-color);
    font: 700 52px/1 'Fraunces 9pt', Georgia, serif;
}
.acbnr-top10-carousel__photo {
    position: absolute;
    inset: 12% 23%;
    overflow: hidden;
    border-radius: 80px;
}
.acbnr-top10-carousel__photo img, .acbnr-top10-carousel__hero img, .acbnr-top10-carousel__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acbnr-top10-carousel__placeholder { background: linear-gradient(145deg, #d8d3cb, #8c9996 50%, #c1beb3); }
.acbnr-top10-carousel__hero {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-out;
}
.acbnr-top10-carousel__placeholder--hero { background: linear-gradient(35deg, #817363, #e6ded0 55%, #a7b5ba); }
@media (hover: hover) and (pointer: fine) {
    .acbnr-top10-carousel__card:has(.acbnr-top10-carousel__link:hover) { transform: translateY(-12px); }
    .acbnr-top10-carousel__link:hover .acbnr-top10-carousel__hero { opacity: 1; }
}
.acbnr-top10-carousel__card:has(.acbnr-top10-carousel__link:focus-visible) { transform: translateY(-12px); }
.acbnr-top10-carousel__link:focus-visible .acbnr-top10-carousel__hero { opacity: 1; }
.acbnr-top10-carousel__text { padding: 24px; }
.acbnr-top10-carousel__text h3 { margin: 0 0 8px; font: 700 20px/28px 'AC Nord Text', sans-serif; overflow-wrap: anywhere; }
.acbnr-top10-carousel__details { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/16px 'AC Nord Text', sans-serif; }
.acbnr-top10-carousel__details span { min-width: 0; overflow-wrap: anywhere; }
.acbnr-top10-carousel__details span:last-child { text-align: right; }
.acbnr-top10-carousel :is(a, button, [tabindex]):focus-visible { outline: 3px solid #681b1b; outline-offset: 3px; }
@media (max-width: 1024px) {
    .acbnr-top10-carousel { --top10-gutter: 32px; }
    .acbnr-top10-carousel__header { padding-bottom: 30px; }
    .acbnr-top10-carousel__header h2 { font-size: 24px; line-height: 32px; }
    .acbnr-top10-carousel__header { flex-wrap: wrap; gap: 12px; }
    .acbnr-top10-carousel__controls button, .acbnr-top10-carousel__divider { display: none; }
    .acbnr-top10-carousel__card { flex-basis: 320px; }
    .acbnr-top10-carousel__rank { font-size: 46px; }
}
@media (max-width: 600px) {
    .acbnr-top10-carousel { --top10-gutter: 16px; }
    .acbnr-top10-carousel__header { padding-bottom: 32px; }
    .acbnr-top10-carousel__card { flex-basis: min(320px, calc(100vw - 48px)); }
}
@media (prefers-reduced-motion: reduce) {
    .acbnr-top10-carousel__card, .acbnr-top10-carousel__hero { transition: none; }
    .acbnr-top10-carousel__card:has(.acbnr-top10-carousel__link:is(:hover, :focus-visible)) { transform: none; }
}