/* ============================================================
   Syntra Media — about.css
   Координаты из _spec/layout.json page8/page9 + extra-8.png (полная
   версия страницы «О нас», высота потока ~13.85rem).
   1rem = 100px @1559.
   ============================================================ */

/* ================= СЕКЦИЯ 1 — О КОМПАНИИ ================= */
.about-intro {
  position: relative;
  background: var(--white);
  padding: 0 0 .4rem;
}
.about-intro-inner {
  position: relative;
  max-width: 15.59rem;
  margin: 0 auto;
  min-height: 13.15rem;
}

/* -------- левая колонка: фото -------- */
.about-photos {
  position: absolute;
  left: .858rem;
  top: .514rem;
  width: 6.24rem;
  display: flex;
  flex-direction: column;
  gap: .237rem;
}
.about-photos img {
  width: 100%;
  height: 3.74rem;
  object-fit: cover;
}
.about-photos img:nth-child(2) { transition-delay: .08s; }
.about-photos img:nth-child(3) { transition-delay: .16s; }

/* -------- правая колонка: заголовок + таблица -------- */
.about-content {
  position: absolute;
  left: 8.264rem;
  top: 0;
  width: 6.686rem;
  padding-top: .609rem;
}

.about-content h1 {
  font-size: .617rem;
  line-height: .689rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.about-rows {
  margin-top: .35rem;
  border-top: 1px solid var(--line);
}

.about-row {
  display: grid;
  grid-template-columns: 1.906rem 1fr;
  column-gap: 0;
  padding: .31rem 0 .35rem;
  border-bottom: 1px solid var(--line);
  transition-delay: var(--row-delay, 0s);
}
.about-row:last-child { border-bottom: none; }
.about-row:nth-child(1) { --row-delay: 0s; }
.about-row:nth-child(2) { --row-delay: .05s; }
.about-row:nth-child(3) { --row-delay: .1s; }
.about-row:nth-child(4) { --row-delay: .15s; }
.about-row:nth-child(5) { --row-delay: .2s; }
.about-row:nth-child(6) { --row-delay: .25s; }

.about-row h3 {
  font-size: .3rem;
  line-height: .34rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.about-row p {
  font-size: .18rem;
  line-height: .241rem;
  max-width: 4.78rem;
}
.about-row p .dark,
.about-row p .grey { display: block; }
.about-row p .dark { color: var(--navy); }
.about-row p .grey { color: var(--grey-2); }
.about-row p .dark strong { font-weight: 700; }

/* ================= СЕКЦИЯ 2 — СООСНОВАТЕЛИ (page9) ================= */
.founders {
  position: relative;
  background: var(--white);
  padding: 0 0 .6rem;
}
.founders-inner {
  position: relative;
  max-width: 15.59rem;
  margin: 0 auto;
  min-height: 6.5rem;
}

.founders-photo {
  position: absolute;
  left: 2.24rem;
  top: .488rem;
  width: 3.48rem;
  height: 5.395rem;
  object-fit: cover;
}

.founders-content {
  position: absolute;
  left: 6.774rem;
  top: .777rem;
  width: 7.55rem;
}
.founders-content h2 {
  font-size: .617rem;
  line-height: .689rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
/* разделитель — МЕЖДУ заголовком и текстом (после h2), как в макете p9 */
.founders-content h2::after {
  content: '';
  display: block;
  margin-top: .82rem; /* 2.397 - .777 - 2*.689 */
  width: 7.3rem;
  height: 1px;
  background: var(--line);
}
.f-lead {
  margin-top: .467rem; /* 2.864 - 2.397 */
  margin-left: 1.896rem; /* текст сдвинут вправо: x867 - x677 */
  font-size: .18rem;
  font-weight: 700;
  color: var(--navy);
}
.f-text {
  margin-top: .3rem;
  margin-left: 1.896rem;
  font-size: .18rem;
  line-height: .241rem;
  color: var(--grey-2);
  max-width: 5.61rem;
}
.f-text + .f-text { margin-top: .243rem; }

/* ================= МОБИЛЬНАЯ ВЕРСИЯ ================= */
@media (max-width: 899px) {
  .about-intro { padding: 40px 24px 56px; }
  .about-intro-inner { min-height: 0; }

  .about-photos {
    position: static;
    width: 100%;
    gap: 16px;
  }
  .about-photos img { height: auto; aspect-ratio: 623.6 / 374; }

  .about-content {
    position: static;
    width: 100%;
    padding-top: 40px;
  }
  .about-content h1 {
    font-size: 32px;
    line-height: 1.2;
    white-space: normal;
  }

  .about-rows { margin-top: 28px; }
  .about-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 24px 0;
  }
  .about-row h3 { font-size: 22px; line-height: 1.25; white-space: normal; }
  .about-row p { font-size: 15px; line-height: 1.5; max-width: none; }

  .founders { padding: 56px 24px 64px; }
  .founders-inner { min-height: 0; }
  .founders-photo {
    position: static;
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 348 / 539.5;
  }
  .founders-content {
    position: static;
    width: 100%;
    margin-top: 32px;
  }
  .founders-content h2 { font-size: 32px; line-height: 1.2; white-space: normal; }
  .founders-content h2::after { margin-top: 24px; width: 100%; }
  .f-lead { font-size: 17px; margin-top: 20px; margin-left: 0; }
  .f-text { font-size: 15px; line-height: 1.5; max-width: none; margin-top: 16px; margin-left: 0; }
  .f-text + .f-text { margin-top: 16px; }
}