/* ==========================================================================
   Блоки из конструктора. Подключаются и на сайте, и на холсте конструктора.
   Адаптивность — через container queries: колонки перестраиваются по ширине
   самого блока, поэтому предпросмотр «Телефон» в конструкторе совпадает с сайтом.
   ========================================================================== */

.cb {
  --cb-ink: #102028;
  --cb-ink-2: #3A4E58;
  --cb-ink-3: #6A7E88;
  --cb-line: #D5E0E6;
  --cb-rose: #0E7C8A;
  --cb-rose-ink: #0A5C66;
  --cb-enamel: #E7F1F4;
  --cb-enamel-2: #C5DCE3;
  --cb-tint: #E6EEF2;
  --cb-display: 'Commissioner', 'Golos Text', system-ui, sans-serif;
  --cb-body: 'Golos Text', system-ui, -apple-system, sans-serif;
  --cb-mono: 'JetBrains Mono', ui-monospace, monospace;
  --cb-axes: "FLAR" 100, "VOLM" 25;

  /* Цвета, которые меняются на тёмном и розовом фоне */
  --cb-fg: var(--cb-ink);
  --cb-fg-2: var(--cb-ink-2);
  --cb-fg-3: var(--cb-ink-3);
  --cb-accent: var(--cb-rose);
  --cb-rule: var(--cb-line);
  --cb-bg: transparent;
  --cb-pad: clamp(56px, 7vw, 104px);

  container-type: inline-size;
  min-height: var(--cb-min-h, 0);
  background: var(--cb-bg);
  color: var(--cb-fg);
  font-family: var(--cb-body);
  font-size: 17px;
  line-height: 1.6;
}

.cb--bg-white { --cb-bg: #FFFFFF; }
.cb--bg-tinted { --cb-bg: var(--cb-tint); }
.cb--bg-enamel { --cb-bg: var(--cb-enamel); }
.cb--bg-dark,
.cb-col--dark {
  --cb-bg: var(--cb-ink);
  --cb-fg: #FFFFFF;
  --cb-fg-2: rgba(255, 255, 255, .76);
  --cb-fg-3: rgba(255, 255, 255, .56);
  --cb-accent: var(--cb-enamel-2);
  --cb-rule: rgba(255, 255, 255, .16);
}
.cb--bg-rose {
  --cb-bg: var(--cb-rose);
  --cb-fg: #FFFFFF;
  --cb-fg-2: rgba(255, 255, 255, .88);
  --cb-fg-3: rgba(255, 255, 255, .7);
  --cb-accent: var(--cb-enamel);
  --cb-rule: rgba(255, 255, 255, .28);
}

.cb--pad-s { --cb-pad: clamp(32px, 4vw, 52px); }
.cb--pad-l { --cb-pad: clamp(80px, 10vw, 152px); }
.cb--align-center { text-align: center; }

.cb-inner {
  width: 100%;
  max-width: calc(1240px + 2 * clamp(16px, 4vw, 32px));
  margin-inline: auto;
  padding: var(--cb-pad) clamp(16px, 4vw, 32px);
}
.cb-inner--narrow { max-width: calc(820px + 2 * clamp(16px, 4vw, 32px)); }
.cb-inner--wide { max-width: calc(1480px + 2 * clamp(16px, 4vw, 32px)); }

.cb-rows { display: grid; gap: clamp(28px, 4vw, 48px); }

.cb-row { display: grid; gap: var(--cb-gap, 32px); align-items: start; }
.cb-row--1 { grid-template-columns: minmax(0, 1fr); }
.cb-row--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-row--1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-row--1-1-1-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cb-row--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cb-row--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cb-row--gap-s { --cb-gap: 16px; }
.cb-row--gap-l { --cb-gap: clamp(32px, 6vw, 80px); }
.cb-row--valign-center { align-items: center; }
.cb-row--valign-end { align-items: end; }

.cb-col {
  display: flex;
  flex-direction: column;
  gap: var(--cb-stack, 18px);
  min-width: 0;
  min-height: var(--cb-col-min, 0);
  padding: var(--cb-col-pad, 0px);
  border-radius: var(--cb-col-radius, 0px);
}
.cb-col--card,
.cb-col--tinted,
.cb-col--dark,
.cb-col--outline {
  padding: var(--cb-col-pad, clamp(22px, 3vw, 32px));
  border-radius: var(--cb-col-radius, 24px);
}
.cb-col--card,
.cb-col--tinted {
  --cb-fg: var(--cb-ink);
  --cb-fg-2: var(--cb-ink-2);
  --cb-fg-3: var(--cb-ink-3);
  --cb-accent: var(--cb-rose);
  --cb-rule: var(--cb-line);
  color: var(--cb-fg);
}
.cb-col--card { background: #FFFFFF; border: 1px solid var(--cb-line); }
.cb-col--tinted { background: var(--cb-tint); }
.cb-col--dark { background: var(--cb-ink); color: var(--cb-fg); }
.cb-col--outline { border: var(--cb-col-stroke, 1.5px) solid var(--cb-rule); }
.cb--bg-white .cb-col--card { background: var(--cb-tint); border-color: transparent; }

/* ——— Элементы ——— */

.cb-el--left { text-align: left; }
.cb-el--center { text-align: center; }
.cb-el--right { text-align: right; }

.cb-eyebrow {
  margin: 0;
  font-family: var(--cb-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cb-fg-3);
}
.cb-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--cb-accent);
  vertical-align: middle;
}

.cb-heading {
  margin: 0;
  font-family: var(--cb-display);
  font-variation-settings: var(--cb-axes);
  font-weight: 560;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--cb-fg);
}
.cb-heading em { font-style: normal; color: var(--cb-accent); }
.cb-heading--xl { font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4.6rem); letter-spacing: -.038em; line-height: 1.02; }
.cb-heading--l { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.2rem); }
.cb-heading--m { font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); letter-spacing: -.02em; line-height: 1.15; }
.cb-heading--s { font-size: 1.3rem; letter-spacing: -.015em; line-height: 1.25; }

.cb-text { color: var(--cb-fg-2); }
.cb-text--s { font-size: 15px; }
.cb-text--l { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); }
.cb-text > * { margin: 0; }
.cb-text > * + * { margin-top: .85em; }
.cb-text strong { color: var(--cb-fg); font-weight: 600; }
.cb-text a { color: var(--cb-accent); text-underline-offset: 3px; }
.cb-text h2,
.cb-text h3,
.cb-text h4 { font-family: var(--cb-display); font-variation-settings: var(--cb-axes); font-weight: 560; color: var(--cb-fg); letter-spacing: -.015em; }
.cb-text h2 { font-size: 1.6rem; }
.cb-text h3,
.cb-text h4 { font-size: 1.25rem; }
.cb-text ul,
.cb-text ol { padding-left: 1.3em; }
.cb-text li::marker { color: var(--cb-accent); }
.cb-text blockquote { padding-left: 18px; border-left: 3px solid var(--cb-accent); }

.cb-image { margin: 0; }
.cb-image-frame { overflow: hidden; border-radius: 24px; background: var(--cb-tint); }
.cb-image-frame[data-ratio="1:1"] { aspect-ratio: 1; }
.cb-image-frame[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.cb-image-frame[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.cb-image-frame[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.cb-image-frame :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-image-frame[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
.cb-video .cb-image-frame { background: #102028; }
.cb-video video[controls] { object-fit: contain; }
.cb-image-frame[data-ratio="auto"] img { height: auto; }
.cb-image--r-none .cb-image-frame { border-radius: 0; }
.cb-image--r-m .cb-image-frame { border-radius: 12px; }
.cb-image--r-round .cb-image-frame { border-radius: 50%; }
.cb-image figcaption { margin-top: 10px; font-size: 14px; color: var(--cb-fg-3); }
.cb-image-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  color: var(--cb-ink-3);
  font-size: 14px;
  background: repeating-linear-gradient(-45deg, rgba(17, 40, 45, .04) 0 10px, transparent 10px 20px), var(--cb-tint);
}

.cb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cb--align-center .cb-actions,
.cb-actions.cb-el--center { justify-content: center; }
.cb-actions.cb-el--left { justify-content: flex-start; }
.cb-actions.cb-el--right { justify-content: flex-end; }

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--cb-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.cb-btn svg { width: 18px; height: 18px; flex: none; transition: translate .25s; }
.cb-btn:hover svg { translate: 3px 0; }
.cb-btn--primary { background: var(--cb-rose); color: #FFFFFF; }
.cb-btn--primary:hover { background: var(--cb-rose-ink); }
.cb-btn--ghost { border-color: color-mix(in srgb, var(--cb-fg) 30%, transparent); color: var(--cb-fg); }
.cb-btn--ghost:hover { border-color: var(--cb-fg); }
.cb-btn--light { background: #FFFFFF; color: var(--cb-ink); }
.cb-btn--light:hover { background: var(--cb-enamel); }
.cb-btn--full { width: 100%; }

.cb-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; text-align: left; counter-reset: cb-list; }
.cb-list li { position: relative; padding-left: 34px; color: var(--cb-fg-2); }
.cb-list li::before { position: absolute; left: 0; top: .15em; }
.cb-list--check li::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cb-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cb--bg-dark .cb-list--check li::before,
.cb-col--dark .cb-list--check li::before { background-color: var(--cb-rose); }
.cb-list--dot li { padding-left: 24px; }
.cb-list--dot li::before {
  content: '';
  top: .5em;
  width: 9px;
  height: 11px;
  border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
  background: var(--cb-enamel-2);
}
.cb-list--number li { counter-increment: cb-list; }
.cb-list--number li::before {
  content: counter(cb-list);
  display: grid;
  place-items: center;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--cb-rule);
  font-family: var(--cb-mono);
  font-size: 12px;
  color: var(--cb-fg);
}

.cb-stat b {
  display: block;
  font-family: var(--cb-display);
  font-variation-settings: var(--cb-axes);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--cb-fg);
}
.cb-stat span { display: block; margin-top: 6px; font-size: 15px; color: var(--cb-fg-3); }

.cb-divider { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--cb-rule); }

.cb-spacer--s { height: 8px; }
.cb-spacer--m { height: 24px; }
.cb-spacer--l { height: 48px; }
.cb-spacer--xl { height: 88px; }

.cb .shade-guide { --bg: transparent; }
.cb .shade-readout span,
.cb .shade-note { color: var(--cb-fg-2); }

.cb-placeholder { color: var(--cb-fg-3); opacity: .7; font-style: italic; }

/* ——— Адаптив по ширине блока ——— */

@container (max-width: 960px) {
  .cb-row--1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 720px) {
  .cb-inner { padding-block: max(24px, calc(var(--cb-pad) * .58)); }
  .cb-row--1-1,
  .cb-row--1-1-1,
  .cb-row--2-1,
  .cb-row--1-2 { grid-template-columns: minmax(0, 1fr); }
  .cb-row--reverse { display: flex; flex-direction: column-reverse; }
  .cb-row--gap-l { --cb-gap: 32px; }
  .cb-actions:not(.cb-el--right) .cb-btn { flex: 1 1 auto; }
}

@container (max-width: 420px) {
  .cb-row--1-1-1-1 { grid-template-columns: minmax(0, 1fr); }
  .cb-col--card,
  .cb-col--tinted,
  .cb-col--dark,
  .cb-col--outline { border-radius: 20px; }
}