/* Блоки доверия: карточка юриста, границы пакета, обязательства, реквизиты.
   Разметка — ukompas24/templates/includes/legal_expert.html,
   offer_limits.html, trust_commitments.html, company_details.html. */

/* --- Кто готовит документы ------------------------------------------- */

.legal-expert {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #fff;
}

.legal-expert__heading {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a8a95;
}

.legal-expert__person {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.legal-expert__photo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.legal-expert__name-block {
  min-width: 0;
}

.legal-expert__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #01314c;
}

.legal-expert__credentials {
  margin: 2px 0 0;
  font-size: 14px;
  color: #40525e;
}

.legal-expert__specialization,
.legal-expert__review {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #40525e;
}

.legal-expert__review {
  margin-bottom: 0;
}

.legal-expert__label {
  font-weight: 600;
  color: #01314c;
}

/* --- Границы пакета --------------------------------------------------- */

.offer-limits {
  margin: 14px 0;
}

.offer-limits__heading {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #01314c;
}

.offer-limits__list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #40525e;
}

/* Внутри карточки пакета список «что не входит» стоит под списком «что вы
   получаете», и отступы у них должны совпадать. У списка выше padding-left
   32px, и без этого правила пункты уезжали влево на двенадцать пикселей —
   выглядело как сбой вёрстки. */
.price-card .offer-limits__list {
  padding-left: 32px;
}

/* Блок «когда пакета недостаточно».
   Это единственное место карточки, где мы отговариваем покупать, и потому
   самое сильное для доверия. Серым мелким шрифтом он читался как сноска —
   то есть работал против себя. Теперь это заметная врезка в цвете бренда. */
.offer-limits__note {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid #b7e0e2;
  border-left: 4px solid #009299;
  border-radius: 8px;
  background: #f2fbfb;
  font-size: 16px;
  line-height: 1.6;
  color: #01314c;
}

.offer-limits__note .offer-limits__heading {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: #009299;
}

/* --- Что мы гарантируем / как мы не делаем ---------------------------- */

.trust-commitments {
  display: grid;
  gap: 20px;
  margin: 32px 0;
}

@media (min-width: 768px) {
  .trust-commitments {
    grid-template-columns: 1fr 1fr;
  }
}

.trust-commitments__item {
  padding: 20px 22px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #f7fafb;
}

.trust-commitments__item--how-not {
  background: #fff;
}

.trust-commitments__heading {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #01314c;
}

.trust-commitments__body {
  font-size: 15px;
  line-height: 1.6;
  color: #40525e;
}

.trust-commitments__body p:last-child,
.trust-commitments__body ul:last-child {
  margin-bottom: 0;
}

/* --- Реквизиты в подвале ---------------------------------------------- */

.company-details {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(39, 39, 39, 0.12);
  font-size: 13px;
  line-height: 1.6;
  color: #6b7a85;
}

.company-details__name {
  font-weight: 600;
  color: #40525e;
}

.company-details__item::before {
  content: " · ";
  color: #b6c0c7;
}

/* ==========================================================================
   Плашка «Цена · Срок · Формат» под H1.

   Первая версия была строкой между двух серых линий — и сливалась с текстом
   ровно потому, что линия сверху и снизу это не поверхность. Глаз читает её
   как разделитель абзацев, а не как отдельный объект, и цифра, ради которой
   плашка существует, не выделяется ничем.

   Что изменено и почему именно так.

   1. Появилась собственная поверхность: белая карточка с рамкой на светлом
      фоне страницы. Объект, а не промежуток между объектами.

   2. Цена стала якорем — крупнее остальных фактов и в фирменном оранжевом.
      Тот же цвет у кнопки «Начать консультацию»: взгляд идёт от цифры к
      кнопке, а не наоборот. Спорить они не могут — у кнопки заливка, у цены
      только текст.

   3. Слева сплошная оранжевая полоса 4 px. Самый дешёвый способ отделить
      блок от текста без рамок, теней и заливок.

   4. Иконки и вертикальные разделители: три факта читаются как три метрики,
      а не как строка через запятую. Это прямо то, чем `visual_metaphors.md`
      предписывает заменять «доллары и монеты» — цифры и метрики.

   Чего здесь намеренно нет: градиентов, теней, размытого «стекла» и
   анимаций. `10_brand_identity/what_not_to_use.md` требует делового тона, а
   в юридическом B2B визуальная сдержанность продаёт лучше визуальной моды.
   ========================================================================== */

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 14px 0 26px;
  /* Скругления не ставим: с односторонней границей слева они выглядят
     сломанными. Прямой угол здесь честнее. */
  border: 1px solid #e3e8ea;
  border-left: 4px solid #f55d25;
  background: #fff;
}

.hero-facts__item {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 20px;
  border-left: 1px solid #eceff1;
}

.hero-facts__item:first-child {
  border-left: 0;
}

.hero-facts__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Не opacity: она умножается на фон и «плывёт» на разных поверхностях.
     #555 на белом даёт 7.5:1 — с запасом по контрасту. */
  color: #555;
}

.hero-facts__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #f55d25;
}

.hero-facts__value {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #0e1a1b;
}

/* Цена — то, ради чего плашка и появилась на первом экране. */
.hero-facts__item--price .hero-facts__value {
  font-size: 26px;
  line-height: 1.15;
  /* Затемнённый фирменный оранжевый: чистый #f55d25 даёт на белом 3.2:1 и
     проходит WCAG AA только как крупный текст. #c9430f даёт 4.9:1 и остаётся
     читаемым при любом размере — включая мобильный, где кегль меньше. */
  color: #c9430f;
  /* «4 000 ₽» не должно разрываться между строками. */
  white-space: nowrap;
}

/* Планшет: три колонки становятся тесными для «Удалённо, договор и акт». */
@media (max-width: 991px) {
  .hero-facts__item {
    padding: 12px 16px;
  }

  .hero-facts__item--price .hero-facts__value {
    font-size: 23px;
  }
}

/* Телефон: колонки складываются в строки, цена остаётся первой. Разделители
   переезжают с боковых на верхние — иначе они висят в воздухе. */
@media (max-width: 700px) {
  .hero-facts {
    display: block;
    margin: 12px 0 20px;
  }

  .hero-facts__item {
    padding: 11px 16px;
    border-left: 0;
    border-top: 1px solid #eceff1;
  }

  .hero-facts__item:first-child {
    border-top: 0;
  }

  .hero-facts__value {
    font-size: 16px;
  }

  .hero-facts__item--price .hero-facts__value {
    font-size: 22px;
  }
}

/* Длинная строка вместо одной цены: «аудит от 10 000 ₽ · комплект от 25 000 ₽».
   В одну строку крупным кеглем она не помещается, а nowrap выталкивал её за
   край плашки — так и было на странице коммерческой тайны 28.09. Переносим
   по словам и берём кегль остальных значений плашки. Сами цены не рвутся:
   внутри них неразрывные пробелы. Правило стоит после медиазапросов, чтобы
   перебить их кегль на любой ширине. */
.hero-facts__item--price .hero-facts__value--long {
  font-size: 17px;
  line-height: 1.35;
  white-space: normal;
}

/* Печать: заливки и цветные полосы уходят, содержание остаётся. */
@media print {
  .hero-facts {
    border: 1px solid #999;
    border-left: 1px solid #999;
  }

  .hero-facts__item--price .hero-facts__value {
    color: #000;
  }
}

/* Неполный последний ряд карточек раздела
   ---------------------------------------
   Шаблон small_panels_page режет карточки по три (`forloop.counter0|divisibleby:3`),
   а их количество кратно трём не обязано быть. На десктопе колонки заданы как
   `flex-basis: 0; flex-grow: 1`, поэтому одинокая карточка забирает всю ширину
   ряда, и картинка внутри растягивается до натуральных 600px — втрое против
   соседних 239px.

   Замечено 27.09 на разделе «Цифровое право»: услуг стало четыре, и четвёртая
   встала во весь ряд. До этого во всех разделах было ровно по три видимых
   карточки, и дефект не проявлялся ни разу.

   Держим короткий ряд в той же сетке: одна карточка или две занимают свою треть
   и прижимаются влево. Ряд из трёх не трогаем — у него selector-specificity ниже
   и поведение прежнее. Мобильная раскладка (<=1199px) тоже не трогается: там
   колонки и так встают в столбец с max-width 450px. */
@media (min-width: 1200px) {
    .module_subrow > .module_column:only-child,
    .module_subrow > .module_column:first-child:nth-last-child(2),
    .module_subrow > .module_column:first-child:nth-last-child(2) ~ .module_column {
        flex-grow: 0;
        flex-basis: calc(33.333% - 20px);
    }
}