/* ===== TEUDOT — certificates carousel ===== */
.teudot { --h: 572; background: transparent; margin-top: 50px; }
.teudot__title {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 686px; text-align: center; font-size: 42px; line-height: 48px; font-weight: 400; color: #000;
  transform: translate(-50%, -50%);
}
/* container sits in the scaled stage at the Figma grid coords */
.teudot__track { position: absolute; top: 81px; left: 313px; width: 1302px; }
/* Splide-core hides .splide (visibility:hidden) until its JS adds .is-initialized. We only mount
   Splide on mobile, so on desktop it would stay hidden forever — force it visible everywhere.
   (Also a safety net if the Splide script ever fails to load on mobile.) */
.teudot .splide { visibility: visible !important; }
/* desktop: Splide is NOT mounted (mobile-only) → force the original static 4-up grid on its
   list markup, overriding Splide-core's not-initialized rules (higher specificity → need !important) */
@media (min-width: 1025px) {
  .teudot .splide__track { overflow: visible !important; }
  .teudot .splide__list {
    display: grid !important; grid-template-columns: repeat(4, 303px); gap: 0 30px;
    direction: rtl; transform: none !important;
  }
  .teudot .splide__slide { width: auto !important; }
}
.tcert { position: relative; height: 413px; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 22px rgba(7,28,55,.12); }
.tcert__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcert__zoom {
  position: absolute; left: 14px; bottom: 14px; width: 48px; height: 48px;
  background: #fff; border-radius: 8px; box-shadow: 0 0 4px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.tcert__zoom img { width: 30px; height: 30px; }
.teudot__arrow {
  position: absolute; top: 259px; width: 62px; height: 62px; background: none; border: 0; padding: 0;
}
.teudot__arrow img { width: 100%; height: 100%; }
.teudot__arrow--right { left: 1637px; }
.teudot__arrow--left { left: 226px; transform: scaleX(-1); }

@media (max-width: 1024px) {
  .teudot { --h: auto; height: auto; }
  .teudot .stage { position: relative; width: 100%; height: auto; transform: none; padding: 36px 0; }
  .teudot__title { position: relative; top: 0; left: 0; transform: none; width: auto; font-size: 26px; padding: 0 16px; }
  /* Splide drives the layout on mobile (perPage:1 + loop). Reset the desktop absolute box + grid.
     Cap the slider width so the certificate stays a sane size on tablets (not a giant full-width image). */
  .teudot__track { position: relative; top: 0; left: 0; width: 100%; max-width: none; margin: 22px 0 0; }
  .teudot .splide { overflow: hidden; }
  .teudot .splide__track { overflow: hidden; }
  .teudot .splide__list { display: flex !important; grid-template-columns: none; gap: 14px; }
  /* portrait card like the video reels — size controlled HERE (not by Splide) so it is never
     giant even if the Splide script fails to load. Whole certificate, no crop. */
  .tcert {
    flex: 0 0 auto; width: 190px; max-width: 60vw; height: auto; aspect-ratio: 632 / 900;
  }
  .tcert__img { object-fit: cover; }
  /* arrows at the screen edges, above the cards (same as the video carousel) */
  .teudot__arrow {
    display: block; width: 46px; height: 46px; padding: 0;
    background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(7,28,55,.20);
    z-index: 30; top: 50%; transform: translateY(-50%);
  }
  .teudot__arrow img { width: 100%; height: 100%; }
  .teudot__arrow--right { right: 6px; left: auto; }
  .teudot__arrow--left { left: 6px; right: auto; transform: translateY(-50%) scaleX(-1); }
}