/* Two rows per page, shared native horizontal scrolling. */
.bth-home-carousel .bth-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; margin: -4px; scroll-padding: 4px; }
.bth-carousel-track::-webkit-scrollbar { display: none; }
.bth-carousel-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); align-content: start; align-items: start; gap: 20px 14px; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.bth-home-carousel .bth-story-cover { aspect-ratio: 1.45; }
.bth-home-carousel .bth-story-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 18px; line-height: 1.25; min-height: 2.5em; }
.bth-home-carousel .bth-story-meta { align-items: flex-start; flex-direction: column; gap: 2px; }
.bth-home-carousel .bth-story-meta > .bth-story-children { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bth-home-carousel .bth-carousel-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bth-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; }
.bth-carousel-dots { display: flex; align-items: center; }
.bth-carousel-controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bth-plum); cursor: pointer; touch-action: manipulation; }
.bth-carousel-arrow svg { width: 19px; height: 19px; }
.bth-carousel-previous svg { transform: rotate(180deg); }
.bth-carousel-controls button:disabled { opacity: .3; cursor: default; }
.bth-carousel-dot span { width: 7px; height: 7px; border-radius: 999px; background: var(--bth-muted); opacity: .4; }
.bth-carousel-dot[aria-current="true"] span { width: 22px; background: var(--bth-plum); opacity: 1; }
@media (hover: hover) {
    .bth-carousel-controls button:hover:not(:disabled) { background: var(--bth-plum-soft); }
}