/* ============================================================ meggybug gallery - masonry grid, hover overlay, lightbox styling Moved out of the plugin on 2026-08-02 for the same reason as meggybug-gallery.js: it lived in a single-quoted PHP string where one apostrophe was fatal. ============================================================ */ /* ---- Artwork item wrapper ---- */ .meggybug-artwork-item { position: relative; overflow: hidden; border-radius: 4px; cursor: pointer; } .meggybug-artwork-item .wp-block-post-featured-image img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .meggybug-artwork-item:hover .wp-block-post-featured-image img { transform: scale(1.03); } /* ---- Hover overlay ---- */ .meggybug-artwork-overlay { position: absolute !important; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); transform: translateY(100%); transition: transform 0.35s ease; pointer-events: none; } .meggybug-artwork-item:hover .meggybug-artwork-overlay { transform: translateY(0); } .meggybug-artwork-overlay .wp-block-post-title { color: #ffffff !important; font-size: 1rem !important; margin: 0 0 4px 0 !important; } .meggybug-artwork-overlay .wp-block-post-excerpt { color: rgba(255,255,255,0.85) !important; font-size: 0.8rem !important; margin: 0 !important; } .meggybug-artwork-overlay .wp-block-post-excerpt p { margin: 0 !important; } /* ---- Medium: present in the markup so the lightbox script can read it, but never shown on the grid itself. ---- */ .meggybug-artwork-item .meggybug-artwork-medium { display: none !important; } /* ---- Lightbox typography ---- GLightbox ships its own font stack. The lightbox markup is appended directly to , so inheriting pulls whatever font your theme sets in theme.json. No font name is hard coded here, so it follows the theme automatically. ---- */ .glightbox-container .gslide-description, .glightbox-container .gslide-description *, .glightbox-container .gslide-title, .glightbox-container .gslide-desc { font-family: inherit !important; } /* ---- Lightbox caption ---- */ .gslide-description .mb-cap-title { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; } .gslide-description .mb-cap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .gslide-description .mb-cap-medium { font-size: 0.85rem; opacity: 0.75; } .gslide-description .mb-cap-credit { font-style: italic; font-size: 0.8rem; opacity: 0.6; margin-left: auto; white-space: nowrap; } /* ---- Gallery width ---- The grid sits inside the theme constrained layout, which caps it at the content width and leaves the artwork looking like thumbnails. Widen just this query so the pieces read at a decent size. Tune the max-width below; it is the only number that controls how large they get. */ .wp-block-query:has(> .meggybug-masonry) { max-width: min(1600px, 100%) !important; width: 100%; margin-left: auto; margin-right: auto; } /* ---- Masonry grid ---- */ .meggybug-masonry.wp-block-post-template { display: block !important; column-count: 3 !important; column-gap: 20px !important; } .meggybug-masonry.wp-block-post-template > li { break-inside: avoid; margin-bottom: 20px; display: block !important; width: 100% !important; } .meggybug-masonry .wp-block-post-featured-image img { width: 100%; height: auto; display: block; border-radius: 4px; } @media (max-width: 768px) { .meggybug-masonry.wp-block-post-template { column-count: 2 !important; } } @media (max-width: 480px) { .meggybug-masonry.wp-block-post-template { column-count: 1 !important; } }