/* ── bsb-work — direct port from work-section.css ───────────────────────── */

.bsb-work-section {
    position:         relative;
    width:            100vw;
    background-color: var(--bsb-color-bg);
    overflow:         hidden;
    padding:          0;
    margin:           0;
    will-change:      transform;
}

.bsb-work-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    width:                 100%;
    gap:                   0;
}

/* ── Each tile ───────────────────────────────────────────────────────────── */
.bsb-work-item {
    position:         relative;
    overflow:         hidden;
    cursor:           pointer;
    background-color: var(--bsb-color-bg);
    aspect-ratio:     1 / 1;
    display:          block;
    text-decoration:  none;
    will-change:      transform;
    /* GSAP entrance initial state — hidden on frontend, visible in editor */
}

.bsb-work-section:not(.bsb-work-section--preview) .bsb-work-item {
    /* opacity:   0; */
    transform: translateY(50px);
}

/* ── Background (CSS bg = hover-reveal image; img = normal foreground) ───── */
.bsb-work-bg {
    position:          absolute;
    top:    -1px;
    left:   -1px;
    right:  -1px;
    bottom: -1px;
    background-size:     cover;
    background-position: center;
    transition:          transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index:             1;
    will-change:         transform;
}

.bsb-work-item:hover .bsb-work-bg {
    /* filter:    grayscale(1); */
    filter:    blur(5px);
    /* transform: scale(1.1); */
}

.bsb-work-bg :where(img, video) {
    position:   absolute;
    inset:      0;
    object-fit: cover;
    width:      100%;
    height:     100%;
    transition: all 1.2s;
}

.bsb-work-item:hover .bsb-work-bg :where(img, video) {
    /* opacity: 0; */
    transform: scale(1.1);
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.bsb-work-overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.1);
    z-index:        2;
    padding:        3rem 3rem 5rem;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: flex-end;
    transition:     background 0.6s ease;
}

.bsb-work-item:hover .bsb-work-overlay {
    background: rgba(0, 0, 0, 0.2);
}

/* ── Content (arrow + title) ─────────────────────────────────────────────── */
.bsb-work-content {
    position:        relative;
    z-index:         3;
    pointer-events:  none;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-end;
    text-align:      left;
    width:       280px;
}

.bsb-work-arrow {
    --arrow-size:  clamp(2rem, 3.25vw, 3rem);
    width:         var(--arrow-size);
    height:        var(--arrow-size);
    color:         #ffffff;
    margin-bottom: 1.5rem;
    opacity:       1;
    transform:     translateY(0) rotate(45deg);
    transition:    all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bsb-work-title {
    font-family:    var(--bsb-font-display);
    font-size:      clamp(1.5rem, 2vw, 1.8rem);
    font-weight:    700;
    color:          #ffffff;
    margin:         0;
    line-height:    1.1;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 1px #000;
    transform:      translateY(0);
    transition:     transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Hover: pink accent ──────────────────────────────────────────────────── */
.bsb-work-item:hover .bsb-work-title {
    color: var(--bsb-pink);
}

.bsb-work-item:hover .bsb-work-arrow {
    color:     var(--bsb-pink);
    opacity:   1;
    animation: bsb-arrow-move 0.8s ease forwards;
}

@keyframes bsb-arrow-move {
    0%   { transform: translateX(0)    rotate(45deg); opacity: 1; }
    50%  { transform: translateX(25px) rotate(45deg); opacity: 0; }
    100% { transform: translateX(3px)  rotate(45deg); opacity: 1; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bsb-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bsb-work-grid {
        grid-template-columns: 1fr;
    }

    .bsb-work-overlay {
        padding: 2rem 2rem 3rem;
    }
}