/* Membra – Liquid Hover Gallery · © VASI Design */
.mbr{position:relative;display:inline-block;max-width:100%;line-height:0;vertical-align:top}
.mbr>img:not(.mbr-gifo){display:block}
.mbr.mbr-gl>img:not(.mbr-gifo){opacity:0}
.mbr-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2}
.mbr-canvas canvas{display:block}
.mbr .mbr-gifo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:3}
.mbr .mbr-gifo.on{opacity:1}

/* ---------- Gallery widget ---------- */
.mbrg{--mbrg-cols:3;--mbrg-gx:32px;--mbrg-gy:56px;--mbrg-zoom:1.08;--mbrg-ms:700ms;--mbrg-tag-off:16px;--mbrg-btn-off:16px}
.mbrg-grid{display:grid;grid-template-columns:repeat(var(--mbrg-cols),minmax(0,1fr));column-gap:var(--mbrg-gx);row-gap:var(--mbrg-gy);align-items:start}
/* masonry: JS builds columns; without JS CSS columns are used */
.mbrg-masonry .mbrg-grid{display:block;column-count:var(--mbrg-cols);column-gap:var(--mbrg-gx)}
.mbrg-masonry .mbrg-grid>.mbrg-item{break-inside:avoid;margin-bottom:var(--mbrg-gy)}
.mbrg-masonry .mbrg-grid.is-js{display:flex;align-items:flex-start;gap:var(--mbrg-gx);column-count:auto}
.mbrg-col{position:relative;z-index:3;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--mbrg-gy)}
/* parallax: own layers, so texts and tags move as one piece instead of being re-rendered every frame */
.mbrg-par .mbrg-col,.mbrg-par .mbrg-grid>.mbrg-item{will-change:transform;backface-visibility:hidden}
.mbrg-col>.mbrg-item{margin:0}
.mbrg-item{position:relative;z-index:3;display:block;min-width:0;color:inherit}   /* above the WebGL layer: tags, texts, buttons stay visible (also with parallax transforms) */
.mbrg-item a{color:inherit;text-decoration:none}
.mbrg-mwrap{position:relative}
.mbrg .mbrg-media{display:block;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:24px;line-height:0}
.mbrg-masonry .mbrg-media{aspect-ratio:auto}
.mbrg .mbrg-media>img.mbrg-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;border-radius:inherit;margin:0}
.mbrg-cap{display:block;margin-top:16px}
.mbrg-title{margin:0;transition:color .3s ease}
.mbrg-text{margin:4px 0 0;opacity:.7}
.mbrg-line-yes .mbrg-title{text-decoration:underline 1px transparent;text-underline-offset:.2em;transition:text-decoration-color .35s ease,color .3s ease}
.mbrg-line-yes .mbrg-item:hover .mbrg-title{text-decoration-color:currentColor}
/* tag – sits above the WebGL layer */
.mbrg-tag{position:absolute;z-index:4;top:var(--mbrg-tag-off);left:var(--mbrg-tag-off);line-height:1.2;font-size:13px;font-weight:600;padding:7px 12px;border-radius:99px;background:#fff;color:#111;pointer-events:none;white-space:nowrap}
.mbrg-tag-tr .mbrg-tag{left:auto;right:var(--mbrg-tag-off)}
.mbrg-tag-bl .mbrg-tag{top:auto;bottom:var(--mbrg-tag-off)}
.mbrg-tag-br .mbrg-tag{top:auto;left:auto;bottom:var(--mbrg-tag-off);right:var(--mbrg-tag-off)}
.mbrg .mbrg-tag-c{display:none}
.mbrg-tag-cap .mbrg-media .mbrg-tag{display:none}
.mbrg-tag-cap .mbrg .mbrg-tag-c{display:inline-block;position:static;margin-bottom:10px}
/* button */
.mbrg-btn{display:inline-flex;align-items:center;gap:.5em;line-height:1.2;font-size:14px;font-weight:600;padding:12px 20px;border-radius:99px;background:#111;color:#fff;text-decoration:none;cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,opacity .35s ease,transform .35s ease}
.mbrg-item .mbrg-btn{color:#fff}
.mbrg-btn svg{width:1em;height:1em;fill:currentColor}
.mbrg-btn-row{display:block;margin-top:16px}
.mbrg-btn-ov{position:absolute;z-index:4;left:var(--mbrg-btn-off);bottom:var(--mbrg-btn-off)}
.mbrg-bpos-img-br .mbrg-btn-ov{left:auto;right:var(--mbrg-btn-off)}
.mbrg-bpos-img-c .mbrg-btn-ov{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%)}
.mbrg-bhover-yes .mbrg-btn-ov{opacity:0;transform:translateY(8px)}
.mbrg-bhover-yes.mbrg-bpos-img-c .mbrg-btn-ov{transform:translate(-50%,-40%)}
.mbrg-bhover-yes .mbrg-item:hover .mbrg-btn-ov,.mbrg-bhover-yes .mbrg-btn-ov:focus-visible{opacity:1;transform:none}
.mbrg-bhover-yes.mbrg-bpos-img-c .mbrg-item:hover .mbrg-btn-ov{transform:translate(-50%,-50%)}
@media (hover:none){.mbrg-bhover-yes .mbrg-btn-ov{opacity:1;transform:none}.mbrg-bhover-yes.mbrg-bpos-img-c .mbrg-btn-ov{transform:translate(-50%,-50%)}}
/* without WebGL (editor, phone, tablet): simple zoom */
.mbrg-static .mbrg-media>img.mbrg-img{transition:transform var(--mbrg-ms) cubic-bezier(.2,.7,.2,1)}
.mbrg-static [data-fx="zoom-out"] .mbrg-img{transform:scale(var(--mbrg-zoom))}
@media (hover:hover){
  .mbrg-static [data-fx="zoom-in"]:hover .mbrg-img,.mbrg-static [data-fx="media"]:hover .mbrg-img{transform:scale(var(--mbrg-zoom))}
  .mbrg-static [data-fx="zoom-out"]:hover .mbrg-img{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.mbrg-static .mbrg-img{transition:none!important}}