/* The photo gallery: the carousel every gallery of the site is (plus/galleries/gallery.js runs it; tools/galleries.py writes its markup, also for the sword family pages).
   Flat, as the design system asks (plus/system.css, DESIGN-SYSTEM.md): ink and paper, a 1 px hairline, square corners, no shadow, no gradient; the keyboard ring is crimson
   with a white gap; a state is a colour (hover one step lighter, pressed black, selected paper outline, disabled grey) and nothing moves or scales.

   data-controls="top"      a strip of  previous | thumbnails | next  stands above the viewer: only the gallery directly below the hero (data-role="primary") and only when its
                            pictures differ in size (data-shape="mixed")
   data-controls="bottom"   the same strip stands below it: a primary gallery whose pictures all have the same width and height (the viewer never changes height, so the controls do
                            not jump) and every other gallery (data-role="other"), whatever its pictures
   tools/galleries.py decides it at build time and writes it into the markup (and puts the strip first or last in the markup, so that the Tab key goes the way the eye does).
   The viewer is as wide as its container and shows each photo whole, at its own shape (no bars, no cropping), whatever the width of the window: with pictures of different shapes it
   changes height from photo to photo, and a strip below it moves with it.
   A click or tap on the photo opens it in a full-screen viewer (.se-gal-lb); the expand icon puts the whole gallery on the screen (.is-fs), with larger thumbnails. */

.se-gal, .se-gal-lb {
  --g-bg: var(--se-ink, #15120f);
  --g-hover: var(--se-n800, #3a342e);
  --g-press: #000000;
  --g-fg: var(--se-paper, #f6f2eb);
  --g-fg2: var(--se-on-dark-2, #bdb4a6);
  --g-line: var(--se-n500, #766e63);
  --g-rule: var(--se-n800, #3a342e);
  --g-off: var(--se-n500, #766e63);
  --g-ring: var(--se-red, #ad2a1e);
  --g-display: var(--se-display, Oswald, "Arial Narrow", "Helvetica Neue", sans-serif);
  --g-text: var(--se-text, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
  --g-ease: .15s ease;
}

/* ---------------------------------------------------------------- the widget the carousel replaces: it keeps its place and its spacing, but not the width the old gallery had (the page
   builder's per-widget rule, e.g. 80%, is more specific than any class: !important): the carousel is as wide as its container, whatever the old widget was set to */
.elementor-element.elementor-widget-se-gallery { width: 100% !important; max-width: 100% !important; min-width: 0; --container-widget-width: 100%; --container-widget-flex-grow: 1; align-self: stretch; }

/* ---------------------------------------------------------------- the carousel */
.se-gal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--g-bg);
  color: var(--g-fg);
  font: 400 14px/1.5 var(--g-text);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.se-gal *, .se-gal *::before, .se-gal *::after { box-sizing: border-box; }
.se-gal [hidden], .se-gal-lb[hidden], .se-gal-lb [hidden] { display: none !important; }
.se-gal :is(ul, li, figure, p) { margin: 0; padding: 0; list-style: none; }
.se-gal img { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.se-gal__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- the buttons (previous, next, expand, close): one square button, ink with a hairline */
.se-gal .se-gal__btn, .se-gal-lb .se-gal__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--g-line);
  border-radius: 0;
  background: var(--g-bg);
  color: var(--g-fg);
  font: inherit;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--g-ease), border-color var(--g-ease), color var(--g-ease);
}
.se-gal .se-gal__btn svg, .se-gal-lb .se-gal__btn svg { display: block; width: 22px; height: 22px; pointer-events: none; }
@media (hover: hover) {   /* (a finger that has tapped a button must not leave it lit) */
  .se-gal .se-gal__btn:hover:not(:disabled), .se-gal-lb .se-gal__btn:hover:not(:disabled) { background: var(--g-hover); border-color: var(--g-fg); color: #fff; }
}
.se-gal .se-gal__btn:active:not(:disabled), .se-gal-lb .se-gal__btn:active:not(:disabled) { background: var(--g-press); border-color: var(--g-fg); color: #fff; }
.se-gal .se-gal__btn:focus-visible, .se-gal-lb .se-gal__btn:focus-visible { outline: 2px solid var(--g-ring); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.se-gal .se-gal__btn:disabled, .se-gal-lb .se-gal__btn:disabled { background: var(--g-bg); border-color: var(--g-rule); color: var(--g-off); cursor: not-allowed; }

/* ---------------------------------------------------------------- the strip: previous | thumbnails | next, in one centred group (the buttons are right next to the thumbnails;
   the thumbnails take the width they need and scroll when there are more than fit) */
.se-gal .se-gal__strip { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 12px; background: var(--g-bg); }
.se-gal[data-controls="top"] > .se-gal__strip { border-bottom: 1px solid var(--g-rule); }
.se-gal[data-controls="bottom"] > .se-gal__strip { border-top: 1px solid var(--g-rule); }
.se-gal .se-gal__bar { position: relative; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.se-gal .se-gal__bar::-webkit-scrollbar { display: none; }
.se-gal .se-gal__thumbs { display: flex; gap: 8px; width: max-content; margin: 0; padding: 6px; }
.se-gal .se-gal__thumbs > li { flex: none; }
.se-gal .se-gal__thumb {
  position: relative;
  display: block;
  width: 64px;
  height: 48px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--g-hover);
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.se-gal .se-gal__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity var(--g-ease); }
@media (hover: hover) {
  .se-gal .se-gal__thumb:hover img { opacity: 1; }
}
.se-gal .se-gal__thumb:active img, .se-gal .se-gal__thumb[aria-current="true"] img { opacity: 1; }
.se-gal .se-gal__thumb:active:not([aria-current="true"]) img { opacity: .8; }
.se-gal .se-gal__thumb[aria-current="true"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid var(--g-fg); pointer-events: none; }
.se-gal .se-gal__thumb:focus-visible { outline: 2px solid var(--g-ring); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* ---------------------------------------------------------------- the viewer: as wide as the gallery, as tall as the photo needs */
.se-gal .se-gal__stage { position: relative; width: 100%; min-width: 0; overflow: hidden; background: var(--g-bg); touch-action: pan-y; }
.se-gal .se-gal__slide { position: relative; display: block; width: 100%; margin: 0; }
.se-gal .se-gal__slide img { width: 100%; height: auto; object-fit: contain; }
.se-gal .se-gal__cap { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0; padding: 4px 8px; background: rgba(21, 18, 15, .8); color: var(--g-fg); font: 400 12px/1.4 var(--g-text); letter-spacing: 0; pointer-events: none; }
/* a click or tap on the photo opens the full-screen viewer: a button over all of it */
.se-gal .se-gal__zoom { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: zoom-in; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.se-gal .se-gal__zoom:hover, .se-gal .se-gal__zoom:active { background: transparent; }
.se-gal .se-gal__zoom:focus-visible { outline: 0; box-shadow: none; }
.se-gal .se-gal__zoom:focus-visible::after { content: ""; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; border: 2px solid var(--g-ring); box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px #fff; pointer-events: none; }
/* the expand icon at the photo's top-right corner (the credit is at the bottom right); in full-screen mode the close button takes its place */
.se-gal .se-gal__fs, .se-gal .se-gal__fsx { position: absolute; top: 12px; right: 12px; z-index: 3; }
.se-gal .se-gal__fsx { z-index: 6; width: 48px; height: 48px; }

/* ---------------------------------------------------------------- the gallery in full-screen mode (.is-fs: the browser's full screen, or a fixed overlay where there is none, e.g. an iPhone's
   Safari): the viewer fills the screen above the strip, which has larger thumbnails and, right next to them, previous and next; the photos are shown whole */
.se-gal.is-fs { --g-tw: clamp(80px, min(9vw, 15vh), 112px); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; width: auto; height: auto; max-width: none; margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.se-gal.is-fs > .se-gal__stage { order: 1; flex: 1 1 auto; min-height: 0; }
.se-gal.is-fs > .se-gal__strip { order: 2; flex: none; padding: 10px 12px; border-top: 1px solid var(--g-rule); border-bottom: 0; }
.se-gal.is-fs .se-gal__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.se-gal.is-fs .se-gal__slide img { width: 100%; height: 100%; object-fit: contain; }
.se-gal.is-fs .se-gal__zoom, .se-gal.is-fs .se-gal__fs { display: none; }
.se-gal.is-fs .se-gal__thumb { width: var(--g-tw); height: calc(var(--g-tw) * .75); }
.se-gal.is-fs .se-gal__bar { max-width: calc(8.5 * (var(--g-tw) + 8px)); }
.se-gal.is-fs > .se-gal__strip .se-gal__btn { width: 48px; height: 48px; }
.se-gal.is-fs .se-gal__fsx { top: max(12px, calc(env(safe-area-inset-top) + 8px)); right: max(12px, calc(env(safe-area-inset-right) + 8px)); }

/* ---------------------------------------------------------------- the full-screen viewer (a click or tap on the photo): made by the script, once, at the end of <body> */
.se-gal-lb {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; display: block; margin: 0; padding: 0; background: var(--g-bg); color: var(--g-fg); outline: 0;
  font: 400 14px/1.5 var(--g-text); letter-spacing: 0; text-align: left; overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none;
}
.se-gal-lb *, .se-gal-lb *::before, .se-gal-lb *::after { box-sizing: border-box; }
.se-gal-lb .se-gal-lb__view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; cursor: zoom-out;
  padding: max(64px, env(safe-area-inset-top)) max(88px, env(safe-area-inset-right)) max(56px, env(safe-area-inset-bottom)) max(88px, env(safe-area-inset-left)); }
.se-gal-lb .se-gal-lb__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; object-fit: contain; -webkit-user-drag: none; }
.se-gal-lb .se-gal-lb__count, .se-gal-lb .se-gal-lb__cap { position: absolute; z-index: 1; margin: 0; padding: 0; pointer-events: none; color: var(--g-fg2); }
.se-gal-lb .se-gal-lb__count { top: max(12px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); display: flex; align-items: center; height: 48px; font: 500 14px/1 var(--g-display); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.se-gal-lb .se-gal-lb__cap { left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); padding: 0 88px; text-align: center; font: 400 14px/1.4 var(--g-text); }
.se-gal-lb .se-gal-lb__cap:empty { display: none; }
.se-gal-lb .se-gal__btn { position: absolute; z-index: 2; width: 48px; height: 48px; }
.se-gal-lb .se-gal-lb__x { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.se-gal-lb .se-gal-lb__prev, .se-gal-lb .se-gal-lb__next { top: 50%; margin-top: -24px; }
.se-gal-lb .se-gal-lb__prev { left: max(18px, env(safe-area-inset-left)); }
.se-gal-lb .se-gal-lb__next { right: max(18px, env(safe-area-inset-right)); }

/* ---------------------------------------------------------------- a phone: thumbnails and buttons a little smaller, never under 40 px */
@media (max-width: 700px) {
  .se-gal .se-gal__strip { gap: 4px; padding: 6px 8px; }
  .se-gal .se-gal__thumb { width: 56px; height: 42px; }
  .se-gal .se-gal__thumbs { gap: 6px; }
  .se-gal .se-gal__fs { top: 8px; right: 8px; width: 40px; height: 40px; }
  .se-gal.is-fs { --g-tw: clamp(64px, 18vw, 96px); }
  .se-gal.is-fs > .se-gal__strip .se-gal__btn { width: 44px; height: 44px; }
  .se-gal .se-gal__cap { right: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  .se-gal-lb .se-gal-lb__view { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .se-gal-lb .se-gal__btn { width: 44px; height: 44px; }
  .se-gal-lb .se-gal-lb__prev, .se-gal-lb .se-gal-lb__next { margin-top: -22px; }
  .se-gal-lb .se-gal-lb__prev { left: max(8px, env(safe-area-inset-left)); }
  .se-gal-lb .se-gal-lb__next { right: max(8px, env(safe-area-inset-right)); }
  .se-gal-lb .se-gal-lb__cap { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .se-gal .se-gal__btn, .se-gal-lb .se-gal__btn, .se-gal .se-gal__thumb img { transition: none; }
}
@media (forced-colors: active) {
  .se-gal .se-gal__thumb[aria-current="true"]::after { border-color: Highlight; }
}