/* bs_compat.css — load LAST (after misc/css/_msite/<site_id>/style_comp.css).
 *
 * style_comp.css bundles ALL of Bootstrap 3.3.7's CSS (scss_25v4/custom.scss imports
 * base/bootstrap337_legacy_dir) on top of Bootstrap 4. Two clashes, found via the
 * Summernote Gallery (Image Library) in the MCP article editor (2026-11-04):
 *
 * 1. BS3 `.fade{opacity:0}` is undone only by BS3's `.fade.in`; Bootstrap 4 JS marks
 *    shown elements `.show`, so modals/tabs opened by it stayed transparent (the
 *    gallery: invisible modal blocking the page, Esc closed it). Backdrop and tooltip
 *    keep their own BS4 `.show` opacity (.5 / .9).
 * 2. The gallery plugin wraps its items in `.images-list > .page-content`: BS3's float
 *    grid didn't care, BS4's flex `.row` does (the items' parent must be the flex
 *    container), so the images stacked vertically.
 *
 * Loaded by skins/25v4/inc_head_user.tpl and skins/_admin/inc_head_admin.tpl. */

.fade.show:not(.modal-backdrop):not(.tooltip) { opacity: 1; }

.modal.summernote-gallery .images-list > .page-content { display: flex; flex-wrap: wrap; width: 100%; }
/* max-width too: the item's own BS4 class col-md-2 caps it at 16.67% from 768px */
.modal.summernote-gallery .img-item { flex: 0 0 33.333%; max-width: 33.333%; float: none; }
/* The plugin gives each image min-height:119.66px at the cell's width: a wide image was
   stretched to that height (squashed "square"). Scale it inside the box instead. */
.modal.summernote-gallery .img-item img { object-fit: contain; }
/* Wider dialog than BS4's modal-lg (800px; only 500px below 992px): 95% of the
   window up to 1140px from 768px. 3 per row below 992px, 5 per row above. */
@media (min-width: 768px) {
    .modal.summernote-gallery .modal-dialog { max-width: min(1140px, 95vw); }
}
@media (min-width: 992px) {
    .modal.summernote-gallery .img-item { flex: 0 0 20%; max-width: 20%; }
}