/* ! ============================================================================================================ */
/* !                                   GALLERY PAGE STYLES  (gallery.html only)                                    */
/* ! ============================================================================================================ */
/* ! ---- SECTIONS ---- */
.gx-section { margin-bottom: 2.5rem; }
.gx-section h2 { color: #446e9b; font-size: 1.5rem; border-bottom: 2px solid #446e9b; padding-bottom: .4rem; margin-bottom: 1rem; }
.gx-section h2 .badge { background: #446e9b; font-size: .8rem; vertical-align: middle; }
/* # ---- END SECTIONS ---- */
/* ! ---- CAROUSEL: MAIN WINDOW ---- */
.gx-main { position: relative; height: 480px; background: #0b1420; border-radius: 6px; overflow: hidden; outline: none; }
.gx-main:focus-visible { box-shadow: 0 0 0 3px #446e9b; }
.gx-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.gx-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gx-arrow, .gx-zoom { position: absolute; z-index: 2; border: 0; background: rgba(11, 20, 32, .45); color: #fff;
  border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; opacity: .8; }
.gx-arrow:hover, .gx-zoom:hover { opacity: 1; background: #446e9b; }
.gx-prev { left: 8px; top: 45%; } .gx-next { right: 8px; top: 45%; }
.gx-zoom { top: 8px; right: 8px; width: 32px; height: 32px; font-size: .85rem; }
.gx-count { position: absolute; top: 10px; left: 12px; color: #c9d6e6; font-size: .7rem; text-shadow: 0 1px 2px #000; }
.gx-empty { padding: 2rem; text-align: center; color: #6c7a89; border: 1px dashed #c9d6e6; border-radius: 6px; }
/* # ---- END CAROUSEL: MAIN WINDOW ---- */
/* ! ---- CAROUSEL: PREVIEW ROW ---- */
.gx-strip { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.gx-row-btn { flex: 0 0 30px; height: 64px; border: 1px solid #446e9b; background: #fff; color: #446e9b; border-radius: 4px; }
.gx-row-btn:hover { background: #446e9b; color: #fff; }
.gx-thumbs { flex: 1; display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; padding: 3px 1px; }
.gx-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden;
  background: #1a2533; opacity: .65; transition: opacity .15s; }
.gx-thumb[hidden] { display: none; }
.gx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-thumb:hover { opacity: 1; }
.gx-thumb.active { border-color: #446e9b; opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #446e9b; }
.gx-wanted { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  color: #c9d6e6; background: repeating-linear-gradient(45deg, #1d2b3d, #1d2b3d 10px, #22344a 10px, #22344a 20px); text-align: center; }
.gx-wanted i { font-size: 1.6rem; color: #6f97c4; }
.gx-wanted-big { cursor: default; padding-bottom: 15%; }
.gx-wanted-big i { font-size: 3.5rem; }
.gx-wanted-big span { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gx-wanted-big small { font-size: .75rem; color: #9fb3cc; }
@media (max-width: 576px) { .gx-main { height: 300px; } .gx-thumb, .gx-row-btn { height: 52px; } .gx-thumb { width: 52px; } }
/* # ---- END CAROUSEL: PREVIEW ROW ---- */
/* ! ---- CAPTION OVERLAY ---- */
/* # slim strip on the bottom edge of the picture */
.gx-over { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; pointer-events: none; text-align: left;
  padding: 1rem .7rem .4rem; color: #f2f6fb; line-height: 1.25; font-size: .78rem; z-index: 1;
  background: linear-gradient(to top, rgba(8, 16, 30, .85) 0%, rgba(8, 16, 30, .6) 65%, rgba(8, 16, 30, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.gx-over a { pointer-events: auto; }
.gx-over .gx-name { font-weight: 700; font-size: .86rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-over .gx-years { font-weight: 400; color: #c9d6e6; font-size: .7rem; }
.gx-over .gx-note { color: #ff9aa5; font-weight: 700; font-size: .68rem; }
.gx-over .gx-cap { margin: 0; color: #e3eaf3; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-over .gx-cat { display: inline-block; background: #446e9b; color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0 .35em; border-radius: 3px; margin-right: .2em; }
.gx-over .gx-credit { font-size: .64rem; color: #aebfd3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-over .gx-credit a { color: #aebfd3; text-decoration: none; }
.gx-over .gx-credit a:hover { color: #fff; text-decoration: underline; }
/* # ---- END CAPTION OVERLAY ---- */
/* ! ---- LIGHTBOX ---- */
#gx-lightbox { position: fixed; inset: 0; z-index: 2000; background: #0b1420; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3rem 3.5rem 1rem; }
#gx-lightbox[hidden] { display: none; }
.gx-lb-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
#gx-lb-img { max-width: 100%; object-fit: contain; box-shadow: 0 4px 30px #000; background: #fff; display: block; }
#gx-lb-cap { line-height: 1.3; font-size: .8rem; padding: 1.2rem .8rem .4rem; }
#gx-lb-cap .gx-name { font-size: .95rem; }
#gx-lb-cap .gx-cap { -webkit-line-clamp: 2; line-clamp: 2; }
#gx-lb-cap .gx-credit { font-size: .7rem; }
.gx-lb-btn { position: absolute; background: none; border: 0; color: #fff; font-size: 2.2rem; opacity: .8; line-height: 1; }
.gx-lb-btn:hover { opacity: 1; }
.gx-lb-close { top: .6rem; right: 1rem; }
.gx-lb-prev { left: .5rem; top: 45%; }
.gx-lb-next { right: .5rem; top: 45%; }
@media (max-width: 576px) {
  #gx-lightbox { padding: 3rem .5rem 1rem; }
  .gx-lb-prev, .gx-lb-next { top: auto; bottom: .5rem; }
}
/* # ---- END LIGHTBOX ---- */
/* # ------------------------------------------- END GALLERY PAGE STYLES ------------------------------------------ */