.sbc-projects { --sbc-accent: #0170b9; --sbc-ink: #0e2233; --sbc-ink-soft: #5c7286; --sbc-line: #e3e0d8; }

.sbc-projects-filters { position: relative; display: flex; flex-wrap: wrap; gap: 34px; justify-content: center; margin-bottom: 52px; border-bottom: 1px solid var(--sbc-line); }
.sbc-projects-filter { font-family: inherit; background: none; border: none; padding: 0 0 18px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--sbc-ink-soft); cursor: pointer; transition: color .3s ease; }
.sbc-projects-filter:hover { color: var(--sbc-ink); }
.sbc-projects-filter.is-active { color: var(--sbc-ink); }
.sbc-projects-filter-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--sbc-accent); border-radius: 2px; transition: left .4s cubic-bezier(.16,1,.3,1), width .4s cubic-bezier(.16,1,.3,1); }

.sbc-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 24px; }
.sbc-projects-item { transition: opacity .32s ease, transform .32s ease; opacity: 1; transform: scale(1); }
.sbc-projects-item.sbc-projects-hide { opacity: 0; transform: scale(.94); pointer-events: none; }
.sbc-projects-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }

.sbc-projects-card { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; text-decoration: none; box-shadow: 0 20px 40px -24px rgba(14,34,51,.45); transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease, filter .4s ease; }
.sbc-projects-media { position: absolute; inset: 0; display: block; overflow: hidden; }
.sbc-projects-img, .sbc-projects-img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #ddd; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.sbc-projects-card:hover .sbc-projects-img, .sbc-projects-card:hover .sbc-projects-img-placeholder { transform: scale(1.08); }

.sbc-projects-corner { position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; transition: background .35s ease, transform .35s ease; }
.sbc-projects-corner svg { width: 14px; height: 14px; fill: currentColor; }
.sbc-projects-card:hover .sbc-projects-corner { background: var(--sbc-accent); color: #10202b; transform: rotate(45deg); }

.sbc-projects-drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px; max-height: 60px; overflow: hidden; background: rgba(14,34,51,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: max-height .45s cubic-bezier(.16,1,.3,1), background .45s ease; }
.sbc-projects-card:hover .sbc-projects-drawer { max-height: 220px; background: rgba(14,34,51,.82); }
.sbc-projects-cat { display: block; max-height: 0; margin-bottom: 0; opacity: 0; overflow: hidden; font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sbc-accent); transition: max-height .4s ease, margin-bottom .4s ease, opacity .3s ease; }
.sbc-projects-card:hover .sbc-projects-cat { max-height: 20px; margin-bottom: 8px; opacity: 1; }
.sbc-projects-title { display: block; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-projects-cta { display: flex; align-items: center; gap: 7px; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; color: var(--sbc-accent); font-size: 13px; font-weight: 700; transition: max-height .4s ease .05s, margin-top .4s ease .05s, opacity .3s ease .05s; }
.sbc-projects-card:hover .sbc-projects-cta { max-height: 40px; margin-top: 14px; opacity: 1; }
.sbc-projects-cta svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

.sbc-projects-grid.is-active .sbc-projects-item:not(.is-hovered) .sbc-projects-card { opacity: .45; filter: grayscale(.4); }
.sbc-projects-grid.is-active .sbc-projects-item.is-hovered .sbc-projects-card { transform: scale(1.015); box-shadow: 0 28px 54px -20px rgba(14,34,51,.55); }

@media (max-width: 991px) { .sbc-projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sbc-projects-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; } .sbc-projects-item:nth-child(5n+1) { grid-column: span 1; grid-row: span 2; } }