/* ============================================================
   TRENER — trainer cards. Figma: trener (top:4376 height:830)
   ============================================================ */
.trener {
  position: relative;
  width: 1728px;
  height: 830px;
  background: var(--color-bg);
}
.trener__heading {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 64px;
  line-height: 68px;
  color: var(--color-white);
  white-space: nowrap;
}
.trener__intro {
  position: absolute;
  left: 50%;
  top: 92px;
  transform: translateX(-50%);
  width: 1025px;
  font-size: 18px;
  line-height: 28px;
  color: #a5a3a0;
  text-align: center;
}
/* slider viewport spans the 3 cards (404) + gaps (130) + trailing gap:
   3*404 + 3*130 = 1602, positioned at left 128 -> cards land at
   128 / 662 / 1196 exactly as the original static design. */
.trener__slider-wrap {
  position: absolute;
  left: 128px;
  top: 208px;
  width: 1602px;
  height: 530px;
}
.trener__slider-wrap .tns-ovh { height: 530px; }
.trener__card {
  position: relative;
  width: 404px;
  height: 530px;
  border-radius: 20px;
  overflow: hidden;
}
.trener__card img { width: 100%; height: 100%; object-fit: cover; }
.trener__card-fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 224px;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.trener__name {
  position: absolute;
  top: 381px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 26px;
  color: var(--color-white);
}
.trener__exp {
  position: absolute;
  top: 411px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: var(--color-white);
}
.trener__desc {
  position: absolute;
  top: 449px;
  left: 16px;
  width: calc(100% - 32px);
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-gray-light);
}
.trener__cta { left: 759px; top: 770px; }
.trener__nav {
  position: absolute;
  left: 50%;
  top: 458px;
  width: 594.39px;
  height: 31px;
  transform: translateX(-50%);
  z-index: 5;
}
.trener__arrows { position: absolute; inset: 0; }
.trener__arrow {
  position: absolute;
  top: 0;
  width: 56px;
  height: 31px;
  overflow: hidden;
  cursor: pointer;
}
.trener__arrow img {
  position: absolute;
  top: 0;
  width: 594.39px;
  height: 31px;
  max-width: none;
  pointer-events: none;
}
.trener__arrow--prev { left: 0; }
.trener__arrow--prev img { left: 0; }
.trener__arrow--next { left: 538.39px; }
.trener__arrow--next img { left: -538.39px; }

.trener-mobile { display: none; }