/* ==========================================================================
   lead-block.css — блок «Запись на пробное занятие».
   Подключается на главной и на страницах курсов. Не зависит ни от home.css,
   ни от Tailwind: все цвета и размеры объявлены внутри блока, а стили полей
   перекрывают сброс @tailwindcss/forms на внутренних страницах.
   ========================================================================== */

.lead-block,
.lb-section {
  color-scheme: light;           /* page-style.css страниц курсов объявлял dark — чекбоксы были тёмными */
  --lb-ink: #0D0829;
  --lb-ink-2: #2B2547;
  --lb-muted: #5B5675;
  --lb-orange: #F1843B;
  --lb-orange-hover: #F5954F;
  --lb-orange-ink: #B4500F;
  --lb-peach: #F4C29A;
  --lb-peach-100: #FCE9DA;
  --lb-lav: #8FA0D7;
  --lb-lav-200: #D6DDF3;
  --lb-paper: #FFFAF5;
  --lb-line: rgba(13, 8, 41, .16);
  --lb-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Обёртка секции для страниц курсов (на главной её роль играет .section) */
.lb-section {
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--lb-lav-200);
}
.lb-container {
  width: 100%;
  max-width: 80rem;              /* как max-w-7xl на страницах курсов */
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .lb-container { padding-inline: 2rem; }
}

/* ---------- раскладка ---------- */
.lead-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--lb-ink-2);
}

/* ---------- левая колонка ---------- */
.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--lb-ink);
  font: 600 .8125rem/1.2 'Rubik', system-ui, sans-serif;
}
.lb-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lb-orange);
}
.lb-title {
  margin: 0;
  font: 800 clamp(1.95rem, 1.3rem + 2.4vw, 3.3rem)/1.04 'Rubik', system-ui, sans-serif;
  letter-spacing: -.03em;
  color: var(--lb-ink);
  text-wrap: balance;
}
.lb-lead {
  max-width: 34rem;
  margin: 18px 0 0;
  font-size: clamp(1.03rem, .97rem + .3vw, 1.2rem);
  line-height: 1.6;
  color: var(--lb-muted);
}
.lb-subtitle {
  margin: 34px 0 14px;
  font: 700 .8125rem 'Rubik', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lb-ink);
}
.lb-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lb-step;
}
.lb-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--lb-muted);
  counter-increment: lb-step;
}
.lb-steps li::before {
  content: counter(lb-step);
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--lb-ink);
  font: 800 .95rem 'Rubik', system-ui, sans-serif;
  box-shadow: inset 0 0 0 2px var(--lb-ink);
}
.lb-steps b {
  display: block;
  font: 700 1rem/1.3 'Rubik', system-ui, sans-serif;
  color: var(--lb-ink);
}
.lb-bots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1.5px dashed var(--lb-line);
  font-size: .875rem;
  color: var(--lb-muted);
}
.lb-bots p { margin: 0 6px 0 0; }
.lb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  color: var(--lb-ink);
  font: 600 .875rem 'Rubik', system-ui, sans-serif;
  text-decoration: none;
  transition: transform .2s var(--lb-ease), box-shadow .2s;
}
.lb-pill svg { width: 17px; height: 17px; flex: none; }
.lb-pill:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--lb-ink); }

/* ---------- карточка с формой ---------- */
.lb-card {
  position: relative;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 32px;
  background: var(--lb-paper);
  box-shadow: 0 2px 0 rgba(13, 8, 41, .04), 0 34px 60px -32px rgba(13, 8, 41, .5);
}
.lb-roo {
  position: absolute;
  right: 34px;
  top: -84px;
  width: 86px;
  height: auto;
  pointer-events: none;
}
.lb-note {
  position: absolute;
  right: 132px;
  top: -62px;
  margin: 0;
  font: 700 clamp(1.35rem, 1.1rem + .8vw, 1.75rem)/1 'Caveat', 'Segoe Print', cursive;
  color: var(--lb-ink);
  rotate: -7deg;
  white-space: nowrap;
  pointer-events: none;
}
.lb-note svg {
  position: absolute;
  right: -46px;
  top: 6px;
  width: 40px;
  height: 22px;
  color: var(--lb-orange-ink);
  rotate: 18deg;
}
.lb-card-title {
  margin: 0;
  font: 700 1.4rem/1.2 'Rubik', system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--lb-ink);
}
.lb-card-sub { margin: 6px 0 22px; font-size: .9375rem; color: var(--lb-muted); }

.lb-form { display: grid; gap: 14px; margin: 0; }
.lb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lb-field label {
  display: block;
  margin-bottom: 6px;
  font: 600 .8125rem 'Rubik', system-ui, sans-serif;
  color: var(--lb-ink-2);
}
.lb-field input,
.lb-field select {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid rgba(13, 8, 41, .16);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: none;
  font: 400 1rem 'Inter', system-ui, sans-serif;
  color: var(--lb-ink);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.lb-field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230D0829' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 16px;
  background-repeat: no-repeat;
}
.lb-field input::placeholder { color: #9A95AE; opacity: 1; }
.lb-field input:hover,
.lb-field select:hover { border-color: rgba(13, 8, 41, .3); }
.lb-field input:focus,
.lb-field select:focus {
  outline: none;
  border-color: var(--lb-ink);
  box-shadow: 0 0 0 4px rgba(241, 132, 59, .3);
}
.lb-field input:user-invalid { border-color: #C2410C; }

.lb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lb-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--lb-muted);
  cursor: pointer;
}
.lb-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--lb-orange);
}
.lead-block a:not(.lb-pill):not(.lb-btn) { color: var(--lb-orange-ink); text-underline-offset: 3px; }

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--lb-orange);
  color: var(--lb-ink);
  font: 600 1.0625rem/1.2 'Rubik', system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(13, 8, 41, .14), 0 12px 26px -14px rgba(201, 92, 22, .85);
  transition: transform .25s var(--lb-ease), background-color .2s;
}
.lb-btn:hover { background: var(--lb-orange-hover); transform: translateY(-2px); }
.lb-btn:active { transform: scale(.98); }
.lb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lb-paper), 0 0 0 6px var(--lb-ink); }
.lb-btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.lb-btn svg { width: 20px; height: 20px; flex: none; }
.lb-btn-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: -14px;
  border-radius: 50%;
  background: var(--lb-ink);
  color: #fff;
}
.lb-btn-ico svg { width: 17px; height: 17px; }

.lb-error { margin: 0; font-size: .875rem; text-align: center; color: #B42318; }
.lb-legal { margin: 0; font-size: .75rem; text-align: center; color: var(--lb-muted); }

/* ---------- успешная отправка ---------- */
.lb-done { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; text-align: center; }
.lb-done-ico {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--lb-orange);
  color: var(--lb-ink);
}
.lb-done-ico svg { width: 34px; height: 34px; }
.lb-done p { margin: 0 0 10px; max-width: 26rem; font-size: .9375rem; color: var(--lb-muted); }

/* ---------- адаптив ---------- */
@media (max-width: 960px) {
  .lead-block { grid-template-columns: minmax(0, 1fr); gap: 120px; }
  .lb-info { max-width: 640px; }
  .lb-card { max-width: 560px; }
}
@media (max-width: 480px) {
  .lead-block { gap: 104px; }
  .lb-row { grid-template-columns: minmax(0, 1fr); }
  .lb-card { border-radius: 26px; }
  .lb-roo { right: 18px; top: -72px; width: 72px; }
  .lb-note { right: 104px; top: -52px; }
  .lb-btn { font-size: 1rem; padding-inline: 18px; }
}
@media (max-width: 420px) {
  .lb-btn-ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-block *, .lead-block *::before { transition-duration: .001ms !important; }
}

/* ==========================================================================
   Плашка «В каждом курсе есть работа с ИИ» — под описанием курса
   (карточки курсов на главной, hero страниц Python и JavaScript).
   ========================================================================== */
.ai-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 34rem;
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #E9EDF9;
  color: #2B2547;
  font: 400 .875rem/1.5 'Inter', system-ui, sans-serif;
}
.ai-note__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #0D0829;
  color: #F4C29A;
}
.ai-note__ico svg { width: 17px; height: 17px; }

/* ==========================================================================
   Способ связи — сегментный переключатель с «ползунком».
   Используется во всех формах заявки (модалки и блок записи на главной и
   страницах курсов). Положение ползунка задаёт Alpine через --i / --x / --y.
   ========================================================================== */
.cm {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color-scheme: light;
}
.cm__legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font: 600 .8125rem 'Rubik', system-ui, sans-serif;
  color: #2B2547;
}
.cm__wrap { container-type: inline-size; }
.cm__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px;
  border-radius: 16px;
  background: #F3E7DC;
  box-shadow: inset 0 0 0 1.5px rgba(13, 8, 41, .08);
}
.cm__thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc((100% - 8px) / 4);
  height: calc(100% - 8px);
  border-radius: 12px;
  background: #0D0829;
  box-shadow: 0 6px 14px -6px rgba(13, 8, 41, .55);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.cm input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.cm label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  margin: 0;
  padding: 8px 2px;
  border-radius: 12px;
  font: 600 .75rem/1.1 'Rubik', system-ui, sans-serif;
  color: #2B2547;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease;
}
.cm label svg { width: 19px; height: 19px; flex: none; }
.cm label span { white-space: nowrap; }
.cm label:hover { color: #0D0829; }
.cm input:checked + label { color: #fff; }
.cm input:focus-visible + label { box-shadow: 0 0 0 3px #F1843B; }
.cm__hint {
  margin: 8px 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: #5B5675;
}

/* Узкая форма (телефоны ≤ 340px): сетка 2×2, ползунок ходит по двум осям */
@container (max-width: 270px) {
  .cm__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm__thumb {
    width: calc((100% - 8px) / 2);
    height: calc((100% - 8px) / 2);
    transform: translate(calc(var(--x, 0) * 100%), calc(var(--y, 0) * 100%));
  }
  .cm label { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm__thumb, .cm label { transition: none; }
}