/* ============================ A PICTURE GALLERY (SHARED) ============================
   assets/templates/shared/adapt-gallery.php + assets/js/shared/adapt-gallery.js. The page around it sets
   the frame; --ag-bg (the stage behind pictures that do not fill it), --ag-accent (the site's green).
   .ag-n1: one picture, whole at its own proportions. .ag-nm: a 16:10 stage, each picture whole inside it.
   ========================================================================== */
.ag { --ag-bg: #141414; --ag-accent: #00FF50; --ag-ink: #0a0a0a; position: relative; }
.ag-stage { position: relative; cursor: zoom-in; }
.ag-slide { margin: 0; }
.ag-img { display: block; width: 100%; height: auto; }
.ag-nm .ag-stage { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ag-bg); }
.ag-nm .ag-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.ag-nm .ag-slide.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.ag-nm .ag-img { width: 100%; height: 100%; object-fit: contain; }
/* without the script: the first picture alone */
.ag:not(.ag-js) .ag-arrow, .ag:not(.ag-js) .ag-count, .ag:not(.ag-js) .ag-zoom { display: none; }

.ag .ag-arrow, .ag .ag-zoom { position: absolute; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0; border: 2px solid var(--ag-ink); border-radius: 0;
    background: rgba(10,10,10,.78); color: #f5f5f3; cursor: pointer; box-shadow: none; transition: background .15s, color .15s, opacity .15s; }
.ag .ag-arrow svg, .ag .ag-zoom svg { width: 18px; height: 18px; }
.ag .ag-arrow:hover, .ag .ag-zoom:hover, .ag .ag-arrow:focus-visible, .ag .ag-zoom:focus-visible { background: var(--ag-accent); color: var(--ag-ink); }
.ag .ag-arrow:focus-visible, .ag .ag-zoom:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; }
.ag-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.ag-next { right: 10px; top: 50%; transform: translateY(-50%); }
.ag-zoom { right: 10px; top: 10px; }
.ag-count { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 4px 8px; background: var(--ag-ink); color: var(--ag-accent); font: 800 11px/1.2 'Archivo', sans-serif; letter-spacing: .12em; pointer-events: none; }
/* on a screen with a mouse the controls show on hover or focus; on touch they stay */
@media (hover: hover) and (pointer: fine){
    .ag-js .ag-zoom { opacity: 0; }
    .ag-js:hover .ag-zoom, .ag-js:focus-within .ag-zoom { opacity: 1; }
}
@media (max-width: 600px){
    .ag .ag-arrow, .ag .ag-zoom { width: 34px; height: 34px; }
    .ag-prev { left: 6px; } .ag-next { right: 6px; } .ag-zoom { right: 6px; top: 6px; }
}

/* the full-screen view */
.ag-lb { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #050505; color: #f5f5f3; opacity: 0; transition: opacity .2s ease; padding: 64px 70px 70px; box-sizing: border-box; }
.ag-lb[hidden] { display: none; }
.ag-lb.is-on { opacity: 1; }
.ag-lb-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.ag-lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ag-lb-cap { margin: 14px 0 0; max-width: 80ch; text-align: center; font: 600 14px/1.45 'Archivo', sans-serif; color: #d0d0cc; min-height: 1em; }
.ag-lb-count { position: absolute; left: 20px; top: 22px; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; color: #00FF50; }
.ag-lb .ag-lb-btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; margin: 0; border: 2px solid #3a3a3a; border-radius: 0; background: #0a0a0a; color: #f5f5f3; cursor: pointer; box-shadow: none; }
.ag-lb .ag-lb-btn svg { width: 20px; height: 20px; }
.ag-lb .ag-lb-btn:hover, .ag-lb .ag-lb-btn:focus-visible { background: #00FF50; color: #0a0a0a; border-color: #00FF50; }
.ag-lb .ag-lb-btn:focus-visible { outline: 2px solid #f5f5f3; outline-offset: 2px; }
.ag-lb-btn[hidden] { display: none !important; }
.ag-lb-close { right: 14px; top: 12px; }
.ag-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.ag-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px){
    .ag-lb { padding: 60px 10px 80px; }
    .ag-lb-prev, .ag-lb-next { top: auto; bottom: 14px; transform: none; }
    .ag-lb-prev { left: calc(50% - 56px); } .ag-lb-next { right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce){
    .ag-nm .ag-slide, .ag-nm .ag-slide.is-on, .ag-lb, .ag .ag-arrow, .ag .ag-zoom { transition: none; }
}