/* ==========================================================================
   Примеры резюме — страница профессии
   --------------------------------------------------------------------------
   Зависит от resumes.css (токены). Брейкпоинты: 960 / 768 / 560.
   Размеры сверены с макетом Figma (node 1:11423), контейнер 1128px.
   ========================================================================== */

/* Hero страницы профессии: окно картинки 360px (в каталоге — 280px),
   кадр смещён к низу снимка, текстовая колонка шире — 456px против 389px. */
.resumes-single .resumes-hero__media img {
	object-position: center 83%;
}

.resumes-single .resumes-hero__text {
	max-width: 100%;
}

.resumes-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* В макете кнопки стоят в строку: 248 + 16 + 198 = 462 при колонке 456.
   Шести пикселей не хватает, и они переносились. На десктопе разрешаем ряду
   зайти в 60-пиксельный зазор между колонками — визуально это незаметно.

   Порог именно 1200, а не 961: с 1200 контейнер Bootstrap фиксируется на 1152
   и текстовая колонка равна 456, на которые и рассчитан этот выпуск. Ниже
   контейнер «резиновый», колонка сжимается, а ряд с width: max-content
   остаётся 463 — и уезжает под картинку (на 1054 перекрытие было 52px).
   Там перенос снова разрешён. */
@media (min-width: 1200px) {
	.resumes-single .resumes-hero__actions {
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
	}
}

/* Полоса «маркеры + вводный текст»
   -------------------------------------------------------------------------- */
/* По макету у полосы только верхний отступ: ниже сразу начинается
   секция вариантов со своим фоном. */
.resumes-intro {
	padding: 48px 0 0;
	background: var(--c-variants-bg);
}

.resumes-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.resumes-chips li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.resumes-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 6px 16px 6px 8px;
	border: 1px solid var(--c-outline-variant);
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--c-on-surface-variant-2);
	text-decoration: none;
}

a.resumes-chip:hover,
a.resumes-chip:focus-visible {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

.resumes-chip__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* В макете это body-large: 16/20 с трекингом 0.5, абзацы идут вплотную
   (узел 1:11499 на десктопе и 1:12844 на мобильном — значения совпадают). */
.resumes-intro__text p {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: var(--c-on-surface-variant);
}

/* Секция вариантов
   -------------------------------------------------------------------------- */
.resumes-variants-wrap {
	background: var(--c-variants-bg);
	padding: 48px 0;
	scroll-margin-top: 24px;
}

.resumes-variants__title {
	color: var(--c-secondary);
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
	margin: 0 0 8px;
}

.resumes-variants__title span {
	display: inline-block;
	color: var(--c-primary);
}

.resumes-variants__title span::first-letter {
	text-transform: uppercase;
}

.resumes-variants__lead {
	color: var(--c-on-surface-variant);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	margin: 0 0 24px;
}

/* Карточки растягиваются до одной высоты, блок действий прижат к низу
   (.resume-card__content имеет flex: 1) — как в макете. */
.resumes-variants-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

/* Карточка резюме
   -------------------------------------------------------------------------- */
.resume-card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface-container-lowest);
	border-radius: var(--resumes-radius);
	overflow: hidden;
}

.resume-card__badge {
	color: var(--c-on-surface-variant);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	padding: 16px 16px 12px;
	background: var(--c-surface-variant);
}

.resume-card__content {
	flex: 1;
	padding: 24px 16px 0;
}

.resume-card__header {
	display: flex;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--c-outline-variant);
}

.resume-card__photo {
	flex-shrink: 0;
	width: 112px;
	height: 112px;
	border: 1px solid var(--c-outline-variant);
	border-radius: 8px;
	overflow: hidden;
	background: var(--c-surface-container-low);
}

.resume-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.resume-card__info {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
	min-width: 0;
}

.resume-card__info h3 {
	color: var(--c-on-surface-variant);
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	margin: 0;
}

.resume-card__job {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* В макете должность — title-medium-emphasized (600), зарплата — обычный
   title-medium (500); обе с трекингом 0.15 (узел 1:12866). */
.resume-card__position {
	color: var(--c-primary);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	margin: 0;
}

.resume-card__salary {
	color: var(--c-on-surface-variant);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0.15px;
	margin: 0;
}

/* Контакты и анкетные данные — два списка по 14/18 */
.resume-card__contact,
.resume-card__facts {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-on-surface-variant);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
}

.resume-card__contact li,
.resume-card__facts li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Секции карточки
   -------------------------------------------------------------------------- */
.resume-card__section {
	padding-block: 12px;
	border-bottom: 1px solid var(--c-outline-variant);
}

.resume-card__section:last-child {
	border-bottom: none;
}

.resume-card__section h4 {
	color: var(--c-secondary);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	margin: 0 0 8px;
}

.resume-card__section p {
	color: var(--c-on-surface-variant);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	margin: 0;
}

/* Опыт работы */
.resume-card__experience-company {
	color: var(--c-on-surface);
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	letter-spacing: 0.25px;
	margin: 0 0 4px;
}

.resume-card__experience-list {
	color: var(--c-on-surface-variant);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	margin: 0 0 12px;
	padding-left: 16px;
}

.resume-card__experience-list:last-child {
	margin-bottom: 0;
}

.resume-card__experience-list li {
	margin-bottom: 2px;
}

/* Образование */
.resume-card__education:not(:last-child) {
	margin-bottom: 12px;
}

.resume-card__education-title {
	color: var(--c-on-surface);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.1px;
	margin: 0;
}

/* Навыки — сплошной перечень, запятые рисует CSS */
.resume-card__skills {
	margin: 0;
}

/*
 * Только запятая: пробел даёт перенос строки между <span> в разметке.
 * С «content: ', '» получалось два пробела подряд.
 */
.resume-card__skill:not(:last-child)::after {
	content: ',';
}

/* Языки */
.resume-card__languages {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-on-surface-variant);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
}

.resume-card__languages li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Действия — прижаты вправо, кнопки 40px */
.resume-card__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 16px;
	padding: 20px 0 24px;
	border-top: 1px solid var(--c-outline-variant);
}

.resumes-shell .resume-card__actions .resumes-btn--primary {
	height: 40px;
	padding: 10px 16px;
	border-radius: var(--resumes-radius);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
}

.resume-card__actions .resumes-btn__icon {
	width: 20px;
	height: 20px;
}

/* Подтверждение копирования */
.resume-card__copy.is-copied {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

/* Блок «Слово эксперта»
   -------------------------------------------------------------------------- */
/* Эксперт и FAQ по макету лежат в одной полосе: сверху 40px,
   между блоками 48px (8 здесь + 40 сверху у .resumes-faq-wrap). */
.resumes-expert-wrap {
	background: var(--c-surface-container);
	padding: 40px 0 8px;
}

.resumes-expert {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding: 24px 32px;
	border-radius: 16px;
	background: var(--c-surface-container-low);
}

.resumes-expert__author {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex: 0 0 208px;
	max-width: 208px;
}

.resumes-expert__avatar {
	display: block;
	width: 192px;
	height: 192px;
	margin-inline: 8px;
	border-radius: 50%;
	object-fit: cover;
}

.resumes-expert__name {
	margin: 0;
	padding: 0 8px;
	font-size: 16px;
	line-height: 32px;
	font-weight: 500;
	letter-spacing: 0.15px;
	color: var(--c-on-surface-variant);
}

.resumes-expert__name a {
	color: inherit;
	text-decoration: none;
}

.resumes-expert__name a:hover,
.resumes-expert__name a:focus-visible {
	color: var(--c-primary);
	text-decoration: underline;
}

.resumes-expert__role {
	margin: 0;
	padding-left: 8px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.25px;
	color: var(--c-on-secondary-container);
}

.resumes-expert__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	flex: 1;
}

.resumes-expert__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.resumes-expert__title {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
	color: var(--c-on-secondary-container);
}

.resumes-expert__text {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: var(--c-on-secondary-container);
}

/* Оценка
   --------------------------------------------------------------------------
   Вид задаёт общий css/rating.css — тот же файл работает на статьях и в
   словаре, поэтому блок выглядит одинаково во всём проекте. Здесь только
   ширина колонки и свой заголовок: текст у нас свой, а оформление повторяет
   родной .rmp-heading--title, чтобы отличить их было нельзя. */
.resumes-rating-wrap {
	padding: 32px 0;
	background: var(--c-surface-container-lowest);
}

.resumes-rating {
	max-width: 760px;
	margin: 0 auto;
}

.resumes-rating__title {
	margin: 0 0 0.4rem;
	font-size: 28px;
	line-height: 36px;
	font-weight: 400;
	color: var(--c-on-surface);
	text-align: center;
}

/* Родной заголовок плагина прячем — свой уже стоит в шаблоне. */
.resumes-rating .rmp-heading--title {
	display: none;
}

/* Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.resumes-variants-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Колонкой, но внутренняя раскладка автора та же, что на десктопе:
	   аватар 192px сверху, под ним имя и роль (узел 1:13445). */
	.resumes-expert {
		flex-direction: column;
		gap: 48px;
		padding: 24px 16px;
	}

	/* В колоночном флексе flex-basis управляет высотой, поэтому фиксированные
	   208px из базового правила надо снять. */
	.resumes-expert__author {
		flex: 0 0 auto;
		max-width: none;
	}
}

@media (max-width: 560px) {
	/* Верхний отступ полосы — 48px, как на десктопе (узел 1:12836). */
	.resumes-intro {
		padding: 48px 0 0;
	}

	/* По макету (узел 1:12850) карточки на телефоне не встают колонкой, а
	   листаются по горизонтали: строка из двух карточек по 310px с зазором 16
	   лежит в колонке 343px, поэтому вторая выглядывает примерно на 17px.
	   Прокрутка идёт внутри контентной колонки, не до краёв экрана. */
	.resumes-variants-grid {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.resumes-variants-grid::-webkit-scrollbar {
		display: none;
	}

	.resumes-variants-grid > .resume-card {
		flex: 0 0 calc(100% - 33px);
		min-width: 0;
		scroll-snap-align: start;
	}

	/* Фото встаёт над текстом, но выравнивание остаётся по левому краю:
	   центрирования в макете нет (узел 1:12861). */
	.resume-card__header {
		flex-direction: column;
	}

	.resume-card__actions {
		flex-direction: column;
	}

	.resumes-shell .resume-card__actions .resumes-btn {
		width: 100%;
	}
}

/* Анимация появления
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes resumeFadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.resume-card {
		animation: resumeFadeInUp 0.5s ease-out both;
	}

	.resume-card:nth-child(2) {
		animation-delay: 0.1s;
	}
}