/* Projects filter pill: List / Grid + density / Presentation */

.projects-grid {
    --projects-cols: 3;
}

@media (max-width: 768px) {
    #projectsFilterPill,
    .projects-filter-pill {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
    }

    .projects-grid:not(.list-view):not(.presentation-view) {
        --projects-cols: 6;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 16px;
    }

    /* Unmarked groups: 2 per row. */
    .projects-grid:not(.list-view):not(.presentation-view) .project-item {
        grid-column: span 3;
    }

    /* Visa + Creative Direction & Editorial Design: 3 per row. */
    .projects-grid:not(.list-view):not(.presentation-view) .project-item.projects-item--triple {
        grid-column: span 2;
    }

    /* Apple + Independent Ventures: one card per row. */
    .projects-grid:not(.list-view):not(.presentation-view) .project-item.projects-item--full {
        grid-column: 1 / -1;
    }

    /* 3-up tiles are too tight for the (i) disc — tap the tile instead. */
    .projects-grid:not(.list-view) .project-item.projects-item--triple .project-card-flip-layer,
    .projects-grid:not(.list-view) .project-item.projects-item--triple .project-card-flip-btn--open {
        display: none !important;
        pointer-events: none !important;
    }

    /*
     * Award badges: same top-left corner as desktop.
     * Tile radius is 4px — inset must clear that curve (concentric), not hug the clip.
     * Full-width Apple / Independent tiles keep desktop-like 10px / ~28px; 2-up tiles tighten.
     * 3-up tiles go a step smaller so badges stay tucked, not crowded.
     */
    .projects-grid:not(.list-view) .project-awards {
        --award-inset: 6px;
        --award-gap: 3px;
        --award-size: 24px;
        --award-size-lg: 26px;
        --award-size-clio: 32px;
        --award-clio-shift: -8px;
    }

    .projects-grid:not(.list-view) .project-item.projects-item--triple .project-awards {
        --award-inset: 5px;
        --award-gap: 3px;
        --award-size: 22px;
        --award-size-lg: 24px;
        --award-size-clio: 28px;
        --award-clio-shift: -7px;
    }

    .projects-grid:not(.list-view) .project-item.projects-item--full .project-awards,
    .projects-grid.presentation-view .project-awards {
        --award-inset: 10px;
        --award-gap: 5px;
        --award-size: 28px;
        --award-size-lg: 32px;
        --award-size-clio: 40px;
        --award-clio-shift: -10px;
    }
}

@media (min-width: 769px) {
    .projects-grid:not(.list-view):not(.presentation-view) {
        grid-template-columns: repeat(var(--projects-cols, 3), minmax(0, 1fr)) !important;
    }

    .projects-grid.cols-1:not(.list-view):not(.presentation-view) {
        --projects-cols: 1;
    }

    .projects-grid.cols-2:not(.list-view):not(.presentation-view) {
        --projects-cols: 2;
    }

    .projects-grid.cols-3:not(.list-view):not(.presentation-view) {
        --projects-cols: 3;
    }

    /* 3-up: tuck awards into the 4px tile corner. 1-up / 2-up keep the 10px inset. */
    .projects-grid:not(.list-view):not(.presentation-view):not(.cols-1):not(.cols-2) .project-awards {
        --award-inset: 3px;
    }
}

/* Presentation: one large tile at a time, calmer reading. Not the F-key idle slideshow. */
.projects-grid.presentation-view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(72px, 16vh, 160px);
    width: 100% !important;
    max-width: none !important;
}

.projects-grid.presentation-view .project-item {
    width: 100%;
    max-width: min(1080px, 100%);
    margin-inline: auto;
    scroll-margin-top: 80px;
}

/* Open tiles stay a centered deck — don't break sideways via --project-open-w-px. */
.projects-grid.presentation-view.has-active:not(.list-view) .project-item.is-active,
.projects-grid.presentation-view.has-hero:not(.list-view) .project-item.is-hero {
    width: 100%;
    max-width: min(1080px, 100%);
    min-width: 0;
    justify-self: center;
    left: 0;
    --project-open-w-px: min(1080px, 100%);
    --project-open-shift: 0px;
}

.projects-grid.presentation-view .project-item.is-active .project-active-caption,
.projects-grid.presentation-view .project-item.is-hero .project-active-caption {
    display: block;
}

.projects-grid.presentation-view .project-thumbnail {
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
    outline-color: transparent;
}

.projects-grid.presentation-view .project-thumbnail.thumb-media-ready {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
}

body.dark-background .projects-grid.presentation-view .project-thumbnail.thumb-media-ready,
body.dark-transition .projects-grid.presentation-view .project-thumbnail.thumb-media-ready {
    outline-color: rgba(255, 255, 255, 0.1);
}

.projects-grid.presentation-view .project-meta {
    padding: 0 2px;
}

.projects-grid.presentation-view .project-title {
    text-wrap: balance;
}

.projects-grid.presentation-view.thumbnail-hovered .project-item:not(.hovered) .project-hover-overlay,
.projects-grid.presentation-view .project-hover-overlay,
.projects-grid:not(.list-view) .project-hover-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

.projects-grid.presentation-view .projects-group-headline {
    display: grid;
    grid-column: 1 / -1;
    max-width: none;
}

/* List: keep the row layout; fix light-mode hairlines and the leftover lime hover. */
body:not(.dark-background):not(.dark-transition) .projects-grid.list-view .project-item {
    border: none !important;
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08) !important;
}

body:not(.dark-background):not(.dark-transition) .projects-grid.list-view .project-item:first-child {
    box-shadow:
        inset 0 1px 0 0 rgba(0, 0, 0, 0.08),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.08) !important;
}

body.dark-background .projects-grid.list-view .project-item,
body.dark-transition .projects-grid.list-view .project-item {
    border: none !important;
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-background .projects-grid.list-view .project-item:first-child,
body.dark-transition .projects-grid.list-view .project-item:first-child {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

.projects-grid.list-view .project-item:hover {
    border-top-color: transparent !important;
}

.projects-grid.list-view .project-awards-list,
.projects-grid.list-view .project-item .project-awards-list {
    color: inherit !important;
    opacity: 0.7;
}

/* Hidden: park fully below the viewport plus a small overshoot (bottom + 12px). */
.projects-filter-pill {
    --aktuell-filter-bottom: 24px;
    transform: translateY(calc(100% + var(--aktuell-filter-bottom) + var(--aktuell-chrome-overshoot, 12px))) !important;
}

.projects-filter-pill.is-visible,
.projects-filter-pill:focus-within,
.projects-filter-pill.is-expanded {
    transform: translateY(0) !important;
}

@media (max-width: 768px) {
    .projects-filter-pill {
        --aktuell-filter-bottom: 16px;
    }
}

/* Density cluster hidden: Grid button cycles 3 → 1 → 2 → 3. */
.projects-filter-pill__inner {
    -webkit-font-smoothing: antialiased;
    gap: 0.7em;
}

.projects-filter-pill .view-controls {
    display: flex;
    align-items: center;
    gap: 0;
}

.projects-filter-pill .view-toggle,
.projects-filter-pill .density-toggle {
    cursor: inherit;
    transition-property: opacity, width, margin, padding, transform;
    transition-duration: 0.2s, 0.25s, 0.25s, 0.25s, 150ms;
    transition-timing-function: ease, ease, ease, ease, ease-out;
}

.projects-filter-pill .view-toggle:active,
.projects-filter-pill .density-toggle:active {
    transform: scale(0.96);
}

.projects-filter-pill .density-cluster,
.projects-filter-pill.is-grid .density-cluster {
    display: none !important;
}

.projects-filter-pill .density-toggle {
    font-size: 12px;
    color: inherit !important;
    flex-shrink: 0;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font-variant-numeric: tabular-nums;
}

.projects-filter-pill .density-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 36px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.projects-filter-pill .density-toggle.active {
    opacity: 1 !important;
}

.projects-filter-pill:not(:hover):not(:focus-within):not(.is-expanded) .density-toggle:not(.active) {
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
    border: 0;
}

.projects-filter-pill:not(:hover):not(:focus-within):not(.is-expanded) .density-toggle:not(.active)::before,
.projects-filter-pill:not(:hover):not(:focus-within):not(.is-expanded) .density-toggle:not(.active)::after {
    content: none;
    display: none;
}

.projects-filter-pill:hover .view-toggle:not(:first-child)::before,
.projects-filter-pill:focus-within .view-toggle:not(:first-child)::before,
.projects-filter-pill.is-expanded .view-toggle:not(:first-child)::before {
    content: "•";
    margin: 0 0.7em;
    opacity: 0.35;
    pointer-events: none;
}

.projects-filter-pill:hover .density-toggle + .density-toggle::before,
.projects-filter-pill:focus-within .density-toggle + .density-toggle::before,
.projects-filter-pill.is-expanded .density-toggle + .density-toggle::before {
    content: "·";
    margin: 0 0.14em;
    opacity: 0.5;
    pointer-events: none;
}

.projects-filter-pill:hover .density-toggle:not(.active),
.projects-filter-pill:focus-within .density-toggle:not(.active),
.projects-filter-pill.is-expanded .density-toggle:not(.active) {
    opacity: 1 !important;
    width: auto !important;
    pointer-events: auto;
}

.projects-filter-pill:hover .density-toggle.active,
.projects-filter-pill:focus-within .density-toggle.active,
.projects-filter-pill.is-expanded .density-toggle.active {
    opacity: 0.5 !important;
}

@media (hover: none) {
    .projects-filter-pill.is-visible .density-toggle:not(.active),
    .projects-filter-pill.is-expanded .density-toggle:not(.active) {
        opacity: 1 !important;
        width: auto !important;
        pointer-events: auto !important;
    }

    .projects-filter-pill.is-visible .density-toggle + .density-toggle::before,
    .projects-filter-pill.is-expanded .density-toggle + .density-toggle::before {
        content: "·";
        margin: 0 0.12em;
        opacity: 0.35;
        pointer-events: none;
    }

    .projects-filter-pill.is-visible .density-toggle.active,
    .projects-filter-pill.is-expanded .density-toggle.active {
        opacity: 0.5 !important;
    }

    .projects-filter-pill .density-toggle {
        min-height: 32px;
        padding: 6px 4px !important;
    }

    .projects-filter-pill .density-toggle::after {
        width: 36px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .projects-filter-pill .density-cluster,
    .projects-filter-pill.is-grid .density-cluster {
        display: none !important;
    }

    .projects-grid.presentation-view {
        gap: clamp(48px, 12vh, 96px);
    }

    .projects-grid.presentation-view .project-item,
    .projects-grid.presentation-view.has-active:not(.list-view) .project-item.is-active,
    .projects-grid.presentation-view.has-hero:not(.list-view) .project-item.is-hero {
        width: 100%;
        max-width: 100%;
        left: 0;
        justify-self: center;
    }
}

/* Scroll invert (`body.dark-background * { color:#fff }`) must not flip this chrome. */
html body.dark-background .projects-filter-pill,
html body.dark-transition .projects-filter-pill {
    background: #fff !important;
    color: #111 !important;
    isolation: isolate;
    mix-blend-mode: normal;
    filter: none;
}

html body.dark-background .projects-filter-pill *,
html body.dark-transition .projects-filter-pill *,
html body.dark-background .projects-filter-pill .view-toggle,
html body.dark-transition .projects-filter-pill .view-toggle,
html body.dark-background .projects-filter-pill .density-toggle,
html body.dark-transition .projects-filter-pill .density-toggle {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html body.dark-background .projects-filter-pill svg,
html body.dark-background .projects-filter-pill svg *,
html body.dark-transition .projects-filter-pill svg,
html body.dark-transition .projects-filter-pill svg * {
    color: #111 !important;
    stroke: #111;
}

@media (prefers-reduced-motion: reduce) {
    .projects-filter-pill .view-toggle,
    .projects-filter-pill .density-toggle {
        transition-duration: 0.01ms;
    }

    .projects-filter-pill .view-toggle:active,
    .projects-filter-pill .density-toggle:active {
        transform: none;
    }
}