.mmg-wrap{margin:20px 0;}
.mmg-filters{display:flex;gap:10px;margin-bottom:16px;}
.mmg-filters button{padding:6px 16px;border:1px solid #ccc;background:#fff;border-radius:20px;cursor:pointer;font-size:14px;}
.mmg-filters button.active{background:#222;color:#fff;border-color:#222;}
.mmg-grid{display:grid;grid-template-columns:repeat(var(--mmg-cols,4),1fr);gap:var(--mmg-gap,6px);padding:var(--mmg-padding,0);}
@media(max-width:768px){.mmg-grid{grid-template-columns:repeat(2,1fr);}}
.mmg-tile{position:relative;display:block;aspect-ratio:var(--mmg-ratio,8/5);overflow:hidden;
    border:var(--mmg-border-w,3px) solid var(--mmg-border-c,#8a2332);}
.mmg-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.mmg-tile:hover img{transform:scale(1.05);}
.mmg-tile.mmg-video::after{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;transform:translate(-50%,-50%);background:rgba(0,0,0,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") no-repeat center/22px;border-radius:50%;pointer-events:none;}
.mmg-tile.mmg-hidden{display:none;}
.mmg-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:20px;}
.mmg-pagination button{min-width:34px;height:34px;padding:0 8px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;font-size:14px;}
.mmg-pagination button.active{background:#222;color:#fff;border-color:#222;}
.mmg-pagination button.mmg-ellipsis{border:none;background:none;cursor:default;}
.mmg-pagination button:disabled{opacity:.4;cursor:not-allowed;}

/* Portrait video sizing in the lightbox.
 *
 * The orientation class (.mmg-orient-portrait) is added to the current
 * .gslide the instant it opens (see frontend.js), based on the fixed choice
 * saved in the admin when the video was added. This is plain static CSS — it
 * is never toggled reactively while the video loads or plays, and nothing
 * here touches the video element's playback, so it can't fight GLightbox's
 * own video handling.
 *
 * Why these specific selectors: GLightbox plays videos through the Plyr
 * library, which wraps the <video> like this —
 *   .gslide-media > .gvideo-wrapper > .plyr > .plyr__video-wrapper--fixed-ratio > video
 * and hardcodes aspect-ratio:16/9 on .plyr__video-wrapper--fixed-ratio (plus
 * absolutely positions the <video> inside it). So to make a portrait video
 * actually tall, we have to resize that whole Plyr chain, not just the
 * <video> — targeting only .gslide-media/video (as an earlier version did)
 * left the video overflowing a tiny 16:9 parent. Verified live on the real
 * site at desktop (1440px) and phone widths.
 *
 * Portrait videos are sized by HEIGHT (80vh) at a 9:16 box, capped at 92vw so
 * they never overflow a narrow screen; object-fit:contain keeps any not-quite
 * 9:16 portrait clip correct (letterboxed within the box rather than cropped).
 * Landscape videos are deliberately NOT touched here — they keep GLightbox's
 * default 16:9 sizing, which already works. */
.mmg-orient-portrait .gslide-media{width:auto!important;height:auto!important;max-width:none!important;}
.mmg-orient-portrait .gvideo-wrapper.local-video{width:auto!important;max-width:92vw!important;}
.mmg-orient-portrait .plyr{width:auto!important;height:80vh!important;max-height:80vh!important;max-width:92vw!important;}
.mmg-orient-portrait .plyr__video-wrapper--fixed-ratio{aspect-ratio:9/16!important;height:80vh!important;max-height:80vh!important;width:auto!important;max-width:92vw!important;padding-bottom:0!important;}
.mmg-orient-portrait video.gvideo-local{position:absolute!important;width:100%!important;height:100%!important;max-height:80vh!important;object-fit:contain!important;}