/**
 * Coordinator banner (desktop):
 * - gray background starts 100px below top;
 * - portrait is absolute, right aligned, bottom aligned;
 * - portrait top is exactly 100px above gray background top.
 */

.stomarus-coordinator-banner {
	--stomarus-cb-bg: #f2f2f2;
	--stomarus-cb-top-gap: 100px;
	--stomarus-cb-zone-h: clamp(280px, 27vw, 330px);
	--stomarus-cb-photo-w: clamp(300px, 36vw, 340px);
	position: relative;
	margin: 0;
	overflow: visible;
	box-sizing: border-box;
	background: transparent;
}

.stomarus-coordinator-banner *,
.stomarus-coordinator-banner *::before,
.stomarus-coordinator-banner *::after {
	box-sizing: inherit;
}

.stomarus-coordinator-banner::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: var(--stomarus-cb-top-gap);
	bottom: 0;
	background: var(--stomarus-cb-bg);
	z-index: 0;
	pointer-events: none;
}

.stomarus-coordinator-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	min-height: calc(var(--stomarus-cb-zone-h) + var(--stomarus-cb-top-gap));
}

.stomarus-coordinator-banner__panel {
	position: absolute;
	top: var(--stomarus-cb-top-gap);
	bottom: 0;
	left: 0;
	width: calc(100% - var(--stomarus-cb-photo-w) - 10px);
	display: flex;
	align-items: center;
	padding-top: clamp(20px, 2.8vw, 36px);
	padding-bottom: clamp(20px, 2.8vw, 36px);
	padding-left: clamp(22px, 4vw, 56px);
	padding-right: 0;
	z-index: 1;
	box-sizing: border-box;
}

.stomarus-coordinator-banner__text {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.stomarus-coordinator-banner__text .stomarus-pseudoheader {
	margin: 0;
}

.stomarus-coordinator-banner__text .stomarus-pseudoheader + .stomarus-coordinator-banner__desc {
	margin-top: clamp(12px, 1.6vw, 20px);
}

.stomarus-coordinator-banner__desc {
	margin: 0;
	color: #666;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.45;
	font-family: var(--font-roboto, 'Roboto', 'Arial', sans-serif);
}

.stomarus-coordinator-banner__desc p {
	margin: 0 0 0.65em;
}

.stomarus-coordinator-banner__desc p:last-child {
	margin-bottom: 0;
}

.stomarus-coordinator-banner__figure-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--stomarus-cb-photo-w);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	z-index: 2;
	pointer-events: none;
}

.stomarus-coordinator-banner__figure {
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	line-height: 0;
}

.stomarus-coordinator-banner__img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom right;
}

.stomarus-coordinator-banner--img-left .stomarus-coordinator-banner__panel {
	left: calc(var(--stomarus-cb-photo-w) + 10px);
	width: calc(100% - var(--stomarus-cb-photo-w) - 10px);
}

.stomarus-coordinator-banner--img-left .stomarus-coordinator-banner__figure-wrap {
	left: 0;
	right: auto;
}

.stomarus-coordinator-banner--img-left .stomarus-coordinator-banner__figure {
	justify-content: flex-start;
}

.stomarus-coordinator-banner--img-left .stomarus-coordinator-banner__img {
	object-position: bottom left;
}

.stomarus-coordinator-banner__inner--media-only {
	min-height: 0;
	display: flex;
	justify-content: center;
	padding-top: clamp(16px, 3vw, 28px);
}

.stomarus-coordinator-banner__inner--media-only .stomarus-coordinator-banner__figure-wrap {
	position: static;
	width: min(var(--stomarus-cb-photo-w), 100%);
	pointer-events: auto;
}

.stomarus-coordinator-banner__inner--media-only .stomarus-coordinator-banner__figure {
	height: auto;
}

@media (max-width: 767px) {
	.stomarus-coordinator-banner::before {
		top: 0;
	}

	.stomarus-coordinator-banner__inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* На десктопе у панели width = 100% минус колонка фото; в колонке фото снизу это нужно сбросить, иначе текст остаётся узким. */
	.stomarus-coordinator-banner__panel {
		position: static;
		order: 1;
		left: auto;
		right: auto;
		width: 100%;
		max-width: 100%;
		padding: clamp(20px, 6vw, 28px) clamp(16px, 5vw, 24px);
	}

	.stomarus-coordinator-banner--img-left .stomarus-coordinator-banner__panel {
		left: auto;
		right: auto;
		width: 100%;
		max-width: 100%;
	}

	.stomarus-coordinator-banner__figure-wrap {
		position: static;
		order: 2;
		width: 100%;
		margin-top: clamp(8px, 2vw, 16px);
		justify-content: flex-end;
		align-items: flex-end;
		pointer-events: auto;
	}

	.stomarus-coordinator-banner__figure {
		height: auto;
		display: inline-block;
		margin-left: auto;
	}

	.stomarus-coordinator-banner__img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 280px;
		object-fit: contain;
		object-position: bottom right;
		margin-left: auto;
		margin-right: 0;
		display: block;
	}

	.stomarus-coordinator-banner--img-left .stomarus-coordinator-banner__img {
		object-position: bottom right;
	}

	.stomarus-coordinator-banner__inner--media-only {
		justify-content: flex-end;
	}

	.stomarus-coordinator-banner__inner--media-only .stomarus-coordinator-banner__figure-wrap {
		width: 100%;
		justify-content: flex-end;
	}
}