/* SolarBanko Projects — bento redesign (2026-10-18). Previous version in private page 890. */
.sb-projects-main { width: 100%; max-width: none; margin: 0; padding: 0; }
.sb-projects .proj-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sb-projects .proj-chip { padding: 10px 18px; border-radius: 999px; background: var(--soft, #f4f6f0); color: #141414; border: 0; font: inherit; font-weight: 500; font-size: .92rem; cursor: pointer; transition: background .2s, color .2s; }
.sb-projects .proj-chip:hover { background: #eef5e6; color: #1e5b07; }
.sb-projects .proj-chip.active { background: #1e5b07; color: #fff; }
.sb-projects .proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.sb-projects .proj-card { display: none; flex-direction: column; border-radius: 24px; overflow: hidden; background: #f4f6f0; transition: transform .25s ease, box-shadow .25s ease; }
.sb-projects .proj-card.show { display: flex; }
.sb-projects .proj-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,51,31,.1); }
.sb-projects .package-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sb-projects .package-photo img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.sb-projects .proj-tag { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sb-projects .proj-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sb-projects .proj-card-body dl { margin: 0; display: grid; gap: 8px; }
.sb-projects .proj-card-body dt { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #1e5b07; }
.sb-projects .proj-card-body dd { margin: 0 0 4px; color: #33362f; font-size: .95rem; line-height: 1.5; }
.sb-projects .proj-card-body .sbx-link { margin-top: auto; }
.sb-projects .sbx-feature { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.sb-projects .sbx-feature > div { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.sb-projects .sbx-mail { display: flex; flex-direction: column; gap: 4px; padding: 22px 28px; border-radius: 22px; background: #14331f; color: #fff !important; transition: transform .2s ease; }
.sb-projects .sbx-mail:hover { transform: translateY(-3px); }
.sb-projects .sbx-mail span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #a6d86b; font-weight: 600; }
.sb-projects .sbx-mail strong { font-size: 1.15rem; font-weight: 600; }
@media (max-width: 1024px) { .sb-projects .proj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .sb-projects .proj-grid { grid-template-columns: 1fr; } }