/**
 * GLightbox Gallery Module -- static skin CSS
 *
 * @package    GLightbox Gallery Module
 * @copyright  Copyright (C) 2026 Laszlo Blaho. All rights reserved.
 * @license    GNU General Public License version 2 or later
 *
 * Split out of mod_glightbox.php's addInlineStyle() calls: shared, layout-
 * independent grid/thumbnail rules that apply to every gallery. Registered
 * via WebAssetManager::registerAndUseStyle() whenever Load CSS is on, so the
 * browser caches it across page loads instead of re-downloading it inline
 * on every request. (The single-visible-item overlay used to live here too;
 * it moved to its own mod_glightbox_single.css so an ordinary gallery still
 * never requests it -- see that file's header.)
 */

/* --- Shared gallery grid + thumbnail rules --- */
        .mod-glightbox .glightbox-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .mod-glightbox .glightbox-item {
            flex: 0 0 auto;
        }
        .mod-glightbox .glightbox-thumbnail {
            display: block;
            overflow: hidden;
            border-radius: 4px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .mod-glightbox .glightbox-thumbnail:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .mod-glightbox .glightbox-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .mod-glightbox .glightbox-thumbnail picture {
            display: block;
            width: 100%;
            height: 100%;
        }
        .mod-glightbox .glightbox-video-play {
            position: relative;
        }
        .mod-glightbox .glightbox-video-play::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*
             * Percentage, capped by max-width/max-height at the original
             * fixed size: on a normal/large grid thumbnail the cap wins and
             * this looks exactly as it always has, but on a small filmstrip
             * cell (this same class is reused there -- see tmpl/inline.php,
             * and the filmstrip thumbnails from 4.14.x) the percentage wins
             * instead, shrinking the badge below the fixed 60px it used to
             * be pinned to. A fixed pixel size can only ever be right for
             * one thumbnail size; this scales with whatever box it lands
             * in and is never bigger than that box to begin with.
             */
            width: 60%;
            height: 60%;
            max-width: 60px;
            max-height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            pointer-events: none;
        }
        .mod-glightbox .glightbox-video-play::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-42%, -50%);
            /* Same scale-but-cap reasoning as ::after above. A border-hack
               triangle cannot use percentage border-widths (the spec does
               not support it), so this is a clip-path triangle instead --
               genuinely scalable, not just a different fixed size. */
            width: 30%;
            height: 26%;
            max-width: 20px;
            max-height: 24px;
            background: #333;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            z-index: 1;
            pointer-events: none;
        }