/* ============================================================
   Посадочная /about — страница об авторе школы. Страница
   полностью изолирована: все классы начинаются с lp-about-.

   В отличие от продающих лендингов школы, эта страница живёт в
   светлой палитре сайта и берёт цвета токенами — она открывается
   из шапки наравне с обычными разделами и должна следовать теме.
   ============================================================ */

.lp-about {
  --lp-about-gap: clamp(56px, 8vw, 104px);
  --lp-about-line: var(--border-subtle);
  --lp-about-muted: var(--text-secondary);
  --lp-about-pad: clamp(20px, 5vw, 64px);
  background:
    radial-gradient(circle at 88% 2%, var(--accent-soft), transparent 34rem),
    var(--surface-canvas);
  color: var(--text-primary);
  overflow: clip;
  padding-bottom: var(--lp-about-gap);
  /* Шапка лежит поверх страницы (overlayHeader), место под неё
     держим здесь — теми же величинами, что и .page-offset */
  padding-top: 124px;
}

/* ---------- общие элементы страницы ---------- */

.lp-about section {
  margin: 0 auto;
  max-width: 1180px;
  padding: var(--lp-about-gap) var(--lp-about-pad);
}

.lp-about-kicker,
.lp-about-section-label {
  color: var(--accent-primary-hover);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.lp-about-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: .98;
  margin: 0 0 26px;
}

.lp-about-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.06;
  margin: 0 0 36px;
  max-width: 22ch;
}

.lp-about-lead {
  color: var(--lp-about-muted);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  margin: 0 0 34px;
  max-width: 54ch;
}

.lp-about-text {
  color: var(--lp-about-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 62ch;
}

.lp-about img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* ---------- первый экран ---------- */

.lp-about-hero {
  align-items: center;
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1.15fr .85fr;
}

.lp-about-hero-photo {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  margin: 0;
  overflow: hidden;
}

.lp-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.lp-about-button {
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  display: inline-flex;
  font-weight: 600;
  min-height: 52px;
  padding: 0 28px;
  text-decoration: none;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}

.lp-about-button:hover {
  background: var(--surface-hover);
}

.lp-about-button--solid {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.lp-about-button--solid:hover {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: var(--accent-primary-contrast);
}

.lp-about-metrics {
  border-top: 1px solid var(--lp-about-line);
  display: grid;
  gap: 24px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding-top: 28px;
}

.lp-about-metrics dt {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
}

.lp-about-metrics dd {
  color: var(--lp-about-muted);
  font-size: .92rem;
  line-height: 1.45;
  margin: 8px 0 0;
}

/* ---------- регалии ---------- */

.lp-about-facts {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.lp-about-fact {
  background: var(--surface-card);
  border: 1px solid var(--lp-about-line);
  border-radius: var(--radius-m);
  padding: 28px 26px 30px;
}

.lp-about-fact-num {
  color: var(--accent-primary);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.lp-about-fact h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 500;
  margin: 12px 0 10px;
}

.lp-about-fact p {
  color: var(--lp-about-muted);
  font-size: .98rem;
  line-height: 1.62;
  margin: 0;
}

/* ---------- прямая речь ----------

   Единственная секция во всю ширину экрана. Общее правило
   .lp-about section её ограничивало бы, поэтому перебиваем
   селектором на класс больше. Цвета здесь не от темы, а от
   фотографии: она тёмная в любой теме. */

.lp-about .lp-about-word {
  align-items: center;
  display: grid;
  isolation: isolate;
  max-width: none;
  min-height: clamp(520px, 76vh, 720px);
  overflow: clip;
  padding: 0;
  position: relative;
}

.lp-about-word-bg {
  background-image: var(--lp-about-word-image);
  background-position: 78% center;
  background-size: cover;
  /* Запас хода параллакса: слой выше секции на 140px сверху и снизу.
     Ровно на столько же скрипт ограничивает сдвиг (PARALLAX_MAX),
     поэтому края кадра не оголяются ни при каком экране. */
  inset: -140px 0;
  position: absolute;
  transform: translate3d(0, var(--lp-about-parallax, 0), 0);
  will-change: transform;
  z-index: -2;
}

.lp-about-word-veil {
  background:
    linear-gradient(
      90deg,
      rgb(18 21 12 / 94%) 0%,
      rgb(18 21 12 / 88%) 34%,
      rgb(18 21 12 / 46%) 62%,
      rgb(18 21 12 / 10%) 88%
    );
  inset: 0;
  position: absolute;
  z-index: -1;
}

.lp-about-word-inner {
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(56px, 8vw, 96px) var(--lp-about-pad);
  width: 100%;
}

.lp-about-word-quote {
  color: var(--text-on-image);
  margin: 0;
  max-width: 620px;
  padding-left: clamp(20px, 3vw, 36px);
}

/* Стартовое положение ставит скрипт: без JS текст должен остаться
   на месте и видимым, а не пропасть вместе с анимацией */
.lp-about-word-quote.is-hidden {
  opacity: 0;
  transform: translateX(-56px);
}

.lp-about-word-quote.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22, .61, .36, 1);
}

.lp-about-word-label {
  color: var(--accent-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0 0 22px;
  text-transform: uppercase;
}

/* Своя прокрутка: цитата длинная, а секция держит высоту экрана.
   Нативную полосу браузер не отдаёт покрасить (Chrome игнорирует
   ::-webkit-scrollbar, если задан scrollbar-width), поэтому её
   прячем совсем, а рядом рисуем свою — её ведёт скрипт секции. */

.lp-about-word-box {
  position: relative;
}

.lp-about-word-scroll {
  /* Края растворяются: обрезанная посередине строка на границе
     области читается как брак вёрстки, а не как продолжение */
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 20px,
    #000 calc(100% - 20px),
    transparent 100%
  );
  max-height: clamp(220px, 34vh, 340px);
  overflow-y: auto;
  padding-right: 28px;
  scrollbar-width: none;
}

.lp-about-word-scroll::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.lp-about-word-scroll:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 6px;
}

.lp-about-word-scroll p {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.66;
  margin: 0 0 22px;
}

.lp-about-word-scroll p:last-child {
  margin-bottom: 0;
}

.lp-about-word-rail {
  background: rgb(243 238 223 / 14%);
  border-radius: var(--radius-pill);
  bottom: 4px;
  position: absolute;
  right: 0;
  top: 4px;
  width: 3px;
}

/* Текст поместился целиком — полосе нечего показывать */
.lp-about-word-rail.is-idle {
  opacity: 0;
  pointer-events: none;
}

.lp-about-word-thumb {
  background: rgb(243 238 223 / 52%);
  border-radius: var(--radius-pill);
  cursor: grab;
  display: block;
  /* Тонкая полоса красива, но в неё не попасть курсором: ползунок
     ловит нажатие зоной шире себя, оставаясь на вид трёхпиксельным */
  outline: 7px solid transparent;
  position: absolute;
  top: 0;
  transition: background var(--tr-fast);
  width: 3px;
}

.lp-about-word-rail:hover .lp-about-word-thumb,
.lp-about-word-rail.is-dragging .lp-about-word-thumb {
  background: var(--accent-primary);
}

.lp-about-word-rail.is-dragging .lp-about-word-thumb {
  cursor: grabbing;
}

.lp-about-word-quote footer {
  border-top: 1px solid rgb(243 238 223 / 22%);
  color: rgb(243 238 223 / 62%);
  font-size: .82rem;
  letter-spacing: .14em;
  margin-top: 26px;
  padding-top: 20px;
  text-transform: uppercase;
}

/* ---------- метод ---------- */

.lp-about-method {
  align-items: center;
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1.1fr .9fr;
}

.lp-about-method-photo {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  margin: 0;
  overflow: hidden;
}

.lp-about-motto {
  border-left: 2px solid var(--accent-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 32px 0 0;
  max-width: 34ch;
  padding-left: 22px;
}

/* ---------- путь ---------- */

.lp-about-timeline {
  border-top: 1px solid var(--lp-about-line);
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-about-timeline li {
  border-bottom: 1px solid var(--lp-about-line);
  display: grid;
  gap: clamp(16px, 3vw, 40px);
  grid-template-columns: 190px 1fr;
  padding: 22px 0;
}

.lp-about-timeline-year {
  color: var(--accent-primary-hover);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.lp-about-timeline p {
  color: var(--lp-about-muted);
  font-size: 1rem;
  line-height: 1.66;
  margin: 0;
  max-width: 68ch;
}

/* ---------- галерея ---------- */

.lp-about-photos {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.lp-about-photos figure {
  margin: 0;
}

.lp-about-photos img {
  border-radius: var(--radius-m);
  height: 380px;
  object-fit: cover;
  width: 100%;
}

.lp-about-photos figcaption {
  color: var(--lp-about-muted);
  font-size: .92rem;
  line-height: 1.5;
  padding-top: 12px;
}

/* ---------- дальше ---------- */

.lp-about-next-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.lp-about-next-card {
  background: var(--surface-card);
  border: 1px solid var(--lp-about-line);
  border-radius: var(--radius-m);
  color: inherit;
  display: block;
  padding: 30px 28px 32px;
  position: relative;
  text-decoration: none;
  transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}

.lp-about-next-card:hover {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.lp-about-next-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 12px;
  padding-right: 32px;
}

.lp-about-next-card p {
  color: var(--lp-about-muted);
  font-size: .98rem;
  line-height: 1.62;
  margin: 0;
}

.lp-about-next-go {
  color: var(--accent-primary);
  font-size: 1.2rem;
  position: absolute;
  right: 28px;
  top: 30px;
}

/* ---------- планшет ---------- */

@media (max-width: 1000px) {
  .lp-about-facts,
  .lp-about-next-grid,
  .lp-about-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-about-hero,
  .lp-about-method {
    grid-template-columns: 1fr;
  }

  .lp-about-hero-photo,
  .lp-about-method-photo {
    max-width: 520px;
  }
}

/* ---------- телефон ---------- */

@media (max-width: 860px) {
  .lp-about {
    padding-top: 108px;
  }

  /* Узкий экран: герою рядом с текстом места нет, поэтому он
     остаётся сверху, а подложка уходит из горизонтальной в
     вертикальную — текст ложится в тёмный низ кадра */
  .lp-about .lp-about-word {
    align-items: end;
    min-height: clamp(560px, 88vh, 760px);
  }

  .lp-about-word-bg {
    background-position: 76% center;
  }

  .lp-about-word-veil {
    background:
      linear-gradient(
        180deg,
        rgb(18 21 12 / 30%) 0%,
        rgb(18 21 12 / 72%) 38%,
        rgb(18 21 12 / 94%) 68%
      );
  }
}

@media (max-width: 640px) {
  .lp-about-facts,
  .lp-about-next-grid,
  .lp-about-photos {
    grid-template-columns: 1fr;
  }

  .lp-about-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-about-photos img {
    height: 300px;
  }

  .lp-about-timeline li {
    gap: 6px;
    grid-template-columns: 1fr;
  }
}