/* Gallery carousel. Themes restyle it with these custom properties (set on .gcar) or the classes below. */
.gcar {
  --gcar-aspect: 3 / 2;
  --gcar-fit: contain;            /* contain shows whole photos; cover fills the frame */
  --gcar-bg: #f3f4f6;
  --gcar-radius: 8px;
  --gcar-accent: #111;
  --gcar-thumb-width: 96px;
  --gcar-gap: 10px;
  position: relative;
  min-width: 0; /* shrink inside flex and grid parents */
}

.gcar__viewport { position: relative; }
.gcar__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: var(--gcar-radius); background: var(--gcar-bg);
}
.gcar__track::-webkit-scrollbar { display: none; }
.gcar__track:focus-visible { outline: 2px solid var(--gcar-accent); outline-offset: 3px; }
.gcar__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: var(--gcar-aspect); margin: 0; }
.gcar__slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: var(--gcar-fit); }
/* A lone photo keeps its own shape */
.gcar:not(.gcar--multi) .gcar__slide { aspect-ratio: auto; }
.gcar:not(.gcar--multi) .gcar__slide img { height: auto; }
.gcar__caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 28px 18px 12px;
  color: #fff; font-size: .88rem; line-height: 1.4;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}

.gcar__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transition: background .2s, transform .2s;
}
.gcar__nav[hidden] { display: none; }
.gcar__nav:hover { background: #fff; }
.gcar__nav:focus-visible { outline: 2px solid var(--gcar-accent); outline-offset: 2px; }
.gcar__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gcar__nav--prev { left: 14px; }
.gcar__nav--next { right: 14px; }

.gcar__count {
  position: absolute; top: 12px; right: 12px; margin: 0; padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .78rem; font-variant-numeric: tabular-nums;
}
.gcar__count[hidden] { display: none; }

.gcar__thumbs {
  display: flex; gap: var(--gcar-gap); margin: var(--gcar-gap) 0 0; padding: 2px 2px 6px; list-style: none;
  overflow-x: auto; scrollbar-width: thin;
}
.gcar__thumbs li { flex: 0 0 auto; }
.gcar__thumb {
  display: block; width: var(--gcar-thumb-width); border-radius: 4px; overflow: hidden;
  outline: 2px solid transparent; outline-offset: 0; opacity: .6; transition: opacity .2s, outline-color .2s;
}
.gcar__thumb img { display: block; width: 100%; height: auto; }
.gcar__thumb:hover { opacity: .9; }
.gcar__thumb[aria-current="true"] { opacity: 1; outline-color: var(--gcar-accent); }
.gcar__thumb:focus-visible { opacity: 1; outline-color: var(--gcar-accent); }

@media (max-width: 560px) {
  .gcar { --gcar-thumb-width: 72px; }
  .gcar__nav { width: 36px; height: 36px; }
  .gcar__nav--prev { left: 8px; }
  .gcar__nav--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gcar__nav, .gcar__thumb { transition: none; }
}