.vacancies-page{padding-bottom:48px;}
/* H1 «Работа у нас» — global template renders a plain upright <h1>; mockup wants
   bold italic (matches section headings). This CSS loads only on the vacancy page. */
.wrapper__content > h1,
.wrapper > h1{
	font-style:italic;
	font-weight:800;
}
.vacancies-page__intro{
	/* mockup: intro spans full content width (same as card row), not a half column */
	font-size:16px;
	line-height:1.6;
	color:#2a2a2a;
	margin:24px 0 48px;
}
.vacancies-page__intro p{margin:0 0 12px;}
.vacancies-page__lead{font-size:18px;line-height:1.7;max-width:880px;margin:0 0 32px;}
.vacancies-page__offer-title{
	font-weight:800;font-style:italic;font-size:24px;color:#121218;margin:0 0 18px;
}
/* the three values (Надежность / Честность / Выгода) are the signature of the intro —
   cards with a green accent, not a flat bullet dump. */
.vacancies-values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 32px;}
.vacancies-value{
	box-sizing:border-box;
	padding:22px 24px;
	background:#f4f7f3;
	border-left:4px solid var(--season-color);
	border-radius:10px;
}
.vacancies-value__key{
	display:block;font-weight:800;font-size:19px;color:var(--season-color);margin:0 0 8px;
}
.vacancies-value__desc{display:block;font-size:15px;line-height:1.55;color:#3a3a3a;}
.vacancies-page__join{font-size:17px;margin:0;}
.vacancies-page__join strong{color:var(--season-color);font-weight:800;}
.vacancies__heading{
	font-weight:800;
	font-style:italic;
	font-size:38px;
	margin:48px 0 32px;
}
.vacancies-cta{
	text-align:center;
	max-width:760px;
	margin:72px auto;
}
.vacancies-cta__title{
	font-weight:800;
	font-style:italic;
	font-size:34px;
	margin:0 0 20px;
}
.vacancies-cta__text{
	font-size:16px;
	line-height:1.6;
	color:#2a2a2a;
	margin:0 0 28px;
}
.vacancies-cta__btn{
	display:inline-block !important; /* beat .vacancy-card__btn display:block */
	width:auto;
	min-width:220px;
	max-width:300px;
	margin:0 auto;
	padding-left:48px;
	padding-right:48px;
}
/* Responsive ladder — prod breakpoints (1000/700/480). Headings scale down,
   CTA block tightens its vertical rhythm, CTA button goes full-width on phones
   (content-box button + 48px side padding overflows a 320px screen otherwise). */
@media(max-width:1000px){
	.vacancies__heading{font-size:30px;margin:40px 0 28px;}
	.vacancies-cta__title{font-size:28px;}
	.vacancies-cta{margin:56px auto;}
	.vacancies-values{gap:12px;}
	.vacancies-value{padding:18px 18px;}
	.vacancies-page__lead{font-size:17px;}
}
@media(max-width:700px){
	.vacancies__heading,
	.vacancies-cta__title{font-size:26px;}
	/* tighter mobile rhythm — Figma mockup has less air between sections */
	.vacancies__heading{margin:32px 0 20px;}
	.vacancies-page__intro{margin:16px 0 28px;}
	.vacancies-cta{margin:36px auto;}
	/* stack the three value cards on phones */
	.vacancies-values{grid-template-columns:1fr;gap:12px;margin:0 0 24px;}
	.vacancies-page__offer-title{font-size:20px;}
	.vacancies-page__lead{font-size:16px;margin:0 0 24px;}
}
@media(max-width:480px){
	.vacancies__heading,
	.vacancies-cta__title{font-size:22px;}
	.vacancies-cta__btn{
		display:block !important;
		width:100%;
		min-width:0;
		max-width:none;
		box-sizing:border-box;
		padding-left:24px;
		padding-right:24px;
	}
}