/* =============================================================
   carousel.css  ·  faces/home/mobile/  ·  standalone
   Horizontal 6-page scroll-snap carousel + per-page base layout.
   Depends on: shared/tokens.css.
   ============================================================= */

.home-content.carousel {
    /* R14: grid, never flex */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-rows: 100%;

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
}
.home-content.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-page {
    width: 100%;
    height: 100%;
    background: var(--main-bg);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* generalised list-page layout — used by any carousel page that has
   a fixed header chip on top + a scrolling chip-list below.
   (tab1 = accounts, tab2 = groups/channels per account.) */
.carousel-page.is-list {
    place-items: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.carousel-page-header {
    padding: 12px 2.5% 8px 2.5%;
}