/* =====================================================================
 * REZUMKA V2 — ОБРАЗЕЦ ПРОФЕССИИ
 *
 * Слева содержимое, справа закреплённая колонка. Главное на странице —
 * кнопка в конструктор: человек уже нашёл свою профессию и готов
 * начать, и путь от «прочитал» до «заполняю» должен быть в один шаг.
 * =================================================================== */

/* ------------------------------------------------------------ крошки */




/* ------------------------------------------------------------- сетка */
.v2-prof { padding-block: var(--v2-s6) var(--v2-s10); }
.v2-prof__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: var(--v2-s7);
	align-items: start;
}

/* -------------------------------------------------------------- шапка */
.v2-prof__head { margin-bottom: var(--v2-s7); }
.v2-prof__head h1 { margin-top: var(--v2-s4); }
.v2-prof__head .v2-lead { margin-top: var(--v2-s3); max-width: 44em; }

.v2-prof__alt {
	margin-top: var(--v2-s4);
	color: var(--v2-text-2);
	font-size: .93rem;
}
.v2-prof__alt span { color: var(--v2-text-3); }

.v2-prof__cta { display: flex; flex-wrap: wrap; gap: var(--v2-s3); margin-top: var(--v2-s5); }

/* ------------------------------------------------------------ вкладки */
.v2-tabs__bar {
	display: flex;
	gap: var(--v2-s2);
	overflow-x: auto;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--v2-line);
	scrollbar-width: none;
}
.v2-tabs__bar::-webkit-scrollbar { display: none; }

.v2-tabs__btn {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--v2-text-2);
	font: inherit;
	font-weight: 600;
	font-size: .95rem;
	padding: 12px 14px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .16s ease, border-color .16s ease;
}
.v2-tabs__btn:hover { color: var(--v2-brand); }
.v2-tabs__btn[aria-selected="true"] { color: var(--v2-brand); border-bottom-color: var(--v2-brand); }

.v2-tabs__pane { padding-top: var(--v2-s6); }
.v2-tabs__pane[hidden] { display: none; }
.v2-tabs__pane h2 { font-size: 1.35rem; margin-bottom: var(--v2-s4); }

/* --------------------------------------------------- списки полей */
.v2-prof__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-s3); }
.v2-prof__list li {
	position: relative;
	padding-left: 30px;
	line-height: 1.55;
}
.v2-prof__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--v2-brand);
}
/*
 * У ошибок маркер другой: это не перечень возможностей, а список
 * того, чего делать не надо. Одинаковые точки стирали бы разницу.
 */
.v2-prof__list--miss li::before {
	width: 12px;
	height: 12px;
	top: 7px;
	border-radius: 3px;
	background: transparent;
	border: 2px solid var(--v2-warn);
	transform: rotate(45deg);
}
.v2-prof__list--reqs li::before { background: var(--v2-ok); }

.v2-prof__note {
	margin-top: var(--v2-s4);
	padding: var(--v2-s3) var(--v2-s4);
	border-left: 3px solid var(--v2-brand-line);
	background: var(--v2-brand-soft);
	border-radius: 0 var(--v2-r-ctl) var(--v2-r-ctl) 0;
	color: var(--v2-text-2);
	font-size: .92rem;
}
.v2-tabs__pane .v2-btn { margin-top: var(--v2-s4); }

/* ----------------------------------------------------- пример резюме */
.v2-sample { margin-top: var(--v2-s9); }
.v2-sample h2 { font-size: 1.5rem; }
.v2-sample > .v2-muted { margin-top: var(--v2-s2); }

/*
 * Лист резюме. Белый на сером — как настоящий документ на столе,
 * а не как ещё одна карточка страницы.
 */
.v2-sheet {
	margin-top: var(--v2-s5);
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	padding: var(--v2-s6);
	box-shadow: var(--v2-sh-card);
}
html[data-theme="dark"] .v2-sheet { background: #1B1F2B; }

.v2-sheet__head { padding-bottom: var(--v2-s4); border-bottom: 2px solid var(--v2-line); }
.v2-sheet__head b { display: block; font-size: 1.25rem; }
.v2-sheet__head > span { display: block; color: var(--v2-brand); font-weight: 600; margin-top: 2px; }
.v2-sheet__meta { color: var(--v2-text-3) !important; font-weight: 400 !important; font-size: .88rem; margin-top: 6px !important; }

.v2-sheet__block { margin-top: var(--v2-s5); }
.v2-sheet__block h3 {
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v2-text-3);
	margin-bottom: var(--v2-s3);
}
.v2-sheet__job { display: block; margin-bottom: var(--v2-s2); }
.v2-sheet__block ul { margin: 0; padding-left: 20px; color: var(--v2-text-2); display: grid; gap: 5px; }
.v2-sheet__block p { color: var(--v2-text-2); }

.v2-sheet__tags { display: flex; flex-wrap: wrap; gap: var(--v2-s2); }
.v2-sheet__tags span {
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	padding: 5px 12px;
	font-size: .88rem;
	color: var(--v2-text-2);
}

.v2-sample__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v2-s4);
	margin-top: var(--v2-s5);
}
.v2-sample__cta .v2-muted { font-size: .9rem; }

/* --------------------------------------------------- похожие */
/* ---------------------------------------------------- что почитать
 *
 * Список ссылок, а не карточки. Карточки в этом месте страницы
 * спорили бы с «Похожими профессиями» ниже: два ряда одинаковых
 * плиток подряд читаются как один длинный, и человек пролистывает оба.
 */
.v2-read { margin-top: var(--v2-s8); }
.v2-read h2 { font-size: 1.2rem; }
.v2-read ul {
	margin-top: var(--v2-s4);
	display: grid;
	gap: 2px;
	padding: 0;
	list-style: none;
}
.v2-read li { border-bottom: 1px solid var(--v2-line); }
.v2-read li:first-child { border-top: 1px solid var(--v2-line); }
.v2-read a {
	display: block;
	padding: 13px 4px;
	color: var(--v2-text);
	text-decoration: none;
	transition: color .16s ease, padding-left .16s ease;
}
.v2-read a:hover {
	color: var(--v2-brand);
	padding-left: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.v2-read a:hover { padding-left: 4px; }
}

.v2-near { margin-top: var(--v2-s9); }
.v2-near h2 { font-size: 1.35rem; margin-bottom: var(--v2-s4); }

/* --------------------------------------------- боковая колонка */
.v2-prof__side { position: sticky; top: 96px; display: grid; gap: var(--v2-s4); }

.v2-side__cta h3 { font-size: 1.1rem; }
.v2-side__cta p { color: var(--v2-text-2); font-size: .93rem; margin-top: var(--v2-s2); }
.v2-side__cta .v2-btn { width: 100%; margin-top: var(--v2-s4); }
.v2-side__note { display: block; margin-top: var(--v2-s3); font-size: .82rem; color: var(--v2-text-3); text-align: center; }

.v2-side__pay h3 { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3); }
.v2-side__nums { display: block; font-size: 1.4rem; margin-top: var(--v2-s2); font-variant-numeric: tabular-nums; }
.v2-side__cap { display: block; color: var(--v2-text-2); font-size: .86rem; margin-top: 2px; }
.v2-side__src { margin-top: var(--v2-s3); font-size: .8rem; color: var(--v2-text-3); line-height: 1.45; }

.v2-side__links h3 { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3); margin-bottom: var(--v2-s3); }
.v2-side__links a {
	display: block;
	padding: 9px 0;
	color: var(--v2-text);
	text-decoration: none;
	font-size: .94rem;
	border-bottom: 1px solid var(--v2-line);
}
.v2-side__links a:last-child { border-bottom: 0; }
.v2-side__links a:hover { color: var(--v2-brand); }

/* ------------------------------------------------- текст статьи */
/*
 * Содержимое образца написано теми же блоками, что и статьи:
 * врезки, таблицы, «было → стало». Их оформление придёт вместе
 * с картой блоков — здесь только базовая типографика, чтобы
 * текст читался уже сейчас.
 */
.v2-prose { line-height: 1.7; }
.v2-prose h2 { font-size: 1.3rem; margin: var(--v2-s7) 0 var(--v2-s3); }
.v2-prose h3 { margin: var(--v2-s5) 0 var(--v2-s2); }
.v2-prose p { margin-bottom: var(--v2-s4); color: var(--v2-text-2); }
.v2-prose ul, .v2-prose ol { margin: 0 0 var(--v2-s4); padding-left: 22px; color: var(--v2-text-2); }
.v2-prose li { margin-bottom: 6px; }
.v2-prose blockquote {
	margin: var(--v2-s5) 0;
	padding: var(--v2-s5);
	border: 1px solid var(--v2-line);
	border-left: 3px solid var(--v2-brand);
	border-radius: 0 var(--v2-r-card) var(--v2-r-card) 0;
	background: var(--v2-surface);
}
.v2-prose blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- отзывчивость */
@media (max-width: 1000px) {
	.v2-prof__grid { grid-template-columns: 1fr; }
	.v2-prof__side { position: static; }
}
@media (max-width: 620px) {
	.v2-sheet { padding: var(--v2-s4); }
	.v2-prof__cta .v2-btn { width: 100%; }
}

/* Обёртки без своих правил — объявлены явно для проверки */
.v2-prof__main { min-width: 0; }
.v2-tabs { display: block; }