/* =========================================================================
   Страницы подготовки: профессионалы / конкурсы и фестивали / ВУЗ — handoff Claude Design (design-handoffs/prep-pro, prep-contest, prep-vuz).
   Основа — система «Уроков вокала» (pages/adult.css, классы vb-ad-*), здесь — только новые элементы (vb-pp-*).
   Разметка: template-parts/prep/page.php. Брейкпоинты: <760 · 760–899 · ≥900 (5/7, sticky, наезд панели).
   ========================================================================= */

:root {
	--pp-line: #E2E0D9;
	--pp-line-cream: #D9D4C8;
}

/* 00 · Первый экран: фото с фиксированной пропорцией (кадрирование квадратного исходника) */
.vb-pp-hero__media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.vb-pp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.vb-pp-hero__h1 { margin: 0; max-width: 1200px; font-family: var(--font-display); font-weight: 200; font-size: clamp(38px, 6.4vw, 112px); line-height: .96; letter-spacing: .02em; text-transform: uppercase; color: #fff; text-wrap: balance; }
/* «ПРОФЕССИОНАЛОВ» не помещается в 38px на 360–390 px (в прототипе выходит за поле) — уменьшаем, без переноса слова */
@media (max-width: 759.98px) { .vb-pp-hero__h1 { font-size: min(38px, calc(10.4vw - 4px)); } }
.vb-pp-hero__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); align-items: start; padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid rgba(245, 244, 239, .14); }
.vb-pp-hero__cta { justify-self: start; }
.vb-pp-hero__lead { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; color: var(--vb-cream-ink); text-wrap: pretty; }
@media (max-width: 759.98px) { .vb-pp-hero__cta { width: 100%; } }
@media (min-width: 760px) { .vb-pp-hero__media { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) {
	.vb-pp-hero__media { aspect-ratio: 21 / 9; }
	.vb-pp-hero__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Колонки 5/7 */
.vb-pp-left { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 36px); min-width: 0; }
.vb-pp-rule { display: block; width: 66px; height: 4px; background: var(--vb-gold); }
.vb-pp-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vb-pp-body--dark { gap: 22px; }
.vb-pp-lead { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.45; color: var(--vb-ink); text-wrap: pretty; }
.vb-pp-lead--light { color: #fff; }
.vb-pp-group { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--pp-line); }
.vb-pp-group:has(.vb-pp-pills) { gap: 18px; }
.vb-pp-btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
.vb-pp-btn--gold { min-height: 58px; padding: 0 28px; }
.vb-pp-photo { position: relative; overflow: hidden; border-radius: 16px; background: var(--pp-line); box-shadow: 0 10px 28px rgba(26, 26, 26, .1); }
.vb-pp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Номер 01… золотом */
.vb-pp-num { font-family: var(--font-brand); font-weight: 700; font-size: 13px; color: var(--vb-gold-deep); }

/* Плитки направлений / ВУЗов */
.vb-pp-tiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.vb-pp-tiles li { line-height: normal; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; background: var(--vb-cream-paper); }
.vb-pp-tiles__t { font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.2; letter-spacing: .02em; color: var(--vb-ink); }
.vb-pp-tiles--up .vb-pp-tiles__t { letter-spacing: .04em; text-transform: uppercase; }

/* Пилюли */
.vb-pp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-pp-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--pp-line-cream); font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--vb-ink-2); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
a.vb-pp-pill:hover, a.vb-pp-pill:focus-visible { background: var(--vb-ink); border-color: var(--vb-ink); color: var(--vb-gold-soft); }

/* Карточки «Конкурсы / Фестивали / В школе» */
.vb-pp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; padding-top: 6px; }
.vb-pp-card { line-height: normal; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--vb-cream-paper); }
.vb-pp-card--dark { background: var(--vb-panel-ink); color: var(--vb-cream-ink); }
.vb-pp-card--dark .vb-pp-pill { border-color: rgba(245, 244, 239, .3); color: var(--vb-cream-ink); }
.vb-pp-card__link { margin-top: auto; font-size: 15px; min-height: 40px; }

/* Карточки-ссылки «Уроки вокала для взрослых / детей» */
.vb-pp-lcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.vb-pp-lcard { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2vw, 28px); border-radius: 16px; background: #fff; border: 1px solid var(--pp-line); color: var(--vb-ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.vb-pp-lcard:hover, .vb-pp-lcard:focus-visible { border-color: var(--vb-ink); transform: translateY(-3px); color: var(--vb-ink); }
.vb-pp-lcard__t { font-family: var(--font-brand); font-weight: 700; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.15; }
.vb-pp-lcard__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--vb-ink); }

/* Нумерованный список «Что дает подготовка» */
.vb-pp-nums { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.vb-pp-nums li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--pp-line); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: var(--vb-ink); }

/* Классы у метро */
.vb-pp-metro { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.vb-pp-metro li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--pp-line-cream); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: var(--vb-ink); }
.vb-pp-metro__m { font-family: var(--font-brand); font-weight: 900; font-size: 18px; }
.vb-pp-metro__m--arbatskaya { color: var(--metro-arbatskaya); }
.vb-pp-metro__m--pushkinskaya { color: var(--metro-pushkinskaya); }

/* Тёмная карточка (Студия / Мечта) — секция без верхнего отступа */
.vb-pp-sec--flush { padding-top: 0; }
.vb-pp-darkcard { position: relative; overflow: hidden; background: var(--vb-panel-ink); color: var(--vb-cream-ink); border-radius: 16px; padding: clamp(28px, 4vw, 64px); align-items: center; }
.vb-pp-h2--light { color: #fff; }
.vb-pp-circ { position: absolute; border-radius: 999px; pointer-events: none; }
.vb-pp-circ--a { right: -120px; bottom: -160px; width: 380px; height: 380px; border: 1px solid rgba(208, 182, 57, .22); }
.vb-pp-circ--b { right: -40px; bottom: -80px; width: 220px; height: 220px; border: 1px solid rgba(208, 182, 57, .16); }

/* Финал: цитата + #zayavka */
.vb-pp-final__in { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.vb-pp-quote { margin: 0; max-width: 1100px; font-family: var(--font-display); font-weight: 200; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.1; letter-spacing: .01em; color: var(--vb-ink); text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
	.vb-pp-lcard, .vb-pp-pill { transition: none; }
	.vb-pp-lcard:hover { transform: none; }
}