/* ==========================================================================
   Оформление блоков конструктора для визитки (тема esimple), 30.10 — по образцу stroymog.by (наша визитка, которую
   пользователь назвал ориентиром). Подключает Constructor::assets() вместо site.css (там палитра магазина).
   Заголовки — Unbounded, текст — шрифт сайта (Golos Text, local.php → view.font), акцент — цвет сайта (у демо — голубой
   логотипа #297fb8, приходит через --es-primary), графит, светло-серые подложки, кнопки 8px, без надписей над заголовками.
   ========================================================================== */
.cb-page {
    --cb-ink: #1f2329;
    --cb-body: #454b53;
    --cb-soft: #5d646d;
    --cb-alt: #eef1f4;
    --cb-darkbg: #1f2329;
    --cb-rule: #e2e6ea;
    --cb-radius: 12px;
    --cb-radius-sm: 8px;
    --cb-btn-radius: 8px;
    --cb-shadow: 0 14px 34px rgba(31, 35, 41, .08);
    --cb-shadow-hover: 0 20px 44px rgba(31, 35, 41, .14);
    --cb-section-py: clamp(64px, 7vw, 112px);
    --cb-section-py-compact: clamp(44px, 5vw, 72px);
    --cb-h2: clamp(28px, 3vw, 42px);
    --cb-subtitle: 18px;
    --cb-gap: clamp(28px, 3.4vw, 48px);
    --vk-display: inherit; /* 31.10: один шрифт — шрифт сайта; Unbounded убран (пользователь: «4 разных вида») */
}

.cb-page .cb, .cb-page .cb * {letter-spacing: normal}
.cb-page .cb {font-size: 17px; line-height: 1.6}

/* надписей над заголовками нет — пользователь 30.10: «нахуй надписи над заголовком» */
.cb-page .cb-title__eyebrow, .cb-page .cb-banner__eyebrow {display: none}

/* ОДНА шкала (31.10): заголовки — шрифт сайта 700; текст и пункты — 18/400; кнопки и меню — 16/600 и 16/500 */
.cb-page .cb .cb-title__h, .cb-page .cb-page-header__title {font-family: inherit; font-size: clamp(28px, 2.8vw, 40px); font-weight: 700; line-height: 1.15}
.cb-page .cb .cb-banner__title {font-family: inherit; font-size: clamp(34px, 3.8vw, 54px); font-weight: 700; line-height: 1.1}
.cb-page .cb .cb-title__sub, .cb-page .cb .cb-banner__text {font-size: 18px; line-height: 1.6}
.cb-page .cb .cb-card__name, .cb-page .cb .cb-infoblock__name, .cb-page .cb-rich h2, .cb-page .cb-rich h3 {font-weight: 700}
.cb-page .cb .cb-banner__points li, .cb-page .cb .cb-rich, .cb-page .cb .cb-rich p, .cb-page .cb .cb-rich li {font-size: 18px; font-weight: 400; line-height: 1.6}

/* кнопки — как у stroymog: прямые, 8px, плотные */
.cb-page .cb-btn {min-height: 52px; padding: 0 28px; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 600}

/* первый экран «текст и фото рядом»: светло-серая сцена, крупное фото со скруглением */
.cb-page .cb--banner.cb-view--split.cb-bg--light {--cb-bg: var(--cb-alt)}
/* картинка первого экрана — без подложки-рамки: сам снимок, скругление и тень */
.cb-page .cb-banner--split .cb-banner__side {border: 1px solid var(--cb-rule); border-radius: 12px; box-shadow: 0 24px 60px rgba(31, 35, 41, .14); aspect-ratio: 16 / 10; background: #fff}
.cb-page .cb-banner__points {gap: 12px}
.cb-page .cb-banner__points li {color: var(--cb-heading)}

/* фото-плитки: текст на фото — только на плотном затемнении снизу */
.cb-page .cb-tile::before {background: linear-gradient(180deg, rgba(14, 17, 22, 0) 30%, rgba(14, 17, 22, .9) 100%)}
.cb-page .cb .cb-tile__name {font-weight: 600}

/* карточки и плашки иконок — мягкая подложка цвета сайта */
.cb-page .cb-icon-box {border-radius: 10px; background: var(--cb-primary-soft); color: var(--cb-primary)}
.cb-page .cb-bg--dark .cb-icon-box {background: rgba(255, 255, 255, .08); color: #fff}

/* этапы — номер на плашке цвета сайта */
.cb-page .cb-worksteps__badge, .cb-page .cb-worksteps__marker {border: 0; border-radius: 8px; background: var(--cb-primary); color: #fff; font-weight: 700}

/* полоса цвета сайта (призыв): кнопки — сплошные белые, читаются; вторая — белый контур */
.cb-page .cb-bg--primary .cb-btn {border: 2px solid #fff; background: #fff; color: #1f2329}
.cb-page .cb-bg--primary .cb-btn:hover {background: rgba(255, 255, 255, .88); color: #1f2329}
.cb-page .cb-bg--primary .cb-btn + .cb-btn {background: transparent; color: #fff}
.cb-page .cb-bg--primary .cb-btn + .cb-btn:hover {background: rgba(255, 255, 255, .12); color: #fff}

/* 31.10 первый экран «текст и фото рядом»: картинка крупнее (колонка шире); без рамки — устройства на картинке сами по себе.
   На телефоне — сначала заголовок, текст и кнопки, картинка после (было наоборот) */
.cb-page .cb-banner--split .cb-banner__wrap {grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr)}
.cb-page .cb-banner--split .cb-banner__side {border: 0; border-radius: 12px; box-shadow: none; aspect-ratio: 4 / 3; background: transparent}
@media (max-width: 991px) {
    .cb-page .cb-banner--split .cb-banner__wrap {grid-template-columns: 1fr}
    .cb-page .cb-banner--split .cb-banner__side {order: 2; aspect-ratio: 4 / 3}
}

/* 31.10 первый экран: один ритм (24 / 24 / 36) и один цвет текста — пункты как основной текст; галочки спокойнее */
.cb-page .cb .cb-banner__text {margin-top: 24px}
.cb-page .cb .cb-banner__points {margin-top: 24px; gap: 10px}
.cb-page .cb .cb-banner__points li {padding-left: 30px; color: var(--cb-fg)}
.cb-page .cb-banner__points li::before {top: .22em; width: 18px; height: 18px; background-size: 11px 11px}
.cb-page .cb-banner__content > .cb-actions {margin-top: 36px}