/* ==========================================================================
   Конструктор посадочных — общие стили (подключает Constructor::showContent вместе с blocks/<type>.css).
   Токены сайта --es-* (media/css/esimple/style.css) с запасными значениями — работает и в других шаблонах.
   Секция: .cb .cb--<type> .cb-bg--light|muted|dark|primary|custom .cb-tone--light|dark .cb-space--… .cb-width--…
   ========================================================================== */
.cb-page {
    --cb-primary: var(--es-primary, #226d9f);
    --cb-primary-dark: var(--es-primary-dark, #174c6d);
    --cb-primary-soft: var(--es-primary-soft, #eaf2f8);
    --cb-on-primary: var(--es-on-primary, #fff);
    --cb-ink: var(--es-heading, #16232d);
    --cb-body: var(--es-text, #4d5b66);
    --cb-soft: #5f6b76; /* темнее --es-muted: контраст ≥ 4.5 и на белом, и на сером фоне */
    --cb-white: var(--es-surface, #fff);
    --cb-alt: var(--es-surface-alt, #f4f7f9);
    --cb-darkbg: var(--es-dark, #13202a);
    --cb-rule: var(--es-border, #e1e7ec);
    --cb-shadow: var(--es-shadow, 0 12px 32px rgba(22, 35, 45, .08));
    --cb-shadow-hover: var(--es-shadow-hover, 0 18px 44px rgba(22, 35, 45, .14));
    --cb-radius: var(--es-radius, 10px);
    --cb-radius-sm: var(--es-radius-sm, 6px);
    --cb-btn-radius: var(--es-btn-radius, 999px);
    --cb-section-py: var(--es-section-py, clamp(64px, 6.5vw, 104px));
    --cb-section-py-compact: var(--es-section-py-compact, clamp(44px, 5vw, 72px));
    --cb-h2: var(--es-h2-size, clamp(30px, 3.3vw, 46px));
    --cb-subtitle: var(--es-subtitle-size, 17px);
    --cb-gap: var(--es-content-gap, clamp(32px, 3.6vw, 52px));
    --cb-transition: var(--general-transition, .2s);
    --cb-danger: #c62828;
    --cb-danger-on-dark: #ff9b9b;
    display: block;
}

.cb, .cb *, .cb *::before, .cb *::after, .cb-page-header, .cb-page-header * {box-sizing: border-box}
.cb {position: relative; padding-block: var(--cb-section-py); background: var(--cb-bg); color: var(--cb-fg); font-size: 16px; line-height: 1.6; overflow-wrap: break-word}
.cb-space--compact {padding-block: var(--cb-section-py-compact)}
.cb-space--none {padding-block: 0}
.cb[id] {scroll-margin-top: 96px}
.cb__inner--full {width: 100%; padding-inline: clamp(16px, 3vw, 48px)}
.cb img {max-width: 100%; height: auto}
.cb picture {display: block}
.cb p {margin: 0}
.cb a {color: var(--cb-link); transition: color var(--cb-transition)}
.cb a:hover {color: var(--cb-link-hover)}
.cb :focus-visible {outline: 3px solid var(--cb-focus); outline-offset: 3px; border-radius: 4px}
.cb h3, .cb h4 {color: var(--cb-heading)}

/* ---- Фон секции ---- */
.cb-bg--light {--cb-bg: var(--cb-white)}
.cb-bg--muted {--cb-bg: var(--cb-alt)}
.cb-bg--dark {--cb-bg: var(--cb-darkbg)}
.cb-bg--primary {--cb-bg: var(--cb-primary)}

/* ---- Тон: цвета текста, карточек, акцентов и кнопок ---- */
.cb-tone--light, .cb-on-light {
    --cb-fg: var(--cb-body);
    --cb-heading: var(--cb-ink);
    --cb-fg-muted: var(--cb-soft);
    --cb-card-bg: var(--cb-white);
    --cb-card-border: var(--cb-rule);
    --cb-card-shadow: var(--cb-shadow);
    --cb-accent: var(--cb-primary);
    --cb-accent-soft: var(--cb-primary-soft);
    --cb-line: var(--cb-rule);
    --cb-link: var(--cb-primary);
    --cb-link-hover: var(--cb-primary-dark);
    --cb-focus: var(--cb-primary);
    --cb-btn-bg: var(--cb-primary);
    --cb-btn-bg-hover: var(--cb-primary-dark);
    --cb-btn-fg: var(--cb-on-primary);
    --cb-ghost-fg: var(--cb-primary);
    --cb-ghost-border: var(--cb-primary);
    --cb-input-bg: var(--cb-white);
    --cb-input-border: var(--cb-rule);
}
.cb-bg--light.cb-tone--light {--cb-card-bg: var(--cb-white)}
.cb-bg--light.cb-tone--light .cb-card--tint {--cb-card-bg: var(--cb-alt)}
.cb-tone--dark, .cb-on-dark {
    --cb-fg: rgba(255, 255, 255, .8);
    --cb-heading: #fff;
    --cb-fg-muted: rgba(255, 255, 255, .64);
    --cb-card-bg: rgba(255, 255, 255, .06);
    --cb-card-border: rgba(255, 255, 255, .14);
    --cb-card-shadow: none;
    --cb-accent: #8cc4ea;
    --cb-accent-soft: rgba(255, 255, 255, .1);
    --cb-line: rgba(255, 255, 255, .16);
    --cb-link: #fff;
    --cb-link-hover: rgba(255, 255, 255, .8);
    --cb-focus: #fff;
    --cb-btn-bg: var(--cb-primary);
    --cb-btn-bg-hover: var(--cb-primary-dark);
    --cb-btn-fg: var(--cb-on-primary);
    --cb-ghost-fg: #fff;
    --cb-ghost-border: rgba(255, 255, 255, .55);
    --cb-input-bg: rgba(255, 255, 255, .08);
    --cb-input-border: rgba(255, 255, 255, .22);
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .cb-tone--dark, .cb-on-dark {--cb-accent: color-mix(in srgb, var(--cb-primary) 45%, #fff)}
}
/* На фоне цвета сайта основная кнопка — белая, акцент — белый */
.cb-bg--primary.cb-tone--dark {--cb-fg: rgba(255, 255, 255, .93); --cb-fg-muted: rgba(255, 255, 255, .82); --cb-accent: #fff; --cb-btn-bg: #fff; --cb-btn-bg-hover: rgba(255, 255, 255, .86); --cb-btn-fg: var(--cb-primary-dark); --cb-accent-soft: rgba(255, 255, 255, .16)}
.cb-bg--primary.cb-tone--light {--cb-btn-bg: var(--cb-ink); --cb-btn-bg-hover: #000; --cb-btn-fg: #fff; --cb-accent: var(--cb-ink); --cb-ghost-fg: var(--cb-ink); --cb-ghost-border: var(--cb-ink); --cb-card-bg: rgba(255, 255, 255, .7)}

/* ---- Заголовок секции ---- */
.cb-title {max-width: 820px; margin: 0 0 var(--cb-gap)}
.cb-title:last-child {margin-bottom: 0}
.cb-title--center {margin-inline: auto; text-align: center}
.cb-title__eyebrow {display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--cb-accent); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase}
.cb-title__eyebrow::before {content: ""; width: 28px; height: 2px; background: currentColor}
.cb-tone--light:not(.cb-has-accent) .cb-title__eyebrow {color: var(--es-accent-text, var(--cb-accent))} /* тёмный оттенок акцента для текста на светлом, если сайт его задаёт */
.cb .cb-title__h {margin: 0; color: var(--cb-heading); font-size: var(--cb-h2); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; hyphens: auto}
.cb .cb-title__sub {max-width: 680px; margin: 16px 0 0; color: var(--cb-fg); font-size: var(--cb-subtitle); line-height: 1.6}
.cb-title--center .cb-title__sub {margin-inline: auto}

/* ---- Кнопки ---- */
.cb-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px}
.cb-actions--center {justify-content: center}
.cb-btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--cb-btn-radius); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--cb-transition), border-color var(--cb-transition), color var(--cb-transition), transform var(--cb-transition), box-shadow var(--cb-transition)}
.cb .cb-btn--primary, .cb-btn--primary {background: var(--cb-btn-bg); border-color: var(--cb-btn-bg); color: var(--cb-btn-fg)}
.cb .cb-btn--primary:hover {background: var(--cb-btn-bg-hover); border-color: var(--cb-btn-bg-hover); color: var(--cb-btn-fg); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 35, 45, .18)}
.cb .cb-btn--ghost {background: transparent; border-color: var(--cb-ghost-border); color: var(--cb-ghost-fg)}
.cb .cb-btn--ghost:hover {background: var(--cb-ghost-fg); border-color: var(--cb-ghost-fg); color: var(--cb-bg, #fff)}
.cb .cb-btn--light {background: var(--cb-accent-soft); border-color: transparent; color: var(--cb-heading)}
.cb .cb-btn--light:hover {background: var(--cb-card-bg); border-color: var(--cb-card-border); color: var(--cb-heading)}
.cb-btn--sm {min-height: 42px; padding: 0 20px; font-size: 14px}
.cb-btn--block {width: 100%}

/* ---- Сетки ---- */
.cb-grid {display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(var(--cb-cols, 3), minmax(0, 1fr))}
.cb-cols-1 {--cb-cols: 1}
.cb-cols-2 {--cb-cols: 2}
.cb-cols-3 {--cb-cols: 3}
.cb-cols-4 {--cb-cols: 4}
.cb-cols-5 {--cb-cols: 5}
.cb-cols-6 {--cb-cols: 6}
@media (max-width: 1199px) {
    .cb-cols-5, .cb-cols-6 {--cb-cols: 4}
}
@media (max-width: 991px) {
    .cb-cols-3, .cb-cols-4, .cb-cols-5, .cb-cols-6 {--cb-cols: 2}
}
@media (max-width: 575px) {
    .cb-grid:not(.cb-grid--keep) {--cb-cols: 1}
}

/* ---- Карточка ---- */
.cb-card {position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--cb-card-bg); border: 1px solid var(--cb-card-border); border-radius: var(--cb-radius); box-shadow: var(--cb-card-shadow); color: var(--cb-fg); transition: transform var(--cb-transition), box-shadow var(--cb-transition)}
.cb-card--hover:hover {transform: translateY(-4px); box-shadow: var(--cb-shadow-hover)}
.cb-tone--dark .cb-card--hover:hover {box-shadow: none; border-color: rgba(255, 255, 255, .3)}
.cb-card__name {margin: 0; color: var(--cb-heading); font-size: 19px; font-weight: 700; line-height: 1.3}
.cb-card__text {margin: 0; color: var(--cb-fg); font-size: 15px; line-height: 1.6}

/* ---- Иконка в плашке ---- */
.cb-icon-box {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; background: var(--cb-accent-soft); color: var(--cb-accent); font-size: 26px; line-height: 1; transition: background var(--cb-transition), color var(--cb-transition)}
.cb-tone--light .cb-card--hover:hover .cb-icon-box {background: var(--cb-primary); color: var(--cb-on-primary)}

/* ---- Текст из визуального редактора ---- */
.cb-rich {color: var(--cb-fg); font-size: 16px; line-height: 1.75}
.cb .cb-rich > * + * {margin-top: 1em}
.cb-rich h3, .cb-rich h4 {margin-top: 1.6em; color: var(--cb-heading); font-size: 22px; font-weight: 700; line-height: 1.3}
.cb-rich h4 {font-size: 18px}
.cb-rich ul, .cb-rich ol {margin-block: 1em; padding-left: 1.4em; list-style-position: outside}
.cb-rich ul {list-style: disc}
.cb-rich ol {list-style: decimal}
.cb-rich li + li {margin-top: .4em}
.cb-rich li::marker {color: var(--cb-accent)}
.cb-rich a {text-decoration: underline; text-underline-offset: 3px}
.cb-rich strong, .cb-rich b {color: var(--cb-heading)}
.cb-rich blockquote {margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cb-accent); color: var(--cb-heading); font-size: 18px}
.cb-rich hr {border: 0; border-top: 1px solid var(--cb-line)}
.cb-rich table {width: 100%; border-collapse: collapse; font-size: 15px}
.cb-rich th, .cb-rich td {padding: 10px 12px; border: 1px solid var(--cb-line); text-align: left}
.cb-rich th {color: var(--cb-heading)}

/* ---- Прокручиваемая лента (галерея-карусель, отзывы): [data-cb-carousel] ---- */
.cb-scroller {position: relative}
.cb-scroller__track {display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cb-per, 3) - 1) * var(--cb-scroll-gap, 24px)) / var(--cb-per, 3)); gap: var(--cb-scroll-gap, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px}
.cb-scroller__track::-webkit-scrollbar {display: none}
.cb-scroller__track > * {scroll-snap-align: start}
.cb-scroller__nav {display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px}
.cb-scroller__nav[hidden] {display: none}
.cb-scroller__btn {display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--cb-card-border); border-radius: 50%; background: var(--cb-card-bg); color: var(--cb-heading); font-size: 20px; line-height: 1; cursor: pointer; transition: background var(--cb-transition), color var(--cb-transition), opacity var(--cb-transition)}
.cb-scroller__btn:hover {background: var(--cb-btn-bg); border-color: var(--cb-btn-bg); color: var(--cb-btn-fg)}
.cb-scroller__btn:disabled {opacity: .35; cursor: default; background: var(--cb-card-bg); color: var(--cb-heading)}
@media (max-width: 991px) {
    .cb-scroller__track {--cb-per: 2 !important}
}
@media (max-width: 575px) {
    .cb-scroller__track {--cb-per: 1.15 !important; --cb-scroll-gap: 14px}
}

/* ---- Шапка посадочной (крошки + H1), если первый блок — не баннер ---- */
.cb-page-header {padding: clamp(28px, 3vw, 44px) 0 clamp(20px, 2.5vw, 32px); background: var(--cb-alt)}
.cb-breadcrumb, .cb-page .breadcrumb {display: flex; flex-wrap: wrap; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--cb-soft)}
.cb-page .breadcrumb li + li::before {content: "\203A"; padding: 0 8px}
.cb-page .breadcrumb a {color: inherit; text-decoration: none}
.cb-page .breadcrumb a:hover {color: var(--cb-primary)}
.cb-page-header__title {max-width: 900px; margin: 0; color: var(--cb-ink); font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; hyphens: auto}

/* ---- Кнопка «Редактировать посадочную» (только администратор) ---- */
.cb-admin-edit {position: fixed; left: 16px; bottom: 16px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #16232d; color: #fff !important; font: 600 13px/1.2 sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); text-decoration: none; opacity: .88; transition: opacity .2s}
.cb-admin-edit:hover {opacity: 1}

/* ---- Появление при прокрутке: прячем, только если base.js запустился (.cb-js), и он же ставит .cb-in ---- */
.cb-js .cb-reveal {opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease}
.cb-js .cb-reveal.cb-in {opacity: 1; transform: none}

.cb-visually-hidden {position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0}

@media (max-width: 767px) {
    .cb {font-size: 15px}
    .cb .cb-title__h {font-size: clamp(26px, 7.2vw, 34px)}
    .cb .cb-title__sub {font-size: 16px}
    .cb-btn {min-height: 48px; padding: 0 22px}
    .cb-actions .cb-btn {flex: 1 1 auto}
}
@media print {
    .cb-admin-edit, .cb-scroller__nav {display: none}
    .cb-js .cb-reveal {opacity: 1; transform: none}
}
@media (prefers-reduced-motion: reduce) {
    .cb *, .cb *::before, .cb *::after {transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important}
    .cb-js .cb-reveal {opacity: 1; transform: none}
}

/* Предпросмотр в админке: не показываем баннер cookie сайта поверх блоков */
body:has(.cb-page[data-cb-preview]) .cookie-consent {display: none !important}

/* ---- Свои цвета блока (Оформление: цвет текста, кнопок и иконок, карточек) — ConstructorView::sectionStyle ---- */
.cb.cb-has-text {--cb-fg: var(--cb-text-custom); --cb-heading: var(--cb-text-custom); --cb-fg-muted: var(--cb-text-custom)}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .cb.cb-has-text {--cb-fg: color-mix(in srgb, var(--cb-text-custom) 88%, transparent); --cb-fg-muted: color-mix(in srgb, var(--cb-text-custom) 70%, transparent)}
}
.cb.cb-has-accent {
    --cb-accent: var(--cb-accent-custom); --cb-primary: var(--cb-accent-custom); --cb-primary-dark: var(--cb-accent-custom);
    --cb-btn-bg: var(--cb-accent-custom); --cb-btn-bg-hover: var(--cb-accent-custom); --cb-btn-fg: var(--cb-on-accent);
    --cb-on-primary: var(--cb-on-accent); --cb-link: var(--cb-accent-custom); --cb-link-hover: var(--cb-accent-custom);
    --cb-focus: var(--cb-accent-custom); --cb-ghost-fg: var(--cb-accent-custom); --cb-ghost-border: var(--cb-accent-custom);
    --cb-accent-soft: rgba(0, 0, 0, .06);
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .cb.cb-has-accent {--cb-accent-soft: color-mix(in srgb, var(--cb-accent-custom) 15%, transparent)}
}
.cb.cb-has-accent .cb-btn--primary:hover {filter: brightness(.92)}
.cb.cb-cards-light, .cb.cb-cards-dark {--cb-card-bg: var(--cb-card-custom)}
.cb.cb-cards-dark .cb-card {--cb-fg: rgba(255, 255, 255, .86); --cb-heading: #fff; --cb-fg-muted: rgba(255, 255, 255, .66); --cb-card-border: rgba(255, 255, 255, .14); --cb-line: rgba(255, 255, 255, .16); --cb-card-shadow: none}
.cb.cb-cards-light .cb-card {--cb-fg: var(--cb-body); --cb-heading: var(--cb-ink); --cb-fg-muted: var(--cb-soft); --cb-card-border: var(--cb-rule); --cb-line: var(--cb-rule)}