/* Home - category pill strip */

/* Closed: wide containers clamp the wrapped pills to two rows; narrow containers become a
   single horizontally scrolling row. Open (the native <details> toggle after the list): every
   pill wraps. No JavaScript: with 47 pills, two rows overflow at any realistic width, so the
   toggle is always shown. */
.home-categories {
    --pill-block-size: clamp(2.5rem, 2.3rem + 0.6vw, 3rem);
    --pill-gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    --pill-border: #e6e2d8;
    --pill-border-hover: #cfc9bc;
    --pill-surface-hover: #f5f3ee;
    --pill-focus-room: 4px;
    /* Breaks out of main's 65ch column, centred; edge to edge on phones so the scroller reaches the screen edge. */
    --strip-inline-size: min(100vw, 76rem);

    container-type: inline-size;
    inline-size: var(--strip-inline-size);
    margin-block: var(--space-s) var(--space-m);
    margin-inline: calc((100% - var(--strip-inline-size)) / 2);
    font-family: var(--font-family-san-serif);
}

.home-category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pill-gap);
    margin: 0;
    padding: var(--pill-focus-room) var(--grid-gutter);
    list-style: none;
    max-block-size: calc(2 * var(--pill-block-size) + var(--pill-gap) + 2 * var(--pill-focus-room));
    overflow: clip;

    & a {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        block-size: var(--pill-block-size);
        padding-inline: 1.1em;
        border: 1px solid var(--pill-border);
        border-radius: 999px;
        color: var(--color-foreground);
        font-size: var(--step-0);
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;

        &:hover {
            border-color: var(--pill-border-hover);
            background: var(--pill-surface-hover);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        &[aria-current="page"] {
            border-color: var(--uchu-yin-8);
            background: var(--uchu-yin-8);
            color: oklch(90% 0.2 125);
            font-weight: 700;
        }
    }
}

/* Expanded, or a keyboard user has tabbed into the list: pills hidden by the clamp must never take focus unseen. */
.home-categories:has(> .home-categories-toggle[open]) .home-category-list,
.home-category-list:has(:focus-visible) {
    max-block-size: none;
}

.home-categories-toggle {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-2xs);

    & summary {
        display: inline-flex;
        align-items: center;
        gap: 0.6em;
        padding: 0.5rem 0.75rem;
        border-radius: 999px;
        color: var(--color-muted);
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }

        &:hover {
            color: var(--color-foreground);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
    }

    & svg {
        inline-size: 1em;
        block-size: 1em;
        transition: rotate 0.2s ease;
    }

    &[open] svg {
        rotate: 180deg;
    }
}

.home-categories-less,
.home-categories-toggle[open] .home-categories-more {
    display: none;
}

.home-categories-toggle[open] .home-categories-less {
    display: inline;
}

/* Phones: two clamped rows would show only four or five pills, and expanding all 47 would push the
   covers a screen and a half down, so the list is always one swipeable row and the toggle is removed.
   A container query rather than the usual fluid sizing (a deliberate exception to the no-breakpoints
   rule): the two layouts are different interactions, not a smooth scale. Measured: below ~32rem two
   rows hold fewer than seven pills. */
@container (inline-size < 32rem) {
    .home-categories-toggle {
        display: none;
    }

    .home-category-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-block-size: none;
        padding-inline-end: 2.5rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--grid-gutter);
        scrollbar-width: none;
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);

        & li {
            flex: none;
            scroll-snap-align: start;
        }
    }

    .home-category-list a {
        font-size: var(--step--1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-categories-toggle svg {
        transition: none;
    }
}