/* =====================================================================
   Блоки страниц в широкой раскладке (handoff «Подарочные сертификаты»).
   Фоны секций — от края до края, контент — до --page-max (1600px).
   Переиспользуйте их на всех новых страницах из Claude Design.

   <section class="vb-pg vb-pg--dark" id="studio">      ← фон и поля секции
     <div class="vb-pg__inner">                          ← ширина 1600 + вертикальный ритм
       <div class="vb-pg__head">                         ← заголовок + золотая линейка
         <h2 class="vb-pg-h2">…</h2><hr class="vb-rule">
       </div>
       <div class="vb-split">…</div>                     ← 2 колонки, на телефоне 1
   ===================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: var(--scroll-offset); }

.vb-pg { padding: var(--page-section-y) var(--page-pad); }
.vb-pg__inner { max-width: var(--page-max); margin-inline: auto; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.vb-pg__head { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }

/* Фоны секций */
.vb-pg--white  { background: var(--vb-white); color: var(--vb-ink); }
.vb-pg--cream  { background: var(--vb-cream-paper); color: var(--vb-ink); }
.vb-pg--app    { background: var(--vb-app-bg); }
.vb-pg--dark   { background: var(--vb-panel-ink); color: #fff; }
.vb-pg--purple { background: var(--vb-purple-grad); color: #fff; }

/* Две колонки, схлопываются в одну, когда колонка уже 460px */
.vb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(28px, 4vw, 72px); align-items: start; }
.vb-split--center { align-items: center; }
.vb-split--end { align-items: end; }
.vb-split--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.vb-split > * { min-width: 0; }
.vb-stack-18 { display: flex; flex-direction: column; gap: 18px; }

/* Типографика страниц. color: inherit — чтобы заголовки брали цвет секции
   (theme.json красит h1–h6 в --vb-ink, на тёмных фонах это неверно). */
.vb-pg-h1, .vb-pg-h2, .vb-pg-h3 { color: inherit; }
.vb-pg-h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 6.2vw, 92px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.vb-pg-h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.06; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.vb-pg-h2--sm { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; }
.vb-pg-h3 { font-family: var(--font-brand); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.vb-pg-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; text-wrap: pretty; }
.vb-pg-text { font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.vb-pg-kicker { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--vb-gold-deep); }
.vb-pg--dark .vb-pg-kicker, .vb-pg--purple .vb-pg-kicker { color: var(--vb-gold); }

/* Ссылки в тексте (не кнопки — только <a> без класса) */
:where(.vb-pg) a:not([class]) { color: var(--vb-purple); text-decoration: underline; text-decoration-color: rgba(93,53,128,.35); text-underline-offset: 3px; }
:where(.vb-pg) a:not([class]):hover { color: var(--vb-red); text-decoration-color: currentColor; }
:where(.vb-pg--dark, .vb-pg--purple, .vb-on-dark) a:not([class]) { color: var(--vb-gold-soft); text-decoration-color: rgba(231,217,138,.5); }
:where(.vb-pg--dark, .vb-pg--purple, .vb-on-dark) a:not([class]):hover { color: #fff; }

/* Строка с золотой точкой */
.vb-dot-line { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.6; }
.vb-dot-line::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--vb-gold); flex: none; transform: translateY(-1px); }

/* Медиа в скруглённой рамке */
.vb-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.vb-frame > img, .vb-frame > video, .vb-frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vb-frame--photo { box-shadow: 0 16px 40px rgba(26,26,26,.18); }
.vb-frame--on-dark { box-shadow: 0 26px 60px rgba(0,0,0,.4); }

/* Нумерованная карточка-этап */
.vb-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.vb-step { display: flex; align-items: flex-start; gap: 14px; background: var(--vb-paper); border: 1px solid var(--vb-line); border-radius: var(--r-lg); padding: 18px 20px; }
.vb-step__n { flex: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--vb-gold); color: var(--vb-ink); font-family: var(--font-brand); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.vb-step__t { font-size: 16px; line-height: 1.5; color: var(--vb-ink-2); padding-top: 5px; }

/* Кнопки-модификаторы из макета */
.vb-btn.vb-btn--56 { min-height: 56px; padding-block: 0; }
.vb-btn.vb-btn--dark { background: var(--vb-ink); color: #fff; min-height: 48px; padding: 0 22px; font-size: 15px; }
.vb-btn.vb-btn--dark:hover { color: #fff; }
.vb-btn.vb-btn--telegram { background: var(--vb-telegram); color: #fff; min-height: 48px; padding: 0 22px; font-size: 15px; }
.vb-btn.vb-btn--telegram:hover { color: #fff; }

@media (max-width: 759.98px) {
  .vb-btn.vb-btn--block-m { display: flex; width: 100%; }
}

/* Чип-ссылка со стрелкой («Индивидуальное обучение →», «Звукозапись →») — handoff «Цены» */
.vb-chip-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.vb-chip-link > span { color: var(--vb-gold); }
.vb-chip-link--dark {
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--vb-ink); color: var(--vb-cream-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.vb-chip-link--gold-line {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid rgba(208,182,57,.5);
  color: var(--vb-cream-ink); font-weight: 700; font-size: 15px;
}
.vb-chip-link--dark:hover, .vb-chip-link--gold-line:hover { background: var(--vb-gold); border-color: var(--vb-gold); color: var(--vb-ink); }
.vb-chip-link:hover > span { color: var(--vb-ink); }
@media (max-width: 759.98px) { .vb-chip-link { white-space: normal; } }

/* Кольца: фон тонкой концентрической дуги у правого верхнего угла карточки
   (родителю нужен position: relative; overflow: hidden). handoff «Цены»/«Команда» */
.vb-ring { position: absolute; border-radius: var(--r-pill); border: 1px solid var(--vb-gold-ring); pointer-events: none; }
.vb-ring--lg { right: -90px; top: -90px; width: 300px; height: 300px; }
.vb-ring--sm { right: -40px; top: -40px; width: 200px; height: 200px; }

/* Бейджи-пилюли: золотой («Бесплатно для студентов») и с тонкой обводкой (на тёмном) */
.vb-badge-gold, .vb-badge-line { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 16px; border-radius: var(--r-pill); white-space: nowrap; }
.vb-badge-gold { background: var(--vb-gold); color: var(--vb-ink); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.vb-badge-gold--sm { min-height: 0; padding: 6px 12px; font-size: 10.5px; letter-spacing: .14em; }
.vb-badge-line { border: 1px solid rgba(208,182,57,.5); font-weight: 700; font-size: 14px; color: var(--vb-cream-ink); }

/* Заглушка фото (инициалы) — пока нет снимка. Цвет — коралловый backdrop. */
.vb-photo-stub {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: radial-gradient(120% 90% at 50% 20%, #D0503F 0%, var(--vb-red-bright) 55%, var(--vb-red) 100%);
  color: rgba(255,255,255,.92); font-family: var(--font-brand); font-weight: 700; letter-spacing: .04em;
}