/* Original workshop photographs, kept whole in every preview. */
.workshop-carousel { --carousel-gap: 24px; min-width: 0; }
.workshop-section .section-heading h2 { max-width: 750px; }
.carousel-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
  gap: var(--carousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-block: 6px 18px;
  scrollbar-width: thin;
  scrollbar-color: #657887 #13212c;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-track { background: #13212c; border-radius: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: #657887; border-radius: 6px; }
.carousel-track:focus-visible { outline: 2px solid var(--yellow); outline-offset: 7px; border-radius: 10px; }
.carousel-slide {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid #354956;
  border-radius: 12px;
  background: #192b37;
  overflow: hidden;
}
.workshop-carousel .gallery-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px 10px 0 0;
  background: #0d1821;
  touch-action: pan-x pan-y pinch-zoom;
}
.workshop-carousel .gallery-photo > img,
.workshop-carousel .gallery-photo:hover > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}
.workshop-carousel .gallery-photo:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.workshop-carousel .zoom-icon {
  width: 42px;
  height: 42px;
  right: 12px;
  bottom: 12px;
  background: #0b1825e8;
  border: 1px solid #b2c0c955;
  transition: background .2s ease, color .2s ease;
}
.workshop-carousel .gallery-photo:hover .zoom-icon { background: var(--yellow); color: #101d27; }
.carousel-slide figcaption {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 84px;
  margin: 0;
  padding: 18px 18px 19px;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.55;
  color: #edf2f5;
}
.carousel-slide figcaption > .carousel-slide-number { padding-top: 2px; font-size: .8125rem; color: var(--yellow); font-variant-numeric: tabular-nums; }
.carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; }
.carousel-hint { color: #bfcdd6; font-size: .9375rem; line-height: 1.5; }
.carousel-controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #f6d42d;
  background: var(--yellow);
  color: #101d27;
  transition: background .18s ease, border-color .18s ease;
}
.carousel-arrow:not(:disabled):hover { background: #ffe66c; border-color: #ffe66c; }
.carousel-arrow:disabled { background: #203440; border-color: #475b69; color: #8396a3; cursor: default; }
.carousel-arrow .icon { width: 25px; height: 25px; stroke-width: 2; }
.carousel-count { min-width: 112px; text-align: center; color: #e7edf1; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.carousel-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 681px) and (max-width: 950px) {
  .workshop-carousel { --carousel-gap: 20px; }
  .carousel-track { grid-auto-columns: calc((100% - var(--carousel-gap)) / 2); }
}
@media (max-width: 680px) {
  .workshop-carousel { --carousel-gap: 16px; }
  .carousel-track { grid-auto-columns: 100%; padding-bottom: 16px; }
  .carousel-slide figcaption { min-height: 76px; font-size: 1rem; padding: 16px; }
  .carousel-toolbar { flex-direction: column; align-items: stretch; gap: 17px; padding-top: 19px; }
  .carousel-hint { font-size: .875rem; text-align: center; }
  .carousel-controls { justify-content: center; gap: 18px; }
  .carousel-count { min-width: 95px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
  .workshop-carousel .zoom-icon, .carousel-arrow { transition: none; }
}