/* Gallery — inherits the muugart-home identity (warm ink + amber, no new
   hex, no borders anywhere per canonical-base doctrine - shadow/tone for
   separation only). */
:root {
  --gal-bg:          var(--thx-color-white);
  --gal-bg-warm:     #faf7f2;
  --gal-text:        var(--thx-color-grey-222);
  --gal-text-muted:  var(--thx-color-grey-666);
  --gal-surface:     var(--thx-color-grey-eee);
  --gal-accent:      var(--thx-color-orange-500);
  --gal-accent-hover: var(--thx-color-orange-600);
  --gal-header-h: 60px;
  --gal-footer-h: 56px;
}
:root[data-theme="dark"] {
  --gal-bg:          #14110d;
  --gal-bg-warm:     #1a1611;
  --gal-text:        #ece7de;
  --gal-text-muted:  #a8a094;
  --gal-surface:     #201b15;
  --gal-accent:      var(--thx-color-orange-400);
  --gal-accent-hover: var(--thx-color-orange-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gal-bg:          #14110d;
    --gal-bg-warm:     #1a1611;
    --gal-text:        #ece7de;
    --gal-text-muted:  #a8a094;
    --gal-surface:     #201b15;
    --gal-accent:      var(--thx-color-orange-400);
    --gal-accent-hover: var(--thx-color-orange-300);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--gal-bg-warm); color: var(--gal-text); font-family: var(--thx-font-body); }
a { color: var(--gal-accent); text-decoration: none; }
a:hover { color: var(--gal-accent-hover); text-decoration: underline; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--gal-header-h);
  display: flex; align-items: center; gap: var(--thx-space-5);
  padding-inline: clamp(24px, 5vw, 64px);
  background: var(--gal-bg);
  box-shadow: var(--thx-shadow-dropdown);
  z-index: 90;
}
.site-header-title { font-family: var(--thx-font-headline); font-weight: var(--thx-fw-semibold); font-size: var(--thx-fs-h4); color: var(--gal-text) !important; }
.home-link {
  margin-left: auto;
  font-size: var(--thx-fs-small); font-weight: var(--thx-fw-medium);
  color: var(--gal-text) !important; background: var(--gal-surface);
  padding: var(--thx-space-2) var(--thx-space-3); border-radius: var(--thx-radius-button);
}
.home-link:hover { background: var(--gal-accent); color: #fff !important; text-decoration: none; }
.theme-toggle {
  border: none; background: var(--gal-surface); color: var(--gal-text);
  padding: var(--thx-space-2) var(--thx-space-3); border-radius: var(--thx-radius-button);
  font-size: var(--thx-fs-small); cursor: pointer;
}
.theme-toggle:hover { background: var(--gal-accent); color: #fff; }

.gallery-main {
  max-width: 1200px; margin: 0 auto;
  padding: calc(var(--gal-header-h) + var(--thx-space-8)) clamp(24px, 5vw, 64px) calc(var(--gal-footer-h) + var(--thx-space-8));
  text-align: center;
}
.gallery-rule { height: 4px; width: 96px; margin: 0 auto var(--thx-space-6); background: linear-gradient(90deg, var(--thx-color-crimson), var(--thx-color-orange-500), var(--thx-color-yellow-500), var(--thx-color-green-500), var(--thx-color-lapis), var(--thx-color-purple-500)); border-radius: var(--thx-radius-pill); }
.gallery-eyebrow { color: var(--gal-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--thx-fs-meta); margin: 0 0 var(--thx-space-2); }
.gallery-title { font-family: var(--thx-font-headline); font-size: var(--thx-fs-h1); font-weight: var(--thx-fw-bold); margin: 0 0 var(--thx-space-3); }
.gallery-blurb { color: var(--gal-text-muted); font-size: var(--thx-fs-h4); max-width: 640px; margin: 0 auto calc(var(--thx-space-9)); }

.gallery-section { margin-bottom: var(--thx-space-9); text-align: left; }
.gallery-section-title {
  font-family: var(--thx-font-headline); font-weight: var(--thx-fw-semibold); font-size: var(--thx-fs-h3);
  margin: 0 0 var(--thx-space-5);
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--thx-space-5);
}
.gallery-tile {
  cursor: pointer; border-radius: var(--thx-radius-card); overflow: hidden;
  background: var(--gal-surface);
  box-shadow: var(--thx-shadow-card-hover);
  transition: transform var(--thx-dur-default) var(--thx-ease-out);
}
.gallery-tile:hover { transform: translateY(-2px); }
.gallery-tile img { display: block; width: 100%; height: 220px; object-fit: cover; }
.gallery-tile-title {
  display: block; padding: var(--thx-space-2) var(--thx-space-3); font-size: var(--thx-fs-small); color: var(--gal-text-muted);
}

/* ─── lightbox ───────────────────────────────────────────────────── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 8, 6, 0.92);
  flex-direction: column; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-stage {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; min-height: 0;
}
.lightbox-pan {
  cursor: grab; touch-action: none;
  transform-origin: center center;
}
.lightbox-pan.dragging { cursor: grabbing; }
.lightbox-pan img {
  max-width: 90vw; max-height: 75vh; display: block;
  border-radius: var(--thx-radius-card);
  user-select: none; -webkit-user-drag: none;
}
/* fullscreen: image fills the frame, no page chrome around it */
.lightbox:fullscreen .lightbox-stage,
.lightbox:-webkit-full-screen .lightbox-stage { height: 100vh; }
.lightbox:fullscreen .lightbox-pan img,
.lightbox:-webkit-full-screen .lightbox-pan img { max-width: 100vw; max-height: 100vh; border-radius: 0; }

.lightbox-close, .lightbox-nav {
  position: absolute; border: none; background: rgba(255,255,255,0.12); color: #fff;
  border-radius: var(--thx-radius-circle); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--gal-accent); }
.lightbox-close { top: var(--thx-space-5); right: var(--thx-space-5); width: 40px; height: 40px; font-size: 22px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 28px; }
.lightbox-prev { left: var(--thx-space-5); }
.lightbox-next { right: var(--thx-space-5); }

.lightbox-caption {
  display: flex; align-items: center; gap: var(--thx-space-4);
  padding: var(--thx-space-4) var(--thx-space-6);
  color: #fff;
}
.lightbox-caption span { font-size: var(--thx-fs-small); color: rgba(255,255,255,0.7); }
.fullscreen-btn {
  border: none; background: var(--gal-accent); color: #fff;
  padding: var(--thx-space-2) var(--thx-space-4); border-radius: var(--thx-radius-button);
  font-size: var(--thx-fs-small); font-weight: var(--thx-fw-medium); cursor: pointer;
}
.fullscreen-btn:hover { background: var(--gal-accent-hover); }

.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; min-height: var(--gal-footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: var(--thx-space-3) clamp(24px, 5vw, 64px);
  background: var(--gal-bg);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
  color: var(--gal-text-muted); font-size: var(--thx-fs-small);
}
.site-footer p { margin: 0; }

@media (max-width: 640px) {
  .gallery-tile img { height: 160px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
}