/* ==========================================================================
   Общий блок «Команда» — карусель + попап профиля + попап документа.
   Используется на Главной и на «О нас» (template-parts/team-block.php).
   Токены — из variables.css; своих цветов/размеров не заводим.
   ========================================================================== */

.team-block {
	display: flex;
	align-items: flex-start;
	gap: var(--space-24);
	margin-top: var(--space-64);
	max-width: 100%;
}

.team-block__stage {
	position: relative;
	flex: 0 0 437px;
	min-width: 0;
	max-width: 100%;
}

.team-block__side {
	display: flex;
	/* flex-grow проставляет JS — пропорционально числу плиток в колонке,
	   иначе портреты слева и справа вышли бы разной ширины (3 против 4). */
	flex: 0 1 0;
	min-width: 0;
	gap: var(--space-24);
	padding-top: var(--space-32);
}

.team-block__side[hidden] {
	display: none;
}

.team-block__thumb,
.team-block__photo {
	position: relative;
	overflow: clip;
	border-radius: var(--radius-lg);
	background: var(--color-bg-soft);
}

.team-block__thumb {
	/* Плиток в кадре всегда не больше семи (потолок в JS), поэтому их
	   ширина не зависит от размера команды — новые люди не сжимают карточки. */
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 210 / 287;
	height: auto;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.team-block__thumb img,
.team-block__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * Атрибут hidden должен побеждать классовые display.
 * Без этих правил .team-block__card{display:flex} перебивает
 * браузерное [hidden]{display:none}, и все карточки рендерятся
 * стопкой одна под другой вместо одной активной.
 */
.team-block__card[hidden],
.team-block__thumb[hidden],
.team-profile__content[hidden] {
	display: none !important;
}

.team-block__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	background: var(--color-bg-soft);
}

.team-block__photo {
	width: 100%;
	height: 383px;
}

.team-block__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.team-block__name {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-text);
}

.team-block__role {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-text-muted);
}

.team-block__rule {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 0;
}

.team-block__quote {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-text);
}

.team-block__facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-block__facts li {
	position: relative;
	padding-left: var(--space-20);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--color-text);
}

.team-block__facts li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-brand);
}

.team-block__more {
	align-self: flex-start;
	margin-top: var(--space-8);
	padding: var(--space-8) var(--space-20);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-brand);
	font-size: var(--fs-small);
	font-weight: 500;
	cursor: pointer;
}

.team-block__more:hover {
	background: var(--color-bg-cold);
}

.team-block__nav {
	position: absolute;
	top: 160px;
	z-index: 2;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.team-block__nav:hover {
	background: var(--color-brand-hover, var(--color-brand));
}

.team-block__navicon {
	display: block;
	width: 24px;
	height: 24px;
}

.team-block__nav--prev {
	left: calc(-1 * var(--space-24));
}

.team-block__nav--next {
	right: calc(-1 * var(--space-24));
	transform: scaleX(-1);
}

/* ==========================================================================
   Попап профиля и попап документа
   ========================================================================== */

.team-profile__dialog {
	width: min(920px, calc(100vw - var(--space-32)));
	max-height: calc(100vh - var(--space-64));
	overflow-y: auto;
	padding: var(--space-48);
	border-radius: var(--radius-xl);
}

.team-profile__header {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	margin-bottom: var(--space-32);
}

.team-profile__photo {
	width: 120px;
	height: 120px;
	border-radius: var(--radius-lg);
	object-fit: cover;
	flex: none;
}

.team-profile__name {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-h3);
	color: var(--color-text);
}

.team-profile__role {
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.team-profile__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--space-48);
}

.team-profile__bio {
	/* Явный размер: 18px на десктопе, 16px на мобильном (ниже в медиазапросе).
	   Через var(--fs-small) было мелко для длинного текста в попапе. */
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: var(--space-24);
}

.team-profile__h4 {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text);
	margin: var(--space-24) 0 var(--space-8);
}

.team-profile__h4:first-child {
	margin-top: 0;
}

.team-profile__list {
	list-style: disc;
	padding-left: var(--space-20);
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
}

.team-profile__docs {
	border-left: 1px solid var(--color-border);
	padding-left: var(--space-24);
}

.team-profile__doclist {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.team-profile__docitem {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	width: 100%;
	padding: var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	cursor: pointer;
	text-align: left;
}

.team-profile__docitem:hover {
	background: var(--color-bg-soft);
}

.team-profile__docitem img {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	flex: none;
}

.team-profile__docicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-cold);
	color: var(--color-brand);
	font-size: var(--fs-small);
	font-weight: 600;
	flex: none;
}

.team-profile__doctext {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.team-profile__docname {
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text);
}

.team-profile__docmeta {
	font-size: 16px;
	color: var(--color-text-muted);
}

.team-doc__dialog {
	width: min(720px, calc(100vw - var(--space-32)));
	max-height: calc(100vh - var(--space-64));
	overflow-y: auto;
	padding: var(--space-32);
	border-radius: var(--radius-xl);
}

.team-doc__title {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	color: var(--color-text);
}

.team-doc__meta {
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.team-doc__preview {
	margin-top: var(--space-24);
	min-height: 200px;
	border-radius: var(--radius-md);
	background: var(--color-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.team-doc__preview img {
	max-width: 100%;
	max-height: 70vh;
	display: block;
}

.team-doc__preview iframe {
	width: 100%;
	height: 70vh;
	border: 0;
}

.team-doc__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-24);
	padding: var(--space-8) var(--space-20);
	border-radius: var(--radius-pill);
	background: var(--color-brand);
	color: var(--color-text-invert);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
}

.team-doc__download:hover {
	background: var(--color-brand-hover);
}

/* ==========================================================================
   Мобильный слой — стек вместо трёхколоночной раскладки.
   Совпадает по точке перелома с assets/css/mobile.css (≤640px), но
   грузится как часть этого файла: секция целиком своя, ломать общий
   mobile.css ради неё незачем.
   ========================================================================== */
@media (max-width: 1199.98px) {
	.team-block {
		flex-direction: column;
	}

	/* Стрелки внутрь: снаружи они давали горизонтальный скролл на мобильном. */
	.team-block__nav--prev {
		left: var(--space-8);
	}

	.team-block__nav--next {
		right: var(--space-8);
	}

	/*
	 * Раньше боковые плитки на мобильном просто прятались (display:none) —
	 * и кроме активного не было видно никого. Теперь левая колонка скрыта,
	 * а правая превращается в горизонтальную ленту всех остальных
	 * сотрудников под активной карточкой. JS в узком режиме кладёт в неё
	 * всех по кругу.
	 */
	.team-block__side--left {
		display: none;
	}

	.team-block__side--right {
		display: flex;
		flex: 0 0 auto;
		width: 100%;
		gap: var(--space-12);
		padding-top: var(--space-16);
		padding-bottom: var(--space-8);
		overflow-x: auto;
		overflow-y: hidden;
		flex-wrap: nowrap;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.team-block__side--right .team-block__thumb {
		flex: 0 0 150px;
		width: 150px;
		height: auto;
		aspect-ratio: 210 / 287;
		scroll-snap-align: start;
	}

	.team-block__stage {
		flex: 1 1 auto;
		width: 100%;
	}

	.team-profile__grid {
		grid-template-columns: 1fr;
	}

	.team-profile__docs {
		border-left: 0;
		border-top: 1px solid var(--color-border);
		padding-left: 0;
		padding-top: var(--space-24);
	}
}

@media (max-width: 640px) {
	.team-block__card {
		padding: var(--space-20);
	}

	.team-block__photo {
		height: 280px;
	}

	.team-profile__dialog,
	.team-doc__dialog {
		padding: var(--space-24);
	}

	.team-profile__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.team-block__side--right .team-block__thumb {
		flex: 0 0 116px;
		width: 116px;
	}

	/* Не меньше 16px — иначе Safari на iOS зумит страницу и мельчит текст. */
	.team-profile__bio,
	.team-profile__list,
	.team-profile__h4,
	.team-profile__docname {
		font-size: 16px;
	}
}