@import url('../vars.css');

.nso-page {
	margin-bottom: var(--mb);
	color: var(--text);
	font-family: var(--desktop-body-font), sans-serif;
	font-size: var(--desktop-body-size);
	line-height: 1.45;
}

/* Page H1 from WP — Figma Desktop/H1 */
.page-title h1,
.prog-header-block h1 {
	color: var(--primary-brand-2);
	font-family: var(--desktop-h1-font), sans-serif;
	font-size: var(--desktop-h1-size);
	font-weight: var(--desktop-h1-weight);
	line-height: normal;
	white-space: normal;
}

.nso-page *,
.nso-page *::before,
.nso-page *::after {
	box-sizing: border-box;
}

.nso-page a {
	color: var(--primary-brand-2);
	text-decoration: none;
}

.nso-page .wp-block-heading {
	margin: 0 0 var(--spacing-5);
	color: var(--text);
}

/* Intro: logo+text | goal+photo | tall photo */
.nso-intro {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 451px) minmax(0, 669px);
	gap: var(--spacing-5);
	align-items: stretch;
	margin-bottom: var(--spacing-20);
}

.nso-intro__about {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: var(--spacing-6) var(--spacing-6) var(--spacing-10);
	border-radius: var(--radius-l);
	background: var(--white);
	box-shadow: var(--drop-shadow-200);
}

.nso-intro__logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-8) var(--spacing-10);
}

.nso-intro__logo {
	display: block;
	width: 100%;
	max-width: 392px;
	height: auto;
}

.nso-intro__text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.nso-intro__text .nso-intro__lead-title {
	margin: 0;
	font-family: var(--desktop-h5-font), sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-brand-2);
	line-height: normal;
	white-space: normal;
}

.nso-intro__text p:not(.nso-intro__lead-title) {
	margin: 0;
	color: var(--text);
	font-size: var(--desktop-body-size);
	line-height: normal;
}

.nso-intro__goal {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: var(--spacing-8) var(--spacing-5);
	border-radius: var(--radius-l);
	background: var(--secondary-4);
	color: var(--white);
}

.nso-page .nso-intro__goal-title,
.page-content .nso-intro h2.nso-intro__goal-title {
	margin: 0;
	font-family: var(--desktop-h5-font), sans-serif;
	font-size: var(--desktop-h5-size);
	font-weight: var(--desktop-h5-weight);
	color: #fff;
	line-height: normal;
}

.nso-intro__mid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	min-width: 0;
}

.nso-intro__goal-text {
	margin: 0;
	font-size: var(--desktop-body-size);
	font-weight: 400;
	line-height: normal;
	color: var(--white);
}

.nso-intro__photo {
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--gray-100);
}

.nso-intro__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.nso-intro__photo--wide {
	flex: 0 0 188px;
	height: 188px;
}

.nso-intro__photo--tall {
	min-height: 544px;
}

.nso-intro__photo--tall img {
	object-position: center top;
}

/* Vectors grid */
.nso-vectors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-5);
	margin-bottom: var(--spacing-20);
}

.nso-vector {
	position: relative;
	overflow: hidden;
	min-height: 162px;
	padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-6);
	border-radius: var(--radius-l);
	background: var(--primary-brand-2);
	color: var(--white);
}

.nso-vector__text {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 476px;
	font-size: var(--desktop-body-size);
	font-weight: 400;
	line-height: normal;
	color: var(--white);
}

.nso-vector__icon {
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 80px;
	height: 80px;
	opacity: 0.5;
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Events */
.nso-events {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--spacing-5);
	margin-bottom: var(--spacing-20);
}

.nso-event {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--white);
	box-shadow: var(--drop-shadow-200);
}

.nso-event__media {
	position: relative;
	height: 415px;
	overflow: hidden;
	background: var(--gray-100);
}

.nso-event__media > img:first-child {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nso-event__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 73px;
	height: 73px;
	padding: 12px;
	border-radius: var(--radius-m);
	background: var(--white);
	box-sizing: border-box;
}

.nso-event__badge img {
	display: block;
	width: 49px;
	height: 49px;
	object-fit: contain;
}

.nso-event__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	flex: 1 1 auto;
	padding: var(--spacing-4);
}

.nso-event__title {
	margin: 0;
	font-family: var(--desktop-accent-title-font), serif;
	font-size: var(--desktop-accent-title-size);
	font-weight: 700;
	color: var(--text);
	line-height: normal;
}

.nso-event__desc {
	margin: 0;
	font-size: var(--desktop-body-size);
	font-weight: 400;
	color: var(--text);
	line-height: normal;
}

/* CTA */
.nso-cta {
	position: relative;
	overflow: hidden;
	max-width: 1140px;
	padding: var(--spacing-10) var(--spacing-12);
	border-radius: var(--radius-l);
	background: var(--secondary-4);
	color: var(--white);
}

.nso-cta__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.nso-cta__decor img {
	position: absolute;
	top: -10%;
	right: -35%;
	width: 140%;
	max-width: none;
	height: auto;
	opacity: 0.5;
	mix-blend-mode: overlay;
}

.nso-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	max-width: 830px;
}

.nso-page .nso-cta__title,
.page-content .nso-cta h2.nso-cta__title {
	margin: 0;
	font-family: var(--desktop-h2-font), serif;
	font-size: 40px;
	font-weight: 800;
	color: #fff;
	line-height: normal;
}

.nso-cta__text {
	margin: 0;
	max-width: 534px;
	font-size: var(--desktop-body-size);
	font-weight: 400;
	line-height: normal;
	color: var(--white);
}

.nso-cta__people {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-1) var(--spacing-1);
}

.nso-person {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	width: 413px;
	max-width: 100%;
}

.nso-person__photo {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--secondary-3);
}

.nso-person__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
	min-width: 0;
}

.nso-person__name {
	margin: 0;
	font-family: var(--desktop-accent-title-font), serif;
	font-size: var(--desktop-accent-title-size);
	font-weight: 600;
	color: var(--white);
	line-height: normal;
}

.nso-person__role {
	margin: 0;
	font-size: var(--desktop-body-size);
	font-weight: 400;
	color: var(--white);
	line-height: normal;
}

.nso-page a.nso-cta__vk,
.nso-cta a.nso-cta__vk {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	color: #fff;
	font-size: var(--desktop-h5-size);
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

.nso-page a.nso-cta__vk:hover,
.nso-page a.nso-cta__vk:focus,
.nso-cta a.nso-cta__vk:hover,
.nso-cta a.nso-cta__vk:focus {
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
}

.nso-cta__vk img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Responsive */
@media screen and (max-width: 1400px) {
	.nso-intro {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
		gap: var(--spacing-4);
	}

	.nso-intro__photo--tall {
		min-height: 480px;
	}

	.nso-event__media {
		height: 360px;
	}
}

@media screen and (max-width: 1280px) {
	.nso-intro {
		grid-template-columns: 1fr 1fr;
	}

	.nso-intro__photo--tall {
		grid-column: 1 / -1;
		min-height: 360px;
		max-height: 420px;
	}

	.nso-vectors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nso-events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nso-page .nso-cta__title,
	.page-content .nso-cta h2.nso-cta__title {
		font-size: 32px;
		color: #fff;
	}
}

@media screen and (max-width: 1024px) {
	.nso-intro {
		grid-template-columns: 1fr;
		margin-bottom: var(--spacing-12);
	}

	.nso-intro__about {
		padding: var(--spacing-4);
	}

	.nso-intro__logo-wrap {
		padding: var(--spacing-6) var(--spacing-4);
	}

	.nso-intro__photo--wide {
		flex: 0 0 auto;
		height: 180px;
	}

	.nso-intro__photo--tall {
		min-height: 260px;
		max-height: 320px;
	}

	.nso-intro__goal {
		gap: var(--spacing-5);
		padding: var(--spacing-5) var(--spacing-4);
	}

	.nso-vectors,
	.nso-events {
		margin-bottom: var(--spacing-12);
	}

	.nso-event__media {
		height: 320px;
	}

	.nso-cta {
		padding: var(--spacing-8) var(--spacing-6);
	}
}

@media screen and (max-width: 768px) {
	.nso-page .wp-block-heading {
		margin-bottom: var(--spacing-4);
		font-size: var(--mobile-h2-size);
	}

	.nso-intro {
		gap: var(--spacing-3);
		margin-bottom: var(--spacing-10);
	}

	.nso-intro__about {
		box-shadow: none;
		padding: 0;
	}

	.nso-intro__logo-wrap {
		padding: var(--spacing-8) var(--spacing-4) var(--spacing-5);
	}

	.nso-intro__text {
		padding: 0 var(--spacing-4) var(--spacing-5);
		gap: var(--spacing-2);
	}

	.nso-intro__text .nso-intro__lead-title {
		font-size: 14px;
		font-weight: 700;
		color: var(--primary-brand-2);
	}

	.nso-intro__text p:not(.nso-intro__lead-title) {
		font-size: 12px;
	}

	/* Mobile order: logo+text, classroom, goal, hero — match Figma stack */
	.nso-intro__about {
		order: 1;
	}

	.nso-intro__mid {
		order: 2;
		display: contents;
	}

	.nso-intro__photo--wide {
		order: 2;
		height: 133px;
		border-radius: var(--radius-l);
	}

	.nso-intro__goal {
		order: 3;
		gap: var(--spacing-5);
		padding: var(--spacing-5) var(--spacing-3);
	}

	.nso-page .nso-intro__goal-title,
	.page-content .nso-intro h2.nso-intro__goal-title {
		font-size: 14px;
		color: #fff;
	}

	.nso-intro__goal-text {
		font-size: 12px;
	}

	.nso-intro__photo--tall {
		order: 4;
		min-height: 260px;
		max-height: none;
		height: 260px;
	}

	.nso-vectors {
		grid-template-columns: 1fr;
		gap: var(--spacing-3);
		margin-bottom: var(--spacing-10);
	}

	.nso-vector {
		min-height: 0;
		padding: var(--spacing-8) 100px var(--spacing-8) var(--spacing-6);
	}

	.nso-vector__text {
		font-size: 12px;
	}

	.nso-vector__icon {
		right: -16px;
		width: 89px;
		height: 89px;
		opacity: 0.5;
		mix-blend-mode: overlay;
	}

	.nso-events {
		grid-template-columns: 1fr;
		gap: var(--spacing-3);
		margin-bottom: var(--spacing-10);
	}

	.nso-event {
		box-shadow: none;
	}

	.nso-event__media {
		height: 320px;
		border-radius: var(--radius-l);
	}

	.nso-event__body {
		padding: var(--spacing-4) var(--spacing-4) 0;
	}

	.nso-event__title {
		font-size: 14px;
		font-family: var(--desktop-h5-font), sans-serif;
	}

	.nso-event__desc {
		font-size: 12px;
	}

	.nso-cta {
		max-width: none;
		padding: var(--spacing-5);
	}

	.nso-cta__decor img {
		top: 0;
		right: -60%;
		left: auto;
		bottom: auto;
		width: 220%;
		opacity: 0.5;
		mix-blend-mode: overlay;
	}

	.nso-cta__inner {
		gap: var(--spacing-8);
	}

	.nso-page .nso-cta__title,
	.page-content .nso-cta h2.nso-cta__title {
		font-size: var(--mobile-h2-size);
		color: #fff;
	}

	.nso-cta__text {
		max-width: none;
		font-size: 12px;
	}

	.nso-cta__people {
		flex-direction: column;
		gap: var(--spacing-1);
	}

	.nso-person {
		width: 100%;
		align-items: flex-start;
	}

	.nso-person__photo {
		width: 48px;
		height: 48px;
	}

	.nso-person__name {
		font-size: 14px;
		font-family: var(--desktop-h5-font), sans-serif;
		font-weight: 700;
	}

	.nso-person__role {
		font-size: 12px;
	}

	.nso-cta__vk {
		font-size: 14px;
	}

	.nso-cta__vk img {
		width: 16px;
		height: 16px;
	}
}

@media screen and (max-width: 480px) {
	.nso-intro__photo--tall {
		height: 220px;
	}

	.nso-event__media {
		height: 280px;
	}

	.nso-vector {
		padding-right: 80px;
	}
}

@media screen and (max-width: 360px) {
	.nso-intro__photo--wide {
		height: 120px;
	}

	.nso-intro__photo--tall {
		height: 200px;
	}
}