/* ==========================================================================
   Olprime - информационные страницы: О компании, Отрасли, Процесс, Команда, Контакты.
   Только НОВЫЕ компоненты. Всё, что уже есть в дизайн-системе (svc-hero, adv, ntag,
   stepline, sol, proccard, cases__grid), переиспользуется как есть - здесь не дублируется.
   Подключается поверх home.css / home-v2.css / service.css.
   ========================================================================== */

/* ---------- О компании: кнопка под текстом блока «Команда» ---------- */
.about__cta { margin-top: 24px; }

/* Сетка решений рассчитана на 6 карточек в 3 колонки. Направлений всего два - в той же
   сетке они занимали две трети ширины и висели куцым огрызком слева. */
.sols__grid--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .sols__grid--two { grid-template-columns: 1fr; } }

/* ---------- Отрасли: плитки отраслей с числом кейсов ---------- */
/* Число берётся из таксономии case_niche - это счётчик, а не заявление. */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.indcard {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 22px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 34px -24px rgba(var(--shadow-rgb), .14);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.indcard:hover { transform: translateY(-4px); border-color: var(--brand); color: var(--brand-strong); box-shadow: 0 18px 38px -22px rgba(var(--shadow-rgb), .24); }
.indcard__name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.indcard__count {
  flex: none; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: rgba(229,97,33,.12); color: var(--brand-strong);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease;
}
.indcard:hover .indcard__count { background: var(--brand); color: #fff; }
@media (max-width: 1000px) { .ind-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ind-grid { grid-template-columns: 1fr; } }

/* ---------- Процесс: светлый вариант дорожки ----------
   Нужен, потому что на /protsess/ дорожек две подряд, а две тёмные панели ломают
   ритм (DESIGN-SYSTEM.md §9). Раскладка и рельс наследуются от .process/.stepline -
   переопределяются только цвета и подложка. */
.process--light {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 22px 50px -34px rgba(var(--shadow-rgb), .2);
}
.process--light::after { display: none; }            /* шум нужен тёмному градиенту, светлому - нет */
.process--light .steps::before { background: linear-gradient(rgba(229,97,33,.55), rgba(229,97,33,.08)); }
.process--light .stepline { border-top-color: var(--line); }
.process--light .stepline__num { background: rgba(229,97,33,.1); border-color: rgba(229,97,33,.3); color: var(--brand-strong); }
.process--light .stepline__title { color: var(--ink); }
.process--light .stepline__text { color: var(--ink-soft); }
.process--light .stepline__meta { color: var(--ink-soft); background: var(--mist); border-color: var(--line); }

/* ---------- Команда: галерея фото ---------- */
/* Первое фото крупное, остальные - лентой. Если фото меньше четырёх, сетка сама
   схлопывается (модификатор --N), пустых плиток не остаётся. */
.team-gallery { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.team-gallery--1 { grid-template-columns: 1fr; }
.team-gallery--2 { grid-template-columns: 1fr 1fr; }
.team-gallery--4 .team-shot:first-child { grid-column: span 3; }
.team-shot { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--mist); }
.team-shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.team-gallery--4 .team-shot:first-child img { aspect-ratio: 21 / 9; }
@media (max-width: 860px) {
  .team-gallery, .team-gallery--2, .team-gallery--4 { grid-template-columns: 1fr 1fr; }
  .team-gallery--4 .team-shot:first-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .team-gallery, .team-gallery--2, .team-gallery--4 { grid-template-columns: 1fr; }
  .team-gallery--4 .team-shot:first-child { grid-column: auto; }
  .team-gallery--4 .team-shot:first-child img { aspect-ratio: 3 / 2; }
}

/* ---------- Команда: две колонки-направления ---------- */
.team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.teamcol {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 32px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 34px -24px rgba(var(--shadow-rgb), .14);
}
.teamcol__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 14px; background: rgba(229,97,33,.12); color: var(--brand-strong);
}
.teamcol__icon svg { width: 26px; height: 26px; }
.teamcol__title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-top: 18px; }
.teamcol__lead { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; }
.teamcol__roles { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.teamcol__roles li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: #2c2a26; }
/* prime-dot вместо галочки: роль - это не выполненный пункт чеклиста (§8) */
.teamcol__roles li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (max-width: 860px) { .team-cols { grid-template-columns: 1fr; } .teamcol { padding: 26px 22px; } }

/* ---------- Контакты: каналы связи ---------- */
/* Не grid, а flex + justify-content:center - каналов может быть от одного до пяти
   (набор зависит от заполненных полей Кастомайзера), и в жёсткой сетке пятая карточка
   висела сиротой слева в новой строке. Тот же приём уже применён к архиву кейсов
   и ленте блога: неполная строка центрируется. */
.cnt-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cnt-card {
  flex: 1 1 260px; max-width: 320px;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 24px;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 34px -24px rgba(var(--shadow-rgb), .14);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cnt-card:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 18px 38px -22px rgba(var(--shadow-rgb), .24); }
.cnt-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(229,97,33,.12); color: var(--brand-strong); margin-bottom: 12px;
  transition: background .2s ease, color .2s ease;
}
.cnt-card__icon svg { width: 22px; height: 22px; }
.cnt-card:hover .cnt-card__icon { background: var(--brand); color: #fff; }
.cnt-card__label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.cnt-card__value { font-size: 18px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.cnt-card__note { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 560px) { .cnt-card { max-width: none; flex-basis: 100%; } }

/* ---------- Контакты: направления ---------- */
/* Две карточки на две команды. Если у одного направления контакты не заполнены,
   блок покажет одну карточку - поэтому max-width, чтобы она не растянулась на всю ширину. */
.cnt-depts__lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 66ch; margin-top: 14px; }
.cnt-depts { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; }
.cnt-dept {
  flex: 1 1 320px; max-width: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 30px 28px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 34px -24px rgba(var(--shadow-rgb), .14);
}
.cnt-dept__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(229,97,33,.12); color: var(--brand-strong); margin-bottom: 14px;
}
.cnt-dept__icon svg { width: 22px; height: 22px; }
.cnt-dept__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.cnt-dept__title::after { content: "."; color: var(--brand); }
.cnt-dept__desc { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 6px; }
.cnt-dept__list { list-style: none; margin: 18px 0 0; padding: 0; }
.cnt-dept__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.cnt-dept__label { flex: none; min-width: 90px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.cnt-dept__value { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); word-break: break-word; }
.cnt-dept__value:hover { color: var(--brand-strong); }
@media (max-width: 560px) { .cnt-dept { padding: 26px 22px; } .cnt-dept__label { min-width: 100%; } }

/* ---------- Контакты: акцент в лиде hero ---------- */
/* Лид на тёмной панели приглушён до .75 белого - жирное начертание в нём почти не читается
   как акцент. Возвращаем полный белый, иначе главная мысль «работаем по всей России»
   теряется в общем сером тексте. */
.svc-hero__lead strong { color: #fff; font-weight: 700; }

/* ---------- Контакты: география работы ---------- */
/* Один белый панель-блок, а не серый бэнд: серая подложка между белыми секциями
   выбивается из ритма (DESIGN-SYSTEM.md §9). Шапка слева, три пункта справа -
   на узком экране всё складывается в одну колонку. */
.cnt-geo {
  display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 32px 44px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 36px 40px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 34px -24px rgba(var(--shadow-rgb), .14);
}
.cnt-geo__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 14px; background: rgba(229,97,33,.12); color: var(--brand-strong);
}
.cnt-geo__icon svg { width: 26px; height: 26px; }
.cnt-geo__title { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin-top: 18px; }
.cnt-geo__title::after { content: "."; color: var(--brand); }   /* prime-dot, §8 */
.cnt-geo__lead { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; max-width: 46ch; }
.cnt-geo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cnt-geo__item {
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.cnt-geo__item:first-child { padding-top: 0; border-top: 0; }
.cnt-geo__item:last-child { padding-bottom: 0; }
.cnt-geo__iicon { grid-row: span 2; align-self: start; color: var(--brand-strong); }
.cnt-geo__iicon svg { width: 24px; height: 24px; }
.cnt-geo__iname { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cnt-geo__itext { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) { .cnt-geo { grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; } .cnt-geo__title { font-size: 24px; } .cnt-geo__lead { max-width: none; } }
@media (max-width: 520px) { .cnt-geo { padding: 26px 22px; } }

/* ---------- Контакты: офис и карта ---------- */
.cnt-office { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.cnt-office--nomap { grid-template-columns: 1fr; }   /* карта не задана - текст не жмётся в колонку */
.cnt-office__addr { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.cnt-office__line { font-size: 15px; color: var(--ink-soft); margin-top: 8px; }
.cnt-office__text { font-size: 16px; line-height: 1.6; color: #2c2a26; margin-top: 16px; max-width: 60ch; }
.cnt-office__text a { color: var(--brand-strong); font-weight: 600; }
.cnt-map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.cnt-map iframe { display: block; border: 0; width: 100%; }
@media (max-width: 900px) { .cnt-office { grid-template-columns: 1fr; gap: 22px; } .cnt-map iframe { height: 320px; } }

/* ---------- Контакты: реквизиты ---------- */
.cnt-legal { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.cnt-legal__row { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cnt-legal dt { flex: none; min-width: 180px; font-size: 14px; color: var(--ink-soft); }
.cnt-legal dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cnt-legal__note { margin-top: 22px; font-size: 15px; color: var(--ink-soft); }
.cnt-legal__note a { color: var(--brand-strong); font-weight: 600; }
@media (max-width: 860px) { .cnt-legal { grid-template-columns: 1fr; } .cnt-legal dt { min-width: 140px; } }

/* ---------- Уважение к prefers-reduced-motion (DESIGN-SYSTEM.md §0) ---------- */
/* Подъём карточки при наведении - тоже движение: при reduce оставляем только цвет и тень. */
@media (prefers-reduced-motion: reduce) {
  .indcard, .cnt-card, .indcard__count, .cnt-card__icon { transition: none; }
  .indcard:hover, .cnt-card:hover { transform: none; }
}