/* ================================================
   lightbox.css — Lightbox overlay, lightGallery theme,
   detail page (art.html), variant strips, comment panel
   Extracted from gallery.css (co-located with dark mode)
   ================================================ */
/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
  /* Pad the overlay from the top by header height so we never clip it */
  padding: var(--overlay-gap);
  padding-top: calc(
    var(--overlay-gap) + var(--header-h) + env(safe-area-inset-top)
  );
  padding-bottom: calc(var(--overlay-gap) + env(safe-area-inset-bottom));
  pointer-events: none;
}

.lightbox.is-open {
  display: flex;
  pointer-events: auto;
}

.lightbox .frame {
  position: relative;
  background: var(--offwhite);
  border: 4px solid var(--ink);
  border-radius: 16px;
  max-width: min(1080px, 96vw);
  max-height: calc(
    100vh - (var(--header-h) + (var(--overlay-gap) * 2)) -
      env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
  overflow: auto; /* keep inner scrollbars off non-media rows */
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.lightbox img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-bottom: 3px solid var(--ink);
}

/* Full Page button at top-right of expanded card */
.lb-toplink {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border-radius: 999px;
}

/* Fixed Navigation Buttons */
.lb-nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: var(--offwhite);
  border: 3px solid var(--ink);
  pointer-events: auto;
  cursor: var(--cursor-pointer);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.lb-nav-prev {
  left: 12px;
}

.lb-nav-next {
  right: 12px;
}

/* Hide nav buttons on very small screens */
@media (max-width: 600px) {
  .lb-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  .lb-nav-prev {
    left: 8px;
  }
  .lb-nav-next {
    right: 8px;
  }
}

/* Caption and controls */
.lightbox .cap {
  padding: 0.45rem 0.8rem;
  /* was ~.6 .1rem */
  display: flex;
  gap: 0.6rem;
  /* keep controls comfy */
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.lightbox .cap a {
  font-weight: 700;
}

/* Wiggle the lightbox caption URL */
.lightbox .cap a:hover {
  display: inline-block;
  animation: wiggle 0.6s ease-in-out;
}

/* No wiggle for description preview links */
.lb-description-preview a:hover {
  animation: none !important;
  transform: none !important;
  display: inline !important;
}

#lb-caption {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

#lb-caption a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: var(--cursor-pointer);
}

#lb-caption a:hover {
  text-decoration: underline;
}

#lb-caption .artist-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--offwhite);
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  cursor: var(--cursor-pointer);
}



/* ===============================
   Safety: generic text overflow
   =============================== */

#lb-caption,
.detail-wrap,
.detail-meta,
.cameo-panel {
  min-width: 0;
}

#lb-caption,
#lb-caption * {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Lightbox expand + prev/next hover states */
#lightbox #lb-open,
#lightbox .lb-nav-btn,
#lightbox #lb-close {
  transition: color var(--transition-medium), background-color var(--transition-medium), transform var(--transition-medium);
  color: var(--ink);
  /* default dark color */
}

/* Hover = turn red */
#lightbox #lb-open:hover,
#lightbox .lb-nav-btn:hover,
#lightbox #lb-close:hover {
  color: var(--offwhite);
  /* your red accent */
  background-color: var(--accent);
  /* subtle red tint background */
  cursor: var(--cursor-pointer);
}

/* Scale up nav buttons on hover for better feedback */
#lightbox .lb-nav-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

/* Press down effect when clicking nav buttons */
#lightbox .lb-nav-btn:active {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Disqus section in lightbox */
.lb-disqus {
  padding: 0.5rem 1rem;
  border-top: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--offwhite);
}

.disqus-reactions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.disqus-reaction-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink);
}

.disqus-reaction-item .emoji {
  font-size: 1.1rem;
}

/* Reactions content container */
.reactions-content {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.react-label {
  font-size: 0.9rem;
  color: var(--gray);
  flex-shrink: 0;
}

/* Preview content container */
.disqus-preview {
  font-size: 0.9rem;
  flex: 1;
  min-width: 200px;
}

.disqus-preview-content {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.comment-count-text {
  color: var(--gray);
  font-size: 0.9rem;
  user-select: none;
}

.view-comments-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-medium);
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}

.view-comments-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.disqus-preview a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-medium);
}

.disqus-preview a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.disqus-comment-count {
  color: var(--gray);
  margin-right: 0.5rem;
}

/* Reaction buttons */
.reaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--offwhite);
  font-size: 1.2rem;
  text-decoration: none;
  transition: background-color var(--transition-medium), transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium), color var(--transition-medium);
  cursor: var(--cursor-pointer);
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1;
  user-select: none;
}

.reaction-btn:hover {
  transform: scale(1.15);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.reaction-btn:active {
  transform: scale(0.95);
  background: var(--accent);
}

/* Reaction animation for when clicked */
@keyframes reaction-pulse {
  0% {
    transform: scale(1);
    background: var(--offwhite);
  }
  50% {
    transform: scale(1.3);
    background: var(--accent);
    box-shadow: 0 0 20px rgba(221, 56, 97, 0.6);
  }
  100% {
    transform: scale(1);
    background: var(--offwhite);
  }
}

.reaction-btn.reacted {
  animation: reaction-pulse 0.5s ease-out;
}

.disqus-preview {
  flex: 1;
  min-width: 200px;
}

.reaction-btn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Lightbox image loading effects ===== */
/* Lightbox media box: reserves space with aspect-ratio so no jump */
#lightbox .lb-media {
  position: relative;
  width: min(92vw, 1100px);
  max-height: calc(100vh - 8rem);
  margin: 0 auto;
  display: grid;
  place-items: center;
  flex: 1 1 auto; /* grow and shrink */
  min-height: 0; /* critical so it can actually shrink */

  /* default aspect if unknown; JS will set --lb-ar to w/h */
  aspect-ratio: var(--lb-ar, 4 / 3);
}

/* Shimmer placeholder shown while loading */
#lightbox .lb-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.18) 20%,
    rgba(255, 255, 255, 0.06) 40%
  );
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
}

/* Turn the shimmer on while loading */
#lightbox.is-loading .lb-media::before {
  opacity: 1;
  animation: shimmer 1.2s linear infinite;
}

/* Image transition (no size change here) */
#lightbox .lb-media img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  filter: blur(6px);
  transition: opacity var(--transition-slow), transform 0.35s ease, filter 0.35s ease;
  /* Firefox optimization: hint browser to optimize filter changes */
  will-change: filter, opacity, transform;
}

#lightbox .lb-media img,
#lightbox .lb-media video {
  max-height: 100%; /* capped by whatever space is left */
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Reveal once loaded */
#lightbox.is-loaded .lb-media img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* NON-MEDIA ROWS: fixed height, never allowed to shrink */
.lightbox .cap,
#lightbox .variant-strip,
.lightbox .cameo-panel {
  flex: 0 0 auto; /* fixed block size */
}

/* Variant strip */
.variant-strip {
  display: flex;
  gap: var(--vgap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.6rem 0.8rem 0.5rem;
  /* was ~1.2rem 1rem */
  border-top: 3px solid var(--ink);
  background: var(--offwhite);
  margin-top: 0.5rem;
  /* was 1.5rem */
  flex-wrap: nowrap;
  scroll-snap-type: x proximity; /* optional: nice snap */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

.variant-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  height: auto; /* let labels dictate height */
  width: auto; /* remove fixed 60px */
  flex: 0 0 auto;
  cursor: var(--cursor-pointer);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  scroll-snap-align: start;
}

/* Avoid hover lift causing vertical collision */
/* .variant-item:hover { transform: none; } */

.variant-item:hover {
  transform: translateY(-3px);
}

.variant-item .variant-thumb {
  transition: opacity var(--transition-fast);
}

.variant-item:hover .variant-thumb {
  opacity: 0.85;
}

.variant-item:hover .thumb-label {
  color: var(--accent);
  /* fallback to red if --accent not defined */
  font-weight: bold;
}

.variant-item .thumb-label {
  overflow-wrap: anywhere;
  white-space: normal;
}

.variant-thumb {
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  object-fit: cover;
  cursor: var(--cursor-pointer);
  background: var(--offwhite);
  aspect-ratio: 1/1;
}

.thumb-label {
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: center;
  max-width: calc(var(--vthumb) + 24px);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variant-thumb.is-active {
  outline: 3px solid var(--accent);
}

/* video fallback thumb (no poster available) */
.variant-thumb.video {
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #000;
  color: var(--offwhite);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}

/* Black-square fallback for video tiles in the gallery */
.thumb.video-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--ink);
  color: var(--offwhite);
  font-weight: 900;
  border-bottom: 0;
  /* matches .thumb styling */
}


/* lightbox media area */
.media-wrap {
  position: relative;
}

#lb-media img,
#lb-media video {
  width: 100%;
  height: auto;
  max-height: 55vh;
  display: block;
  object-fit: contain;
  border-bottom: 3px solid var(--ink);
  background: #000;
  /* nice background for videos */
}

/* ===== Full-page detail (art.html) ===== */
.detail-wrap {
  max-width: 1080px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.detail-hero {
  position: relative;
  background: var(--offwhite);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Cap media size so it never overwhelms viewport */
.detail-hero img,
.detail-hero video {
  width: 100%;
  height: auto;
  max-height: 72vh;
  /* <<< keeps it reasonable */
  display: block;
  object-fit: contain;
  /* good backdrop for videos/letterbox */
}

/* Title/credits BELOW the media; normal-weight title */
.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.8rem 1rem;
  border-top: 3px solid var(--ink);
  background: var(--offwhite);
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-top: 1.2rem;
  /* spacing under media */
  margin-bottom: 1.3rem;
  /* spacing above nav */
  min-width: 0; /* allow children to shrink */
}

/* Top row: title + author + tags */
.detail-meta .meta-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  width: 100%;
}

/* Description row (below title/author) */
.detail-meta .meta-description {
  width: 100%;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 2px solid rgba(58, 27, 34, 0.15);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.9;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Description box styling - matches detail-meta design */
.detail-description {
  padding: 1rem 1.2rem;
  border-top: 3px solid var(--ink);
  background: var(--offwhite);
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-top: -0.5rem; /* slight overlap with meta */
  margin-bottom: 1.3rem;
  line-height: 1.5;
}

.detail-description .description-content {
  font-size: 0.95rem;
  color: var(--ink);
  white-space: pre-wrap; /* preserve line breaks */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ===============================
   Art detail: meta bar wrapping
   =============================== */

/* Right stack (tags + date) can wrap and drop below on narrow screens */
.detail-meta .right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin-left: auto; /* keep it to the right when there’s room */
  justify-self: end;
}

/* Tag group wraps across lines */
.detail-meta .tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

/* Defensive: very long single words in tags/dates won’t overflow */
.detail-meta .tag,
.detail-meta .date {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
}

.detail-meta .title {
  font-family: inherit;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap; /* wrap long titles/author to new lines */
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-width: 0;
}

/* Ensure all inline bits inside can wrap and never overflow */
.detail-meta .title > * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.detail-meta .title a {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  /* remove underline from the whole link */
  border-bottom: none;
  /* in case older styles used border-bottom on <a> */
  min-width: 0;
}

.detail-meta .title a .artist-name {
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.2;
}

/* Wiggle the lightbox caption URL */
.detail-meta .title a .artist-name:hover {
  display: inline-block;
  animation: wiggle 0.6s ease-in-out;
}

/* Ensure the avatar never gets underlined or selected */
.detail-meta .title a .avatar {
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none;
  /* optional: lets you select the text without grabbing the img */
}

.detail-meta .title .avatar {
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  background: var(--offwhite);
  vertical-align: middle;
}

.detail-meta .tag {
  font-size: 0.9rem;
  background: var(--bg-analogous);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

/* Spacing for tags inside the meta title row */
#detail-meta .tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  /* adjust spacing between tag chips */
}

#detail-meta .tags-wrap .tag {
  margin: 0;
  /* remove any inline spacing */
  padding: 0.2rem 0.5rem;
}

/* Collapsible tags on slug/detail page */
#detail-meta .tags-wrap.tags-collapsed {
  max-height: 2.2rem;
  overflow: hidden;
}

.tag-toggle-btn {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.2rem 0.55rem;
  margin-top: 0.3rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--offwhite);
  cursor: var(--cursor-pointer);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tag-toggle-btn:hover {
  background: var(--bg-analogous);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--ink);
}

.tag-toggle-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}

/* Prev / Next under the meta */
.detail-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

/* Prev / Next buttons on fullscreen art page */
#detail-nav .btn {
  color: var(--ink);
  /* ensure default text is dark */
  transition: background var(--transition-medium), color var(--transition-medium);
  padding: 1rem 2rem;
  font-size: 1.3rem; /* adjust as needed */
}

/* Hover effect — tint background but keep text color */
#detail-nav .btn:hover {
  background: var(--accent);
  /* or your chosen accent color */
  color: var(--offwhite);
  /* force text to stay dark */
  cursor: var(--cursor-pointer);
}

/* -----------------------------------------
   Re-enable selection/drag for author link text
   (Full-screen slug meta row + Lightbox caption)
------------------------------------------ */

/* Keep the tiny avatar inside the author link non-draggable and not selectable */
.lightbox .cap a .avatar {
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none;
  /* optional: lets you select the text without grabbing the img */
}

.back {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.8rem;
  text-decoration: none;
  font-weight: 800;
}

/* Hide tags on cards when in lightbox (they appear in caption) */
.card .meta .tag {
  display: none !important;
}

/* thumbs: always square, always var-sized */
.variant-thumb,
.variant-thumb.video,
img.variant-thumb {
  width: var(--vthumb) !important;
  height: var(--vthumb) !important;
  flex: 0 0 var(--vthumb) !important; /* prevents flex shrink */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* each tile’s column width follows the thumb */
.variant-item {
  flex: 0 0 calc(var(--vthumb) + 24px) !important;
  min-width: calc(var(--vthumb) + 24px) !important;
}

/* strip height follows the thumb (no vertical scroll) */
.variant-strip {
  height: var(--vstrip-h) !important;
  flex: 0 0 var(--vstrip-h) !important;
  overflow-y: hidden !important;
}

/* Subtle NSFW distinction */
.card.nsfw-card {
  background-color: var(--bg-analogous); /* light pink overlay */
}

.card.nsfw-card:hover {
  transform: translateY(-3px);
  background-color: var(--nsfw-tint);
  border-color: var(--ink);
  box-shadow: 0 14px 0 var(--ink), 0 16px 28px rgba(0, 0, 0, 0.28);
  color: var(--ink);
}


.card.nsfw-card:hover .meta span:first-child {
  transform: scale(1.05);
  font-weight: bold;
  color: var(--ink);
}

/* ==========================================================
   lightGallery theme overrides — cartoon / toon gallery style
   ========================================================== */

/* Backdrop — match original overlay */
.lg-backdrop {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

/* --- Toolbar --- */
.lg-wolfbard .lg-toolbar {
  background: transparent !important;
  padding: 8px 8px 0;
}

.lg-wolfbard .lg-toolbar .lg-icon {
  color: var(--ink);
  background: var(--offwhite);
  border: 4px solid var(--ink);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  margin: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast),
    color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: var(--cursor-pointer);
}

.lg-wolfbard .lg-toolbar .lg-icon::after {
  -webkit-text-stroke: 0.8px var(--ink);
}

.lg-wolfbard .lg-toolbar .lg-icon:hover::after {
  -webkit-text-stroke: 0.8px var(--offwhite);
}

.lg-wolfbard .lg-toolbar .lg-icon:hover {
  background: var(--accent) !important;
  color: var(--offwhite) !important;
  border-color: var(--accent);
  transform: scale(1.1);
}

/* Close button */
.lg-wolfbard .lg-close::after {
  color: var(--ink);
}

.lg-wolfbard .lg-close:hover::after {
  color: var(--offwhite);
}

/* --- Navigation arrows --- */
.lg-wolfbard .lg-prev,
.lg-wolfbard .lg-next {
  background: var(--offwhite) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast);
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  opacity: 1 !important;
  font-size: 24px !important;
  cursor: var(--cursor-pointer);
  /* Fixed positioning — viewport-relative, immune to .lg-content resizing.
     Arrows are children of .lg-content (lightGallery DOM structure), so
     position:absolute would shift when recalcMediaPosition() adjusts the
     content area's top/bottom. Fixed pins them to the viewport centre. */
  position: fixed !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%);
  z-index: 1085 !important;
}

.lg-wolfbard .lg-prev:hover,
.lg-wolfbard .lg-next:hover {
  background: var(--accent) !important;
  color: var(--offwhite) !important;
  border-color: var(--accent) !important;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.lg-wolfbard .lg-prev:active,
.lg-wolfbard .lg-next:active {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.lg-wolfbard .lg-prev::after {
  content: "" !important;
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
  left: -1px;
}

.lg-wolfbard .lg-next::before {
  content: "" !important;
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
  left: 1px;
}

/* --- Counter --- */
.lg-wolfbard .lg-counter {
  color: var(--offwhite);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 1rem;
  padding: 8px 16px;
}

/* --- Sub-HTML (caption area) --- */
.lg-wolfbard .lg-sub-html {
  background: var(--offwhite) !important;
  color: var(--ink) !important;
  padding: 0 !important;
  font-size: inherit;
  border-top: 3px solid var(--ink);
  overflow-y: auto;
  min-height: 0;
  /* max-height is managed dynamically by recalcMediaPosition() */
}

/* Content area — no transition so arrows stay visually stable between slides */
.lg-wolfbard .lg-content {
  /* top/bottom are set dynamically by recalcMediaPosition() */
}

/* Custom caption layout */
.lg-custom-caption {
  padding: 0.5rem 0.8rem 0.35rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 2rem;
  flex-shrink: 0;
  overflow: visible;
  font-size: 1.05rem;
  width: 100%;
  box-sizing: border-box;
}

/* More bottom breathing room when no variant strip follows */
.lg-sub-html:not(:has(.lg-custom-variant-strip)) .lg-custom-caption {
  padding-bottom: 0.6rem;
}

.lg-custom-caption .text-run {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.lg-custom-caption a {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
  flex-shrink: 1;
  min-width: 0;
}

.lg-custom-caption a:not(.ext-link):not(.cameo-chip) {
  color: -webkit-link !important;
}

.lg-custom-caption a:hover {
  text-decoration: underline;
  animation: wiggle 0.6s ease-in-out;
}

.lg-custom-caption a.cameo-chip:hover {
  text-decoration: none !important;
  animation: none;
}

/* Social media icons wiggle + grow to final scale */
.lg-custom-caption a.ext-link:hover {
  text-decoration: none;
  animation: wiggle-grow 0.6s ease-in-out forwards;
}

.lg-custom-caption .artist-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--offwhite);
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  cursor: var(--cursor-pointer);
}

/* Ensure pointer cursor on interaction buttons inside lightbox caption */
.lg-custom-caption .interaction-btn,
.lg-custom-caption .interaction-btn * {
  cursor: var(--cursor-pointer) !important;
}

/* "Go to Full Page" button in the toolbar */
.lg-wolfbard .lg-toolbar .lg-expand-link {
  font-size: 0.95rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.3;
  border-width: 4px;
  background: var(--ink);
  box-shadow: inset 0 0 0 99px var(--offwhite);
  margin-right: auto;
  transition: background-color var(--transition-fast),
    color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: var(--cursor-pointer);
}

.lg-wolfbard .lg-toolbar .lg-expand-link:hover {
  background: var(--accent);
  box-shadow: inset 0 0 0 99px var(--accent);
  color: var(--offwhite);
  border-color: var(--accent);
  transform: scale(1.1);
}

/* Description preview in lightGallery */
.lg-description-preview {
  margin-top: 0.3rem;
  padding: 0.3rem 0.8rem 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.85;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
  flex-basis: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-desc-link {
  color: var(--accent, #f83459) !important;
  text-decoration: underline;
  cursor: pointer;
}

.lg-desc-link:hover {
  animation: none !important;
  transform: none !important;
}

/* --- Variant strip inside lightGallery sub-html --- */
.lg-custom-variant-strip {
  border-top: 3px solid var(--ink);
  background: var(--offwhite);
  flex-shrink: 0;
  min-height: 2rem;
  justify-content: center;
  flex-wrap: wrap !important;
  height: auto !important;
  flex-basis: auto !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
}

/* --- Cameo panel inside lightGallery sub-html (standalone fallback) --- */
.lg-custom-cameo-panel {
  border-top: none;
  background: transparent;
  flex-shrink: 0;
  min-height: 2rem;
  justify-content: center;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* --- Disqus section inside lightGallery sub-html (legacy) --- */
.lg-custom-disqus {
  border-top: 3px solid var(--ink);
  padding: 0.4rem 0.8rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: center;
  background: var(--offwhite);
  flex-shrink: 0;
  min-height: 2rem;
}

/* --- Interactions bar inside lightGallery sub-html --- */
.lg-custom-interactions {
  border-top: 3px solid var(--ink);
  padding: 0.5rem 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  background: var(--offwhite);
  flex-shrink: 0;
  min-height: 2rem;
}

/* Centre all children when the bar wraps onto multiple rows */
.lg-custom-interactions.is-wrapped {
  justify-content: center;
}

/* Left group: like/fav buttons + comment link */
.lb-left-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
}

.lb-interaction-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}

/* Inline cameos sitting inside the interactions bar */
.lb-inline-cameos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  border-top: none;
  background: transparent;
  padding: 0;
  margin: 0;
  min-height: unset;
  overflow: visible !important;
  scroll-snap-type: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* interaction-btn inside lightbox — bigger for easy tap targets */
.lg-custom-interactions .interaction-btn {
  font-size: 1.1rem;
  padding: 0.6rem 1.3rem;
  gap: 8px;
}

.lg-custom-interactions .interaction-btn:hover {
  box-shadow: 0 8px 0 var(--ink), 0 8px 18px rgba(0, 0, 0, 0.25);
}

.lg-custom-interactions .interaction-btn:active {
  box-shadow: 0 2px 0 var(--ink);
}

/* --- Interactions inline inside caption row --- */
.lg-custom-caption .lg-custom-interactions {
  border-top: none;
  background: transparent;
  padding: 0;
  min-height: unset;
  flex: 1 1 100%;
  gap: 0.4rem 1rem;
  justify-content: center;
  margin-left: 0;
  flex-wrap: wrap;
  overflow: visible;
}

.lg-custom-caption .lg-custom-interactions .lb-interaction-buttons {
  padding-bottom: 0;
}

.lg-custom-caption .lg-custom-interactions .interaction-btn {
  font-size: 1.05rem;
  padding: 0.55rem 1.2rem;
  gap: 7px;
  box-shadow: 0 5px 0 var(--ink);
}

.lg-custom-caption .lg-custom-interactions .interaction-btn:hover {
  box-shadow: 0 6px 0 var(--ink), 0 6px 14px rgba(0, 0, 0, 0.2);
}

.lg-custom-caption .lg-custom-interactions .interaction-btn:active {
  box-shadow: 0 2px 0 var(--ink);
}

.lg-custom-caption .lb-inline-cameos {
  gap: 0.35rem;
  margin-bottom: 0;
}

.lg-custom-caption .lb-inline-cameos .cameo-chip {
  font-size: 1rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
}

.lg-custom-caption .lb-inline-cameos .cameo-chip .avatar {
  width: 30px;
  height: 30px;
}

/* --- Lightbox tags panel --- */
.lb-tags-panel {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 1rem 0.8rem;
}

.lb-tags-panel.is-open {
  display: flex;
}

.lb-tag-chip {
  display: inline-block;
  font-size: 0.82rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

.lb-tags-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* --- Thumbnail strip --- */
.lg-wolfbard .lg-thumb-outer {
  background: var(--offwhite) !important;
  border-top: 3px solid var(--ink);
  padding: 6px 0;
}

.lg-wolfbard .lg-thumb-item {
  border: 3px solid var(--ink) !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: border-color var(--transition-fast),
    transform var(--transition-fast);
}

.lg-wolfbard .lg-thumb-item.active,
.lg-wolfbard .lg-thumb-item:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px);
}

/* --- Image area tweaks --- */
.lg-wolfbard .lg-image {
  border-radius: 16px;
  border: 4px solid var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.lg-wolfbard .lg-img-wrap {
  padding: 8px 8px 16px;
}

/* Video container: fill slide area and flex-center the video */
.lg-wolfbard .lg-video-cont {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override LG defaults: let <video> size naturally so border wraps content */
.lg-wolfbard .lg-video-object {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  border: 4px solid var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* LG starts video at opacity:0 (poster phase) — show immediately */
.lg-wolfbard .lg-has-video .lg-video-object {
  opacity: 1;
}

/* Hide LG poster overlay + play button — native poster/controls are used */
.lg-wolfbard .lg-video-poster,
.lg-wolfbard .lg-video-play-button {
  display: none;
}

/* Custom image layer (when switching from video main to image alt) */
.lg-wolfbard .lg-custom-img .lg-image {
  border-radius: 16px;
  border: 4px solid var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.lg-wolfbard .lg-item {
  background: transparent;
}

/* --- Zoom controls --- */
.lg-wolfbard #lg-zoom-in,
.lg-wolfbard #lg-zoom-out,
.lg-wolfbard #lg-actual-size {
  color: var(--offwhite);
}

/* Keep bottom panel visible when zoomed (overrides lightGallery default
   which hides .lg-components via translate3d(0,100%,0) when .lg-zoomed) */
.lg-outer.lg-components-open.lg-zoomed .lg-components {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.lg-outer.lg-components-open.lg-zoomed .lg-sub-html {
  opacity: 1;
}

/* --- Fullscreen icon --- */
.lg-wolfbard .lg-maximize::after {
  color: var(--offwhite);
}

/* --- Rotate icons --- */
.lg-wolfbard .lg-flip-hor,
.lg-wolfbard .lg-flip-ver,
.lg-wolfbard .lg-rotate-left,
.lg-wolfbard .lg-rotate-right {
  color: var(--offwhite);
}

/* --- Loading spinner override --- */
.lg-wolfbard .lg-outer .lg-item::after {
  border: 4px solid var(--ink);
  border-top-color: transparent;
}

/* Hide the default lightGallery download button */
.lg-wolfbard #lg-download {
  display: none !important;
}

/* Ensure lightGallery uses our cursor theme */
.lg-outer,
.lg-outer * {
  cursor: var(--cursor-default);
}

/* Force site font into lightGallery (portalled outside normal flow) */
.lg-outer {
  font-family: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: var(--ink);
}

.lg-wolfbard .lg-sub-html,
.lg-wolfbard .lg-sub-html * {
  font-family: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

.lg-wolfbard .lg-counter {
  font-family: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

.lg-outer .lg-prev,
.lg-outer .lg-next,
.lg-outer .lg-icon,
.lg-outer .lg-thumb-item,
.lg-outer a,
.lg-outer button,
.lg-outer .variant-thumb,
.lg-outer .cameo-chip,
.lg-outer .reaction-btn {
  cursor: var(--cursor-pointer);
}


/* ==========================================================
   Comment Panel Overlay (inside lightGallery)
   ========================================================== */

/* Semi-transparent backdrop */
.lg-comment-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1092;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: var(--cursor-default);
}

.lg-comment-backdrop.is-visible {
  opacity: 1;
}

/* Slide-in side panel (desktop) */
.lg-comment-panel {
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(420px, calc(90vw - 16px));
  height: auto;
  background: var(--offwhite, #fef8f0);
  z-index: 1093;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25), 0 6px 0 var(--ink, #1a1a2e);
  border: 3px solid var(--ink, #1a1a2e);
  border-radius: var(--radius, 22px);
  transform: translateX(calc(100% + 16px));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink, #1a1a2e);
  overflow: hidden;
}

.lg-comment-panel.is-visible {
  transform: translateX(0);
}

/* Header bar */
.lg-comment-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  border-bottom: 3px solid var(--ink, #1a1a2e);
  background: var(--bg, #fff6ec);
  flex-shrink: 0;
}

.lg-comment-panel-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: inherit;
}

.lg-comment-panel-count {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.95rem;
}

.lg-comment-panel-close {
  background: var(--offwhite, #fef8f0);
  border: 3px solid var(--ink, #1a1a2e);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-pointer);
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s),
    border-color var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s),
    box-shadow var(--transition-fast, 0.15s);
  color: var(--ink, #1a1a2e);
  flex-shrink: 0;
  box-shadow: 0 3px 0 var(--ink, #1a1a2e);
}

.lg-comment-panel-close:hover {
  background: var(--accent, #f83459);
  color: var(--offwhite, #fef8f0);
  border-color: var(--accent, #f83459);
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.lg-comment-panel-close:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* --- Comment action buttons: own row inside narrow panel --- */
.lg-comment-list .comment-header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.lg-comment-list .comment-actions-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 2px;
}

.lg-comment-list .comment-delete-btn {
  margin-left: auto;
}

/* Scrollable body */
.lg-comment-panel-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Comment form area inside panel */
.lg-comment-form-area {
  flex-shrink: 0;
  border-bottom: 3px solid var(--ink, #1a1a2e);
}

.lg-comment-form {
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lg-comment-login {
  padding: 1.25rem;
  text-align: center;
}

.lg-comment-login .login-btn {
  border-radius: var(--radius-pill, 999px);
}

/* Comment list inside panel */
.lg-comment-list {
  flex: 1;
  padding: 0.75rem;
  overflow-y: auto;
}

.lg-comment-list .comment {
  font-size: 0.9rem;
  border-radius: var(--radius, 22px);
  border-width: 2.5px;
}

.lg-comment-list .comment-reply {
  border-radius: var(--radius-sm, 8px);
}

.lg-comment-list .comment-header {
  gap: 6px;
}

.lg-comment-list .comment-avatar {
  width: 24px;
  height: 24px;
}

.lg-comment-list .comment-body {
  font-size: 0.9rem;
}

.lg-comment-list .comment-replies {
  padding-left: 1rem;
}

.lg-comment-list .no-comments {
  padding: 2rem 0;
}

/* ============================================================
   Mobile lightGallery: collapsible bottom panel, bigger image
   ============================================================ */
@media (max-width: 800px) {
  /* Hide thumbnail strip on mobile */
  .lg-wolfbard .lg-thumb-outer {
    display: none !important;
  }

  /* Hide less-essential toolbar icons on mobile */
  .lg-wolfbard .lg-toolbar .lg-rotate-left,
  .lg-wolfbard .lg-toolbar .lg-rotate-right,
  .lg-wolfbard .lg-toolbar .lg-flip-hor,
  .lg-wolfbard .lg-toolbar .lg-flip-ver,
  .lg-wolfbard .lg-toolbar .lg-actual-size {
    display: none !important;
  }

  /* Reduce toolbar padding */
  .lg-wolfbard .lg-toolbar {
    padding: 4px 4px 0;
    gap: 2px;
  }

  .lg-wolfbard .lg-toolbar .lg-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* Tighten image padding so it fills more screen */
  .lg-wolfbard .lg-img-wrap {
    padding: 4px 4px 8px !important;
  }

  /* Sub-html: collapsible with drag handle */
  .lg-wolfbard .lg-sub-html {
    min-height: unset;
    overflow: hidden !important;
    position: relative;
    touch-action: pan-y; /* allow vertical swipe, prevent LG horizontal swipe */
    pointer-events: auto !important;
    cursor: var(--cursor-pointer);
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Drag handle / pull tab */
  .lg-wolfbard .lg-sub-html::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--ink);
    opacity: 0.3;
    margin: 6px auto 2px;
    flex-shrink: 0;
  }

  /* Expanded state toggled via JS */
  .lg-wolfbard .lg-sub-html.lb-panel-expanded {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  /* Collapsed: only show drag handle + caption row */
  .lg-wolfbard .lg-sub-html:not(.lb-panel-expanded) > :not(.lg-custom-caption) {
    display: none !important;
  }

  /* Smaller caption text */
  .lg-custom-caption {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem 0.5rem;
    min-height: unset;
  }

  /* Interactions inside caption: full-width row on mobile */
  .lg-custom-caption .lg-custom-interactions {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
  }

  .lg-custom-caption .lg-custom-interactions .interaction-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.55rem;
    gap: 4px;
    box-shadow: 0 3px 0 var(--ink);
  }

  .lg-custom-caption .lb-inline-cameos {
    flex-basis: 100%;
    justify-content: center;
  }

  /* Hide cameos and ext-links when collapsed — only show on expand */
  .lg-wolfbard .lg-sub-html:not(.lb-panel-expanded) .lb-inline-cameos,
  .lg-wolfbard .lg-sub-html:not(.lb-panel-expanded) .ext-links {
    display: none !important;
  }

  /* Stack interactions vertically on small screens */
  .lg-custom-interactions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lb-left-group {
    flex-direction: column;
    align-items: stretch;
  }

  .lb-interaction-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  /* Shrink buttons so they fit on narrow screens */
  .lg-custom-interactions .interaction-btn {
    font-size: 0.9rem;
    padding: 0.45rem 0.8rem;
    gap: 5px;
    box-shadow: 0 4px 0 var(--ink);
  }

  .lb-inline-cameos {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    border-top: 2px solid color-mix(in srgb, var(--ink) 15%, transparent);
    max-width: 100%;
    overflow: visible;
  }

  /* Comment panel: bottom sheet on mobile */
  .lg-comment-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80vh;
    border: none;
    border-top: 3px solid var(--ink, #1a1a2e);
    border-radius: var(--radius, 22px) var(--radius, 22px) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
  }

  .lg-comment-panel.is-visible {
    transform: translateY(0);
  }
}

/* ============================================================
   JS-driven mobile layout: .lg-mobile is toggled by lightbox.js
   via SiteConfig.isMobileDevice(). This catches landscape phones
   whose viewport width exceeds the 800px media-query breakpoint.
   ============================================================ */
.lg-mobile .lg-thumb-outer {
  display: none !important;
}

.lg-mobile .lg-toolbar .lg-rotate-left,
.lg-mobile .lg-toolbar .lg-rotate-right,
.lg-mobile .lg-toolbar .lg-flip-hor,
.lg-mobile .lg-toolbar .lg-flip-ver,
.lg-mobile .lg-toolbar .lg-actual-size {
  display: none !important;
}

.lg-mobile .lg-toolbar {
  padding: 4px 4px 0;
  gap: 2px;
}

.lg-mobile .lg-toolbar .lg-icon {
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-width: 3px;
}

.lg-mobile .lg-sub-html {
  min-height: unset !important;
  overflow: hidden !important;
  position: relative;
  touch-action: pan-y;
  pointer-events: auto !important;
  cursor: var(--cursor-pointer);
  max-width: 100vw;
  box-sizing: border-box;
}

.lg-mobile .lg-sub-html::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.3;
  margin: 3px auto 0;
  flex-shrink: 0;
}

.lg-mobile .lg-sub-html.lb-panel-expanded {
  max-height: 55vh !important;
  overflow-y: auto !important;
}

.lg-mobile .lg-sub-html:not(.lb-panel-expanded) > :not(.lg-custom-caption) {
  display: none !important;
}

.lg-mobile .lg-custom-caption {
  font-size: 0.78rem;
  padding: 0.15rem 0.6rem 0.5rem;
  min-height: unset;
  gap: 0.25rem;
}

/* Interactions inside caption on mobile LG */
.lg-mobile .lg-custom-caption .lg-custom-interactions {
  flex-basis: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding: 0;
  align-items: center;
}

.lg-mobile .lg-custom-caption .lg-custom-interactions .interaction-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.45rem;
  gap: 3px;
  box-shadow: 0 3px 0 var(--ink);
}

.lg-mobile .lg-custom-caption .lb-inline-cameos {
  flex-basis: 100%;
  justify-content: center;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Hide cameos when collapsed on mobile — only show on expand */
.lg-mobile .lg-sub-html:not(.lb-panel-expanded) .lb-inline-cameos {
  display: none !important;
}

.lg-mobile .lg-custom-caption .lb-inline-cameos .cameo-chip {
  font-size: 0.72rem;
}

.lg-mobile .lg-custom-caption .lb-inline-cameos .cameo-chip .avatar {
  width: 18px;
  height: 18px;
}

.lg-mobile .lg-prev,
.lg-mobile .lg-next {
  display: none !important;
}

.lg-mobile .lg-img-wrap {
  padding: 2px 2px 4px !important;
}

.lg-mobile .lg-image {
  border-width: 3px;
  border-radius: 12px;
}

.lg-mobile .lg-video-object {
  border-width: 3px;
  border-radius: 12px;
}

.lg-mobile .lg-custom-img .lg-image {
  border-width: 3px;
  border-radius: 12px;
}

.lg-mobile .lg-custom-interactions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  max-width: 100%;
  box-sizing: border-box;
}

.lg-mobile .lb-left-group {
  flex-direction: column;
  align-items: stretch;
}

.lg-mobile .lb-interaction-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.lg-mobile .lg-custom-interactions .interaction-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  box-shadow: 0 3px 0 var(--ink);
}

.lg-mobile .lb-inline-cameos {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  padding-top: 0.4rem;
  border-top: 2px solid color-mix(in srgb, var(--ink) 15%, transparent);
  max-width: 100%;
  overflow: visible;
}

.lg-mobile .lg-comment-panel {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80vh;
  border: none;
  border-top: 3px solid var(--ink, #1a1a2e);
  border-radius: var(--radius, 22px) var(--radius, 22px) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
}

.lg-mobile .lg-comment-panel.is-visible {
  transform: translateY(0);
}

/* ===== Variant mini-nav (prev/next thumbnails on lightbox, mobile only) ===== */
.variant-mini-nav {
  display: none;
}

.lg-mobile .variant-mini-nav {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}

.lg-mobile .variant-mini-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  width: 54px;
  flex: 0 0 54px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--offwhite);
  box-shadow: 0 4px 0 var(--ink);
  cursor: var(--cursor-pointer);
  font-family: var(--ui-font);
  opacity: 0.9;
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
}

.lg-mobile .variant-mini-btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink);
}

.lg-mobile .variant-mini-btn:active {
  opacity: 1;
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.lg-mobile .variant-mini-btn img {
  width: 100%;
  height: 48px;
  min-height: 48px;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
}

.lg-mobile .variant-mini-label {
  font-family: var(--ui-font);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px 3px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  box-sizing: border-box;
}

.lg-mobile .variant-mini-next {
  margin-left: auto;
}

/* Hide ext-links on mobile when collapsed, show on expand */
.lg-mobile .lg-sub-html:not(.lb-panel-expanded) .ext-links {
  display: none !important;
}

.lg-mobile .lg-sub-html.lb-panel-expanded .lg-custom-caption .ext-links {
  display: inline-flex;
}

/* Hide mini-nav when panel is expanded (user is browsing details) */
.lg-mobile:has(.lb-panel-expanded) .variant-mini-nav {
  display: none;
}

/* ---------- dark-mode: lightbox & detail ---------- */
/* ═══════════════════════════════════════════
   Dark Mode — LightGallery overrides
   ═══════════════════════════════════════════ */

/* Sub-HTML caption area: text was var(--ink) on var(--offwhite) — unreadable */
html.dark-mode .lg-wolfbard .lg-sub-html {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-top-color: var(--dm-border);
}

html.dark-mode .lg-custom-caption {
  color: var(--dm-text);
}

html.dark-mode .lg-custom-caption a:not(.ext-link) {
  color: var(--dm-accent) !important;
}

html.dark-mode .lg-description-preview {
  color: var(--dm-text-muted);
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Toolbar icons */
html.dark-mode .lg-wolfbard .lg-toolbar .lg-icon {
  color: var(--dm-text);
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

html.dark-mode .lg-wolfbard .lg-toolbar .lg-icon::after {
  -webkit-text-stroke: 0.8px var(--dm-text);
}

html.dark-mode .lg-wolfbard .lg-toolbar .lg-icon:hover {
  background: var(--dm-accent) !important;
  color: var(--dm-white) !important;
  border-color: var(--dm-accent);
}

html.dark-mode .lg-wolfbard .lg-toolbar .lg-icon:hover::after {
  -webkit-text-stroke: 0.8px var(--dm-white);
}

html.dark-mode .lg-wolfbard .lg-close::after {
  color: var(--dm-text);
}

/* Navigation arrows */
html.dark-mode .lg-wolfbard .lg-prev,
html.dark-mode .lg-wolfbard .lg-next {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* Counter */
html.dark-mode .lg-wolfbard .lg-counter {
  color: var(--dm-text);
}

/* Variant strip */
html.dark-mode .lg-custom-variant-strip {
  background: var(--dm-surface);
  border-top-color: var(--dm-border);
}

/* Interactions bar */
html.dark-mode .lg-custom-interactions {
  background: var(--dm-surface);
  border-top-color: var(--dm-border);
  color: var(--dm-text);
}

/* Tag chips */
html.dark-mode .lb-tag-chip {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dm-text-muted);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Thumbnail strip */
html.dark-mode .lg-wolfbard .lg-thumb-outer {
  background: var(--dm-surface) !important;
  border-top-color: var(--dm-border);
}

html.dark-mode .lg-wolfbard .lg-thumb-item {
  border-color: var(--dm-border) !important;
}

/* Image border */
html.dark-mode .lg-wolfbard .lg-image {
  border-color: var(--dm-border);
}

html.dark-mode .lg-wolfbard .lg-video-object {
  border-color: var(--dm-border);
}

/* Comment panel */
html.dark-mode .lg-comment-panel {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .lg-comment-panel-header {
  background: var(--dm-bg);
  border-bottom-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .lg-comment-panel-close {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* Outer container text */
html.dark-mode .lg-outer {
  color: var(--dm-text);
}

/* Expand link in toolbar */
html.dark-mode .lg-wolfbard .lg-toolbar .lg-expand-link {
  color: var(--dm-text);
  border-color: var(--dm-border);
  background: var(--dm-surface);
}

/* Disqus section */
html.dark-mode .lg-custom-disqus {
  background: var(--dm-surface);
  border-top-color: var(--dm-border);
  color: var(--dm-text);
}

/* Cameo panel inside lightbox */
html.dark-mode .lg-custom-cameo-panel {
  color: var(--dm-text);
}

/* Interaction buttons inside lightbox */
html.dark-mode .lg-custom-interactions .interaction-btn {
  background: var(--dm-elevated);
  color: var(--dm-text);
  border-color: var(--dm-border);
  box-shadow: 0 6px 0 var(--dm-border);
}

html.dark-mode .lg-custom-interactions .interaction-btn:hover {
  background: var(--dm-accent-dim);
  color: var(--dm-text);
}

html.dark-mode .lg-custom-interactions .interaction-btn.active {
  background: var(--dm-accent);
  color: #fff;
}

/* --- Art detail / slug page --- */
html.dark-mode .detail-hero {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

html.dark-mode .detail-meta {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .detail-meta .meta-description {
  color: var(--dm-text);
  border-top-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .detail-description {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .detail-description .description-content {
  color: var(--dm-text);
}

html.dark-mode .detail-meta .title {
  color: var(--dm-text);
}

html.dark-mode .detail-meta .tag {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .detail-meta .date {
  color: var(--dm-text-muted);
}

html.dark-mode #detail-nav .btn {
  color: var(--dm-text);
}

html.dark-mode #detail-nav .btn:hover {
  background: var(--accent);
  color: var(--dm-white);
}

html.dark-mode .tag-toggle-btn {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
  box-shadow: 0 4px 0 var(--dm-border);
}

html.dark-mode .tag-toggle-btn:hover {
  background: var(--dm-elevated);
}