/* Media-Slider-Section: SectionHeader über einem horizontalen Karten-Slider.
   Steuerung (Prev/Next-Buttons) wie beim SectionSliderOverflow, zusätzlich
   Pagination-Dots. Slides = direkte Track-Kinder (.d35-media-card). */

.d35-media-slider__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.d35-media-slider__header {
  min-width: 0;
}

.d35-media-slider__slider {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.d35-media-slider__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* etwas Luft, damit Fokus-Ringe/Zoom der Randkarten nicht abschneiden */
  margin-inline: calc(var(--d35-gap) * -0.5);
  padding-inline: calc(var(--d35-gap) * 0.5);
}

.d35-media-slider__viewport::-webkit-scrollbar {
  display: none;
}

.d35-media-slider__track {
  display: grid;
  grid-auto-flow: column;
  gap: var(--d35-gap);
  align-items: stretch;
}

/* Sichtbare Karten (Section-Modifier). */
.d35-media-slider--per-view-2 .d35-media-slider__track {
  grid-auto-columns: calc((100% - var(--d35-gap)) / 2);
}

.d35-media-slider--per-view-3 .d35-media-slider__track {
  grid-auto-columns: calc((100% - var(--d35-gap) * 2) / 3);
}

.d35-media-slider--per-view-4 .d35-media-slider__track {
  grid-auto-columns: calc((100% - var(--d35-gap) * 3) / 4);
}

.d35-media-slider__track > * {
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Media-Format wird auf Slider-Ebene gesetzt und gilt einheitlich für alle
   Karten — auch im Shortcode-Pfad, wo die Karten sonst ihren eigenen 4-3-Default
   behalten würden. Gleiche Spezifität wie die Karten-Regel; media-slider.css
   lädt nach media-card.css (Dependency), gewinnt also per Quell-Reihenfolge. */
.d35-media-slider--ratio-4-3 .d35-media-card__media {
  aspect-ratio: 4 / 3;
}

.d35-media-slider--ratio-16-9 .d35-media-card__media {
  aspect-ratio: 16 / 9;
}

.d35-media-slider--ratio-3-2 .d35-media-card__media {
  aspect-ratio: 3 / 2;
}

.d35-media-slider--ratio-1-1 .d35-media-card__media {
  aspect-ratio: 1 / 1;
}

.d35-media-slider--ratio-3-4 .d35-media-card__media {
  aspect-ratio: 3 / 4;
}

.d35-media-slider--ratio-4-5 .d35-media-card__media {
  aspect-ratio: 4 / 5;
}

.d35-media-slider--ratio-9-16 .d35-media-card__media {
  aspect-ratio: 9 / 16;
}

/* Navigation: [Prev]  • • • • •  [Next] */
.d35-media-slider__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.d35-media-slider__nav-button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.d35-media-slider__dots {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* Ohne JS (leerer Dots-Container) keinen leeren Platz reißen. */
.d35-media-slider__dots:empty {
  display: none;
}

.d35-media-slider__dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--d35-color-border);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.d35-media-slider__dot:hover {
  background: color-mix(in srgb, var(--d35-color-primary) 55%, var(--d35-color-border));
}

.d35-media-slider__dot--active {
  background: var(--d35-color-primary);
  transform: scale(1.15);
}

@media (max-width: 1024px) {
  .d35-media-slider--per-view-3 .d35-media-slider__track,
  .d35-media-slider--per-view-4 .d35-media-slider__track {
    grid-auto-columns: calc((100% - var(--d35-gap)) / 2);
  }
}

@media (max-width: 768px) {
  .d35-media-slider__track {
    grid-auto-columns: minmax(16rem, calc(100% - var(--d35-gap))) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .d35-media-slider__viewport {
    scroll-behavior: auto;
  }

  .d35-media-slider__dot {
    transition: none;
  }
}