/* Agilist galleries (#26, #28), styles for production/gallery.js.
 * The article gallery keeps the old EasyDNN "NewsOne gray" look (its sprite
 * and colours), the GDEX 2024 coverflow the 2sxc 3d-carousel look; the
 * lightbox is a native <dialog>. A content image linked to its own file
 * (.agl-zoom) opens in the same lightbox. */
.agl-gallery, .agl-lightbox {
  --agl-sprite: url(/desktopmodules/easydnnnews/chameleongallerypresets/themes/newsone/images/buttons.png);
}
.agl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* :where() keeps this reset at element specificity, so the component classes below win */
:where(.agl-gallery, .agl-lightbox, .agl-coverflow) button {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  box-shadow: none; text-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.agl-gallery [hidden] { display: none !important; }

/* ---------- inline gallery ---------- */
.agl-gallery {
  position: relative; width: 100%; max-width: 827px; box-sizing: border-box;
  background: #ededed; border: 1px solid #d8d8d8; border-radius: 5px;
  font-family: Verdana, Helvetica, sans-serif;
}
.agl-gallery__stage { position: relative; overflow: hidden; border-radius: 5px 5px 0 0; background: #e8e8e8; touch-action: pan-y; }
.agl-gallery--single .agl-gallery__stage { border-radius: 5px; }
.agl-gallery__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.agl-gallery__open:focus-visible { outline: 3px solid #007bff; outline-offset: -3px; }
.agl-gallery__img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.agl-gallery__zoom {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: url(/desktopmodules/easydnnnews/chameleongallerypresets/themes/newsone/images/lightbox_button_bg.png) no-repeat center;
}
.agl-gallery__open:hover .agl-gallery__zoom, .agl-gallery__open:focus-visible .agl-gallery__zoom { opacity: 1; }
.agl-gallery.is-video .agl-gallery__zoom { display: none; }
.agl-gallery__play { display: none; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(0, 0, 0, .7); }
.agl-gallery__play::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.agl-gallery.is-video .agl-gallery__play { display: block; }
.agl-gallery.is-video .agl-gallery__open { cursor: pointer; }

.agl-gallery__title {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  padding: 3px 15px 2px; color: #fff; font-size: 16px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: url(/desktopmodules/easydnnnews/chameleongallerypresets/themes/newsone/images/transparent_black_1.png);
}
.agl-gallery__stage:hover .agl-gallery__title, .agl-gallery__stage:focus-within .agl-gallery__title { opacity: 1; }

.agl-gallery__nav {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px;
  background: var(--agl-sprite) no-repeat; opacity: 0; transition: opacity .2s;
}
.agl-gallery__nav--prev { left: 10px; background-position: 0 0; }
.agl-gallery__nav--prev:hover { background-position: 0 -46px; }
.agl-gallery__nav--next { right: 10px; background-position: -46px 0; }
.agl-gallery__nav--next:hover { background-position: -46px -46px; }
.agl-gallery__stage:hover .agl-gallery__nav, .agl-gallery__nav:focus-visible { opacity: 1; }
.agl-gallery__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.agl-gallery__tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 17px; }
.agl-gallery__tool { display: block; width: 28px; height: 28px; background: var(--agl-sprite) no-repeat; opacity: .9; }
.agl-gallery__tool:hover, .agl-gallery__tool:focus-visible { opacity: 1; }
.agl-gallery__tool:focus-visible { outline: 2px solid #007bff; outline-offset: 1px; }
.agl-gallery__tool--share { width: 34px; height: 27px; background-position: 7px -92px; }
.agl-gallery__tool--share:hover { background-position: -27px -92px; }
.agl-gallery__tool--email { background-position: 0 -120px; }
.agl-gallery__tool--email:hover { background-position: -34px -120px; }
.agl-gallery__tool--download { background-position: 0 -148px; }
.agl-gallery__tool--download:hover { background-position: -34px -148px; }

.agl-gallery__strip {
  position: relative; display: flex; align-items: center; height: 100px;
  background: url(/desktopmodules/easydnnnews/chameleongallerypresets/themes/newsone/images/shadow.png) no-repeat center 1px;
}
.agl-gallery__thumbs {
  flex: 1; display: flex; align-items: center; gap: 12px; height: 100%; min-width: 0;
  list-style: none; margin: 0; padding: 0 15px; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scrollbar-width: none;
}
.agl-gallery__thumbs::-webkit-scrollbar { display: none; }
.agl-gallery__thumbs li { position: relative; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.agl-gallery__thumbs li.is-video::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(/desktopmodules/easydnnnews/chameleongallerypresets/themes/newsone/images/video_item_icon.png) no-repeat center;
}
.agl-gallery__thumb {
  display: block; width: 84px; height: 64px; box-sizing: border-box; overflow: hidden;
  border: 2px solid #fff !important; border-radius: 5px !important; box-shadow: 1px 1px 1px #adadad !important; background: #f8f8f8 !important;
}
.agl-gallery__thumb img { display: block; width: 80px; height: 60px; object-fit: cover; -webkit-user-drag: none; }
.agl-gallery__thumb:hover, .agl-gallery__thumb[aria-current="true"] { border-color: #787878 !important; }
.agl-gallery__thumb:focus-visible { outline: 2px solid #007bff; outline-offset: 1px; }
.agl-gallery__strip-nav { display: none; flex: 0 0 auto; width: 21px; height: 27px; background: var(--agl-sprite) no-repeat; }
.agl-gallery.has-overflow .agl-gallery__strip-nav { display: block; }
.agl-gallery__strip-nav--prev { margin-left: 7px; background-position: -168px -92px; }
.agl-gallery__strip-nav--prev:hover { background-position: -168px -115px; }
.agl-gallery__strip-nav--next { margin-right: 7px; background-position: -185px -92px; }
.agl-gallery__strip-nav--next:hover { background-position: -185px -115px; }
.agl-gallery__strip-nav:disabled { opacity: .35; cursor: default; }
.agl-gallery__strip-nav:focus-visible { outline: 2px solid #007bff; outline-offset: 1px; }

.agl-toast {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s;
  padding: 7px 12px; border-radius: 4px; background: rgba(0, 0, 0, .85); color: #fff;
  font: 13px/1.3 Verdana, Helvetica, sans-serif; white-space: nowrap;
}
.agl-toast.is-shown { opacity: 1; }
.agl-gallery .agl-toast { top: 10px; right: 54px; }

@media (hover: none) {
  .agl-gallery__nav { opacity: .9; }
}
@media (max-width: 600px) {
  .agl-gallery__tools { flex-direction: row; align-items: center; gap: 6px; top: 8px; right: 8px; }
  .agl-gallery__strip { height: 80px; }
  .agl-gallery__thumbs { gap: 9px; padding: 0 10px; }
  .agl-gallery__thumb { width: 68px; height: 52px; }
  .agl-gallery__thumb img { width: 64px; height: 48px; }
  .agl-gallery.has-overflow .agl-gallery__strip-nav { display: none; }
  .agl-gallery__title { font-size: 13px; padding: 2px 10px; }
  .agl-gallery .agl-toast { top: 44px; right: 8px; }
}

/* ---------- coverflow: Global DevOps Experience 2024 (#28) ---------- */
/* The old 2sxc coverflow's geometry (side slides shifted, turned 45° and
 * scaled to 0.6, fading with distance), in percent of the slide width, so it
 * scales with the content width. The image is shown whole (object-fit: contain). */
.agl-coverflow { position: relative; width: 100%; isolation: isolate; font-family: Verdana, Helvetica, sans-serif; }
.agl-coverflow__stage { position: relative; overflow: hidden; padding: 24px 0 32px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.agl-coverflow__track {
  position: relative; width: min(512px, 46%); aspect-ratio: 8 / 5; margin: 0 auto; padding: 0;
  list-style: none; perspective: 900px;
}
.agl-coverflow__slide {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  transition: transform .6s ease, opacity .6s ease, visibility 0s;
}
.agl-coverflow__slide.is-jump { transition: none; }
.agl-coverflow__item {
  position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  padding: 8px; border-radius: 5px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .2), 0 8px 20px rgba(0, 0, 0, .12);
}
.agl-coverflow__img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px; background: #e8e8e8; -webkit-user-drag: none; user-select: none; }
/* side images fade under a white veil rather than with opacity, so the
 * images stacked behind them do not show through */
.agl-coverflow__item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: #fff; opacity: var(--agl-veil, 0); transition: opacity .6s ease;
}
.agl-coverflow__slide[data-pos="0"] { z-index: 10; }
.agl-coverflow__slide[data-pos="0"] .agl-coverflow__item { cursor: zoom-in; }
.agl-coverflow__slide[data-pos="-1"] { z-index: 9; --agl-veil: .5; transform: translateX(-51%) rotateY(45deg) scale(.6); }
.agl-coverflow__slide[data-pos="1"] { z-index: 9; --agl-veil: .5; transform: translateX(51%) rotateY(-45deg) scale(.6); }
.agl-coverflow__slide[data-pos="-2"] { z-index: 8; --agl-veil: .7; transform: translateX(-59%) rotateY(45deg) scale(.6); }
.agl-coverflow__slide[data-pos="2"] { z-index: 8; --agl-veil: .7; transform: translateX(59%) rotateY(-45deg) scale(.6); }
.agl-coverflow__slide[data-pos="-3"] { z-index: 7; --agl-veil: .85; transform: translateX(-66%) rotateY(45deg) scale(.6); }
.agl-coverflow__slide[data-pos="3"] { z-index: 7; --agl-veil: .85; transform: translateX(66%) rotateY(-45deg) scale(.6); }
.agl-coverflow__slide[data-pos="-4"] { transform: translateX(-72%) rotateY(45deg) scale(.6); }
.agl-coverflow__slide[data-pos="4"] { transform: translateX(72%) rotateY(-45deg) scale(.6); }
/* parked out of sight: fade out first, then leave the tab order and the a11y tree */
.agl-coverflow__slide[data-pos="-4"], .agl-coverflow__slide[data-pos="4"] {
  z-index: 6; opacity: 0; visibility: hidden; transition: transform .6s ease, opacity .6s ease, visibility 0s .6s;
}
.agl-coverflow__slide:not([data-pos="0"]):hover { --agl-veil: .25; }
.agl-coverflow__item:focus-visible { outline: 3px solid #007bff; outline-offset: 3px; }
/* the theme rings every focused button, also after a mouse click */
.agl-coverflow button:focus:not(:focus-visible) { outline: none; }
.agl-coverflow__zoom {
  position: absolute; inset: 8px; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: rgba(0, 0, 0, .3) no-repeat center / 48px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff'%3E%3Ccircle cx='24' cy='24' r='22.5' stroke-width='2'/%3E%3Ccircle cx='22' cy='22' r='8' stroke-width='2.5'/%3E%3Cpath d='M28 28l7 7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.agl-coverflow__caption {
  position: absolute; left: 8px; right: 8px; bottom: 8px; pointer-events: none; opacity: 0; transition: opacity .2s;
  padding: 4px 12px; color: #fff; font-size: 14px; line-height: 1.45; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, .65);
}
.agl-coverflow__slide[data-pos="0"] .agl-coverflow__item:hover .agl-coverflow__zoom,
.agl-coverflow__slide[data-pos="0"] .agl-coverflow__item:focus-visible .agl-coverflow__zoom,
.agl-coverflow__slide[data-pos="0"] .agl-coverflow__item:hover .agl-coverflow__caption,
.agl-coverflow__slide[data-pos="0"] .agl-coverflow__item:focus-visible .agl-coverflow__caption { opacity: 1; }
.agl-coverflow__nav {
  position: absolute; top: 50%; z-index: 20; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .95); box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.agl-coverflow__nav::after { content: ''; width: 11px; height: 11px; border: solid #444; border-width: 0 0 3px 3px; }
.agl-coverflow__nav--prev { left: 10px; }
.agl-coverflow__nav--prev::after { transform: translateX(2px) rotate(45deg); }
.agl-coverflow__nav--next { right: 10px; }
.agl-coverflow__nav--next::after { transform: translateX(-2px) rotate(-135deg); }
.agl-coverflow__nav:hover { background: #fff; }
.agl-coverflow__nav:hover::after { border-color: #007bff; }
.agl-coverflow__nav:focus-visible { outline: 3px solid #007bff; outline-offset: 2px; }
@media (hover: none) {
  /* touch: a small magnifier badge says the centre image opens */
  .agl-coverflow__slide[data-pos="0"] .agl-coverflow__zoom {
    opacity: 1; inset: auto 14px 14px auto; width: 34px; height: 34px; border-radius: 50%;
    background-color: rgba(0, 0, 0, .55); background-size: 34px 34px;
  }
}
@media (max-width: 600px) {
  .agl-coverflow__stage { padding: 16px 0 24px; }
  .agl-coverflow__track { width: 72%; perspective: 600px; }
  .agl-coverflow__item { padding: 5px; }
  .agl-coverflow__zoom { inset: 5px; }
  .agl-coverflow__caption { left: 5px; right: 5px; bottom: 5px; font-size: 13px; padding: 2px 8px; }
  /* only the direct neighbours peek in from the screen edges */
  .agl-coverflow__slide[data-pos="-2"], .agl-coverflow__slide[data-pos="2"],
  .agl-coverflow__slide[data-pos="-3"], .agl-coverflow__slide[data-pos="3"] {
    opacity: 0; visibility: hidden; transition: transform .6s ease, opacity .6s ease, visibility 0s .6s;
  }
  .agl-coverflow__nav { width: 40px; height: 40px; margin-top: -20px; }
  .agl-coverflow__nav--prev { left: 4px; }
  .agl-coverflow__nav--next { right: 4px; }
}

/* ---------- a content image linked to its own file (ART-04, TRN-35) ---------- */
/* The link wraps the image tightly (its box is the image's, aligned like the
 * theme's images), so the page layout stays as it was; the magnifier badge of
 * the coverflow's touch view sits in the image's lower right corner and
 * darkens on hover and keyboard focus. */
.agl-zoom { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; cursor: zoom-in; }
.agl-zoom > img { display: block; }
.agl-zoom::after {
  content: ''; position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, .55) no-repeat center / 34px 34px; transition: background-color .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff'%3E%3Ccircle cx='24' cy='24' r='22.5' stroke-width='2'/%3E%3Ccircle cx='22' cy='22' r='8' stroke-width='2.5'/%3E%3Cpath d='M28 28l7 7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.agl-zoom:hover::after, .agl-zoom:focus-visible::after { background-color: rgba(0, 0, 0, .8); }

/* ---------- lightbox ---------- */
html.agl-lock { overflow: hidden; }
.agl-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; color: #fff; background: rgba(0, 0, 0, .88);
  font-family: Verdana, Helvetica, sans-serif;
}
.agl-lightbox:not([open]) { display: none; }
.agl-lightbox::backdrop { background: transparent; }
.agl-lightbox__stage {
  position: absolute; inset: 0; box-sizing: border-box; padding: 56px 84px 64px;
  display: flex; align-items: center; justify-content: center; touch-action: pan-y;
}
.agl-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.agl-lightbox__media { line-height: 0; padding: 6px; background: #fff; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.agl-lightbox__img {
  display: block; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; user-select: none;
  max-width: calc(100vw - 180px); max-height: calc(100vh - 150px);
}
/* coverflow files narrower than 600 px: up to 2x, inside the same box */
.agl-lightbox__img--upscale { width: min(var(--agl-w), calc(100vw - 180px), calc((100vh - 150px) * var(--agl-ar))); }
.agl-lightbox__video {
  display: block; border: 0; background: #000; aspect-ratio: 16 / 9; height: auto;
  width: min(calc(100vw - 180px), calc((100vh - 150px) * 16 / 9));
}
.agl-lightbox__caption { margin-top: 10px; max-width: calc(100vw - 180px); font-size: 14px; line-height: 1.4; text-align: center; color: #eee; }
.agl-lightbox__counter { margin-left: .75em; color: #bbb; white-space: nowrap; }
.agl-lightbox__nav { position: absolute; top: 0; bottom: 0; width: 84px; display: flex; align-items: center; justify-content: center; }
.agl-lightbox__nav--prev { left: 0; }
.agl-lightbox__nav--next { right: 0; }
.agl-lightbox__nav::before { content: ''; width: 36px; height: 46px; border-radius: 2px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.agl-lightbox__nav::after { content: ''; position: absolute; width: 10px; height: 10px; border: solid #333; border-width: 0 0 3px 3px; }
.agl-lightbox__nav--prev::after { transform: translateX(3px) rotate(45deg); }
.agl-lightbox__nav--next::after { transform: translateX(-3px) rotate(-135deg); }
.agl-lightbox__nav:hover::before { background: #f0f0f0; }
/* a gallery with a single picture: no arrows and no "1 / 1" counter (#255) */
.agl-lightbox--single .agl-lightbox__nav, .agl-lightbox--single .agl-lightbox__counter { display: none; }
.agl-lightbox__close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 2px;
  background: #fff !important; color: #222 !important; font-size: 30px !important; line-height: 40px; text-align: center;
}
.agl-lightbox__close::before { content: '\00d7'; }
.agl-lightbox__share {
  position: absolute; right: 12px; bottom: 14px; height: 32px; padding: 0 12px 0 34px !important; border-radius: 3px;
  background: #fff no-repeat 10px center !important; background-size: 16px 16px !important; color: #222 !important; font-size: 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23333'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3C/g%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") !important;
}
.agl-lightbox button:focus-visible { outline: 3px solid #4da3ff; outline-offset: 2px; }
.agl-lightbox .agl-toast { left: 50%; bottom: 60px; transform: translateX(-50%); }

/* a single content image (.agl-zoom): no counter or Share; pinch zoom stays on.
 * The Zoom button (where Share sits) appears when the screen shows the image
 * well below its own size; zoomed in, the image fills the height between the
 * button bars and the stage scrolls. */
.agl-lightbox--zoom .agl-lightbox__counter, .agl-lightbox--zoom .agl-lightbox__share { display: none; }
.agl-lightbox--zoom .agl-lightbox__stage { touch-action: manipulation; }
.agl-lightbox__zoom { display: none; }
.agl-lightbox--zoom.is-zoomable .agl-lightbox__zoom {
  display: block; position: absolute; right: 12px; bottom: 14px; height: 32px; padding: 0 12px 0 34px !important; border-radius: 3px;
  background: #fff no-repeat 10px center !important; background-size: 16px 16px !important; color: #222 !important; font-size: 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333'%3E%3Ccircle cx='10' cy='10' r='6.5' stroke-width='2.2'/%3E%3Cpath d='M15 15l6 6' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.agl-lightbox--zoom.is-zoomable .agl-lightbox__img { cursor: zoom-in; }
.agl-lightbox.is-zoomed .agl-lightbox__stage {
  display: flex; align-items: flex-start; justify-content: flex-start; padding: 56px 0; overflow: auto; overscroll-behavior: contain;
}
.agl-lightbox.is-zoomed .agl-lightbox__figure { margin: auto; max-width: none; max-height: none; }
.agl-lightbox.is-zoomed .agl-lightbox__media { padding: 0; }
.agl-lightbox.is-zoomed .agl-lightbox__img { max-width: none; max-height: none; height: auto; cursor: zoom-out; }
.agl-lightbox.is-zoomed .agl-lightbox__caption { display: none; }

@media (max-width: 600px) {
  .agl-lightbox__stage { padding: 56px 8px 76px; }
  .agl-lightbox__img { max-width: calc(100vw - 28px); max-height: calc(100vh - 170px); }
  .agl-lightbox__img--upscale { width: min(var(--agl-w), calc(100vw - 28px), calc((100vh - 170px) * var(--agl-ar))); }
  .agl-lightbox__video { width: min(calc(100vw - 28px), calc((100vh - 170px) * 16 / 9)); }
  .agl-lightbox__caption { max-width: calc(100vw - 28px); font-size: 13px; }
  .agl-lightbox__nav { top: auto; bottom: 8px; width: 64px; height: 56px; }
  .agl-lightbox__share { left: 50%; right: auto; bottom: 20px; transform: translateX(-50%); }
  .agl-lightbox--zoom.is-zoomable .agl-lightbox__zoom { left: 50%; right: auto; bottom: 12px; transform: translateX(-50%); }
}
/* a phone turned sideways: the single image takes the screen height */
@media (max-height: 500px) {
  .agl-lightbox--zoom:not(.is-zoomed) .agl-lightbox__stage { padding: 8px 60px; }
  .agl-lightbox--zoom .agl-lightbox__img { max-width: calc(100vw - 132px); max-height: calc(100vh - 28px); }
  .agl-lightbox--zoom .agl-lightbox__caption { display: none; }
  .agl-lightbox--zoom.is-zoomable .agl-lightbox__zoom { left: auto; right: 12px; bottom: auto; top: 64px; width: 40px; height: 40px; padding: 0 !important; transform: none; background-position: center !important; background-size: 20px 20px !important; font-size: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .agl-gallery *, .agl-lightbox *, .agl-coverflow *, .agl-coverflow *::after, .agl-zoom::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Without JavaScript (#213) the frozen EasyDNN markup stays as it is: absolutely
 * positioned boxes with pixel sizes, one large picture, and arrows and buttons
 * that only its lost script could work. Here it is laid out as a plain list
 * instead: the first picture at the width of the column, then every thumbnail,
 * each a link to its photo or video (the links are in the markup); the controls
 * that need a script are not shown. */
@media (scripting: none) {
  .chameleon_slider { width: auto !important; height: auto !important; max-width: 827px; }
  .chameleon_slider .item_info, .chameleon_slider .title_box, .chameleon_slider .preloading_item,
  .chameleon_slider a.navigation, .chameleon_slider .navigation_button, .chameleon_slider .standalone_button,
  .chameleon_slider .social_buttons, .chameleon_slider .social_buttons_toggle { display: none !important; }
  .chameleon_slider .main_panel { position: relative !important; width: auto !important; height: auto !important; }
  .chameleon_slider .main_panel .items_wrapper, .chameleon_slider .main_panel .items_wrapper .item_container { position: static !important; width: auto !important; height: auto !important; }
  .chameleon_slider .main_panel .items_wrapper .item_container > img { display: block; position: static !important; width: 100% !important; height: auto !important; }
  .chameleon_slider .thumb_wrapper, .chameleon_slider .thumb_wrapper .thumb_window, .chameleon_slider .thumb_wrapper .thumb_window .thumb_container,
  .chameleon_slider .thumb_wrapper .thumb_window .thumb_container ul { position: static !important; float: none !important; width: auto !important; height: auto !important; overflow: visible !important; background: none !important; }
  .chameleon_slider .thumb_wrapper .thumb_window .thumb_container { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0 0; }
  .chameleon_slider .thumb_wrapper .thumb_window .thumb_container ul { display: contents !important; list-style: none; }
  .chameleon_slider .thumb_wrapper .thumb_window .thumb_container ul li { position: relative; float: none !important; margin: 0 !important; }
  .chameleon_slider .thumb_wrapper .thumb_window .thumb_container ul li a { display: block; }
  .chameleon_slider .thumb_wrapper .thumb_window .thumb_container ul li .item_type_icon { pointer-events: none; }
}