/* ==========================================================================
   transformis® · Card-Slider Component
   --------------------------------------------------------------------------
   EIN Slider fuer Referenzen, Beitraege, und zukuenftige Einsaetze.
   JS: assets/js/tm-slider.js (initialisiert alle .tm-slider auf der Seite)

   Verwendung:
     Referenzen → <section class="tm-slider">
     Beitraege  → <section class="tm-slider tm-slider--white-nav">

   Variablen (ueberschreibbar pro Instanz via inline style oder Modifier):
     --tm-slider-card-w   Kartenbreite    (default 422px)
     --tm-slider-img-h    Bildhoehe       (default 295px)
     --tm-slider-text-h   Textbox-Hoehe   (default 280px)
     --tm-slider-gap      Luecke          (default 16px)
     --tm-slider-arrow-gap Pfeil-Abstand  (default 100px)
   ========================================================================== */

/* ── Basis-Variablen ── */
.tm-slider {
  --_card-w:   var(--tm-slider-card-w, 422px);
  --_img-h:    var(--tm-slider-img-h, 295px);
  --_text-h:   var(--tm-slider-text-h, 280px);
  --_card-h:   calc(var(--_img-h) + var(--_text-h));
  --_gap:      var(--tm-slider-gap, 16px);
  --_arrow-gap:var(--tm-slider-arrow-gap, 100px);
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* ── Stage: 3 Karten Desktop ── */
.tm-slider__stage {
  position: relative;
  width: calc(3 * var(--_card-w) + 2 * var(--_gap));
  height: var(--_card-h);
  margin: 0 auto;
}

/* ── Viewport (Overflow-Clip) ── */
.tm-slider__viewport {
  width: 100%;
  height: var(--_card-h);
  overflow: hidden;
  touch-action: pan-y;
}

/* ── Track (Flex-Container, wird per JS verschoben) ── */
.tm-slider__track {
  display: flex;
  gap: var(--_gap);
  transition: transform var(--tm-transition-slow);
}

/* ── Dragging State ── */
.tm-slider.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.tm-slider.is-dragging .tm-slider__track {
  transition: none !important;
}

/* ==========================================================================
   Karten
   ========================================================================== */

.tm-slider__card {
  flex: 0 0 var(--_card-w);
  width: var(--_card-w);
}

/* ── Bild ── */
.tm-slider__img {
  display: block;
  width: var(--_card-w);
  height: var(--_img-h);
  overflow: hidden;
  text-decoration: none;
}

.tm-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Textbox ── */
.tm-slider__body {
  width: var(--_card-w);
  height: var(--_text-h);
  background: var(--tm-white);
  border: 1px solid var(--tm-gray-border);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ── Titel (3 Zeilen reserviert) ── */
.tm-slider__title {
  margin: 0 0 14px;
  font: var(--tm-fw-bold) 25px/1.2 var(--tm-font-heading);
  color: var(--tm-blue);
  min-height: 90px;
}

.tm-slider__title a {
  color: inherit;
  text-decoration: none;
}

.tm-slider__title a:hover {
  text-decoration: underline;
}

/* ── Copy (Referenzen-Variante) ── */
.tm-slider__copy {
  margin: 0;
  font: var(--tm-fw-regular) 15px/1.6 var(--tm-font-body);
  color: var(--tm-black);
  padding-right: 30px;
  padding-bottom: 30px;
}

/* ── "Mehr lesen" Link ── */
.tm-slider__link {
  color: var(--tm-orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tm-slider__link:hover {
  border-color: var(--tm-orange);
}

/* ── Datum (Beitraege-Variante) ── */
.tm-slider__date {
  display: block;
  margin: 6px 0 16px;
  font: var(--tm-fw-regular) 14px/1.4 var(--tm-font-heading);
  color: var(--tm-black);
}

/* ── Button in Textbox (pushed nach unten) ── */
.tm-slider__body .tm-btn {
  margin-top: auto;
  width: 160px;
}

/* ==========================================================================
   Pfeile (Custom SVG)
   ========================================================================== */

.tm-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 29.459px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.tm-slider__arrow:hover {
  opacity: 0.85;
}

.tm-slider__arrow--prev {
  left: calc(-1 * var(--_arrow-gap));
}

.tm-slider__arrow--next {
  right: calc(-1 * var(--_arrow-gap));
}

/* ── SVG-Farbe default: Orange ── */
.tm-slider__arrow svg path {
  fill: var(--tm-orange);
}

/* ==========================================================================
   Dots / Bullets
   ========================================================================== */

.tm-slider__dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 54px;
}

.tm-slider__dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid var(--tm-orange);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.tm-slider__dot.is-active {
  background: var(--tm-orange);
}

/* ==========================================================================
   Modifier: --white-nav (weisse Pfeile & Dots, z.B. auf Bild-BG)
   ========================================================================== */

.tm-slider--white-nav .tm-slider__arrow svg path {
  fill: var(--tm-white) !important;
}

.tm-slider--white-nav .tm-slider__dot {
  border-color: var(--tm-white);
}

.tm-slider--white-nav .tm-slider__dot.is-active {
  background: var(--tm-white);
  border-color: var(--tm-white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── Tablet: 2 Karten ── */
@media (max-width: 1199px) {
  .tm-slider__stage {
    width: calc(2 * var(--_card-w) + 1 * var(--_gap));
  }
  .tm-slider {
    --_arrow-gap: 80px;
  }
}

/* ── Mobil: 1 Karte, keine Pfeile ── */
@media (max-width: 699px) {
  .tm-slider__stage {
    width: var(--_card-w);
  }
  .tm-slider {
    --_arrow-gap: 40px;
  }
  .tm-slider__arrow {
    display: none !important;
  }
}

/* ── Mobil: kleinere Karten (optional per Modifier) ── */
@media (max-width: 900px) {
  .tm-slider--compact-mobile {
    --_card-w: 322px;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .tm-slider__track {
    transition: none;
  }
}