/* overlay */
.mwp-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

/* box */
.mwp-box{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    padding:6px;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
    position: relative;
    max-width: 95vw;
}

/* header band */
.mwp-header{
    width:100%;
    padding:8px 12px;
    text-align:center;
    font-weight:600;
}

/* close */
.mwp-close{
    position:absolute;
    right:12px;
    top:10px;
    background:transparent;
    border:0;
    font-size:28px;
    cursor:pointer;
    color:#333;
    z-index: 10001;
}

/* grid wrapper */
.mwp-grid-wrap {
    width:100%;
    height: calc(100% - 0px);
}

/* grid */
.mwp-grid{
    display:grid;
    gap:8px;
    width:100%;
    /* height: calc(80vh - header);  handled by content */
}

/* cells */
.mwp-cell{
    width:100%;
    height: 0;
    padding-bottom: 70%; /* aspect approx; will fill grid cell */
    position: relative;
    overflow: hidden;
    border-radius:8px;
    background: #f2f2f2;
}
.mwp-cell img{
    position:absolute;
    top:0; left:0; width:100%; height:100%; object-fit:cover;
    transition: transform .25s ease;
}
.mwp-cell:hover img{ transform: scale(1.03); }

/* caption overlay at bottom of the cell */
.mwp-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:6px 8px;
    box-sizing:border-box;
    backdrop-filter: blur(0px);
    text-align:left;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* responsive: reduce gap on small screens */
@media (max-width:600px){
    .mwp-grid { gap:6px; }
    .mwp-box { padding:6px; }
}