/* cta — запись и призыв. Общее: .signup-wrap (обёртка формы для HTMX), .leadform. */

/* form_split */
.cta-formwrap {
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: calc(var(--radius) + 6px); padding: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 900px) {
  .cta-formwrap { grid-template-columns: 1fr; padding: 28px; }
}

/* form_center — карточка по центру; фон секции: фото с затемнением или градиент */
.v-form_center { overflow: hidden; }
.cta-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.cta-bggrad {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--s-accent) 22%, var(--s-bg)), var(--s-bg) 65%);
}
.cta-centerwrap { position: relative; }
/* карточка — «остров» в базовых цветах темы: читается и на фото, и на любой схеме */
.cta-card {
  max-width: 540px; margin: 0 auto; padding: 40px; border-radius: calc(var(--radius) + 6px);
  background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  --s-text: var(--c-text); --s-muted: var(--c-muted); --s-line: var(--c-line); --s-surface: var(--c-surface);
  --s-accent: var(--c-accent); --s-btn-bg: var(--c-accent); --s-btn-text: var(--c-on-accent);
}
.cta-card .sub { margin-bottom: 22px; }
.cta-card h2 { margin-bottom: 14px; }
@media (max-width: 560px) { .cta-card { padding: 26px 20px; } }

/* banner — крупный призыв */
.cta-banner { text-align: center; max-width: 820px; margin: 0 auto; }
.cta-banner h2 { font-size: clamp(30px, 5vw, 52px); line-height: 1.15; margin-bottom: 16px; overflow-wrap: anywhere; }
.cta-banner .sub { margin-left: auto; margin-right: auto; font-size: 17px; margin-bottom: 28px; }
.cta-banner .cta-row, .cta-banner .msgr-row { justify-content: center; }
.cta-banner .cta-row .btn { padding: 17px 44px; font-size: 17px; }

/* cabinet — приглашение в кабинет */
.cta-cabinet {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: calc(var(--radius) + 6px);
  padding: 48px; overflow: hidden;
}
.cta-cab-text { min-width: 0; }
.cta-cab-text .sub { margin-bottom: 26px; }
.cta-cab-visual { display: flex; justify-content: center; min-width: 0; }
.cta-cab-visual > img { border-radius: var(--radius); max-height: 420px; width: auto; object-fit: cover; border: 1px solid var(--s-line); }
/* «телефон» из div-ов: абонемент и карточки занятий */
.cta-phone {
  width: 220px; max-width: 100%; border: 6px solid var(--s-text); border-radius: 30px; background: var(--s-bg);
  padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}
.cta-phone-notch { align-self: center; width: 50px; height: 5px; border-radius: 3px; background: var(--s-line); margin-bottom: 4px; }
.cta-phone-pass { background: var(--s-btn-bg); border-radius: 14px; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.cta-phone-pass i { display: block; height: 8px; width: 55%; border-radius: 4px; background: var(--s-btn-text); opacity: .85; }
.cta-phone-pass b { display: block; height: 6px; width: 80%; border-radius: 3px; background: var(--s-btn-text); opacity: .4; }
.cta-phone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 10px; padding: 11px 10px; }
.cta-phone-row span { display: block; height: 7px; width: 58%; border-radius: 4px; background: var(--s-muted); opacity: .6; }
.cta-phone-row i { display: block; width: 22px; height: 12px; border-radius: 6px; background: var(--s-accent); }
@media (max-width: 800px) {
  .cta-cabinet { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
}