﻿

.sw-section + .sw-section { padding-top: 0; }
.sw-section:not(.sw-section--last) { padding-bottom: 60px; }
.sw-part-label {
    font-family: "ClashDisplay-Medium", Arial, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; opacity: 0.45; margin-bottom: 20px;
}
.sw-hscroll {
    overflow-x: scroll; overflow-y: hidden; cursor: url('../cursor/cursor-grab.svg?v=3') 15 16, grab;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    user-select: none; -webkit-user-select: none; margin-bottom: 8px;
}
.sw-hscroll::-webkit-scrollbar { display: none; }
.sw-hscroll.sw-drag { cursor: url('../cursor/cursor-grabbing.svg?v=3') 15 12, grabbing; }
.sw-row-inner { display: flex; gap: 16px; padding: 4px 16px 8px; width: max-content; }

.sw-rows-stack { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.sw-rows-stack .sw-row-inner { gap: 10px; padding: 0 16px; }

.sw-web-card {
    flex: 0 0 320px; display: block; color: inherit; text-decoration: none;
    cursor: url('../cursor/cursor-pointer.svg?v=4') 15 16, pointer;
}

div.sw-web-card { cursor: inherit; }
.sw-web-img {
    width: 320px; border-radius: 10px; overflow: hidden;
    position: relative; padding-bottom: 65%; margin-bottom: 10px;
    background: rgba(245,242,224,0.05);
}
.sw-web-img img {
    position: absolute; top:0; left:0; width:100%; height:100%;
    object-fit: cover; transition: transform 400ms cubic-bezier(.16,.01,.77,1);
}
.sw-web-vid {
    position: absolute; top:0; left:0; width:100%; height:100%;
    object-fit: cover; opacity: 0; transition: opacity 300ms ease;
    pointer-events: none;
}
.sw-web-card:hover .sw-web-img img { transform: scale(1.05); }
.sw-web-card:hover .sw-web-vid { opacity: 1; }
.sw-web-badge {
    position: absolute; bottom:10px; right:10px;
    background: #efebe5;
    color:#0B0C0D;
    font-family:"ClashDisplay-Medium",Arial,sans-serif;
    font-size:11px; font-weight:700; padding:2px 10px; border-radius:20px;
}
.sw-card-name {
    font-family:"ClashDisplay-Medium",Arial,sans-serif;
    font-size:14px; font-weight:normal; margin-bottom:4px; line-height:1.2;
}
.sw-card-cat { font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.45; }

.sw-ph { position:absolute; inset:0; }

.sw-vid-row-label {
    font-family: "ClashDisplay-Medium", Arial, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; opacity: 0.3; margin: 0 0 10px;
}
.sw-part-label + .sw-vid-row-label { margin-top: 0; }
.sw-footer + .sw-vid-row-label { margin-top: 28px; }

.sw-vid-card {
    flex: 0 0 140px; min-width: 0;
    cursor: url('../cursor/cursor-pointer.svg?v=4') 15 16, pointer;
}
.sw-vid-img {
    width:140px; border-radius:10px; overflow:hidden;
    position:relative; padding-bottom:56.25%; margin-bottom:6px;
}
.sw-vid-img img {
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:cover; transition: transform 400ms cubic-bezier(.16,.01,.77,1);
}
.sw-vid-card:hover .sw-vid-img img { transform: scale(1.05); }
.sw-vid-play {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:24px; height:24px; border-radius:50%;
    background:rgba(245,242,224,0.16); color:#efebe5; font-size:9px;
    display:flex; align-items:center; justify-content:center;
    padding-left:2px; transition:background 277ms;
}
.sw-vid-card:hover .sw-vid-play { background: #efebe5; color:#0B0C0D; }

.sw-vid-card .sw-card-name {
    font-size:11px; height:2.4em; margin-bottom:2px; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}

.sw-vid-card .sw-card-cat { font-size:9px; line-height:1.4; }

.sw-photo-card {
    flex: 0 0 110px; min-width: 0;
    cursor: url('../cursor/cursor-pointer.svg?v=4') 15 16, pointer;
}
.sw-photo-img {
    width:110px; height:90px; border-radius:10px; overflow:hidden;
    position:relative; background: rgba(245,242,224,0.05);
}

.sw-photo-card .sw-card-name {
    font-size:11px; margin-top:6px; margin-bottom:0; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.sw-photo-img img {
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:cover; transition: transform 400ms cubic-bezier(.16,.01,.77,1);
}
.sw-photo-card:hover .sw-photo-img img { transform: scale(1.05); }

.sw-section .color--text { color: inherit !important; }
.sw-section .home-projects h3 { color: inherit; }
.sw-section .home-projects .title-16 { color: inherit; opacity: 0.6; }

.sw-fade-wrap { position: relative; }
.sw-fade-wrap::before, .sw-fade-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 8px;
    width: 100px; z-index: 2; pointer-events: none;
}

.sw-fade-wrap::before {
    left: 0;
    background: linear-gradient(to right, #000000 15%, transparent 100%);
    opacity: 0; transition: opacity 300ms ease;
}
.sw-fade-wrap.sw-scrolled::before { opacity: 1; }

.sw-fade-wrap::after {
    right: 0;
    background: linear-gradient(to left, #000000 15%, transparent 100%);
}

.sw-footer {
    display: flex; align-items: center; gap: 16px;
    margin: 6px 16px 28px;
}
.sw-pt {
    flex: 1; height: 2px; background: rgba(245,242,224,0.1);
    border-radius: 1px; overflow: hidden; margin: 0;
}
.sw-pf {
    height: 100%; width: 0%;
    background: #efebe5; border-radius: 1px;
}
.brands-drag-hint {
    font-family: "ClashDisplay-Medium", Arial, sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted-on-dark); white-space: nowrap; flex-shrink: 0;
}
#brands-section .brands-drag-hint {
    color: var(--text-muted-on-light);
}
