/* =========================================================
   CTRL LAB
   ---------------------------------------------------------
   В файле оставлены только 2 версии секции:
   1. desktop — базовая версия по умолчанию
   2. mobile  — включается на узких экранах

   Никаких отдельных tablet-сценариев больше нет.
   Всё, что шире mobile breakpoint, живёт как desktop.
   ========================================================= */

/* =========================================================
   1. DESKTOP — базовая версия
   ========================================================= */

.lab {
  padding: 64px 0 0;
  margin-bottom: 0;
}

.lab .section-title {
  font-family: "Bounded", system-ui, -apple-system, sans-serif;
  font-weight: 466;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
}

.lab__grid {
  /* Секция строится как текст сверху + визуальная сцена ниже */
  display: block;
}

.lab__content {
  /* Верхний текстовый блок */
  width: 100%;
  max-width: 978px;
}

.lab__text {
  margin: 0;
  font-family: "Bounded", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  color: #1a1a1a;
}

.lab__visual {
  /* Общая сцена: стол + планшет + desktop-монитор */
  position: relative;
  margin-top: 8px;
  min-height: 640px;
  overflow: visible;
  isolation: isolate;

  /*
    Базовые координаты desktop-сцены.
    Если нужно двигать всю композицию, удобнее править эти переменные,
    а не искать значения по нескольким селекторам.
  */
  --lab-tablet-left: 0px;
  --lab-tablet-top: 120px;
  --lab-tablet-width: 353px;
  --lab-desktop-top: 42px;
  --lab-desktop-width: 720px;
  --lab-desktop-gap-from-tablet: 200px;
  --lab-table-height: 150px;
  --lab-stand-width: 180px;
  --lab-stand-height: 192px;
  --lab-stand-bottom: -166px;
}

.lab__visual::before {
  /* Серый "стол" по всей ширине окна */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: var(--lab-table-height);
  transform: translateX(-50%);
  background: rgb(212, 212, 212);
  z-index: 0;
}

/* =========================================================
   2. Устройства в desktop-сцене
   ========================================================= */

.lab-device {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

.lab-device--desktop {
  /* Большой монитор справа, привязан по позиции к планшету */
  width: var(--lab-desktop-width);
  height: auto;
  aspect-ratio: 720 / 405;
  left: calc(
    var(--lab-tablet-left) + var(--lab-tablet-width) +
      var(--lab-desktop-gap-from-tablet)
  );
  right: auto;
  top: var(--lab-desktop-top);
  z-index: 1;
}

.lab-device--tablet {
  /* Планшет слева, стоит ниже монитора */
  width: var(--lab-tablet-width);
  height: auto;
  aspect-ratio: 353 / 457;
  left: var(--lab-tablet-left);
  top: var(--lab-tablet-top);
  z-index: 2;
}

.lab-device__frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14px;
  background: #0f0f10;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.lab-device--desktop .lab-device__frame {
  /* У монитора в фигме есть легкое скругление по внешней рамке */
  border-radius: 10px;
}

.lab-device--tablet .lab-device__frame {
  border-radius: 30px;
}

.lab-device--desktop .lab-device__screen {
  /* Сам экран тоже не совсем острый, но скругление меньше рамки */
  border-radius: 4px;
}

.lab-device__screen {
  width: 100%;
  height: 100%;
  padding: 26px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.lab-device--tablet .lab-device__screen {
  padding: 18px;
  border-radius: 24px;
}

.lab-stand {
  /* PNG-ножка монитора */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--lab-stand-bottom);
  width: var(--lab-stand-width);
  height: var(--lab-stand-height);
  z-index: 0;
}

.lab-stand__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   3. Контент внутри экранов
   ========================================================= */

.lab-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #111;
}

.lab-app__title {
  font-weight: 466;
  letter-spacing: 0;
}

.lab-app--desktop .lab-app__title {
  font-family: "Bounded", system-ui, sans-serif;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 8px;
}

.lab-app--desktop .lab-app__desc {
  margin: 0 0 12px;
  font-family: "Bounded", system-ui, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.lab-app--desktop .lab-app__link {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.lab-app--tablet .lab-app__title {
  font-family: "Bounded", system-ui, sans-serif;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 6px;
}

.lab-app--tablet .lab-app__desc {
  margin: 0 0 10px;
  font-family: "Bounded", system-ui, sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 16px;
}

.lab-app--tablet .lab-app__link {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
}

.lab-app__thumbs {
  /* 4 превью внутри планшета */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.lab-app--tablet .lab-app__thumbs {
  gap: 6px;
  margin: 8px 0 10px;
}

.lab-app__cards {
  /* 4 карточки внутри desktop */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0 12px;
}

.lab-thumb,
.lab-card,
.lab-card__img {
  height: auto;
  background: transparent;
  overflow: visible;
}

.lab-thumb img,
.lab-card__img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.lab-card {
  padding: 0;
}

.lab-card__line {
  display: none;
}

.lab-app__link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  margin-left: 0;
  pointer-events: auto;
}

/* =========================================================
   4. MOBILE — та же сцена, но в масштабе
   ---------------------------------------------------------
   Здесь нет отдельной новой композиции: на мобильном
   используются те же пропорции desktop-сцены.
   ========================================================= */

@media (max-width: 640px) {
  .lab {
    padding: 56px 0 0;
    margin-bottom: 0;
  }

  .lab .section-title {
    font-size: 20px;
    line-height: 28px;
  }

  .lab__content {
    max-width: 100%;
  }

  .lab__text {
    font-size: 12px;
    line-height: 20px;
  }

  .lab__visual {
    /*
      Базовая ширина сцены в desktop — 1273px.
      На мобильном сжимаем всю геометрию пропорционально
      до доступной ширины контейнера.
    */
    --lab-scene-width: calc(100vw - 32px);
    --lab-tablet-top: calc(var(--lab-scene-width) * 0.0943);
    --lab-tablet-width: calc(var(--lab-scene-width) * 0.2773);
    --lab-desktop-top: calc(var(--lab-scene-width) * 0.033);
    --lab-desktop-width: calc(var(--lab-scene-width) * 0.5656);
    --lab-desktop-gap-from-tablet: calc(var(--lab-scene-width) * 0.1571);
    --lab-table-height: calc(var(--lab-scene-width) * 0.1178);
    --lab-stand-width: calc(var(--lab-scene-width) * 0.1414);
    --lab-stand-height: calc(var(--lab-scene-width) * 0.1508);
    --lab-stand-bottom: calc(var(--lab-scene-width) * -0.1304);

    margin-top: 24px;
    min-height: calc(var(--lab-scene-width) * 0.503);
  }

  .lab-device__frame {
    padding: calc(var(--lab-scene-width) * 0.011);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }

  .lab-device--desktop .lab-device__frame {
    border-radius: calc(var(--lab-scene-width) * 0.0079);
  }

  .lab-device--tablet .lab-device__frame {
    border-radius: calc(var(--lab-scene-width) * 0.0236);
  }

  .lab-device--desktop .lab-device__screen {
    border-radius: calc(var(--lab-scene-width) * 0.0031);
  }

  .lab-device__screen {
    padding: calc(var(--lab-scene-width) * 0.0204);
    border-radius: calc(var(--lab-scene-width) * 0.011);
  }

  .lab-device--tablet .lab-device__screen {
    padding: calc(var(--lab-scene-width) * 0.0141);
    border-radius: calc(var(--lab-scene-width) * 0.0188);
  }

  .lab-app--desktop .lab-app__title {
    font-size: calc(var(--lab-scene-width) * 0.0157);
    line-height: calc(var(--lab-scene-width) * 0.022);
    margin-bottom: calc(var(--lab-scene-width) * 0.0063);
  }

  .lab-app--desktop .lab-app__desc {
    margin-bottom: calc(var(--lab-scene-width) * 0.0094);
    font-size: calc(var(--lab-scene-width) * 0.011);
    line-height: calc(var(--lab-scene-width) * 0.0157);
  }

  .lab-app--desktop .lab-app__link {
    font-size: calc(var(--lab-scene-width) * 0.0094);
    line-height: calc(var(--lab-scene-width) * 0.0126);
  }

  .lab-app--tablet .lab-app__title {
    font-size: calc(var(--lab-scene-width) * 0.0126);
    line-height: calc(var(--lab-scene-width) * 0.0173);
    margin-bottom: calc(var(--lab-scene-width) * 0.0047);
  }

  .lab-app--tablet .lab-app__desc {
    margin-bottom: calc(var(--lab-scene-width) * 0.0079);
    font-size: calc(var(--lab-scene-width) * 0.0086);
    line-height: calc(var(--lab-scene-width) * 0.0126);
  }

  .lab-app--tablet .lab-app__link {
    font-size: calc(var(--lab-scene-width) * 0.0079);
    line-height: calc(var(--lab-scene-width) * 0.011);
  }

  .lab-app__thumbs {
    gap: calc(var(--lab-scene-width) * 0.0031);
    margin: calc(var(--lab-scene-width) * 0.0063) 0
      calc(var(--lab-scene-width) * 0.0079);
  }

  .lab-app__cards {
    gap: calc(var(--lab-scene-width) * 0.0094);
    margin: calc(var(--lab-scene-width) * 0.0188) 0
      calc(var(--lab-scene-width) * 0.0094);
  }
}