/* ==========================================================================
   INFOCEAN — Experts
   --------------------------------------------------------------------------
   Presentation layer публичного раздела экспертов.

   Источник глобальных токенов:
   assets/css/main.css

   Здесь намеренно нет собственных:
   — цветов;
   — шрифтов;
   — глобальных spacing tokens;
   — базовых button styles.

   Раздел использует общую Design System INFOCEAN.
   ========================================================================== */


/* ==========================================================================
   Experts index
   ========================================================================== */

.infocean-experts-index {
	padding-bottom:
		var(--sp-9);
}


/* Header ------------------------------------------------------------- */

.infocean-experts-index__header {
	display: grid;

	grid-template-columns:
		minmax(0, 0.95fr)
		minmax(320px, 0.65fr);

	column-gap:
		var(--sp-8);

	row-gap:
		var(--sp-3);

	align-items: start;

	margin-bottom: 0;

	padding:
		0
		0
		var(--sp-8);

	border-bottom:
		1px solid
		var(--color-border);
}


/*
 * Короткий signature mark:
 * тот же редакционный язык, что у
 * classification index pages.
 */
.infocean-experts-index__header::before {
	content: "";

	grid-column:
		1 / -1;

	width: 64px;
	height: 3px;

	margin-bottom:
		var(--sp-2);

	background:
		var(--gradient-brand);

	border-radius:
		var(--radius-pill);
}


.infocean-experts-index__title {
	max-width: 760px;

	margin: 0;

	font-size:
		clamp(
			40px,
			4vw,
			52px
		);

	line-height: 1.04;
	letter-spacing: -0.025em;
}


.infocean-experts-index__editorial {
	max-width: 580px;

	margin: 0;

	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.6;

	color:
		var(--color-text-muted);
}


.infocean-experts-index__editorial > * + * {
	margin-top:
		var(--sp-3);
}


/* Grid --------------------------------------------------------------- */

.infocean-experts-index__grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap:
		var(--sp-5);

	padding-top:
		var(--sp-8);
}


/* ==========================================================================
   Expert card
   ========================================================================== */

/*
 * Expert Card использует тот же принцип,
 * что Research Card:
 *
 * естественная форма объекта слева,
 * структурированная информация справа.
 *
 * Но визуально остаётся отдельным типом сущности.
 */
.infocean-expert-card {
	display: grid;

	grid-template-columns:
		minmax(170px, 36%)
		minmax(0, 1fr);

	min-width: 0;
	height: 100%;

	overflow: hidden;

	background:
		var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-md);

	transition:
		border-color
		var(--motion-fast)
		var(--ease-standard);
}


.infocean-expert-card:hover {
	border-color:
		color-mix(
			in srgb,
			var(--color-brand) 40%,
			var(--color-border)
		);
}

/* Full-card navigation: expert index */

.infocean-expert-card {
    position: relative;
}

.infocean-expert-card__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.infocean-expert-card__media,
.infocean-expert-card__more {
    position: relative;
    z-index: 2;
}

.infocean-expert-card__name a:focus-visible::after {
    outline: 2px solid var(--color-brand);
    outline-offset: -3px;
    border-radius: var(--radius-md);
}

/* Portrait ----------------------------------------------------------- */

.infocean-expert-card__media {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	min-width: 0;

	padding:
		var(--sp-3);

	background:
		var(--color-surface-muted);

	border-right:
		1px solid
		var(--color-border);
}


.infocean-expert-card__image,
.infocean-expert-card__placeholder {
	display: block;

	width: 100%;
	max-width: 220px;

	aspect-ratio:
		4 / 5;

	border-radius:
		var(--radius-sm);
}


.infocean-expert-card__image {
	object-fit: cover;
	object-position:
		center top;
}


.infocean-expert-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	background:
		color-mix(
			in srgb,
			var(--color-brand) 8%,
			var(--color-surface)
		);

	color:
		var(--color-brand);
}


.infocean-expert-card__placeholder svg {
	width: 54px;
	height: 54px;
}


/* Content ------------------------------------------------------------ */

.infocean-expert-card__body {
	display: flex;
	flex-direction: column;

	min-width: 0;

	padding:
		var(--sp-5);
}


.infocean-expert-card__name {
	margin: 0;

	font-size:
		clamp(
			21px,
			1.8vw,
			24px
		);

	line-height: 1.15;
	letter-spacing: -0.018em;
}

/* Align expert names in the two-column index */

@media (min-width: 961px) {
    .infocean-expert-card__name {
        min-height: 2.3em;
    }
}


.infocean-expert-card__name a {
	transition:
		color
		var(--motion-fast)
		var(--ease-standard);
}


.infocean-expert-card__name a:hover {
	color:
		var(--color-brand);
}


/* Position / organization ------------------------------------------- */

.infocean-expert-card__position {
	display: -webkit-box;

	margin:
		var(--sp-2)
		0
		0;

	overflow: hidden;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;

	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;

	color:
		var(--color-text-subtle);
}


/* Professional focus ------------------------------------------------ */

.infocean-expert-card__focus {
	margin-top:
		var(--sp-4);

	padding-top:
		var(--sp-3);

	border-top:
		1px solid
		var(--color-border);
}


.infocean-expert-card__focus-label {
	margin-bottom:
		6px;

	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing:
		0.06em;

	text-transform:
		uppercase;

	color:
		var(--color-brand);
}


.infocean-expert-card__focus p {
	display: -webkit-box;

	margin: 0;

	overflow: hidden;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		2;

	font-size: 13px;
	line-height: 1.5;

	color:
		var(--color-text-muted);
}


/* Short bio ---------------------------------------------------------- */

.infocean-expert-card__bio {
	display: -webkit-box;

	margin:
		var(--sp-4)
		0
		0;

	overflow: hidden;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		4;

	font-size: 13.5px;
	line-height: 1.55;

	color:
		var(--color-text-muted);
}


/* Profile link ------------------------------------------------------- */

.infocean-expert-card__more {
	display: inline-flex;
	align-items: center;

	width: fit-content;

	margin-top: auto;
	padding-top:
		var(--sp-5);

	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;

	color:
		var(--color-brand);
}


.infocean-expert-card__more::after {
	content: "→";

	margin-left:
		var(--sp-2);

	transition:
		transform
		var(--motion-fast)
		var(--ease-standard);
}


.infocean-expert-card__more:hover::after {
	transform:
		translateX(3px);
}


/* Empty state */

.infocean-experts-index__empty {
	max-width: 680px;

	padding:
		var(--sp-5)
		var(--sp-6);

	background: var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-sm);

	color: var(--color-text-muted);
}


/* ==========================================================================
   Expert profile
   ========================================================================== */

.infocean-expert-profile {
	padding-bottom: var(--sp-9);
}


/* Hero */

.infocean-expert-profile__hero {
	display: grid;

	grid-template-columns:
		minmax(240px, 0.36fr)
		minmax(0, 1fr);

	gap: var(--sp-7);

	align-items: start;

	padding-bottom: var(--sp-7);

	border-bottom:
		1px solid
		var(--color-border);
}


.infocean-expert-profile__photo {
	min-width: 0;
}


/*
 * Реальное фото эксперта не кадрируем.
 *
 * Портрет является контентом сущности,
 * поэтому сохраняем исходное соотношение сторон.
 */
.infocean-expert-profile__image {
	display: block;

	width: 100%;
	height: auto;

	border-radius:
		var(--radius-md);
}


/*
 * Placeholder может иметь фиксированную форму,
 * потому что у него нет собственного aspect ratio.
 */
.infocean-expert-profile__photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	aspect-ratio:
		4 / 5;

	background:
		color-mix(
			in srgb,
			var(--color-brand) 8%,
			var(--color-surface)
		);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-md);

	color:
		var(--color-brand);
}


.infocean-expert-profile__photo-placeholder svg {
	width: 76px;
	height: 76px;
}


/* Hero content */

.infocean-expert-profile__hero-content {
	min-width: 0;

	padding-top: var(--sp-2);
}


.infocean-expert-profile__eyebrow,
.infocean-expert-profile__section-eyebrow {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;

	letter-spacing: 0.075em;
	text-transform: uppercase;

	color: var(--color-brand);
}


.infocean-expert-profile__title {
	margin:
		var(--sp-3)
		0
		0;
}


.infocean-expert-profile__position {
	margin:
		var(--sp-3)
		0
		0;

	font-size: 15px;
	line-height: 1.5;

	color: var(--color-text-subtle);
}


.infocean-expert-profile__lead {
	max-width: 720px;

	margin:
		var(--sp-5)
		0
		0;

	font-size: 18px;
	line-height: 1.65;

	color: var(--color-text-muted);
}


/* Specialization */

.infocean-expert-profile__specialization {
	max-width: 720px;

	margin-top: var(--sp-5);
	padding:
		var(--sp-4)
		var(--sp-5);

	background:
		color-mix(
			in srgb,
			var(--color-brand) 7%,
			var(--color-surface)
		);

	border-left:
		3px solid
		var(--color-brand);
}


.infocean-expert-profile__specialization-label {
	margin-bottom: var(--sp-2);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;

	letter-spacing: 0.06em;
	text-transform: uppercase;

	color: var(--color-brand);
}


.infocean-expert-profile__specialization p {
	margin: 0;

	font-size: 14px;
	line-height: 1.55;

	color: var(--color-text-muted);
}


/* ==========================================================================
   About
   ========================================================================== */

.infocean-expert-profile__about {
	display: grid;

	grid-template-columns:
		minmax(180px, 0.32fr)
		minmax(0, 1fr);

	gap: var(--sp-7);

	padding:
		var(--sp-8)
		0;

	border-bottom:
		1px solid
		var(--color-border);
}


.infocean-expert-profile__about > h2 {
	margin: 0;

	font-size: clamp(24px, 2.7vw, 32px);
}


.infocean-expert-profile__description {
	max-width: 760px;

	font-size: 16px;
	line-height: 1.7;

	color: var(--color-text-muted);
}


.infocean-expert-profile__description > * + * {
	margin-top: var(--sp-4);
}


.infocean-expert-profile__description ul,
.infocean-expert-profile__description ol {
	padding-left: 1.4em;
}


.infocean-expert-profile__description li + li {
	margin-top: var(--sp-2);
}


/* ==========================================================================
   Researches
   ========================================================================== */

.infocean-expert-profile__research {
	padding-top: var(--sp-8);
}


.infocean-expert-profile__section-header {
	max-width: 760px;

	margin-bottom: var(--sp-6);
}


.infocean-expert-profile__section-header h2 {
	margin:
		var(--sp-3)
		0
		0;
}


.infocean-expert-profile__research-grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap: var(--sp-5);
}


.infocean-expert-research {
	display: flex;
	flex-direction: column;

	min-width: 0;
}


/*
 * Контекстная роль эксперта именно в этом исследовании.
 * Это metadata связи Contributor, а не глобальная
 * характеристика человека.
 */

.infocean-expert-work__roles, 
.infocean-expert-research__roles {
	display: flex;
	flex-wrap: wrap;

	gap: 6px;

	margin-bottom: var(--sp-2);
}


.infocean-expert-work__roles span,
.infocean-expert-research__roles span {
	display: inline-flex;
	align-items: center;

	padding:
		4px
		8px;

	background:
		color-mix(
			in srgb,
			var(--color-brand) 8%,
			var(--color-surface)
		);

	border:
		1px solid
		color-mix(
			in srgb,
			var(--color-brand) 18%,
			var(--color-border)
		);

	border-radius:
		var(--radius-xs);

	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.3;

	color: var(--color-brand);
}


/* ==========================================================================
   Materials
   ========================================================================== */

.infocean-expert-profile__materials {
	padding-top:
		var(--sp-8);
}


.infocean-expert-profile__materials-grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap:
		var(--sp-5);
}


.infocean-expert-material {
	display: flex;
	flex-direction: column;

	min-width: 0;
}



/* ==========================================================================
   Expert reviews
   ========================================================================== */

/*
 * Публичная проекция Review(primary subject = expert).
 *
 * Источник данных и Public Review Gate остаются в INFOCEAN Core.
 * Этот слой отвечает только за представление уже public-safe данных.
 */
.infocean-expert-profile__reviews {
	padding:
		var(--sp-8)
		0;

	border-bottom:
		1px solid
		var(--color-border);
}


.infocean-expert-profile__reviews-list {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--sp-4);

	max-width:
		100%;
}


.infocean-expert-review {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	min-width: 0;

	padding:
		var(--sp-5);

	background:
		var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-lg);
}


.infocean-expert-review:has(
	.infocean-expert-review__screenshot
) {
	grid-template-columns:
		minmax(0, 1fr)
		minmax(220px, 34%);

	gap:
		var(--sp-5);

	align-items: start;
}


.infocean-expert-review__content {
	min-width: 0;
}


.infocean-expert-review__quote {
	margin:
		0
		0
		var(--sp-4);

	padding: 0;

	border: 0;
}


.infocean-expert-review__quote p {
	margin: 0;

	font-size: 17px;
	line-height: 1.65;

	color:
		var(--color-text);
}


.infocean-expert-review__quote p::before {
	content: "“";

	margin-right:
		2px;

	font-size:
		1.15em;

	font-weight: 700;

	color:
		var(--color-brand);
}


.infocean-expert-review__quote p::after {
	content: "”";

	margin-left:
		2px;

	font-size:
		1.15em;

	font-weight: 700;

	color:
		var(--color-brand);
}


.infocean-expert-review__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;

	gap:
		var(--sp-1)
		var(--sp-2);

	font-size: 13px;
	line-height: 1.45;
}


.infocean-expert-review__author {
	font-style: normal;
	font-weight: 650;

	color:
		var(--color-text);
}


.infocean-expert-review__details,
.infocean-expert-review__date {
	color:
		var(--color-text-muted);
}


.infocean-expert-review__date::before {
	content: "·";

	margin-right:
		var(--sp-2);

	color:
		var(--color-text-subtle);
}


.infocean-expert-review__source {
	margin:
		var(--sp-3)
		0
		0;

	font-size: 12.5px;
}


.infocean-expert-review__source a {
	color:
		var(--color-brand);

	text-decoration-thickness:
		1px;

	text-underline-offset:
		3px;
}


.infocean-expert-review__source a:hover {
	color:
		var(--color-brand-strong);
}


.infocean-expert-review__screenshot {
	min-width: 0;

	margin: 0;
}


.infocean-expert-review__screenshot a {
	display: block;

	padding:
		var(--sp-2);

	background:
		var(--color-surface-muted);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-sm);
}


.infocean-expert-review__screenshot-image {
	display: block;

	width: 100%;
	max-height: 340px;

	object-fit: contain;

	border-radius:
		var(--radius-xs);
}


@media (max-width: 700px) {

	.infocean-expert-profile__reviews {
		padding:
			var(--sp-7)
			0;
	}


	.infocean-expert-review,
	.infocean-expert-review:has(
		.infocean-expert-review__screenshot
	) {
		grid-template-columns:
			1fr;

		padding:
			var(--sp-4);
	}


	.infocean-expert-review__quote p {
		font-size: 16px;
	}


	.infocean-expert-review__screenshot {
		max-width: 420px;
	}
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {

	/*
	 * На tablet оставляем одну широкую
	 * горизонтальную Expert Card в строке.
	 */
	.infocean-experts-index__grid {
		grid-template-columns:
			1fr;
	}


	.infocean-expert-profile__hero {
		grid-template-columns:
			minmax(200px, 0.42fr)
			minmax(0, 1fr);

		gap:
			var(--sp-6);
	}


    .infocean-expert-profile__materials-grid,
    .infocean-expert-profile__research-grid {
    	grid-template-columns: 1fr;
    }
}


@media (max-width: 720px) {

	/* Experts index */

	.infocean-experts-index__header {
		grid-template-columns:
			1fr;

		row-gap:
			var(--sp-4);

		padding:
			0
			0
			var(--sp-7);
	}


	.infocean-experts-index__header::before {
		width: 44px;
	}


	.infocean-experts-index__title {
		font-size:
			clamp(
				36px,
				11vw,
				46px
			);
	}


	.infocean-experts-index__editorial {
		max-width: 720px;

		font-size: 15px;
	}


	.infocean-experts-index__grid {
		padding-top:
			52px;
	}


	/* Expert profile */

	.infocean-expert-profile__hero {
		grid-template-columns:
			1fr;

		gap:
			var(--sp-5);
	}


	.infocean-expert-profile__photo {
		max-width:
			360px;
	}


	.infocean-expert-profile__hero-content {
		padding-top: 0;
	}


	.infocean-expert-profile__about {
		grid-template-columns:
			1fr;

		gap:
			var(--sp-5);

		padding:
			var(--sp-7)
			0;
	}


	.infocean-expert-profile__research {
		padding-top:
			var(--sp-7);
	}
}


@media (max-width: 600px) {

	.infocean-experts-index,
	.infocean-expert-profile {
		padding-bottom:
			var(--sp-8);
	}


	/*
	 * На телефоне портрет становится
	 * верхней частью карточки.
	 */
	.infocean-expert-card {
		grid-template-columns:
			1fr;
	}


	.infocean-expert-card__media {
		padding:
			var(--sp-4);

		border-right: 0;

		border-bottom:
			1px solid
			var(--color-border);
	}


	.infocean-expert-card__image,
	.infocean-expert-card__placeholder {
		max-width:
			280px;
	}


	.infocean-expert-card__body {
		padding:
			var(--sp-4);
	}


	.infocean-expert-profile__lead {
		font-size:
			16px;
	}


	.infocean-expert-profile__specialization {
		padding:
			var(--sp-4);
	}
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.infocean-expert-card,
	.infocean-expert-card__name a,
	.infocean-expert-card__more::after {
		transition: none;
	}


	.infocean-expert-card__more:hover::after {
		transform: none;
	}
}