/* =====================================================================
 * REZUMKA V2 — КАТАЛОГ ОБРАЗЦОВ
 * =================================================================== */

.v2-cat-top {
	padding-block: var(--v2-s6) var(--v2-s7);
	background:
		radial-gradient(760px 320px at 78% 0%, var(--v2-brand-soft) 0%, transparent 65%),
		var(--v2-bg);
}
.v2-cat-top__lead { max-width: 46em; margin-top: var(--v2-s3); }

/* ---------------------------------------------------------- поиск */







/* -------------------------------------------------------- фильтры */
.v2-cat-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v2-s2);
	margin-top: var(--v2-s5);
}
.v2-chipbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	background: var(--v2-surface);
	color: var(--v2-text);
	font: inherit;
	font-size: .9rem;
	padding: 8px 15px;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.v2-chipbtn span {
	color: var(--v2-text-3);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}
.v2-chipbtn:hover { border-color: var(--v2-brand-line); background: var(--v2-brand-soft); }
.v2-chipbtn.is-on {
	background: var(--v2-brand);
	border-color: var(--v2-brand);
	color: #fff;
}
.v2-chipbtn.is-on span { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------- сетка */
.v2-cat { padding-block: var(--v2-s6) var(--v2-s9); }
.v2-cat-count { color: var(--v2-text-2); font-size: .92rem; margin-bottom: var(--v2-s4); }

.v2-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--v2-s3);
}
.v2-cat-card {
	display: flex;
	align-items: center;
	gap: var(--v2-s3);
	padding: var(--v2-s3) var(--v2-s4);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
	text-decoration: none;
	color: var(--v2-text);
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.v2-cat-card:hover {
	border-color: var(--v2-brand-line);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(99, 91, 255, .12);
}
.v2-cat-card[hidden] { display: none; }

.v2-cat-card__ico {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: var(--v2-r-ctl);
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
}
.v2-cat-card__ico svg { width: 19px; height: 19px; }
.v2-cat-card__body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.v2-cat-card__body b { font-weight: 600; font-size: .96rem; line-height: 1.3; }
.v2-cat-card__sf { color: var(--v2-text-3); font-size: .8rem; }
.v2-cat-card__go { color: var(--v2-text-3); flex: 0 0 auto; transition: transform .16s ease, color .16s ease; }
.v2-cat-card:hover .v2-cat-card__go { color: var(--v2-brand); transform: translateX(3px); }

/* --------------------------------------------------- пустой ответ */
.v2-cat-none {
	max-width: 560px;
	margin: var(--v2-s7) auto;
	text-align: center;
	padding: var(--v2-s7) var(--v2-s5);
	border: 1px dashed var(--v2-line);
	border-radius: var(--v2-r-lg);
	background: var(--v2-surface);
}
.v2-cat-none[hidden] { display: none; }
.v2-cat-none p { margin: var(--v2-s3) 0 var(--v2-s5); }

@media (max-width: 620px) {
	.v2-cat-grid { grid-template-columns: 1fr; }
	
}

/* =====================================================================
 * ЖИВЫЕ ПОДСКАЗКИ В ПОИСКЕ
 * =================================================================== */







/* Совпавшая часть слова — фирменным, чтобы видеть, почему нашлось */



/* Описание отрасли под подзаголовком */
.v2-cat-top__descr { margin-top: var(--v2-s3); max-width: 46em; }

/* -------------------------------------------------- вопросы по отрасли
 *
 * Сама гармошка живёт в общем файле — она же стоит на главной.
 * Здесь только рамка блока: на отрасли он идёт узкой колонкой,
 * а на главной в две.
 */
.v2-cat-faq { margin-top: var(--v2-s6); max-width: 46em; }
.v2-cat-faq h2 { font-size: 1.2rem; }
.v2-cat-faq .v2-faq { margin-top: var(--v2-s4); grid-template-columns: 1fr; }

/* ------------------------------------------------- вводный блок отрасли
 *
 * Стоит между заголовком и списком профессий. Держим узким: это текст
 * для чтения, а не подпись под заголовком — на всю ширину каталога
 * строка была бы длиной в двести знаков.
 */
.v2-cat-intro {
	margin-top: var(--v2-s5);
	max-width: 46em;
	padding: var(--v2-s5);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
}
.v2-cat-intro p { color: var(--v2-text-2); line-height: 1.6; }
.v2-cat-intro h2 {
	margin-top: var(--v2-s4);
	font-size: 1rem;
	color: var(--v2-text);
}
.v2-cat-intro ul {
	margin-top: var(--v2-s3);
	display: grid;
	gap: 6px;
	padding-left: 20px;
	list-style: disc;
	color: var(--v2-text-2);
	font-size: .93rem;
}

/* Ссылка-плитка отрасли выглядит как кнопка, но ведёт на страницу */
a.v2-chipbtn { text-decoration: none; }
.v2 a.v2-chipbtn { color: var(--v2-text); }
.v2 a.v2-chipbtn.is-on { color: #fff; }