/* ========================================
   IKITAI — Product galleries
   Thumbnail rails on product cards and inside the size-selector modal.
   Markup is generated by src/js/gallery.js.
   ======================================== */

/* --- Shared thumb --- */
.gallery-thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--black-soft);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.gallery-thumb.is-active {
  border-color: var(--red-bright);
}

/* The label is for screen readers and the modal only — the card rail is too
   small to carry text, so it is hidden there rather than duplicated. */
.gallery-thumb__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Card rail: vertical, top-right over the photo --- */
.gallery-rail--card {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.product-card:hover .gallery-rail--card,
.product-card:focus-within .gallery-rail--card {
  opacity: 1;
  transform: translateX(0);
}

.gallery-rail--card .gallery-thumb {
  width: 42px;
  aspect-ratio: 3 / 4;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(6px);
}

/* Touch devices get no hover state, so the rail has to be permanently visible
   or the other angles are undiscoverable. */
@media (hover: none) {
  .gallery-rail--card {
    opacity: 1;
    transform: none;
  }

  .gallery-rail--card .gallery-thumb {
    width: 34px;
  }
}

/* --- Product modal: gallery beside the detail column --- */
/* Single column on phones; two columns from 640px up, which keeps the price and
   size buttons in view without scrolling inside the modal. */
.modal-box--product {
  max-width: 760px;
}

@media (min-width: 640px) {
  .modal-box--product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
  }

  /* Everything in the detail column reads left-aligned, so the name, price,
     size label and size buttons all share one left edge. */
  .modal-box--product .modal-product,
  .modal-box--product .modal-sizes__label,
  .modal-box--product .modal-size-guide {
    text-align: left;
  }

  .modal-box--product .modal-sizes__grid {
    justify-content: flex-start;
  }
}

.modal-detail {
  min-width: 0;
}

.modal-gallery {
  margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
  .modal-gallery {
    margin-bottom: 0;
  }
}

.modal-gallery__main {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--black-soft);
  overflow: hidden;
}

.modal-gallery__main img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sits behind the photo; visible only when the file is missing. */
.modal-gallery__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-size: 3.5rem;
  color: rgba(139, 26, 26, 0.3);
  background: linear-gradient(135deg, #111 0%, #1a1a1a 50%, #0a0a0a 100%);
}

.gallery-rail--modal {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.gallery-rail--modal .gallery-thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
}