/* =========================================================
   Главная страница: первый экран, плитка тем, призыв к подбору.
   ========================================================= */

.hero {
	padding: clamp(48px, 4vw, 88px) 0 clamp(32px, 3vw, 56px);
	background:
		radial-gradient(120% 140% at 85% 0%, rgba(255, 194, 51, .18) 0%, rgba(255, 194, 51, 0) 55%),
		var(--bg);
	border-bottom: 1px solid var(--line-soft);
}

.hero__inner {
	max-width: 940px;
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	margin: 0 0 20px;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--accent);
	color: var(--ink);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hero__title {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
	letter-spacing: -.03em;
}

.hero__lead {
	max-width: 58ch;
	margin: 24px 0 0;
	color: var(--ink-50);
	font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 36px;
}

.hero__search {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 560px;
}

.hero__actions .btn {
	min-height: 48px;
	padding-inline: 24px;
}

.section--first {
	margin-top: var(--gap-lg);
}

/* --- Крупная первая карточка --------------------------- */

@media (min-width: 861px) {
	.grid--featured > *:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	.grid--featured > *:first-child .card__title {
		font-size: var(--step-3);
	}

	.grid--featured > *:first-child .card__body {
		padding: 24px;
	}
}

/* --- Плитка тем ---------------------------------------- */

.topics {
	gap: 12px;
}

.topic {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 132px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.topic:hover {
	border-color: var(--ink);
	background: var(--bg-tint);
	color: var(--ink);
	transform: translateY(-2px);
}

.topic__name {
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: -.015em;
}

.topic__count {
	color: var(--ink-30);
	font-size: .82rem;
}

/* --- Призыв к подбору ---------------------------------- */

.cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
	padding: clamp(28px, 3vw, 48px);
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: #fff;
}

.cta__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

.cta__lead {
	max-width: 52ch;
	margin: 12px 0 0;
	color: rgba(255, 255, 255, .72);
}

.cta .btn {
	min-height: 52px;
	padding-inline: 28px;
	font-size: 1rem;
}

@media (max-width: 560px) {
	.topics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topic {
		min-height: 104px;
	}

	.cta .btn {
		width: 100%;
	}
}