/* ============================================================
   SCREEN 7 — «Экспертиза, превращенная в технологии»

   Слева текстовая колонка, справа аккордеон из пяти решений.
   Размеры сняты с макета «Экран 7» при окне 1440: колонка 582,
   зазор 70, аккордеон 600 шириной. Внутри аккордеона свёрнутая
   строка 65, раскрытая карточка 188, между строками зазор 7 —
   поэтому список всегда 476 в высоту, какая бы строка ни была
   раскрыта, и соседние строки не дёргаются.
   ============================================================ */

.s7-content {
  display: flex;
  gap: clamp(40px, 4.86vw, 90px);
  align-items: center;
  position: relative;
}

.s7-left {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3vw, 48px);
  width: clamp(415px, 40.4vw, 650px);
  flex-shrink: 0;
}

.s7-title {
  font-size: var(--fs-home-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s7-desc {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s7-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.s7-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Аккордеон ---------- */

.s7-list {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.49vw, 9px);
}

/* Свёрнутая строка: только название, разделитель снизу. Раскрытая
   получает фон, обводку и скругление — в макете она выглядит как
   отдельная карточка, лежащая поверх списка.

   Обводка есть всегда, просто прозрачная: если её включать только
   активной, бокс подрастал бы на 1px и весь список дёргался. */
.s7-item {
  position: relative;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.67vw, 28px);
  border: 0.5px solid transparent;
  border-radius: var(--r-card);
  /* Названия свёрнутых строк в макете уходят почти в фон — это цвет
     панели, не текста (снято с макета: surface при альфе 0.34, у
     разделителей ровно та же). Список приглушён целиком, читается
     только раскрытая карточка; под курсором строка проявляется. */
  color: var(--surface-30);
  transition: color 0.3s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.s7-item:hover { color: var(--text-50); }

/* Разделитель — псевдоэлемент, а не border-bottom: в макете линия
   короче строки на 10px с каждой стороны (раскрытая карточка на эти
   10px и выступает за список). У раскрытой линии нет. */
.s7-item::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 0.5px;
  background: var(--surface-30);
  transition: opacity 0.3s var(--ease);
}
.s7-item.active::after { opacity: 0; }

/* Подсветка в макете идёт по диагонали: широкое пятно в правом верхнем
   углу и второе, поменьше и приплюснутое, в левом нижнем; между ними
   середина остаётся тёмной. Одним градиентом так не выйдет, поэтому их
   два. Основа под ними — ровно surface-15. */
.s7-item.active {
  color: var(--text);
  border-color: var(--text-20);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(80% 48% at 95% 14%, rgba(77, 107, 255, 0.21) 0%, rgba(77, 107, 255, 0.2) 45%, transparent 100%),
    radial-gradient(115% 42% at 0% 100%, rgba(77, 107, 255, 0.19) 0%, transparent 92%);
}

/* line-height 1 — так в макете: строка получается 65 в высоту
   (24 + 16 + 24 + обводка), и пять строк с зазорами укладываются
   ровно в 476. Свисающие хвосты букв уходят в падинг, не обрезаются. */
.s7-item-name {
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Раскрывающаяся часть. Высота ставится из JS в px (measureTech в
   home.js) — тот же приём, что у аккордеонов on-page/off-page:
   сначала мерим натуральную высоту контента, потом анимируем её.
   max-height наугад не годится — от него зависит скорость. */
.s7-item-body {
  height: 0;
  overflow: hidden;
  transition: height 0.45s var(--ease-out);
}

/* Содержимое проявляется с небольшим сдвигом вверх и по очереди:
   раскрытие читается как одно движение, а не как мгновенная подмена. */
.s7-item-lead,
.s7-item-desc,
.s7-item-tags {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out);
}
.s7-item.active .s7-item-lead,
.s7-item.active .s7-item-desc,
.s7-item.active .s7-item-tags {
  opacity: 1;
  transform: none;
}
.s7-item.active .s7-item-lead { transition-delay: 0.08s; }
.s7-item.active .s7-item-desc { transition-delay: 0.14s; }
.s7-item.active .s7-item-tags { transition-delay: 0.2s; }

.s7-item-lead {
  display: block;
  margin-top: clamp(4px, 0.42vw, 8px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s7-item-desc {
  display: block;
  margin-top: clamp(16px, 1.74vw, 30px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

.s7-item-tags {
  display: flex;
  margin-top: clamp(15px, 1.6vw, 28px);
  flex-wrap: wrap;
  gap: 8px;
}

.s7-tag {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface-30);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 1024px) {
  .s7-content {
    flex-direction: column;
    gap: clamp(24px, 6vw, 36px);
  }
  .s7-left { width: 100%; }
  .s7-left .btn { width: 100%; }
  .s7-left .caption { display: none; }
  .s7-stage { width: 100%; }
  .s7-item { padding: 18px; }
  /* Строка узкая, 10px с каждой стороны заметно её укорачивают —
     на мобильном линию ведём во всю ширину. */
  .s7-item::after { left: 0; right: 0; }

  /* Свёрнутые названия на телефоне были почти неразличимы: 0.3 от
     surface на фоне страницы даёт 28,32,42 против фона 18,20,26 —
     видно, что там что-то есть, но не прочитать и не понять, что
     это кнопка. В мобильных макетах замер даёт 37,43,55, то есть
     ту же поверхность при 0.5. */
  .s7-item { color: var(--surface-50); }
  .s7-item:hover,
  .s7-item:focus-visible { color: var(--text-50); }
  .s7-item::after { background: var(--surface-50); }
}