/*! AlpenPura · image carousel + lightbox (Oct 2026) · js/ap-carousel.js
 * Used on the Chalet Gams pages (kitchen equipment). Scroll-snap track:
 * swipe on phones, arrow buttons and keyboard on desktop; a tap opens the
 * photo large in a lightbox. No zoom effects (owner request for /gams). */

.ap-car-host { min-width: 0; }
.ap-car { margin-top: 22px; max-width: 100%; min-width: 0; contain: inline-size; }
.ap-car-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ap-car-head .ey { margin: 0; }
.ap-car-nav { display: flex; gap: 8px; }
.ap-car-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--o-soft, #D1C4BA); background: transparent; color: var(--on-s, #1C1914);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.ap-car-btn .material-symbols-outlined { font-size: 18px; }
.ap-car-btn:hover:not(:disabled), .ap-car-btn:focus-visible { background: var(--pine, #1E2B1F); border-color: var(--pine, #1E2B1F); color: #fff; outline: none; }
.ap-car-btn:disabled { opacity: .3; cursor: default; }

.ap-car-track {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ap-car-track::-webkit-scrollbar { display: none; }
.ap-car-track:focus-visible { outline: 2px solid var(--gold, #A08060); outline-offset: 4px; }
.ap-car-item { flex: 0 0 calc((100% - 24px) / 2.35); scroll-snap-align: start; }
.ap-car-item figure { margin: 0; }
.ap-car-link {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px;
  background: var(--s-low, #F3F0EB); cursor: zoom-in;
}
.ap-car-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease; }
.ap-car-link:hover img { filter: brightness(1.06); }
.ap-car-zoom {
  position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px !important; color: #fff;
  background: rgba(20, 18, 14, .45); opacity: .85; transition: opacity .3s;
}
@media (hover: hover) { .ap-car-zoom { opacity: 0; } .ap-car-link:hover .ap-car-zoom, .ap-car-link:focus-visible .ap-car-zoom { opacity: 1; } }
.ap-car-cap { margin-top: 10px; }
.ap-car-cap b { display: block; font: 500 9px/1.5 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--primary, #6C5943); }
.ap-car-cap span { display: block; margin-top: 3px; font: 300 .8rem/1.5 'Manrope', sans-serif; color: var(--on-v, #4E453C); }
.ap-car-bar { height: 2px; margin-top: 16px; border-radius: 2px; overflow: hidden; background: var(--o-soft, #D1C4BA); opacity: .6; }
.ap-car-bar i { display: block; height: 100%; width: 0; background: var(--gold, #A08060); transition: width .2s; }
@media (max-width: 767px) { .ap-car-item { flex-basis: 74%; } }

/* Lightbox (one <dialog> per page, created by the script) */
.ap-lb { border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; color: #fff; }
.ap-lb[open] { display: flex; align-items: center; justify-content: center; }
.ap-lb::backdrop { background: rgba(20, 18, 14, .93); }
.ap-lb figure { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.ap-lb img { display: block; margin: 0 auto; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 3px; }
.ap-lb figcaption { margin-top: 14px; font: 300 .9rem/1.5 'Manrope', sans-serif; color: rgba(255, 255, 255, .85); }
.ap-lb figcaption b { display: block; margin-bottom: 6px; font: 500 10px/1.4 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #E6D6BA; }
.ap-lb-btn {
  position: absolute; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(20, 18, 14, .35); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .25s;
}
.ap-lb-btn:hover, .ap-lb-btn:focus-visible { background: rgba(255, 255, 255, .15); outline: none; }
.ap-lb-close { top: 18px; right: 18px; }
.ap-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.ap-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.ap-lb-count { position: absolute; top: 30px; left: 24px; font: 500 10px/1 'Inter', sans-serif; letter-spacing: .2em; color: rgba(255, 255, 255, .6); }
@media (max-width: 767px) {
  .ap-lb-prev, .ap-lb-next { top: auto; bottom: 20px; transform: none; }
  .ap-lb-prev { left: calc(50% - 58px); }
  .ap-lb-next { right: calc(50% - 58px); }
  .ap-lb img { max-height: calc(100dvh - 210px); }
}
@media (prefers-reduced-motion: reduce) { .ap-car-track { scroll-behavior: auto; } }