/* Block: Technology
   Белый контейнер с тенью; внутри — баннер с фото-фоном лаборатории и
   двумя стеклянными карточками, плюс «бегущая строка» (theses).
   Под баннером — широкая ссылка-кнопка модалки про этнический состав.

   Раскладки:
   ≤575       — компактный мобильный (BG mobile, заголовок 28/32, theses скроллятся снизу абсолютом).
   576-767    — тот же мобильный лэйаут, но шире контейнер (BG tablet).
   768-1099   — десктоп-типографика (40/48), баннер 600, theses всё ещё абсолютом скроллятся.
   ≥1100      — desktop с фоном «BG desktop»: theses в нормальном flow, центр, без скролла/анимации.
   ≥1440      — резиновый внешний padding, без max-width у банера.

   Theses (на ≤1099) — это бесконечная бегущая строка:
   список продублирован, .technology__theses-track двигается на -50% по X. */

.technology {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* ≤1099 — без боковых padding (баннер touches the edges).
     На ≥1100 padding возвращаются. */
  padding-block-start: var(--spacing-40);
  padding-block-end: var(--spacing-48);
  padding-inline: 0;
}

/* === Внешний контейнер === */
.technology__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: var(--color-surface-bright);
  border-radius: var(--radius-32);
  box-shadow: var(--shadow-technology);
}

/* === Баннер с фото-фоном и контентом ===
   Раскладка через CSS-grid: 2 строки — заголовок (auto) и cards (1fr).
   theses-wrap остаётся абсолютно у нижнего края и не участвует в grid-flow.
   1fr-строка cards заполняет оставшееся пространство, а внутри сами
   карточки центрируются через justify-content: center. */
.technology__banner {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: var(--spacing-24);
  width: 100%;
  height: 490px;
  padding-block-start: var(--spacing-20);
  padding-block-end: 67px;
  padding-inline: var(--spacing-20);
  border-radius: var(--radius-32);
  background-image: url("../../assets/Technology BG mobile.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Декоративные градиентные оверлеи из Figma поверх баннера.
   Сверху — синяя «дымка» (читаемость заголовка), снизу — белёсая «дымка»
   (читаемость тезисов / стеклянных карточек).
   PNG-картинки разные на mobile / tablet / desktop, поэтому подменяем
   через media-queries вместе с высотой. */
.technology__banner::before,
.technology__banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.technology__banner::before {
  top: 0;
  height: 164px;
  background-image: url("../../assets/Technology_fade_top_mobile.png");
}

.technology__banner::after {
  bottom: 0;
  height: 203px;
  background-image: url("../../assets/Technology_fade_bottom_mobile.png");
  /* Нижний оверлей отражён по горизонтали (отражение через горизонтальную
     ось — низ становится верхом, scaleY(-1)). */
  transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform-origin: center center;
}

/* === Заголовок === */
.technology__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  max-width: 640px;
  width: 100%;
  color: var(--color-on-surface);
  text-align: center;
}

.technology__title {
  margin: 0;
  font-size: var(--font-headline-s-size);
  font-weight: 600;
  line-height: var(--font-headline-s-line);
  letter-spacing: -0.4px;
}

.technology__subtitle {
  margin: 0;
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

/* === Стеклянные карточки ===
   cards — это вторая (1fr) строка grid-баннера, она заполняет всё
   доступное вертикальное пространство между header и нижним краем
   баннера. Внутри cards-блока justify-content: center центрирует
   сами карточки по вертикали. */
.technology__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-8);
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.technology__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-24);
  background: var(--color-technology-card-bg);
  backdrop-filter: blur(40.3px);
  -webkit-backdrop-filter: blur(40.3px);
  color: var(--color-on-surface);
}

.technology__card-title {
  margin: 0;
  font-size: var(--font-title-m-size);
  font-weight: 600;
  line-height: var(--font-title-m-line);
  letter-spacing: var(--font-title-m-tracking);
}

.technology__card-text {
  margin: 0;
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

/* === Theses / бегущая строка ===
   На ≤1099 — позиционируется абсолютно у нижнего края банера и
   крутится бесконечной анимацией (с возможностью ручного драг/свайп). */
.technology__theses-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
}

.technology__theses-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Юзер может пальцем смахивать ленту по горизонтали поверх анимации. */
  -webkit-overflow-scrolling: touch;
}

.technology__theses-scroll::-webkit-scrollbar {
  display: none;
}

.technology__theses-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* На ≤1099 бесконечная марки-анимация: продублированный набор
     едет на -50% за один цикл, что даёт бесшовное зацикливание. */
  animation: technology-marquee 40s linear infinite;
}

.technology__theses-track:hover,
.technology__theses-scroll:focus-within .technology__theses-track {
  animation-play-state: paused;
}

.technology__theses {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.technology__thesis {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) 0;
  white-space: nowrap;
}

.technology__thesis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.technology__thesis-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tecan Freedom Evo — круглая «эмблема» на квадрате 35×35.
   border-radius 32 даёт мягкое скругление, аналогичное Figma. */
.technology__thesis-icon--tecan {
  border-radius: 32px;
  overflow: hidden;
}

/* iScan имеет нестандартное соотношение 36×27 — оставляем «как есть». */
.technology__thesis-icon--iscan {
  width: 36px;
  height: 27px;
}

.technology__thesis-text {
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  color: var(--color-on-surface);
}

@keyframes technology-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* === Modal-link под баннером (определяем этнический состав) === */
.technology__modal-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  width: 100%;
  padding: var(--spacing-16) var(--spacing-20);
  border-radius: var(--radius-32);
  text-decoration: none;
  color: var(--color-on-surface);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.technology__modal-link:hover {
  /* Полупрозрачная белая заливка поверх всей кнопки */
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 0.6;
}

.technology__modal-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

.technology__modal-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ============================================ */
/* ≥576 — расширяем баннер, используем BG tablet  */
/* + tablet-версии fade-оверлеев                  */
/* ============================================ */
@media (min-width: 576px) {
  .technology__banner {
    background-image: url("../../assets/Technology BG tablet.jpg");
  }

  .technology__banner::before {
    height: 165px;
    background-image: url("../../assets/Technology_fade_top_tablet.png");
  }

  .technology__banner::after {
    height: 129px;
    background-image: url("../../assets/Technology_fade_bottom_tablet.png");
  }

  .technology__card {
    max-width: 434px;
  }
}

/* ============================================ */
/* ≥768 — desktop-типографика и компоновка       */
/* ============================================ */
@media (min-width: 768px) {
  .technology {
    padding-block-end: var(--spacing-64);
  }

  .technology__banner {
    height: 600px;
    padding-block-start: var(--spacing-40);
    padding-block-end: 67px;
  }

  .technology__title {
    font-size: var(--font-headline-l-size);
    line-height: var(--font-headline-l-line);
    letter-spacing: var(--font-headline-l-tracking);
  }

  .technology__subtitle {
    font-size: var(--font-title-l-size);
    line-height: var(--font-title-l-line);
    letter-spacing: var(--font-title-l-tracking);
  }

  .technology__card {
    width: 100%;
    max-width: 434px;
    padding: var(--spacing-20);
    border-radius: var(--radius-24);
  }

  .technology__card-text {
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line);
    letter-spacing: var(--font-body-xs-tracking);
  }

  .technology__theses-wrap {
    /* На 768-1099 лента ездит у нижнего края с горизонтальным отступом 20. */
    left: var(--spacing-20);
    right: var(--spacing-20);
    width: auto;
  }

  .technology__banner::before {
    height: 405px;
  }

  .technology__modal-text {
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line);
  }
}

/* ============================================ */
/* ≥1100 — статичная раскладка с BG desktop      */
/* ============================================ */
@media (min-width: 1100px) {
  .technology {
    padding-block-start: var(--spacing-80);
    padding-block-end: 0;
    padding-inline: var(--spacing-20);
  }

  .technology__container {
    max-width: var(--technology-content-max);
    margin-inline: auto;
  }

  .technology__banner {
    background-image: url("../../assets/Technology BG desktop.jpg");
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline: 60px;
  }

  .technology__banner::before {
    height: 218px;
    background-image: url("../../assets/Technology_fade_top_desktop.png");
  }

  .technology__banner::after {
    height: 100px;
    background-image: url("../../assets/Technology_fade_bottom_desktop.png");
  }

  .technology__header {
    max-width: 800px;
    padding-block-start: var(--spacing-40);
  }

  .technology__card {
    width: 424px;
    background: var(--color-technology-card-bg-desktop);
  }

  .technology__card-title {
    font-size: var(--font-title-l-size);
    line-height: var(--font-title-l-line);
    letter-spacing: var(--font-title-l-tracking);
  }

  .technology__card-text {
    font-size: var(--font-body-s-size);
    line-height: var(--font-body-s-line);
    letter-spacing: var(--font-body-s-tracking);
  }

  /* На ≥1100 баннер становится 3-строчным гридом:
     header (auto) / cards (1fr) / theses (auto). */
  .technology__banner {
    grid-template-rows: auto 1fr auto;
  }

  /* Theses — статичный flex с центрированием, без скролла и без анимации. */
  .technology__theses-wrap {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding-block-end: var(--spacing-20);
  }

  .technology__theses-scroll {
    overflow: visible;
  }

  .technology__theses-track {
    width: auto;
    justify-content: center;
    animation: none;
  }

  .technology__theses {
    gap: var(--spacing-16);
  }

  .technology__thesis {
    padding: 0;
    gap: var(--spacing-8);
  }

  /* Скрываем дубликат, чтобы тезисы не задваивались на десктопе. */
  .technology__theses--clone {
    display: none;
  }

  .technology__thesis-text {
    font-size: var(--font-body-s-size);
    font-weight: 600;
    line-height: var(--font-body-s-line);
    letter-spacing: var(--font-body-s-tracking);
  }

  .technology__modal-link {
    padding: var(--spacing-16) var(--spacing-20);
  }

  .technology__modal-text {
    font-size: var(--font-body-s-size);
    line-height: var(--font-body-s-line);
    letter-spacing: var(--font-body-s-tracking);
  }
}

/* ============================================ */
/* ≥1440 — резиновый внешний padding              */
/* ============================================ */
@media (min-width: 1440px) {
  .technology {
    padding-inline: max(
      var(--spacing-64),
      calc((100% - var(--technology-content-max)) / 2)
    );
  }

  .technology__container {
    max-width: none;
  }

  .technology__card {
    width: 426px;
    max-width: 426px;
  }

  .technology__banner::before {
    height: 297px;
  }

  .technology__banner::after {
    height: 86px;
  }
}