/**
 * GLightbox Gallery Module -- single-visible-item overlay 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: the count badge
 * and hover play affordance shown when a gallery renders exactly one visible
 * tile. Kept as its own static file rather than folded into
 * mod_glightbox_skin.css, and registered only when $singleVisibleItem is
 * true (and Load CSS is on) -- an ordinary multi-tile gallery should not
 * request a stylesheet it has no use for, cached or not.
 */

/* --- Single-visible-item overlay (count badge, hover play affordance) --- */
            .mod-glightbox-single .glightbox-thumbnail {
                position: relative;
            }
            .mod-glightbox-single-count {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 45px;
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 0 12px;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40));
                color: #fff;
                line-height: 1;
                pointer-events: none;
            }
            .mod-glightbox-single-count svg {
                width: 20px;
                height: 20px;
                flex-shrink: 0;
            }
            .mod-glightbox-single-hover {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1);
                width: 60px;
                height: 60px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 50%;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                pointer-events: none;
            }
            .mod-glightbox-single-hover::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-40%, -50%);
                width: 0;
                height: 0;
                border-left: 20px solid #333;
                border-top: 12px solid transparent;
                border-bottom: 12px solid transparent;
            }

            @media (min-width: 769px) {
                .mod-glightbox-single .glightbox-thumbnail:hover .mod-glightbox-single-hover,
                .mod-glightbox-single .glightbox-thumbnail:focus-visible .mod-glightbox-single-hover {
                    transform: translate(-50%, -50%) scale(1.12);
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
                }
            }