/* ==========================================================================
   LATEST-SLIDER
   Drei Zustände (siehe docs/Grundgerüst Website.md):
   1) Mobil (< --bp-mobile): Projekte untereinander gestapelt
   2) Fluid (bis --container-max, 110rem): Kartengröße richtet sich nach
      der Viewport-Breite, sodass IMMER exakt 2 Karten + ein schmaler
      Anriss (ohne Titel) der 3. Karte sichtbar sind. Der Anriss ist genau
      so breit wie --container-padding (= Abstand Content/Karten-Rand zum
      Viewport-Rand). Gleichung (100vw = Viewport-Breite):
        2 * Kartenbreite + 2 * --space-md (Gap) + 2 * --container-padding
          = 100vw
        => Kartenbreite = (100vw - 2*--space-md - 2*--container-padding) / 2
   3) Fixed (>= --container-max): Kartengröße friert bei dem Wert ein, den
      obige Formel bei Viewport-Breite = 110rem ergibt (--container-padding
      hat dort bereits sein Maximum von 3rem erreicht):
        (110rem - 2*1.5rem - 2*3rem) / 2 = 50.5rem
      Ein noch breiterer Viewport zeigt ab hier nur weitere Karten statt
      größere (links Rand wie .wrapper, rechts full-bleed).
   ========================================================================== */

.latest-slider {
  padding-block: var(--space-2xl);
  background: var(--color-background-highlight);
}

/* Optik von .latest-slider__heading kommt von .section-heading
   (components.css) — Klasse steht im Markup neben dieser BEM-Klasse, die
   hier nur als Hook für künftige section-spezifische Overrides erhalten
   bleibt. */
.latest-slider__viewport {
  position: relative;
}

.latest-slider__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  /* explizit setzen: sonst berechnet der Browser overflow-y ebenfalls als
     "auto" (CSS-Spec-Kopplung von overflow-x/-y), was eine ungewollte
     vertikale Scrollbar erzeugt, sobald z.B. der Hover-Zoom eines Cards
     minimal überläuft. */
  overflow-y: hidden;
  /* Direkte scrollLeft-Zuweisungen (Maus-Drag, Touch-Swipe) sollen sofort
     greifen statt der von html geerbten scroll-behavior:smooth zu folgen
     (die sonst jede Drag-Bewegung verzögert nachzieht). Buttons fordern
     "smooth" weiterhin explizit per JS an (siehe slider.js). */
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  /* Horizontales Swipen der Slider übernimmt, vertikales Swipen auf dem
     Slider bleibt dem Page-Scroll überlassen (Mobile). pan-x pan-y statt
     nur pan-x: reines pan-x lässt vertikale Gesten, die AUF dem Slider
     starten, ohne native Browser-Behandlung — Page-Scroll funktionierte
     dadurch nur noch vom Viewport-Rand aus (s. gleicher Fix in
     project-fan.css/testimonials.css). pan-x pan-y behält die native
     Richtungs-Arbitrierung, nur Pinch-/Doubletap-Zoom bleiben unterbunden. */
  touch-action: pan-x pan-y;
  /* Scrollbar ausblenden, native Scroll-Funktion (Drag/Swipe/Buttons)
     bleibt erhalten */
  scrollbar-width: none;
  padding-bottom: var(--space-xs);
  /* Rand links = exakt der Abstand, den .wrapper dem restlichen Content
     zum Viewport-Rand gibt (Auto-Margin-Zentrierung ab --container-max
     plus --container-padding). Rechts kein Rand: Karten laufen bis über
     den Viewport-Rand hinaus. Da der Rand Teil des scrollbaren Inhalts
     ist, verschwindet er automatisch, sobald man zu sliden beginnt. */
  --slider-gutter: calc(
    max((100% - var(--container-max)) / 2, 0px) + var(--container-padding)
  );
  padding-inline-start: var(--slider-gutter);
  padding-inline-end: 0;
  /* Ohne dies zählt scroll-snap den Rand NICHT zum Snapport dazu: das
     erste Element würde beim Laden (mandatory snap) sofort an scrollLeft
     0+Rand "einschnappen" und den Rand dadurch verschlucken. Mit
     scroll-padding wird der Rand Teil des Snapports, wodurch scrollLeft 0
     selbst ein gültiger Snap-Punkt ist und der Rand sichtbar bleibt. */
  scroll-padding-inline-start: var(--slider-gutter);
  cursor: grab;
}

.latest-slider__track::-webkit-scrollbar {
  display: none;
}

/* Während des Maus-Drags (slider.js): kein Snap, kein Text markieren */
.latest-slider__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.latest-slider__item {
  scroll-snap-align: start;
  /* Fluid bis --container-max: Kartenbreite passt sich der Viewport-Breite
     an, sodass hier immer exakt 2 Karten + Anriss der 3. sichtbar sind.
     Herleitung siehe Kommentar am Dateianfang. */
  flex: 0 0 calc((100vw - 2 * var(--space-md) - 2 * var(--container-padding)) / 2);
  min-width: 16rem;
}

/* bp: --container-max (110rem) — ab hier friert die Kartengröße ein,
   weitere Breite zeigt nur noch mehr Karten statt größere (Wert = obige
   Formel ausgewertet bei Viewport-Breite 110rem, siehe Dateianfang) */
@media (min-width: 110rem) {
  .latest-slider__item {
    flex-basis: 50.5rem;
  }
}

/* Prev/Next-Buttons: Position + Optik kommen aus der geteilten
   .slider-controls-Regel (components.css) — genutzt von diesem Slider UND
   testimonials-section.php. Hier nur die Sichtbarkeit fürs Mobile-Layout
   (s. u.), eigens für diesen Slider, da Testimonials mobil weiter slidet. */

/* bp: --bp-mobile (640px) — gestapelt, kein horizontaler Slider mehr */
@media (max-width: 640px) {
  .latest-slider__track {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    /* kein Sliden mehr, gestapelte Karten: rechts wie links normaler
       Container-Rand statt der asymmetrischen Slider-Randlogik */
    padding-inline: var(--container-padding);
  }

  .latest-slider__item {
    flex-basis: auto;
    min-width: 0;
  }

  .latest-slider__viewport .slider-controls {
    display: none;
  }
}