/**
 ------------------------------------------------------------------------
 SOLIDRES - Accommodation booking extension for Joomla
 ------------------------------------------------------------------------
 * @author    Solidres Team <contact@solidres.com>
 * @website   https://www.solidres.com
 * @copyright Copyright (C) 2013 Solidres. All Rights Reserved.
 * @license   GNU General Public License version 3, or later
 ------------------------------------------------------------------------
 */

/* ======================================================================
   Solidres chrome around the vendored nanogallery2 stylesheet.

   Two states share the same element: before nanogallery2 runs, the
   container still holds the server-rendered <a><img></a> list, which is
   the no-script and crawler view; nanogallery2 then empties it, adds its
   own .ngy2_container class and rebuilds the mosaic. Everything scoped to
   .sr-nanogallery:not(.ngy2_container) therefore styles the pre-init view
   only, and is dropped the moment the gallery takes over.
   ====================================================================== */
.sr-nanogallery {
    --sr-ngy-focus:        #1f496e;
    --sr-ngy-focus-offset: #ffffff;
    --sr-ngy-placeholder:  rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    .sr-nanogallery {
        --sr-ngy-focus:        #8ab4f8;
        --sr-ngy-focus-offset: #101418;
        --sr-ngy-placeholder:  rgba(255, 255, 255, 0.08);
    }
}

[data-bs-theme="dark"] .sr-nanogallery {
    --sr-ngy-focus:        #8ab4f8;
    --sr-ngy-focus-offset: #101418;
    --sr-ngy-placeholder:  rgba(255, 255, 255, 0.08);
}

/* --- Pre-initialisation / no-script view ---------------------------- */

/* font-size:0 collapses the accessible link text that nanogallery2 reads
   back as the thumbnail title; it stays in the DOM for assistive tech and
   for the alt attribute the gallery generates from it. */
.sr-nanogallery:not(.ngy2_container) {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 0;
}

.sr-nanogallery__item {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    background-color: var(--sr-ngy-placeholder);
}

/* A fixed tile keeps the pre-init strip tidy and reserves its space, so the
   handover to the mosaic does not shift the page. The src is the same
   thumbnail URL nanogallery2 requests, so nothing is downloaded twice. */
.sr-nanogallery__thumb {
    display: block;
    width: 120px;
    height: 90px;
    max-width: 100%;
    object-fit: cover;
}

/* --- Focus ---------------------------------------------------------- */

/* nanogallery2 builds its thumbnails as plain divs; sr-nanogallery.js makes
   them focusable, so both the pre-init links and the mosaic tiles need a
   ring that carries over both colour schemes. */
.sr-nanogallery__item:focus-visible,
.sr-nanogallery .nGY2GThumbnail:focus-visible {
    outline: 2px solid var(--sr-ngy-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sr-ngy-focus-offset);
}