/* ============================================================
   CGC — только страница «О компании» (/about/).
   Подключается последней, после pages.css.
   Ничего общего здесь не переопределяем: только то, чего
   не хватило готовым классам app/viz/pages.
   ============================================================ */

/* ---------- Плитки чисел в шапке раздела ----------
   Шесть значений: авторастяжка viz.css даёт на широком экране
   пять в ряд и одинокую шестую. Прибиваем 3×2. */

.about-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Два пояса и разница между ними ----------
   Факт, с которого начинается суточный график: разница постоянна. */

.tz-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-block-end: clamp(18px, 2vw, 26px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
  border: var(--edge);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .02);
}

.tz b {
  display: block;
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.1;
}
.tz span {
  display: block;
  margin-block-start: 5px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Средняя ячейка — сама разница, единственное золотое пятно блока. */
.tz--gap { text-align: center; }
.tz--gap b { color: var(--gold); }
.tz--gap span { letter-spacing: .04em; }

/* ---------- Суточная шкала ----------
   Разметка — готовый .gantt из viz.css. Здесь только подписи часов:
   они должны стоять на делениях, а не в середине трёхчасового шага. */

.day-scale li { text-align: start; }

.day-sum {
  margin-block-start: clamp(16px, 1.8vw, 22px);
  padding-block-start: clamp(14px, 1.6vw, 18px);
  border-block-start: 1px solid var(--line);
  max-width: 74ch;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.day-sum b { color: var(--ink); font-weight: 700; }

/* ---------- Миссия: врезка под липким заголовком ---------- */

.mission-goal { margin-block-start: clamp(18px, 2.2vw, 30px); }

/* ---------- Отзывы: три в ряд ----------
   На главной .quotes — колонка внутри узкого столбца, здесь полоса
   во всю ширину секции. */

.about-quotes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* Кружок с инициалом: в app.css правило «.quote figcaption span» сильнее
   класса .mono и сбивает ему display на block — буква уезжает в угол.
   Общий файл трогать нельзя, поэтому чиним в границах своей страницы. */
.about-quotes .mono {
  display: grid;
  place-items: center;
  margin-block-start: 0;
}

/* ---------- Офисы: карточка с парами «термин — значение» ---------- */

.office h3 {
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: .02em;
}
.office .specs { margin-block-start: clamp(14px, 1.6vw, 20px); }
.office .specs > div:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}
/* Контакт в паре должен быть виден как ссылка: цвет один, золотой. */
.office .specs dd a {
  color: var(--gold);
  transition: color var(--t-fast);
}
.office .specs dd a:hover { color: var(--gold-lite); }

.office .office-note {
  margin: clamp(14px, 1.6vw, 18px) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 1080px) {
  .about-tiles,
  .about-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .tz-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: start; }
  .tz--gap { text-align: start; }
}

@media (max-width: 760px) {
  .about-tiles,
  .about-quotes { grid-template-columns: minmax(0, 1fr); }
  .day-scale li { font-size: 10.5px; }
}