/* ==========================================================
   _09-CATEGORY-ROW.CSS — gemensam kategorirad
   Markup: template-parts/category-row.php
     --light  på bild (Tjänster-heron)
     --dark   på vitt (portfolions filter)
   Inga ramar eller bakgrunder. Namn bryts aldrig inuti.
   ========================================================== */

.category-row {
    --category-row-color: var(--color-text);
}
.category-row--light { --category-row-color: var(--color-dark-text); }
.category-row--dark  { --category-row-color: var(--color-text); }

.category-row__list {
    display: flex;
    flex-wrap: wrap;              /* bryter bara när raden inte får plats (under ~1300–1440px) */
    justify-content: space-between;
    /* Minsta avstånd: space-between fördelar resten. 24px enligt designen
       när raden får plats; minimum 16px så att portfolions 7 val (inkl.
       "Alla") ryms på en rad i 1440 (faktiskt avstånd där ≈ 22,7px). */
    gap: 12px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-row__item {
    white-space: nowrap;
    margin: 0;
}

.category-row__link {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.3;
    color: var(--category-row-color);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    transition: opacity 200ms ease;
}
.category-row__num {
    font-family: var(--font-mono);
    font-size: 0.8em;
    opacity: 0.75;
    margin-right: 8px;
}
.category-row__name {
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.category-row__link:is(:hover, :focus-visible) .category-row__name {
    text-decoration-line: underline;
}

/* Aktivt val (portfolions filter): full opacitet, understruket namn,
   nummer i accentfärg. Övriga tonas ned när något är aktivt. */
.category-row__link[aria-current="true"] .category-row__name {
    text-decoration-line: underline;
}
.category-row__link[aria-current="true"] .category-row__num {
    color: var(--color-accent);
    opacity: 1;
}
.category-row:has([aria-current="true"]) .category-row__link:not([aria-current="true"]) {
    opacity: 0.6;
}
.category-row:has([aria-current="true"]) .category-row__link:not([aria-current="true"]):is(:hover, :focus-visible) {
    opacity: 1;
}

@media (max-width: 767px) {
    .category-row__list {
        justify-content: flex-start;
        row-gap: 12px;
        column-gap: 20px;
    }
}