/**
 * Yakup Stucadoors — gerealiseerd werk. Masonry-grid met 90ms verschil;
 * onder 768px een horizontale rij met scroll-snap.
 */

.yk-werk {
    --yk-stagger: 90ms;
}

.yk-werk__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.yk-werk__top .yk-head {
    margin-bottom: 0;
}

.yk-werk__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.yk-werk__filter {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--dc-radius-full);
    background: var(--dc-bg-alt);
    font: inherit;
    font-weight: 500;
    color: var(--dc-title);
    cursor: pointer;
}

.yk-werk__filter.is-active {
    background: var(--dc-title);
    color: #ffffff;
}

.yk-werk__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 14vw, 200px);
    gap: clamp(14px, 1.8vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.yk-werk__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--dc-radius-xl);
    background: var(--dc-bg-alt);
}

.yk-werk__item--1 { grid-column: span 7; grid-row: span 3; }
.yk-werk__item--2 { grid-column: span 5; grid-row: span 2; }
.yk-werk__item--3 { grid-column: span 5; grid-row: span 3; }
.yk-werk__item--4 { grid-column: span 7; grid-row: span 2; }

.yk-werk__item.is-filtered {
    display: none;
}

.yk-werk__link {
    position: absolute;
    inset: 0;
    display: block;
    color: #ffffff;
    text-decoration: none;
}

.yk-werk .yk-werk__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--dc-ease-default);
}

.yk-werk__caption {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 4px;
    padding: 64px clamp(18px, 2vw, 28px) clamp(18px, 2vw, 24px);
    background: linear-gradient(180deg, rgba(24, 29, 35, 0) 0%, rgba(24, 29, 35, 0.82) 70%);
    transform: translateY(38%);
    transition: transform 260ms var(--dc-ease-default);
}

.yk-werk__name {
    font-family: var(--dc-font-heading);
    font-size: var(--dc-text-xl);
    font-weight: 600;
    line-height: 1.2;
}

.yk-werk__meta {
    font-size: 14px;
    opacity: 0.9;
}

.yk-werk__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 260ms ease-out;
}

@media (hover: hover) {
    .yk-werk__link:hover .yk-werk__caption,
    .yk-werk__link:focus-visible .yk-werk__caption {
        transform: none;
    }

    .yk-werk__link:hover .yk-werk__cta,
    .yk-werk__link:focus-visible .yk-werk__cta {
        opacity: 1;
    }

    .yk-werk__link:hover img.yk-werk__img {
        transform: scale(1.04);
    }
}

@media (hover: none) {
    .yk-werk__caption {
        transform: none;
    }

    .yk-werk__cta {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .yk-werk__grid {
        display: flex;
        gap: 12px;
        margin-inline: calc(var(--dc-gutter) * -1);
        padding-inline: var(--dc-gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--dc-gutter);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .yk-werk__grid::-webkit-scrollbar {
        display: none;
    }

    .yk-werk__item {
        flex: 0 0 82%;
        aspect-ratio: 4 / 5;
        scroll-snap-align: start;
    }

    .yk-werk__caption {
        transform: none;
    }

    .yk-werk__cta {
        opacity: 1;
    }
}