/* =========================================================================
   gallery.css — Fotokarussell der Workshops in Ursberg
   Full-bleed Scroll-Snap-Bahn; die Fortschrittsleiste greift die
   Ringe des Maupe-Körpers auf und wächst mit dem Scrollen mit.
   ========================================================================= */

.gallery {
  margin-top: clamp(3.5rem, 8vw, 6rem);
}

.gallery__intro {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.gallery__title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 .7rem;
}

.gallery__lead { max-width: 52ch; }

/* ---------- Bahn ----------------------------------------------------------- */

/* Die Bahn läuft über die volle Fensterbreite, beginnt aber bündig mit dem
   Track — so schauen die Nachbarbilder an den Rändern heraus. */
.carousel__viewport {
  --slide-w: min(46rem, 78vw);
  --gutter: max(var(--space-x), calc((100% - var(--track-width)) / 2));

  display: flex;
  gap: clamp(.9rem, 2vw, 1.5rem);
  padding-inline: var(--gutter);
  /* Der Container klippt (overflow-x), deshalb unten Platz für den Schatten.
     Großzügig gemessen, nicht gerechnet: der weiche Ausläufer der Unschärfe
     reicht sichtbar weiter als die nominelle Ausdehnung. */
  padding-block: .5rem 2.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--ink) 8%, var(--bg));
  box-shadow: 0 .9rem 2.2rem -1.2rem color-mix(in srgb, var(--deep) 55%, transparent);
}

/* Das erste und letzte Bild rasten bündig zum Track ein, alle anderen mittig. */
.slide:first-child { scroll-snap-align: start; }
.slide:last-child  { scroll-snap-align: end; }

.slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity .45s ease, transform .6s ease;
}

/* Nachbarbilder treten einen Schritt zurück, das aktive tritt hervor. */
.slide:not(.is-active) img { opacity: .5; transform: scale(1.03); }

/* ---------- Steuerung ------------------------------------------------------ */

.carousel__controls {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  /* Das Schattenpolster der Bahn zählt als Abstand schon mit. */
  margin-top: clamp(.1rem, 1vw, .6rem);
}

.carousel__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.carousel__arrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel__arrow:hover:not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateY(-2px); }
/* aria-disabled statt disabled: am Ende der Bahn bliebe der Fokus sonst
   an einem Button hängen, der gerade aus dem Fokusbaum fällt. */
.carousel__arrow[aria-disabled="true"] { opacity: .28; cursor: default; }

/* Der Fortschritt wächst als geringelter Körper mit — ein Maupe-Segment
   je zurückgelegtem Stück Bahn. */
.carousel__rail {
  flex: 1 1 auto;
  min-width: 3rem;
  height: .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  overflow: hidden;
}

.carousel__rail-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg,
      var(--green) 0 .5rem,
      var(--yellow) .5rem .95rem,
      var(--blue-ink) .95rem 1.1rem);
}

.carousel__counter {
  flex: none;
  margin: 0;
  font-size: clamp(.85rem, .8rem + .2vw, .95rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--ink);
}
/* Die Gesamtzahl tritt hinter die laufende Nummer zurück — über das
   Schriftgewicht, nicht über Transparenz: --ink liegt auf der Rosé-Welt
   schon bei 4.54:1, jede Aufhellung fiele darunter. */
.carousel__counter-all { font-weight: 400; }

.carousel__status {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- Schmale Fenster ------------------------------------------------- */

@media (max-width: 48rem) {
  .carousel__viewport { --slide-w: 86vw; }
  .slide:not(.is-active) img { opacity: .65; }
  .carousel__arrow { width: 2.6rem; height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
  .slide img { transition: none; }
  .slide:not(.is-active) img { transform: none; }
}