/* ============================================================================
   /galeri — interactive horizontal album timeline (DOM + CSS 3D).
   A contained deep-navy "stage" inside the otherwise light STIKES site.
   Namespaced .gmt-*; scoped to body.gallery-motion-page. Not a social feed,
   not a card grid. Progressive enhancement: without .is-enhanced the stage is a
   plain scrollable link strip and the catalogue below is the representation.
   ========================================================================== */

/* keep the interactive stage near the top — trim the hero */
body.gallery-motion-page .gallery-hero--compact {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
body.gallery-motion-page .gallery-hero--compact .information-hero__text {
  margin-top: 0.5rem;
}

body.gallery-motion-page .gallery-motion {
  --gmt-serif: "Roboto Slab", "Newsreader", Georgia, "Times New Roman", serif;
  --gmt-sans: "Poppins", "Roboto", Arial, sans-serif;
  --gmt-navy: #0b1622;
  --gmt-navy-2: #142839;
  --gmt-ink: #eaf1f4;
  --gmt-dim: #9fb3bd;
  --gmt-teal: #3fb6d8;
  --gmt-teal-deep: #087ca2;
  --gmt-line: #d8c9a5;

  margin: clamp(1rem, 3vw, 2rem) 0 0;
}

body.gallery-motion-page .gallery-motion a:focus-visible,
body.gallery-motion-page .gallery-motion button:focus-visible {
  outline: 3px solid var(--gmt-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

body.gallery-motion-page .gmt-eyebrow {
  margin: 0 auto clamp(0.75rem, 2vw, 1.25rem);
  max-width: 1100px;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  font-family: var(--gmt-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gmt-teal-deep);
}

/* ---- the dark stage ------------------------------------------------- */
body.gallery-motion-page .gmt-viewport {
  position: relative;
  height: clamp(340px, 50vh, 540px);
  perspective: 1600px;
  perspective-origin: 50% 46%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(63, 182, 216, 0.12), rgba(63, 182, 216, 0) 55%),
    radial-gradient(140% 120% at 50% 120%, #0a1a2a 0%, rgba(10, 26, 42, 0) 60%),
    linear-gradient(180deg, var(--gmt-navy) 0%, var(--gmt-navy-2) 60%, #0d1c2b 100%);
  border-block: 1px solid #0a2233;
  touch-action: pan-y;
}
body.gallery-motion-page .gmt-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, 0.55);
}

/* editorial timeline axis + ticks */
body.gallery-motion-page .gmt-axis {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 26%;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.gallery-motion-page .gmt-axis__line {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(159, 179, 189, 0) 0%, rgba(159, 179, 189, 0.4) 12%, rgba(159, 179, 189, 0.4) 88%, rgba(159, 179, 189, 0) 100%);
}
body.gallery-motion-page .gmt-axis__tick {
  position: relative;
  width: 1px;
  height: 10px;
  background: rgba(159, 179, 189, 0.45);
  transition: background-color 0.25s ease, height 0.25s ease;
}
body.gallery-motion-page .gmt-axis__tick.is-active {
  height: 18px;
  background: var(--gmt-teal);
  box-shadow: 0 0 10px rgba(63, 182, 216, 0.7);
}

body.gallery-motion-page .gmt-date {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  margin: 0;
  text-align: center;
  font-family: var(--gmt-serif);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(234, 241, 244, 0.9);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* ---- stage + album objects --------------------------------------- */
body.gallery-motion-page .gmt-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: grab;
}
body.gallery-motion-page .gmt-stage.is-dragging { cursor: grabbing; }

body.gallery-motion-page .gmt-album {
  position: absolute;
  left: 50%;
  top: 54%;
  width: clamp(210px, 24vw, 288px);
  aspect-ratio: 3 / 3.7;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  text-decoration: none;
  color: var(--gmt-ink);
  will-change: transform, opacity;
}
/* implied album thickness — a stacked-page edge, not a chunky box */
body.gallery-motion-page .gmt-album__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 82%;
  padding: 7px;
  background: #f6f1e6;
  border-radius: 3px 5px 5px 3px;
  box-shadow:
    2px 0 0 #e0d4ba,
    4px 0 0 #d3c5a4,
    6px 3px 0 #c7b892,
    0 34px 60px -22px rgba(0, 0, 0, 0.7);
}
body.gallery-motion-page .gmt-album__frame::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0c5a74, #04384a);
}
body.gallery-motion-page .gmt-album__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  background: #24333c;
}
body.gallery-motion-page .gmt-album__img--placeholder {
  background: linear-gradient(135deg, #24333c, #0e2130);
}
body.gallery-motion-page .gmt-album__tag {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--gmt-sans);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gmt-dim);
  text-align: center;
}
body.gallery-motion-page .gmt-album.is-active { color: #fff; }
body.gallery-motion-page .gmt-album.is-active .gmt-album__tag { color: var(--gmt-teal); }
body.gallery-motion-page .gmt-album.is-active .gmt-album__frame {
  box-shadow:
    2px 0 0 #e0d4ba,
    4px 0 0 #d3c5a4,
    6px 3px 0 #c7b892,
    0 44px 80px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(63, 182, 216, 0.35);
}

/* ---- nav arrows (restrained) ----------------------------------- */
body.gallery-motion-page .gmt-nav {
  position: absolute;
  top: 54%;
  translate: 0 -50%;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 46px;
  height: 64px;
  border: 0;
  background: none;
  color: rgba(234, 241, 244, 0.75);
  cursor: pointer;
}
body.gallery-motion-page .gmt-nav svg { width: 22px; height: 22px; }
body.gallery-motion-page .gmt-nav::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.gallery-motion-page .gmt-nav:hover { color: #fff; }
body.gallery-motion-page .gmt-nav:hover::before { opacity: 1; }
body.gallery-motion-page .gmt-nav:disabled { opacity: 0.28; cursor: default; }
body.gallery-motion-page .gmt-nav--prev { left: clamp(0.25rem, 3vw, 2rem); }
body.gallery-motion-page .gmt-nav--next { right: clamp(0.25rem, 3vw, 2rem); }

/* ---- readout (title / count / CTA — real DOM, below the stage) --- */
body.gallery-motion-page .gmt-readout {
  max-width: 640px;
  margin: clamp(1.4rem, 4vw, 2.4rem) auto 0;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  text-align: center;
}
body.gallery-motion-page .gmt-readout__kicker {
  margin: 0;
  font-family: var(--gmt-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gmt-teal-deep);
}
body.gallery-motion-page .gmt-readout__title {
  margin: 0.5rem 0 0;
  font-family: var(--gmt-serif);
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  color: #07162f;
}
body.gallery-motion-page .gmt-readout__count {
  margin: 0.55rem 0 0;
  font-family: var(--gmt-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #40525e;
}
body.gallery-motion-page .gmt-readout__sep { color: #9fb3bd; margin: 0 0.4rem; }
body.gallery-motion-page .gmt-readout__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 1rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: var(--gmt-teal-deep);
  color: #fff;
  font-family: var(--gmt-sans);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}
body.gallery-motion-page .gmt-readout__cta:hover { background: #004d68; }
body.gallery-motion-page .gmt-readout__note {
  margin: 0.7rem 0 0;
  font-family: var(--gmt-sans);
  font-size: 0.78rem;
  color: #687983;
}

body.gallery-motion-page .gmt-mobile-nav {
  display: none;
  gap: 0.75rem;
  justify-content: center;
  margin: 1rem auto 0;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
body.gallery-motion-page .gmt-mobile-btn {
  flex: 1;
  max-width: 12rem;
  min-height: 44px;
  border: 1px solid #b8d4dd;
  border-radius: 999px;
  background: #fff;
  color: #004d68;
  font-family: var(--gmt-sans);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
body.gallery-motion-page .gmt-mobile-btn:disabled { opacity: 0.4; cursor: default; }

body.gallery-motion-page .gmt-hint {
  margin: 1rem auto 0;
  max-width: 640px;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  text-align: center;
  font-family: var(--gmt-sans);
  font-size: 0.8rem;
  color: #687983;
  transition: opacity 0.4s ease;
}
body.gallery-motion-page .gmt-hint.is-hidden { opacity: 0; }

/* ---- catalogue (editorial index; also the no-JS fallback) --------- */
body.gallery-motion-page .gmt-catalogue {
  max-width: 720px;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
body.gallery-motion-page .gmt-catalogue__label {
  margin: 0 0 0.5rem;
  font-family: var(--gmt-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gmt-teal-deep);
}
body.gallery-motion-page .gmt-catalogue__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gmt-line);
}
body.gallery-motion-page .gmt-catalogue__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem 1rem;
  min-height: 44px;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--gmt-line);
  color: #07162f;
  text-decoration: none;
}
body.gallery-motion-page .gmt-catalogue__row:hover { color: var(--gmt-teal-deep); }
body.gallery-motion-page .gmt-catalogue__row[aria-current="true"] {
  color: var(--gmt-teal-deep);
  font-weight: 600;
}
body.gallery-motion-page .gmt-catalogue__num {
  font-family: var(--gmt-sans);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gmt-teal);
}
body.gallery-motion-page .gmt-catalogue__row[aria-current="true"] .gmt-catalogue__num::before { content: "▸ "; }
body.gallery-motion-page .gmt-catalogue__title {
  font-family: var(--gmt-serif);
  font-size: 1rem;
}
body.gallery-motion-page .gmt-catalogue__year {
  font-family: var(--gmt-sans);
  font-size: 0.78rem;
  color: #687983;
  margin-left: 0.4rem;
}
body.gallery-motion-page .gmt-catalogue__count {
  font-family: var(--gmt-sans);
  font-size: 0.8rem;
  color: #52656f;
  white-space: nowrap;
}

body.gallery-motion-page .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- no-JS / no-enhancement fallback for the stage ---------------- */
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-viewport {
  height: auto;
  perspective: none;
  padding: clamp(1.25rem, 4vw, 2rem);
}
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-axis,
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-date,
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-nav,
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-mobile-nav,
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-hint,
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-readout {
  display: none;
}
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-stage {
  position: static;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
body.gallery-motion-page .gallery-motion:not(.is-enhanced) .gmt-album {
  position: static;
  transform: none;
  flex: 0 0 auto;
  width: min(64vw, 240px);
  opacity: 1 !important;
}

/* ---- responsive --------------------------------------------------- */
@media (max-width: 720px) {
  body.gallery-motion-page .gmt-viewport { height: clamp(320px, 62vw, 420px); }
  body.gallery-motion-page .gmt-album { width: clamp(180px, 56vw, 240px); }
  body.gallery-motion-page .gmt-nav { display: none; }
  body.gallery-motion-page .gmt-mobile-nav { display: flex; }
}

/* ---- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.gallery-motion-page .gallery-motion * { transition: none !important; }
  body.gallery-motion-page .gmt-album { will-change: auto; }
}