/* ================================================================
   WORKS PAGE
   Reuses .layout-grid / .sidebar / .header / mobile-menu from style.css
   ================================================================ */

/* ----------------------------------------------------------------
   Layout override: the works intro replaces the fixed-height hero,
   so the second grid row must grow with its content.
   ---------------------------------------------------------------- */
.layout-grid--works {
    grid-template-rows: 150px 400px;
    height: 550px;
    background-color: var(--theme-bg);
    transition: background-color 0.3s ease;
}

/* ----------------------------------------------------------------
   Intro block (title, breadcrumb, lead, year filter)
   ---------------------------------------------------------------- */
.works-intro {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 400px;
    max-height: 400px;
    padding: 0 var(--space-tablet) 0 0;
    /* vertical rule that mirrors the divider seen between the
       sidebar brand and the title in the mockups */
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: var(--space-tablet);
    box-sizing: border-box;
    overflow: hidden;
}

[data-theme="light"] .works-intro {
    border-left-color: rgba(9, 9, 9, 0.18);
}

.works-title {
    margin: 0 0 14px;
    color: var(--theme-text);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.works-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 36px;
    font-size: 1rem;
    font-weight: 200;
}

.works-breadcrumb__link {
    color: var(--theme-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.works-breadcrumb__link:hover {
    color: var(--theme-text);
}

.works-breadcrumb__sep {
    color: var(--theme-text-muted);
}

.works-breadcrumb__current {
    color: var(--theme-text);
}

.works-lead {
    max-width: 760px;
    margin: 0;
    color: var(--theme-text);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 200;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* ----------------------------------------------------------------
   Year filter pills
   ---------------------------------------------------------------- */
.works-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    /* push the filter to the bottom of the intro block so it aligns
       with the baseline where the gallery begins, as in the mockups */
    margin-top: auto;
    /* keep a little breathing room above the gallery edge */
    padding-bottom: 4px;
}

.works-filter__btn {
    padding: 8px 22px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--theme-text-muted);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.works-filter__btn:hover {
    color: var(--theme-text);
}

.works-filter__btn--active {
    background-color: #d8d8d8;
    color: #090909;
}

.works-filter__btn--active:hover {
    color: #090909;
}

[data-theme="light"] .works-filter__btn--active {
    background-color: #090909;
    color: #f0f0f0;
}

[data-theme="light"] .works-filter__btn--active:hover {
    color: #f0f0f0;
}

/* ================================================================
   PORTFOLIO MASONRY GRID
   JS-driven shortest-column packing (see works.js). Cards are
   absolutely positioned; the script sets each card's width, height
   (from the image's natural aspect ratio) and translate offset,
   then sets the container height. Column count scales with the
   viewport. No image distortion, balanced column bottoms.
   ================================================================ */
.works-section {
    position: relative;
    width: 100%;
    /* 60px of breathing room between the intro block and the gallery */
    padding-top: 60px;
    /* ~3x the top gap of empty space before the footer, matching the
       generous bottom spacing on the homepage */
    padding-bottom: 180px;
    background-color: var(--theme-bg);
    transition: background-color 0.3s ease;
}

.works-grid {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Before JS runs (or if JS is disabled) fall back to a sane
   responsive multi-column flow so content is never broken. */
.works-grid:not(.works-grid--ready) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.work-card {
    list-style: none;
    min-width: 0;
}

/* Once packed, cards are positioned by the script */
.works-grid--ready .work-card {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    will-change: transform;
    /* Positioned instantly by default — NO transition. This is what
       guarantees zero trembling while the window is being resized:
       the cards simply snap to each recomputed position. */
    transform: translate(var(--x, 0), var(--y, 0));
    opacity: 1;
}

/* Reveal-from state: only meaningful before the grid is revealed.
   Cards start slightly lower and transparent for the entrance. */
.works-grid--ready:not(.works-grid--revealed) .work-card.is-placed {
    opacity: 0;
    transform: translate(var(--x, 0), calc(var(--y, 0) + 14px));
}

/* Animation is OPT-IN: the script adds --animate only for the first
   reveal and for filter changes, then removes it once the move ends.
   During resize the class is absent, so transforms are instantaneous. */
.works-grid--animate .work-card {
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.work-card__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1a1a1a;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

[data-theme="light"] .work-card__link {
    background-color: #d0d0d0;
}

.work-card__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.work-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition:
        transform 0.6s ease,
        filter 0.5s ease;
}

.work-card__link:hover .work-card__img {
    transform: scale(1.05);
    filter: grayscale(0);
}

/* subtle top gradient so the title stays legible on light images */
.work-card__link::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0)
    );
    pointer-events: none;
}

.work-card__title {
    position: absolute;
    top: 22px;
    left: 24px;
    right: 70px;
    z-index: 2;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* circular link button, bottom-right */
.work-card__action {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.work-card__action svg {
    width: 24px;
    height: 24px;
}

.work-card__link:hover .work-card__action {
    background-color: var(--color-primary);
    transform: scale(1.08);
}

[data-theme="light"] .work-card__link:hover .work-card__action {
    background-color: var(--theme-hero-bg);
    color: #090909;
}

/* empty filter state */
.works-empty {
    padding: 80px var(--space-tablet);
    color: var(--theme-text-muted);
    font-size: 1.1rem;
    font-weight: 200;
    text-align: center;
}

/* ================================================================
   RESPONSIVE
   Column count is decided in JS from container width, but we keep
   the no-JS fallback grid in sync here, and adjust intro spacing.
   ================================================================ */

/* Tablet ----------------------------------------------------------- */
@media (max-width: 991.98px) {
    .works-intro {
        padding-left: var(--space-tablet);
    }

    .works-grid:not(.works-grid--ready) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .layout-grid--works {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .works-intro {
        order: 3;
        grid-column: auto;
        grid-row: auto;
        height: auto;
        max-height: none;
        overflow: visible;
        border-left: none;
        padding: 0 var(--space-mobile) var(--space-mobile);
    }

    .works-title {
        font-size: clamp(1.9rem, 9vw, 2.4rem);
        margin-bottom: 10px;
    }

    .works-breadcrumb {
        margin-bottom: 28px;
    }

    .works-lead {
        margin-bottom: 36px;
    }

    .works-filter {
        gap: 12px 18px;
        margin-top: 0;
        padding-bottom: 0;
    }

    .works-filter__btn {
        padding: 7px 18px;
    }

    .works-section {
        padding-top: 40px;
        padding-bottom: 90px;
    }

    .works-grid:not(.works-grid--ready) {
        grid-template-columns: 1fr;
    }

    .work-card__title {
        top: 18px;
        left: 18px;
        right: 60px;
        font-size: 0.9rem;
    }

    .work-card__action {
        right: 18px;
        bottom: 18px;
        width: 50px;
        height: 50px;
    }

    .work-card__action svg {
        width: 22px;
        height: 22px;
    }
}