/* ============================================================
   «О подходе» – блок сразу после карточек компетенций.

   Раскладка с рефа bridge.surf (блок Frequently Asked Questions): заголовок
   один в ЛЕВОЙ половине, содержимое – в ПРАВОЙ, обе части по левому краю своей
   половины. На узких экранах половины складываются в одну колонку.

   Внутри блока содержимое разведено по краям: заголовок и лид прижаты к ВЕРХУ,
   остальной текст – к НИЗУ (просьба клиента).

   ИНВЕРСИЯ – ВСЕГО САЙТА, а не одного блока. Дословно: «инверсия это полностью
   стал сайт белым когда я сюда зашла, и как только попадаю на след блок снова
   инверсия всего сайта». Поэтому js/about.js ставит на корень документа
   data-tone="light", и по этому признаку светлеют ВСЕ соседи, попадающие на
   экран: компетенции, финальная строка, фон страницы. Прежний вариант красил
   только саму секцию – клиент видела темную полосу сверху и была права.

   Типографика – своя, сайта: заголовок повторяет .competence__head (clamp,
   вес 500, межстрочный 1.06, трекинг −.03em), абзацы – .competence__closing.
   ============================================================ */

.about {
  position: relative;
  z-index: 2;                        /* как у .competence – выше вейла перехода */
  /* Тон задаем ЯВНО и на самом блоке. Прежде блок был прозрачным и полагался на
     фон страницы – у клиента он оставался черным, потому что холст красит не
     только body: фон может рисовать html, а до него у прозрачной секции дела
     нет. Теперь блок красится сам, тем же признаком. */
  background: var(--tone-bg, #1f1e1f);
  color: var(--tone-fg, #f5f5f5);
  transition: background-color .55s ease, color .55s ease;

  min-height: 100dvh;                /* на весь экран по высоте */
  display: grid;
  align-content: stretch;            /* содержимое разводится по краям блока */

  --about-pad-x: clamp(12px, 1.3vw, 20px);
  padding-block: clamp(72px, 10dvh, 132px);
  /* Шапка закреплена сверху: при переходе по якорю она накрывала заголовок.
     Высоту дает js/nav.js в --nav-h – на узких экранах пилюля переносится на
     вторую строку и высота растет, поэтому переменная, а не число. */
  scroll-margin-top: calc(var(--nav-h, 72px) + clamp(8px, 1.4dvh, 20px));
}

/* Две половины и две строки: верхняя – по содержимому (заголовок и лид),
   нижняя – весь остаток, а текст в ней прижат к низу. */
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 4vw, 96px);
  row-gap: clamp(28px, 4dvh, 56px);
  width: 100%;
  max-width: 1456px;                 /* как .competence__layout */
  margin-inline: auto;
  /* viewport-fit=cover рисует страницу под вырезом и скругленными углами.
     env() на устройствах без выреза равен нулю, поэтому max() ничего не
     меняет на обычных экранах и отводит поля только там, где вырез есть */
  padding-inline: max(var(--about-pad-x), env(safe-area-inset-left))
                  max(var(--about-pad-x), env(safe-area-inset-right));
}

.about__head {
  grid-column: 1; grid-row: 1;
  align-self: start;                 /* прибит к верху блока */
  margin: 0;
  font-family: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;
  font-size: clamp(34px, 3.4vw, 56px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--tone-fg, #f5f5f5);
  transition: color .55s ease;
}

/* лид – рядом с заголовком, тоже у верха */
.about__lead {
  grid-column: 2; grid-row: 1;
  align-self: start;
  margin: 0;
  min-width: 0;
  font-family: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;
  /* крупнее остального текста, но тонким начертанием – просьба клиента */
  font-size: clamp(21px, 1.65vw, 27px);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tone-fg, #f5f5f5);
  transition: color .55s ease;
  text-wrap: pretty;
}

/* остальной текст – в правой половине, прижат к НИЗУ блока */
.about__text {
  grid-column: 2; grid-row: 2;
  align-self: end;
  /* «подними чуть выше, но не сильно» – отрыв от низа блока на пару строк */
  margin-bottom: clamp(24px, 5dvh, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8dvh, 26px);
  min-width: 0;
}

.about__text p {
  margin: 0;
  font-family: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--tone-fg-soft, rgba(245, 245, 245, .72));
  transition: color .55s ease;
  text-wrap: pretty;                 /* без одиноких слов в последней строке */
}

/* ============================================================
   Инверсия всего сайта. Признак ставит js/about.js на корне документа.
   Переход у каждого участника свой, но одной длительности – тон меняется
   как одно движение, а не по частям.
   ============================================================ */
:root {
  --tone-bg: #1f1e1f;
  --tone-fg: #f5f5f5;
  --tone-fg-soft: rgba(245, 245, 245, .72);
}
:root[data-tone="light"] {
  --tone-bg: #f5f5f5;
  --tone-fg: #1f1e1f;
  --tone-fg-soft: rgba(31, 30, 31, .78);
}

/* Холст: красим и корень, и тело. Одного body мало – если фон окажется на html,
   светлеть будет только часть страницы, и на стыке видна темная полоса. */
html, body { transition: background-color .55s ease; }
:root[data-tone="light"], :root[data-tone="light"] body { background-color: #f5f5f5; }

/* Компетенции: тон блока и его текстов. Правило лежит здесь, а не в
   competence.css, чтобы не трогать чужой файл – там сейчас идет своя работа. */
:root[data-tone="light"] .competence {
  background: #f5f5f5;
  --cmp-fg: #1f1e1f;
}
/* обертки блока компетенций тоже могут нести свой фон – иначе на стыке с
   «О подходе» остается темная полоса */
:root[data-tone="light"] .competence__scroll,
:root[data-tone="light"] .competence__sticky,
:root[data-tone="light"] .competence__screen { background-color: transparent; }
:root[data-tone="light"] .competence__closing,
:root[data-tone="light"] .competence__desc { color: rgba(31, 30, 31, .72); }
.competence { transition: background-color .55s ease; }
.competence__head, .competence__closing, .competence__desc { transition: color .55s ease; }

/* Финальная строка. Тон блока задает СВОЯ сцена: при подходе к нему тон сайта
   переворачивается на фон этой сцены (признак data-outro ставит
   js/outro-top.js) – клиент просила «сразу смену всего сайта на этот фон», без
   промежуточного затемнения. Поэтому светлую заливку блока по data-tone больше
   не ставим: она спорила бы со сценой. */
/* Признак последнего блока СИЛЬНЕЕ светлого тона: как только блок подошел,
   весь сайт становится темным, без промежуточного «затемнения». Клиент дважды
   просила именно это, а прежде светлый тон блока «О подходе» еще держался и
   давал на стыке мутную ступень. */
:root[data-outro="on"],
:root[data-outro="on"] body,
:root[data-outro="on"][data-tone="light"],
:root[data-outro="on"][data-tone="light"] body { background-color: #141416 !important; }
/* Тон соседей = самый темный тон сцены (vec3(0.080,0.080,0.083) в
   js/outro-scene.js, это #141416). Раньше стоял #1f1e1f – он светлее верха
   сцены, и на стыке блоков была видна полоса, пока шел переход. Клиент: «при
   скролле видно границу, никаких границ». */
:root[data-outro="on"] .about,
:root[data-outro="on"] .competence { background-color: #141416 !important; }
/* Переход тона к последнему блоку – БЕЗ плавности: полоса на стыке видна именно
   в те полсекунды, пока цвета догоняют друг друга. */
:root[data-outro="on"], :root[data-outro="on"] body,
:root[data-outro="on"] .about, :root[data-outro="on"] .competence,
:root[data-outro="on"] .outro { transition: none !important; }
:root[data-outro="on"] .outro { background-color: transparent; color: #f5f5f5; }
.outro { transition: background-color .55s ease, color .55s ease; }
:root[data-tone="light"] .outro__text { color: #1f1e1f; }
.outro__text { transition: color .55s ease; }

/* ---------- узкие экраны: половины складываются ----------
   Порог 1099px тот же, что у блока компетенций – иначе на планшете один блок
   уже перестроился, а соседний еще нет. */
@media (max-width: 1099px) {
  .about {
    --about-pad-x: 16px;
    padding-block: clamp(56px, 8dvh, 96px);
    min-height: 100dvh; height: auto;
  }
  .about__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    row-gap: clamp(16px, 2.6dvh, 26px);
  }
  .about__head { grid-column: 1; grid-row: 1; font-size: clamp(28px, 7.4vw, 40px); }
  .about__lead { grid-column: 1; grid-row: 2; }
  /* в одну колонку текст идет сразу за лидом: пустой растяжки между ними на
     телефоне быть не должно, иначе блок разрывается пополам */
  .about__text { grid-column: 1; grid-row: 3; align-self: start; margin-top: clamp(12px, 2dvh, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .about, .about__head, .about__lead, .about__text p,
  html, body, .competence, .outro { transition: none; }
}