/* 2-column grid: thumbs left, main right */
.lca-grid {
  display: grid;
  grid-template-columns: 100px 1fr;  /* left col 100px, right fills */
  gap: 24px;
  align-items: stretch;
}

/* Thumbs column */
.lca-col--thumbs {
  max-height: 100%;    /* cap entire rail */
  overflow: hidden;     /* Swiper handles scrolling */
}


/* Vertical thumbs swiper with max height */
.lca-thumbs-swiper {
  height: 100%;         /* fill parent */
  max-height: 520px;    /* cap again, just to be sure */
}
.lca-thumbs-swiper .swiper-slide {
  height: auto;
}
.lca-thumb {
  width: 100%;
  display: block;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px;
  background: #fff;
  margin-bottom: 8px;
  cursor: pointer;
}
.lca-thumb.is-active { border-color: #C62127; }
.lca-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 90px;   /* cap each thumb */
}

/* Main image column */
.lca-col--main { min-width: 0; }
.lca-main-swiper { width: 100%; }
.lca-main-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lca-main-swiper img {
  max-width: 100%;
  max-height: 600px;   /* optional cap for main image */
  object-fit: contain;
}

/* Keep side-by-side even on mobile */
@media (max-width: 640px) {
  .lca-grid {
    grid-template-columns: 80px 1fr; /* narrower left column */
    gap: 16px;
  }
  .lca-thumb img { max-height: 70px; }
}