/* =============================================================================
   Про мене — секція 11.

   Ритм за art-direction §7: циферблат, split 7/5 — текст ліворуч, портрет
   праворуч, зсунутий угору на --space-2xl поверх краю секції 10. Це єдине
   місце, де з'являється обличчя: жертва, записана в concept.md, забирає його
   з героя і з форми, і саме тому тут воно працює як подія.

   Портрет чорно-білий: кольорове фото на циферблаті перетягнуло б на себе
   єдиний акцент сторінки. Він вилітає за правий край вікна — це єдине місце
   на сторінці, де є обличчя, і воно має бути подією, а не ілюстрацією в
   колонці. Прийом той самий, що з ілюстрацією приладу в герої.

   Під портретом — факти показниками. Рядок «розмовляєш із тим, хто пише код»
   це головна перевага перед агенцією; в абзаці вона губилась, у показнику
   працює. Мова та сама, що в форматах співпраці: моно-мітка, значення.
   ============================================================================= */

.about__inner {
  display: grid;
  gap: var(--space-xl);
}

/* Розкладка текстової колонки — у base.css разом із шапками секцій: проміжок
   «заголовок → лід» задається в одному місці на всі секції. */

.about__actions {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xs);
}

.about__figure {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}

/* Портрет у повному кольорі. Правило про чорно-біле писалося наосліп, до
   появи самої фотографії, з припущення, що фон битиметься з бурштином. Фон
   виявився теракотовим — та сама тепла родина, тож на світлому циферблаті
   фото стає єдиною теплою плямою і тягне погляд саме туди, куди треба.
   Знебарвлювати його означало б виправляти проблему, якої немає.

   Розміри зарезервовані атрибутами width/height, тому CLS не з'являється,
   поки файл вантажиться. */
.about__portrait {
  inline-size: 100%;
  block-size: auto;
  /* 4/5 було розраховано на текст удвічі довший. Після скорочення розділу
     портрет виріс до 908px проти 486px текстової колонки, і під текстом
     лишалося ~340px порожнього циферблата. 4/5 лишається на вузьких екранах,
     де колонки йдуть одна під одною і диспропорції немає — правило нижче
     чинне тільки там, де колонки стоять поруч. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-card);
}

.about__figure picture { display: block; }

/* Підпис під портретом — ім'я, фах і місто. Це не показник: він нічого не
   вимірює, і моноширинне накреслення робило його повільнішим для читання, ніж
   звичайне. Моно на цій сторінці лишається мовою чисел.

   Кегль виписаний явно, хоч він і збігається з тим, що дає .mono в розмітці.
   Клас там лишився, але від нього тут не діє вже нічого, крім кегля, — і той,
   хто прибере клас, що більше нічого не означає, мовчки отримав би успадковані
   16px замість 14px (заміряно 2026-09-14). Правило самодостатнє: зняття .mono
   його не міняє. */
.about__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
}

/* ---- факти ------------------------------------------------------------------- */

.about__facts {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline);
}

.about__facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-2xs);
  align-items: baseline;
}

.about__facts dt {
  font-family: var(--font-readout);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.about__facts dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-primary);
}

@media (min-width: 64rem) {
  /* Контейнер знімає обмеження ширини: поки .wrap автоцентрується, поле між
     ним і краєм вікна плаває, і виліт портрета довелося б вгадувати. Ширину
     тексту тримає власний max-inline-size, а не контейнер. */
  .about > .wrap { max-inline-size: none; }

  .about__inner {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
  }

  /* Портрет не має бути вищим за сусідню колонку: зайва висота тут — це не
     повітря, а діра під текстом. Кадр обрізається зверху (object-position уже
     center top), тому обличчя лишається на місці. */
  .about__portrait { aspect-ratio: 1 / 1; }

  .about__text {
    grid-column: 1 / 7;
    max-inline-size: var(--measure);
  }

  /* Портрет піднімається над кромкою секції і вилітає за правий край вікна —
     сьомий свідомий розрив сітки. */
  .about__figure {
    grid-column: 8 / -1;
    margin-block-start: calc(var(--space-2xl) * -1 - var(--section-pad));
    margin-inline-end: calc(var(--wrap-pad) * -1);
  }

  .about__portrait {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Факти лишаються в сітці, хоч портрет із неї вийшов. */
  .about__facts,
  .about__caption { margin-inline-end: var(--wrap-pad); }
}

/* ---- телефон ------------------------------------------------------------------
   Текст і портрет стоять один під одним, тож 56px між ними — це поле між двома
   блоками однієї секції, а не між секціями. */
@media not all and (min-width: 48rem) {
  .about__inner { gap: var(--space-lg); }
}