/* ===== Component Tokens ===== */
:root {
  --lightbox-backdrop-bg: rgba(8, 9, 11, 0.88);
  --lightbox-content-max-width: 90vw;
  --lightbox-content-max-height: 85vh;
  --lightbox-content-scale: 0.96;
  --lightbox-image-radius: 12px;
  --lightbox-image-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  --lightbox-close-offset-top: -50px;
  --lightbox-close-size: 38px;
  --lightbox-close-bg: rgba(255, 255, 255, 0.12);
  --lightbox-close-bg-hover: rgba(255, 255, 255, 0.18);
  --lightbox-close-icon-size: 20px;

  --item-image-column-width: 102px;
  --item-image-gap: 14px;
  --item-image-min-height: 84px;
  --item-image-radius: 20px;
  --item-image-bg: rgba(255, 255, 255, 0.03);
  --item-image-border: 1.5px solid rgba(190, 141, 93, 0.52);
  --item-image-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  --item-image-content-justify: center;
  --item-image-content-padding-top: 0;
  --item-no-image-description-width: 44ch;
  --item-image-fade-duration: 0.3s ease;
  --item-image-shimmer-size: 200% 100%;
}

/* ===== Image Lightbox ===== */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

#lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lightbox-backdrop-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-content {
  position: relative;
  max-width: var(--lightbox-content-max-width);
  max-height: var(--lightbox-content-max-height);
  z-index: 1;
  transform: scale(var(--lightbox-content-scale));
  transition: transform 0.22s ease;
}

#lightbox.active .lightbox-content {
  transform: scale(1);
}

.lightbox-img {
  max-width: var(--lightbox-content-max-width);
  max-height: var(--lightbox-content-max-height);
  object-fit: contain;
  border-radius: var(--lightbox-image-radius);
  box-shadow: var(--lightbox-image-shadow);
}

.lightbox-close {
  position: absolute;
  top: var(--lightbox-close-offset-top);
  right: 0;
  width: var(--lightbox-close-size);
  height: var(--lightbox-close-size);
  border: none;
  background: var(--lightbox-close-bg);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.lightbox-close:hover {
  background: var(--lightbox-close-bg-hover);
  transform: scale(1.03);
}

.lightbox-close:active {
  transform: scale(0.95);
}

.lightbox-close svg {
  width: var(--lightbox-close-icon-size);
  height: var(--lightbox-close-icon-size);
}

/* ===== Item Images ===== */
.item.has-image {
  display: grid;
  grid-template-columns: var(--item-image-column-width) minmax(0, 1fr);
  grid-template-areas: "image content";
  gap: var(--item-image-gap);
  align-items: center;
}

.item-img-container {
  grid-area: image;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--item-image-min-height);
  aspect-ratio: 1.05 / 0.92;
  align-self: center;
  margin: 0;
  border-radius: var(--item-image-radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--item-image-bg);
  border: var(--item-image-border);
  box-shadow: var(--item-image-shadow);
}

.item-img-bg {
  display: none;
}

.item-img-bg.loaded {
  opacity: 0;
}

.item-img-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--item-image-fade-duration);
}

.item-img-main.loaded {
  opacity: 1;
}

.item.has-image .item-content {
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--item-image-content-justify);
  padding-top: var(--item-image-content-padding-top);
}

.item:not(.has-image) .item-content {
  min-width: 0;
}

.item:not(.has-image) .description {
  max-width: var(--item-no-image-description-width);
}

/* Loading placeholder animation */
.item-img-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--glass-bg) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    var(--glass-bg) 100%
  );
  background-size: var(--item-image-shimmer-size);
  animation: shimmer 1.8s infinite;
  z-index: 0;
}

.item-img-container.loaded::before {
  display: none;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
  :root {
    --lightbox-close-offset-top: -45px;
    --lightbox-close-size: 36px;
    --lightbox-close-icon-size: 18px;
  }
}

@media screen and (max-width: 390px) {
  :root {
    --item-image-column-width: 92px;
    --item-image-gap: 12px;
    --item-image-min-height: 78px;
  }
}

@media screen and (max-width: 360px) {
  :root {
    --item-image-column-width: 84px;
    --item-image-min-height: 72px;
  }
}

@media screen and (max-width: 310px) {
  :root {
    --item-image-column-width: 62px;
    --item-image-gap: 8px;
    --item-image-min-height: 58px;
    --item-image-radius: 14px;
    --item-image-content-justify: flex-start;
    --item-image-content-padding-top: 2px;
  }

  .item:not(.has-image) .description,
  .item.has-image .description {
    max-width: none;
  }
}