/**--- Core ---*/
.subcategory-list__item {
    background: var(--color-surface);
}

/* Overrides main.min.css - h1-h6 color, font-family and font-weight */
.subcategory-list__name {
    font-weight: 700;
    font-family: Archivo, system-ui, sans-serif;
    line-height: 1.2;
    color: var(--color-on-surface);
}

.subcategory-list__link {
    color: inherit;
    /* Overrides main.min.css - a font-weight */
    font-weight: inherit;
    text-decoration: none;
}

/* Overrides main.min.css - a:hover */
.subcategory-list__link:hover,
.subcategory-list__link:focus {
    color: inherit;
    text-decoration: none;
}

/* Overrides main.min.css - :focus{outline:0}. Drawn on the stretched overlay so it rings the whole card; inset so it
stays inside the card's border. */
.subcategory-list__link:focus-visible::after {
    outline: 0.125rem solid var(--color-focus);
    outline-offset: -0.125rem;
}

.subcategory-list__description {
    font-weight: 400;
    font-family: Archivo, system-ui, sans-serif;
    font-size: 0.9rem;
    color: var(--color-on-surface-muted);
}

.subcategory-list__browse {
    background: var(--color-inverse-surface);
    color: var(--color-inverse-on-surface);
    font-weight: 600;
    font-family: Archivo, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.subcategory-list__mark {
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-on-surface-muted);
}

.subcategory-list__up {
    background: var(--color-surface-container-low);
    border-bottom: 0.09375rem solid var(--color-outline);
    color: var(--color-on-surface);
    font-family: Archivo, system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1;
    /* Overrides main.min.css - a font-weight */
    font-weight: 600;
    text-decoration: none;
}

/* Overrides main.min.css - a:hover */
.subcategory-list__up:hover,
.subcategory-list__up:focus {
    background: var(--color-surface-container-hover);
    color: var(--color-on-surface);
    text-decoration: none;
}

/* Overrides main.min.css - :focus{outline:0}. Inset so it stays inside the list's borders. */
.subcategory-list__up:focus-visible {
    outline: 0.125rem solid var(--color-focus);
    outline-offset: -0.125rem;
}

.subcategory-list__up-mark {
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.125rem;
    line-height: 1;
}

/**--- Mobile ---*/
.subcategory-list {
    background: var(--color-surface);
    border-top: 0.09375rem solid var(--color-outline);
    border-bottom: 0.09375rem solid var(--color-outline);
}

.subcategory-list__up {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.25rem;
    padding: 0 0.875rem;
}

.subcategory-list__grid {
    margin: 0;
    padding: 0;
}

/* Positioning context for the stretched link. */
.subcategory-list__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 4.25rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 0.0625rem solid var(--color-outline-variant);
}

/* The list's own bottom border closes the last row. */
.subcategory-list__item:last-child {
    border-bottom: 0;
}

.subcategory-list__item:hover {
    background: var(--color-surface-container-hover);
}

.subcategory-list__image {
    flex: none;
    object-fit: contain;
    width: 3rem;
    height: 3rem;
    border: 0.0625rem solid var(--color-outline-variant);
}

.subcategory-list__body {
    flex: 1;
    min-width: 0;
}

.subcategory-list__name {
    margin: 0;
    font-size: 1.15rem;
}

/* Makes the entire card clickable. Positioned against .subcategory-list__item, so __link must stay unpositioned. */
.subcategory-list__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* line-clamp rather than nowrap + ellipsis: the description is HTML and may hold block children, which nowrap
cannot truncate as one line. */
.subcategory-list__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    margin-top: 0.3125rem;
    line-height: 1.3;
}

/* Paragraphs inside the description HTML would otherwise push the clamped text out of view with their default margin. */
.subcategory-list__description p {
    margin: 0;
}

/* Keeps links inside a description clickable above the stretched link. */
.subcategory-list__description a {
    position: relative;
    z-index: 2;
}

.subcategory-list__browse {
    display: none;
}

.subcategory-list__mark {
    flex: none;
}

/**--- Desktop ---*/
@media (min-width: 768px) {
    .subcategory-list {
        background: none;
        border-top: 0;
        border-bottom: 0;
    }

    .subcategory-list__up {
        display: none;
    }

    /* One column here; two from 1024px - see TABLET DEVIATION below. */
    .subcategory-list__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem;
    }

    .subcategory-list__item {
        align-items: flex-start;
        gap: 1rem;
        min-height: 0;
        padding: 1rem;
        border: 0.09375rem solid var(--color-outline);
    }

    .subcategory-list__item:last-child {
        border-bottom: 0.09375rem solid var(--color-outline);
    }

    .subcategory-list__item:hover {
        background: var(--color-surface);
    }

    .subcategory-list__item:hover .subcategory-list__name {
        color: var(--color-primary);
    }

    .subcategory-list__item:hover .subcategory-list__browse {
        background: var(--color-primary);
    }

    .subcategory-list__image {
        width: 7.5rem;
        height: 7.5rem;
        border: 0;
    }

    .subcategory-list__body {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        min-height: 7.5rem;
    }

    .subcategory-list__name {
        font-size: 1.333rem;
        letter-spacing: -0.01em;
    }

    .subcategory-list__description {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-top: 0;
        line-height: 1.45;
    }

    .subcategory-list__browse {
        display: block;
        align-self: flex-start;
        margin-top: auto;
        padding: 0.625rem 1rem;
    }

    .subcategory-list__mark {
        display: none;
    }

    /*
    ================================================================================================================
    !!! TABLET DEVIATION - NOT IN THE DESIGN !!!

    The site has no defined tablet size yet. The design is drawn at 1240px and wider, where cards sit in two columns.
    Between 768px and 1023px the 250px sidebar (categoryIndex.css) leaves a two-column card only ~38px of text width
    at 768px, so cards stay in one column until 1024px.

    1024px is a one-off breakpoint for this component only. It is not part of the Mobile/Desktop breakpoint table in
    .claude/rules/css.md. Revisit when the site defines a tablet size.
    ================================================================================================================
    */
    @media (min-width: 1024px) {
        .subcategory-list__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}