/* Баннер (views/constructor/banner.php). Виды: overlay (фото на весь фон), split (текст и фото рядом), plain (без фото),
   showcase (первый экран: фото слайдами, цифры, карточка справа — ниже).
   Фото под текстом: cb-banner--dark | light | none (shade); подложка: cb-banner--panel-light | panel-dark | nopanel (panel). */
.cb--banner.cb-width--full.cb-view--overlay {padding-block: 0}
.cb-banner {position: relative; isolation: isolate; color: var(--cb-fg)}
.cb-banner--boxed.cb-banner--overlay {overflow: hidden; border-radius: calc(var(--cb-radius) * 1.6)}

/* Фото на фоне */
.cb-banner__media {position: absolute; inset: 0; z-index: -1; background: var(--cb-darkbg)}
.cb-banner__media picture, .cb-banner__media img {display: block; width: 100%; height: 100%}
.cb .cb-banner__img {width: 100%; height: 100%; object-fit: cover}
.cb-banner__media::after {content: ""; position: absolute; inset: 0}
.cb-banner--dark .cb-banner__media::after {background: linear-gradient(90deg, rgba(10, 18, 26, calc(var(--cb-overlay) + .12)) 0%, rgba(10, 18, 26, var(--cb-overlay)) 60%, rgba(10, 18, 26, calc(var(--cb-overlay) - .12)) 100%)}
.cb-banner--dark.cb-banner--center .cb-banner__media::after {background: rgba(10, 18, 26, var(--cb-overlay))}
.cb-banner--light .cb-banner__media::after {background: linear-gradient(90deg, rgba(255, 255, 255, calc(var(--cb-overlay) + .1)) 0%, rgba(255, 255, 255, var(--cb-overlay)) 60%, rgba(255, 255, 255, calc(var(--cb-overlay) - .2)) 100%)}
.cb-banner--light.cb-banner--center .cb-banner__media::after {background: rgba(255, 255, 255, var(--cb-overlay))}

.cb-banner__wrap {position: relative}
.cb-banner--overlay .cb-banner__wrap {display: flex; align-items: center; min-height: clamp(360px, 48vw, 540px); padding-block: clamp(48px, 7vw, 96px)}
.cb-banner--overlay.cb-banner--hero .cb-banner__wrap {min-height: clamp(480px, 78vh, 820px)}
.cb-banner--boxed.cb-banner--overlay .cb-banner__wrap {padding-inline: clamp(24px, 5vw, 72px)}
.cb-banner--center .cb-banner__wrap {justify-content: center; text-align: center}

/* Текст */
.cb-banner__content {max-width: 720px; color: var(--cb-fg)}
.cb-banner--center .cb-banner__content {margin-inline: auto}
.cb-banner--panel-light .cb-banner__content, .cb-banner--panel-dark .cb-banner__content {padding: clamp(24px, 3.4vw, 44px); border-radius: var(--cb-radius); box-shadow: 0 24px 60px rgba(10, 18, 26, .22)}
.cb-banner--panel-light .cb-banner__content {background: rgba(255, 255, 255, .94)}
.cb-banner--panel-dark .cb-banner__content {background: rgba(19, 32, 42, .86)}
/* Фото «как есть» без подложки: лёгкая тень, чтобы текст читался на пёстром фото */
.cb-banner--overlay.cb-banner--none.cb-banner--nopanel .cb-banner__content {text-shadow: 0 1px 14px rgba(0, 0, 0, .45)}
/* Свой цвет текста (Оформление → Текст) важнее автоматического цвета поверх фото */
.cb.cb-has-text .cb-banner__content {--cb-fg: var(--cb-text-custom); --cb-heading: var(--cb-text-custom); --cb-fg-muted: var(--cb-text-custom)}
@supports (backdrop-filter: blur(4px)) {
    .cb-banner--panel-light .cb-banner__content {background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px)}
    .cb-banner--panel-dark .cb-banner__content {background: rgba(19, 32, 42, .72); backdrop-filter: blur(8px)}
}
.cb-banner__crumbs {margin-bottom: 18px !important; color: var(--cb-fg) !important}
.cb-banner__crumbs a {color: inherit !important}
.cb-banner__eyebrow {display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--cb-accent); font-size: 17px; font-weight: 600; line-height: 1.35}
.cb-banner__eyebrow::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor}
.cb .cb-banner__title {margin: 0; color: var(--cb-heading); font-size: clamp(32px, 4.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; hyphens: auto}
.cb-banner--hero .cb-banner__title {font-size: clamp(34px, 5vw, 66px)}
.cb .cb-banner__text {max-width: 620px; margin: 20px 0 0; color: var(--cb-fg); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6}
.cb-banner--center .cb-banner__text {margin-inline: auto}
.cb .cb-banner__points {display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none}
.cb-banner--center .cb-banner__points {justify-items: center}
.cb-banner__points li {position: relative; padding-left: 30px; color: var(--cb-heading); font-weight: 600; line-height: 1.45}
.cb-banner__points li::before {content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--cb-primary) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2 4.6 9.2 10.5 2.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cb-banner__price {display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 26px 0 0; color: var(--cb-heading); font-size: 18px}
.cb .cb-banner__price {margin-top: 26px} /* 31.10: «.cb p {margin: 0}» обнулял отступ — цена прилипала к пунктам */
.cb-banner--center .cb-banner__price {justify-content: center}
.cb-banner__price b {font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1; letter-spacing: -.02em}
.cb-banner__price-from {color: var(--cb-fg)}
.cb-banner .cb-actions {margin-top: 30px}

/* Текст и фото рядом */
.cb-banner--split .cb-banner__wrap {display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center}
.cb-banner--split .cb-banner__side {overflow: hidden; border-radius: calc(var(--cb-radius) * 1.6); box-shadow: var(--cb-shadow); aspect-ratio: 5 / 4; background: var(--cb-alt)}
.cb-banner--split .cb-banner__side picture {height: 100%}
.cb .cb-banner__side-img {display: block; width: 100%; height: 100%; object-fit: cover}
.cb-banner--split.cb-banner--full .cb-banner__wrap {padding-block: 0}
/* 06.11 (ntc-vibro: «фото в баннере обрезается»): «Фото целиком» (imageFit contain) — своей пропорции, без обрезки, не выше
   --cb-img-h (imageHeight, px); «Заполнить рамку» (cover) со своей высотой — рамка этой высоты вместо 5:4 */
.cb-banner--split.cb-banner--fit-contain .cb-banner__side {aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none; background: none}
.cb-banner--split.cb-banner--fit-contain .cb-banner__side picture {height: auto}
.cb .cb-banner--fit-contain .cb-banner__side-img {width: auto; max-width: 100%; height: auto; max-height: var(--cb-img-h, 640px); margin-inline: auto; object-fit: contain; border-radius: calc(var(--cb-radius) * 1.6)}
.cb-banner--split.cb-banner--fit-cover[style*="--cb-img-h"] .cb-banner__side, .cb-banner--split.cb-banner--fit-auto[style*="--cb-img-h"] .cb-banner__side {aspect-ratio: auto; height: var(--cb-img-h)}
/* пункты в строку (pointsLayout row); по умолчанию — столбиком */
.cb .cb-banner--points-row .cb-banner__points {display: flex; flex-wrap: wrap; gap: 8px 24px}

/* Без фото */
.cb-banner--plain .cb-banner__wrap {padding-block: clamp(8px, 2vw, 24px)}
.cb-banner--plain .cb-banner__content {max-width: 860px}

/* Первый экран (view showcase, 31.10): фото слайдами на весь фон, цифры под кнопками, карточка справа. */
.cb--banner.cb-width--full.cb-view--showcase {padding-block: 0}
.cb-banner--showcase.cb-banner--boxed.cb-banner--photo {overflow: hidden; border-radius: calc(var(--cb-radius) * 1.6)}
.cb-banner__slide {position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease}
.cb-banner__slide.is-active {opacity: 1}
.cb-banner__slide picture, .cb-banner__slide img {display: block; width: 100%; height: 100%}
.cb-banner--showcase .cb-banner__wrap {display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: clamp(440px, 56vw, 640px); padding-block: clamp(56px, 7vw, 104px)}
.cb-banner--showcase.cb-banner--hero .cb-banner__wrap {min-height: clamp(540px, 84vh, 860px)}
.cb-banner--showcase.cb-banner--card .cb-banner__wrap {grid-template-columns: minmax(0, 1fr) minmax(300px, 380px)}
.cb-banner--showcase.cb-banner--boxed.cb-banner--photo .cb-banner__wrap {padding-inline: clamp(24px, 5vw, 72px)}
.cb-banner--showcase.cb-banner--nophoto .cb-banner__wrap {min-height: 0; padding-block: clamp(48px, 6vw, 88px)}
.cb-banner--showcase.cb-banner--nophoto.cb-banner--boxed .cb-banner__wrap {padding-block: clamp(8px, 2vw, 24px)} /* секция в контейнере — отступы даёт сама секция */
.cb-banner--showcase .cb-banner__content {max-width: 760px}
.cb-banner--showcase.cb-banner--center:not(.cb-banner--card) .cb-banner__content {justify-self: center}

/* Цифры под кнопками — плитки на фото */
.cb .cb-banner__stats {display: grid; grid-template-columns: repeat(var(--cb-stats, 4), minmax(0, 1fr)); gap: 12px; max-width: 660px; margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; list-style: none}
.cb-banner__stats--1 {--cb-stats: 1; max-width: 180px}
.cb-banner__stats--2 {--cb-stats: 2; max-width: 360px}
.cb-banner__stats--3 {--cb-stats: 3; max-width: 520px}
.cb-banner--center .cb-banner__stats {margin-inline: auto}
.cb-banner__stat {display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 16px 18px; border: 1px solid rgba(22, 35, 45, .12); border-radius: var(--cb-radius); background: rgba(255, 255, 255, .6)}
.cb-on-dark .cb-banner__stat, .cb-tone--dark .cb-banner--nophoto .cb-banner__stat {border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07)}
@supports (backdrop-filter: blur(4px)) {
    .cb-banner--photo .cb-banner__stat {backdrop-filter: blur(6px)}
}
.cb-banner__stat b {color: var(--cb-accent); font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1; letter-spacing: -.01em}
.cb-banner__stat span {color: var(--cb-fg); font-size: 13px; line-height: 1.35}

/* Карточка справа — всегда светлая */
.cb-banner__aside {display: flex; flex-direction: column; gap: 14px; min-width: 0}
.cb-banner__card {display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.2vw, 30px); border-radius: calc(var(--cb-radius) * 1.3); background: #fff; color: var(--cb-fg); text-align: left; box-shadow: 0 30px 70px rgba(10, 18, 26, .28)}
.cb-banner--nophoto .cb-banner__card {box-shadow: var(--cb-shadow)}
.cb-banner__badge {align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--cb-accent-soft); color: var(--cb-heading); font-size: 13px; font-weight: 700; line-height: 1.3}
.cb .cb-banner__card-title {margin: 0; color: var(--cb-heading); font-size: clamp(20px, 1.7vw, 23px); font-weight: 700; line-height: 1.2}
.cb .cb-banner__card-text {margin: 0; color: var(--cb-fg); font-size: 15px; line-height: 1.55}
.cb .cb-banner__card-points {display: grid; gap: 10px; margin: 0; padding: 0; list-style: none}
.cb-banner__card-points li {position: relative; padding-left: 28px; color: var(--cb-heading); font-size: 15px; font-weight: 500; line-height: 1.4}
.cb-banner__card-points li::before {content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; background: var(--cb-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat}
.cb .cb-banner__card-btn {width: 100%; margin-top: 4px}
.cb .cb-banner__card-phone {margin: -2px 0 0; color: var(--cb-fg); font-size: 14px; line-height: 1.4; text-align: center}
.cb-banner__card-phone a {color: var(--cb-link); font-weight: 600; white-space: nowrap}

/* Переключатель фото: подписи (у всех фото есть подпись) или точки */
.cb-banner__switch {display: flex; flex-wrap: wrap; gap: 8px}
.cb .cb-banner__switch-btn {position: relative; flex: 1 1 0; min-width: 0; min-height: 40px; padding: 9px 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--cb-radius); background: rgba(10, 18, 26, .38); color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color var(--cb-transition), background-color var(--cb-transition)}
.cb-banner__switch-btn span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.cb .cb-banner__switch-btn:hover {border-color: rgba(255, 255, 255, .6)}
.cb .cb-banner__switch-btn.is-active {border-color: var(--cb-primary); background: rgba(10, 18, 26, .62)}
.cb-on-light .cb-banner__switch-btn {border-color: rgba(22, 35, 45, .18); background: rgba(255, 255, 255, .7); color: var(--cb-heading)}
.cb-on-light .cb-banner__switch-btn.is-active {background: #fff}
.cb-banner__switch--dots {gap: 10px}
.cb-banner--card .cb-banner__switch--dots {justify-content: center}
.cb .cb-banner__switch--dots .cb-banner__switch-btn {flex: 0 0 auto; width: 12px; min-height: 0; height: 12px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .45)}
.cb .cb-banner__switch--dots .cb-banner__switch-btn.is-active {width: 30px; border-radius: 6px; background: var(--cb-primary)}
@media (prefers-reduced-motion: reduce) {
    .cb-banner__slide {transition: none}
}

@media (max-width: 1199px) {
    .cb-banner--showcase.cb-banner--card .cb-banner__wrap {grid-template-columns: minmax(0, 1fr) minmax(280px, 340px)}
    .cb .cb-banner__stats--4 {--cb-stats: 2; max-width: 400px}
}
@media (max-width: 991px) {
    .cb-banner--showcase.cb-banner--card .cb-banner__wrap {grid-template-columns: minmax(0, 1fr)}
    .cb-banner--showcase .cb-banner__wrap, .cb-banner--showcase.cb-banner--hero .cb-banner__wrap {min-height: 0}
    .cb-banner--showcase .cb-banner__aside {max-width: 520px}
    .cb .cb-banner__stats--4 {--cb-stats: 4; max-width: 660px}
}
@media (max-width: 991px) {
    .cb-banner--split .cb-banner__wrap {grid-template-columns: 1fr}
    .cb-banner--split .cb-banner__side {order: -1; aspect-ratio: 16 / 10}
    .cb-banner--dark .cb-banner__media::after {background: rgba(10, 18, 26, calc(var(--cb-overlay) + .08))}
    .cb-banner--light .cb-banner__media::after {background: rgba(255, 255, 255, calc(var(--cb-overlay) + .05))}
}
@media (max-width: 575px) {
    .cb-banner--overlay .cb-banner__wrap {min-height: 0; padding-block: 56px}
    .cb-banner--overlay.cb-banner--hero .cb-banner__wrap {min-height: min(78vh, 560px)}
    .cb-banner--boxed.cb-banner--overlay {border-radius: var(--cb-radius)}
    .cb-banner--boxed.cb-banner--overlay .cb-banner__wrap {padding-inline: 20px}
    .cb-banner--panel-light .cb-banner__content, .cb-banner--panel-dark .cb-banner__content {padding: 22px 18px}
    .cb-banner--showcase .cb-banner__wrap {gap: 28px; padding-block: 44px 40px}
    .cb-banner--showcase.cb-banner--boxed.cb-banner--photo {border-radius: var(--cb-radius)}
    .cb-banner--showcase.cb-banner--boxed.cb-banner--photo .cb-banner__wrap {padding-inline: 20px}
    .cb .cb-banner__stats--3, .cb .cb-banner__stats--4 {--cb-stats: 2}
    .cb-banner__stat {padding: 14px 14px 15px}
    .cb-banner__card {padding: 22px 20px}
}