/* ==========================================================================
   Управление малым офисом — страница модуля /modules/office-map-small/
   Подключается после office-map.css: все общие блоки страницы (hero, demo,
   advantages, module, admin, package, small, screens, features) берутся оттуда,
   здесь только новые блоки и правки под эту страницу.
   Скоуп: body.project-page-office-map-small

   Новые блоки и аббревиатуры:
     office-map-compare  => omcmp   (таблица «Чем отличается»)
     office-map-fit      => omfit   (карточки «Кому подойдёт» + врезка с примером)

   Модификаторы существующих блоков:
     office-map-small.-omso-upgrade  (блок «Рост без боли», переход на полную версию)

   Вёрстка mobile-first, брейкпоинты 768 / 992 / 1200.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Декоративные фоны.
   В office-map.css пути захардкожены на /modules/office-map/; страница малого
   офиса держит свои копии ассетов, поэтому пути переопределяем. Селектор со
   скоупом страницы специфичнее исходного и действует на всех ширинах.
   -------------------------------------------------------------------------- */
.project-page-office-map-small .office-map-demo .omd--decor {
  background-image: url("/modules/office-map-small/.include/images/om-keys-bg.png");
}

.project-page-office-map-small .office-map-module .omm--decor {
  background-image: url("/modules/office-map-small/.include/images/om-3d-bg-1.png");
}

.project-page-office-map-small .office-map-admin .omadm--decor {
  background-image: url("/modules/office-map-small/.include/images/om-3d-bg-2.png");
}

/* --------------------------------------------------------------------------
   Правки существующих блоков
   -------------------------------------------------------------------------- */

/* Оговорка, что демо развёрнуто на полной версии */
.project-page-office-map-small .office-map-demo .omd--note {
  margin-bottom: 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--om-cyan);
  border-radius: 0 6px 6px 0;
  background-color: rgba(255, 255, 255, 0.07);
  font-size: 14px;
  line-height: 1.5;
}

/* Подпись под ценой в блоке «Что входит в стоимость» */
.project-page-office-map-small .office-map-package .omp--price-note {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.45;
}

/* Блок «Рост без боли»: в бейдже квадратный знак полной версии,
   на ширине медальона он выглядел бы крупнее остального блока. */
.office-map-small.-omso-upgrade .omso--badge {
  width: 110px;
}

/* --------------------------------------------------------------------------
   Общий заголовок новых секций — повторяет .omm--title из office-map.css
   -------------------------------------------------------------------------- */
.office-map-compare .omcmp--title,
.office-map-fit .omfit--title {
  margin: 0 0 26px;
  padding: 0;
  color: var(--om-indigo);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
}

.office-map-compare .omcmp--title::after,
.office-map-fit .omfit--title::after {
  content: "";
  display: block;
  width: 41px;
  height: 2px;
  margin-top: 22px;
  background-color: var(--om-cyan);
}

/* --------------------------------------------------------------------------
   office-map-compare => omcmp

   Семантическая таблица. На мобильных каждая строка становится карточкой:
   шапка таблицы прячется визуально, название колонки выводится из data-label.
   От 768px — обычная таблица, колонка малого офиса подсвечена.
   -------------------------------------------------------------------------- */
.office-map-compare {
  --line: #E3E8F0;
  --accent-bg: rgba(11, 186, 239, 0.07);
  padding: 48px 0 0;
}

.office-map-compare .omcmp--lead {
  color: var(--om-text);
  font-size: 16px;
  line-height: 1.55;
}

.office-map-compare .omcmp--table-wrap {
  margin-top: 24px;
}

.office-map-compare .omcmp--table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.office-map-compare .omcmp--sr,
.office-map-compare .omcmp--table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.office-map-compare .omcmp--table tbody,
.office-map-compare .omcmp--table tr {
  display: block;
}

.office-map-compare .omcmp--table tbody tr {
  padding: 18px 20px 10px;
  border-radius: 10px;
  background-color: var(--om-gray-light);
}

.office-map-compare .omcmp--table tbody tr + tr {
  margin-top: 12px;
}

.office-map-compare .omcmp--param {
  display: block;
  margin-bottom: 6px;
  color: var(--om-indigo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.office-map-compare .omcmp--cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--om-text);
  font-size: 15px;
  line-height: 1.4;
}

.office-map-compare .omcmp--cell::before {
  content: attr(data-label);
  color: var(--om-muted);
  font-size: 13px;
  font-weight: 500;
}

.office-map-compare .omcmp--cell.-omcmp-accent {
  color: var(--om-indigo);
}

.office-map-compare .omcmp--cell b {
  font-weight: 700;
}

.office-map-compare .omcmp--hint {
  color: var(--om-muted);
  font-size: 13px;
  line-height: 1.4;
}

.office-map-compare .omcmp--price {
  color: var(--om-green);
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   office-map-fit => omfit
   -------------------------------------------------------------------------- */
.office-map-fit {
  padding: 48px 0 0;
}

.office-map-fit .omfit--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-map-fit .omfit--card {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 10px;
  background-color: var(--om-gray-blue);
}

.office-map-fit .omfit--card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 32px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background-color: var(--om-cyan);
}

.office-map-fit .omfit--card-title {
  margin-bottom: 8px;
  color: var(--om-indigo);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.office-map-fit .omfit--card-text {
  color: var(--om-text);
  font-size: 15px;
  line-height: 1.5;
}

.office-map-fit .omfit--case {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
  padding: 26px 22px 28px;
  border-radius: 16px;
  background-color: var(--om-indigo);
  color: #fff;
}

.office-map-fit .omfit--case-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.office-map-fit .omfit--case-value {
  color: var(--om-cyan);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}

.office-map-fit .omfit--case-unit {
  font-size: 16px;
  font-weight: 500;
}

.office-map-fit .omfit--case-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}

.office-map-fit .omfit--case-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.office-map-fit .omfit--case-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.55;
}

/* ==========================================================================
   >= 768px
   ========================================================================== */
@media (min-width: 768px) {
  .office-map-compare .omcmp--title,
  .office-map-fit .omfit--title {
    font-size: 34px;
  }

  /* Таблица снова становится таблицей */
  .office-map-compare .omcmp--table {
    display: table;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }

  .office-map-compare .omcmp--table thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: table-header-group;
  }

  .office-map-compare .omcmp--table tbody {
    display: table-row-group;
  }

  .office-map-compare .omcmp--table tr,
  .office-map-compare .omcmp--table tbody tr {
    display: table-row;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .office-map-compare .omcmp--table tbody tr + tr {
    margin-top: 0;
  }

  .office-map-compare .omcmp--corner,
  .office-map-compare .omcmp--head,
  .office-map-compare .omcmp--param,
  .office-map-compare .omcmp--cell {
    display: table-cell;
    padding: 18px 22px;
    vertical-align: middle;
    text-align: left;
  }

  .office-map-compare .omcmp--corner,
  .office-map-compare .omcmp--head {
    background-color: var(--om-gray-light);
  }

  .office-map-compare .omcmp--head {
    color: var(--om-indigo);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
  }

  .office-map-compare .omcmp--head.-omcmp-accent {
    background-color: var(--om-cyan);
    color: #fff;
  }

  .office-map-compare .omcmp--param {
    width: 30%;
    margin: 0;
    border-top: 1px solid var(--line);
    font-size: 16px;
  }

  .office-map-compare .omcmp--cell {
    width: 35%;
    font-size: 16px;
  }

  .office-map-compare .omcmp--cell::before {
    content: none;
  }

  .office-map-compare .omcmp--cell.-omcmp-accent {
    background-color: var(--accent-bg);
  }

  .office-map-compare .omcmp--hint {
    display: block;
    margin-top: 4px;
  }

  .office-map-fit .omfit--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   >= 992px
   ========================================================================== */
@media (min-width: 992px) {
  .office-map-compare,
  .office-map-fit {
    padding-top: 75px;
  }

  .office-map-compare .omcmp--lead {
    max-width: 900px;
    font-size: 17px;
  }

  .office-map-compare .omcmp--table-wrap {
    margin-top: 34px;
  }

  .office-map-compare .omcmp--price {
    font-size: 22px;
  }

  .office-map-fit .omfit--case {
    flex-direction: row;
    align-items: center;
    gap: 44px;
    margin-top: 30px;
    padding: 36px 44px;
  }

  .office-map-fit .omfit--case-numbers {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .office-map-fit .omfit--case-value {
    font-size: 56px;
  }

  .office-map-fit .omfit--case-text {
    font-size: 16px;
  }

  .office-map-small.-omso-upgrade .omso--badge {
    width: 130px;
  }

  /* Текст про перенос настроек длиннее подписи в исходном блоке,
     в базовые 210px он ложился узкой полосой на девять строк. */
  .office-map-small.-omso-upgrade .omso--aside {
    width: 300px;
  }
}

/* ==========================================================================
   >= 1200px
   ========================================================================== */
@media (min-width: 1200px) {
  .office-map-compare,
  .office-map-fit {
    padding-top: 115px;
  }

  .office-map-compare .omcmp--title,
  .office-map-fit .omfit--title {
    font-size: 42px;
  }

  .office-map-compare .omcmp--corner,
  .office-map-compare .omcmp--head,
  .office-map-compare .omcmp--param,
  .office-map-compare .omcmp--cell {
    padding: 22px 30px;
  }

  .office-map-fit .omfit--grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .office-map-fit .omfit--card {
    padding: 30px 28px 28px;
  }

  .office-map-fit .omfit--card::before {
    left: 28px;
  }

  .office-map-small.-omso-upgrade .omso--badge {
    width: 150px;
  }
}