/* Banko Masonry (Content) block: grid layout. Per-block ratio comes from --bcg-ratio on .banko-content-grid */
.banko-content-grid { width: 100%; max-width: 100%; min-width: 0; align-self: stretch; }
.banko-content-grid .bcg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 979.98px) { .banko-content-grid .bcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 539.98px) { .banko-content-grid .bcg-grid { grid-template-columns: 1fr; } }
.banko-content-grid .bcg-filters { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 2.5rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: .5rem; padding-top: 1rem; padding-bottom: 1rem; }
.banko-content-grid .bcg-filters { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; background: var(--bcg-bg, #000); box-shadow: 0 0 0 100vmax var(--bcg-bg, #000); clip-path: inset(0 -100vmax); }
body.admin-bar .banko-content-grid .bcg-filters { top: 32px; }
@media (max-width: 782px) { body.admin-bar .banko-content-grid .bcg-filters { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .banko-content-grid .bcg-filters { top: 0; } }
.banko-content-grid .bcg-filters::-webkit-scrollbar { display: none; }
.banko-content-grid .bcg-filters > * { flex: 0 0 auto; white-space: nowrap; }
.banko-content-grid .bcg-filters .bcg-divider { border-right: 1px solid #fff; }
.banko-content-grid .bcg-filters .bcg-divider:first-child { display: none; }
@media (max-width: 979.98px) { .banko-content-grid .bcg-filters { gap: 1.5rem; } }
@media (min-width: 1024px) { .banko-content-grid .bcg-filters { margin-bottom: 2rem; } }
.banko-content-grid .case-study-item { position: relative; display: block; width: 100%; aspect-ratio: var(--bcg-ratio, 2 / 3); overflow: hidden; background: rgba(127,127,127,.12); }
.banko-content-grid .case-study-item[hidden] { display: none; }
.banko-content-grid .case-study-item.bcg-in { animation: bcgFadeIn .4s ease-out; }
.banko-content-grid .case-study-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; max-width: none; }
.banko-content-grid .case-study-item img.case-study-item-default { z-index: 1; opacity: 1; transition: opacity 1s ease-in-out; }
.banko-content-grid .case-study-item:hover img.case-study-item-default.has-hover,
.banko-content-grid .case-study-item:focus-visible img.case-study-item-default.has-hover { opacity: 0; }
.banko-content-grid .bcg-sentinel { height: 1px; }
.banko-content-grid .bcg-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4rem 1rem 1.25rem; text-align: center; color: rgb(240 233 221); background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%); pointer-events: none; }
.banko-content-grid .bcg-title { display: block; font-size: 1.25rem; line-height: 1.25; font-weight: 600; }
.banko-content-grid .bcg-category { display: block; margin-top: .35rem; font-size: .75rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
@media (max-width: 979.98px) { .banko-content-grid .bcg-title { font-size: 1.1rem; } }
@keyframes bcgFadeIn { from { opacity: 0; } to { opacity: 1; } }