/* ==========================================
   Works Page Styles - Brutalist Edition
   ========================================== */

/* Works Header */
.works-header {
    padding-top: calc(var(--space-24) + 80px);
    padding-bottom: var(--space-6);
    text-align: center;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}

.works-header__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.works-header__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-ultra);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.works-header__title {
    font-family: var(--font-extended);
    font-size: var(--text-6xl);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-none);
    margin-bottom: var(--space-3);
}

.works-header__title .text-gradient {
    color: var(--color-accent);
    background: none;
    -webkit-text-fill-color: var(--color-accent);
}

.works-header__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

/* Filter Section */
.filter-section {
    padding: var(--space-8) var(--space-8) var(--space-12);
    position: sticky;
    top: 60px;
    z-index: 100;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}

.filter-section__container {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Works Main */
.works-main {
    padding-top: var(--space-12);
    background: var(--color-bg-primary);
    min-height: 50vh;
}

.works-main .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
}

/* Empty State */
.works-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    border: 1px dashed var(--color-border);
}

.works-empty p {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-6);
}

/* Work Card Enhancements for Grid */
.works-main .work-card {
    aspect-ratio: 16 / 11;
}

/* Filter transition animation */
.work-card {
    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
}

.work-card.hiding {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

.work-card.showing {
    animation: cardShow 0.3s ease forwards;
}

@keyframes cardShow {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .works-header {
        padding-top: calc(var(--space-20) + 60px);
        padding-bottom: var(--space-4);
    }

    .works-header__container {
        padding: 0 var(--space-6);
    }

    .works-header__title {
        font-size: var(--text-5xl);
    }

    .works-header__subtitle {
        font-size: var(--text-sm);
    }

    .filter-section {
        position: static;
        padding: var(--space-6) var(--space-6) var(--space-8);
    }

    .filter-pills {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-2);
    }

    .filter-pills::-webkit-scrollbar {
        display: none;
    }

    .filter-pill {
        flex-shrink: 0;
    }

    .works-main {
        padding-top: var(--space-8);
    }

    .works-main .works-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

@media (max-width: 480px) {
    .works-header {
        padding-top: calc(var(--space-16) + 60px);
        padding-bottom: var(--space-3);
    }

    .works-header__container {
        padding: 0 var(--space-4);
    }

    .works-header__eyebrow {
        font-size: 0.65rem;
    }

    .works-header__title {
        font-size: var(--text-4xl);
    }

    .works-header__subtitle {
        max-width: 100%;
    }

    .filter-section {
        position: static;
        padding: var(--space-4) var(--space-4) var(--space-6);
    }

    .filter-pill {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
    }

    .works-main {
        padding-top: var(--space-6);
    }

    .works-empty {
        padding: var(--space-10) var(--space-4);
    }

    .works-empty p {
        font-size: var(--text-sm);
    }
}

@media (max-width: 360px) {
    .works-header__title {
        font-size: var(--text-3xl);
    }

    .filter-pill {
        font-size: 0.65rem;
        padding: var(--space-2) var(--space-3);
    }
}