/* Баннер (views/constructor/banner.php). Виды: overlay (фото на весь фон), split (текст и фото рядом), plain (без фото).
   Фото под текстом: 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(440px, 62vh, 680px)}
.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 16px; color: var(--cb-accent); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase}
.cb-banner__eyebrow::before {content: ""; width: 28px; height: 2px; 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-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}

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

@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}
}