/* ---------------------------------------------------------------------------
   Project tags and the tag filter, shared by index.html and projects.html.

   The tag labels written on each card are the source of truth: assets/tags.js
   builds the filter bar above the grid from them. Dark-mode and sky-mode
   versions of these rules live in assets/theme.css.
   --------------------------------------------------------------------------- */

/* Each page's `.projects-grid > div { display: flex }` would otherwise beat
   the browser's own [hidden] style */
.projects-grid>div[hidden] {
    display: none;
}

/* Cards ease in each time the filter changes. No fill-mode on purpose: a
   filling animation keeps a stacking context on the cell for good. */
@keyframes tag-filter-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.projects-grid.is-filtering>div {
    animation: tag-filter-in 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .projects-grid.is-filtering>div {
        animation: none;
    }
}

/* ===== Tags on the cards ================================================= */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    /* Pins the tags to the card's bottom edge, so they line up across a row of
       equal-height cards whatever the subtitle length. */
    margin-top: auto;
    padding: 0.85rem 0.75rem 0;
}

.project-tag {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    white-space: nowrap;
    color: #ffffff;
    background-color: var(--tag);
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
}

/* ===== Filter bar ======================================================== */

.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 1400px;
    margin: 0 auto 2rem;
    padding: 0 0.4rem;
}

/* Stays out of the way until the script has filled it */
.tag-filters[hidden] {
    display: none;
}

.tag-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
    white-space: nowrap;
    color: #374151;
    background-color: #ffffff;
    padding: 0.5rem 0.85rem;
    border: 1.5px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.tag-filter:hover {
    border-color: rgba(0, 0, 0, 0.42);
}

.tag-filter:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* A selected filter fills in, matching the solid tags on the cards */
.tag-filter[aria-pressed="true"] {
    color: #ffffff;
    background-color: var(--tag);
    border-color: var(--tag);
}

.tag-count {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}

.tag-filter[aria-pressed="true"] .tag-count {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .tag-filters {
        gap: 0.4rem;
        margin-bottom: 1.5rem;
        padding: 0 0.25rem;
    }
}

/* ===== Tag colors ======================================================== */

/* One base color per tag, keyed by data-tag: the label in lowercase with
   dashes for spaces, stamped on by assets/tags.js. The solid fills use it as
   is; the unselected filter outline and text, and the dark-mode versions in
   assets/theme.css, are mixed from it. Each is dark enough for white text. A
   tag with no line here, and the "all" chip, use the neutral grey. */
.project-tag,
.tag-filter {
    --tag: #4b5563;
}

[data-tag="hardware"] { --tag: #C24E2A; }
[data-tag="wearables"] { --tag: #bb4e7f; }
[data-tag="software"] { --tag: #2a408d; }
[data-tag="ai"] { --tag: #8e5ebf; }
[data-tag="xr"] { --tag: #2d74ca; }
[data-tag="research"] { --tag: #05837e; }
[data-tag="robotics"] { --tag: #268631; }
[data-tag="ems"] { --tag: #8a7304; }

/* Unselected filters wear their tag's color as an outline. Without color-mix()
   they keep the plain grey outline from above. */
@supports (color: color-mix(in oklab, red, white)) {
    .tag-filter {
        color: color-mix(in oklab, var(--tag) 80%, black);
        border-color: color-mix(in oklab, var(--tag) 45%, white);
    }

    .tag-filter:hover {
        border-color: var(--tag);
    }
}