/* Yana Berg — блок услуг (табы).
 * Десктоп: текст | фото | список. Мобильный: лента-список, под ней фото, ниже текст.
 */

.yb-services {
	background: var(--yb-ink);
	color: var(--yb-white);
	padding: 120px 24px;
	font-family: var(--yb-font-body);
	text-align: left;
	overflow: hidden;
}

.yb-services * {
	box-sizing: border-box;
}

.yb-services__inner {
	max-width: var(--yb-container);
	margin: 0 auto;
}

.yb-services__title {
	font-family: var(--yb-font-display);
	font-size: var(--yb-fs-h2);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--yb-white);
	max-width: 820px;
	margin: 0 0 72px;
	text-wrap: balance;
}

.yb-services__title span {
	color: var(--yb-marsala-text);
}

/* -------- сетка -------- */

.yb-services__body {
	--yb-services-gap: 72px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 330px);
	grid-template-areas: "text media nav";
	column-gap: var(--yb-services-gap);
	align-items: center;
}

.yb-services__nav {
	grid-area: nav;
	display: grid;
	gap: 0;
}

.yb-services__media {
	grid-area: media;
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--yb-ink-raised);
	overflow: hidden;
}

.yb-services__panels {
	grid-area: text;
	display: grid;
}

/* Светлая подложка («бумага») за фото со смещением вверх-влево — выглядывает буквой «Г»,
 * как паспарту. Связывает тёмный блок со светлыми секциями. Под список не заходит,
 * чтобы белый текст оставался на тёмном.
 * Абсолютный элемент с grid-area берёт ячейку фото как систему координат. */
.yb-services__backdrop {
	position: absolute;
	grid-area: media;
	top: -56px;
	left: -56px;
	right: 56px;
	bottom: 18%;
	background: var(--yb-paper);
	opacity: 0.8;
	pointer-events: none;
}

.yb-services__media,
.yb-services__nav,
.yb-services__panels {
	position: relative;
	z-index: 1;
}

/* Все тексты лежат в одной ячейке, фото — друг на друге: так работает плавная смена. */
.yb-services__panel {
	grid-area: 1 / 1;
}

/* -------- список услуг -------- */

.yb-services__tab {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	/* 12 пунктов должны уложиться в высоту фото. */
	padding: 7px 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--yb-white);
	/* Список — основным шрифтом: декоративный Italiana в 12 строках рябит.
	 * Italiana остаётся у заголовка блока и названия услуги слева. */
	font-family: var(--yb-font-body);
	font-size: var(--yb-fs-lg);
	font-weight: 300;
	letter-spacing: -0.005em;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--yb-duration) ease, font-size 0.5s var(--yb-ease), font-weight 0.3s ease;
	appearance: none;
	-webkit-appearance: none;
}

.yb-services__tab:hover {
	opacity: 0.8;
}

.yb-services__tab.is-active {
	opacity: 1;
	font-size: var(--yb-fs-xl);
	font-weight: 400;
}

.yb-services__tab:focus-visible {
	outline: 1px solid var(--yb-marsala-text);
	outline-offset: 4px;
}

/* Буллет — точка с дужкой из логотипа. У активного пункта чуть крупнее. */
.yb-services__bullet {
	flex: none;
	align-self: center;
	width: 12px;
	height: auto;
	color: var(--yb-marsala-text);
	transition: transform var(--yb-duration) var(--yb-ease);
}

.yb-services__tab.is-active .yb-services__bullet {
	transform: scale(1.2);
}

/* Линия от активного пункта к фото. */
.yb-services__tab::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	width: calc(var(--yb-services-gap) - 12px);
	height: 1px;
	background: var(--yb-marsala-text);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--yb-duration) var(--yb-ease);
}

.yb-services__tab.is-active::before {
	transform: scaleX(1);
}

/* -------- фото: мозаика -------- */

/* Кадры лежат стопкой. Входящий — сверху: его плитки вырастают из центров своих ячеек
 * волной по диагонали, затем под ними проявляется цельное фото (закрывает швы между плитками).
 * Уходящий кадр ещё секунду остаётся видимым под новым и гаснет, когда мозаика собралась. */
.yb-services__shot {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.yb-services__shot.is-active {
	z-index: 2;
}

.yb-services__shot.is-prev {
	z-index: 1;
}

.yb-services__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease 1.3s;
}

.yb-services__shot.is-active .yb-services__img {
	opacity: 1;
	transition: opacity 0.3s ease 1s;
}

/* Плитки качают фон только у активного и уходящего кадра — остальные картинки не грузятся дважды.
 * У уходящего плитки остаются: при быстрой смене его <img> мог ещё не проявиться. */
.yb-services__tiles {
	position: absolute;
	inset: 0;
	display: none;
}

.yb-services__shot.is-active .yb-services__tiles,
.yb-services__shot.is-prev .yb-services__tiles {
	display: block;
}

/* Каждая плитка — фото во весь кадр, обрезанное clip-path до своей ячейки (--t/--r/--b/--l).
 * Так кадрирование совпадает с object-fit: cover у <img>. */
.yb-services__tiles i {
	position: absolute;
	inset: 0;
	background: var(--yb-src) var(--yb-pos) / cover no-repeat;
	clip-path: inset(var(--t) var(--r) var(--b) var(--l));
	animation: yb-tile 0.55s var(--yb-ease) var(--d) both;
}

/* Ячейка 25% × 20%: старт — точка в её центре. */
@keyframes yb-tile {
	from {
		opacity: 0;
		clip-path: inset(calc(var(--t) + 10%) calc(var(--r) + 12.5%) calc(var(--b) + 10%) calc(var(--l) + 12.5%));
	}

	to {
		opacity: 1;
		clip-path: inset(var(--t) var(--r) var(--b) var(--l));
	}
}

/* Первый кадр при загрузке страницы показываем сразу, без мозаики. */
.yb-services__body:not(.is-started) .yb-services__tiles i {
	animation: none;
}

.yb-services__body:not(.is-started) .yb-services__shot.is-active .yb-services__img {
	transition: none;
}

/* -------- автосмена: прогресс под активным пунктом -------- */

/* Полоса живёт внутри названия — её ширина равна длине слов. Заполняется за --yb-dwell;
 * на animationend скрипт включает следующую услугу. */
.yb-services__tab-label {
	position: relative;
}

.yb-services__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 1px;
	background: var(--yb-marsala-text);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
}

.yb-services__tab.is-active .yb-services__progress {
	opacity: 0.8;
	animation: yb-progress var(--yb-dwell, 10s) linear forwards;
}

@keyframes yb-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Пауза — блок не на экране или по нему ходят с клавиатуры. */
.yb-services__body:has(:focus-visible) .yb-services__progress,
.yb-services__body:not(.is-visible) .yb-services__progress {
	animation-play-state: paused;
}

/* Пауза при наведении — только на текст описания (читают) и только с мышью:
 * над списком полоса должна ползти, а на тач-экранах :hover «залипает» после касания. */
@media (hover: hover) {
	.yb-services__body:has(.yb-services__panels:hover) .yb-services__progress {
		animation-play-state: paused;
	}
}

/* -------- текст -------- */

.yb-services__panel {
	align-self: center;
	max-width: 400px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.5s var(--yb-ease), visibility 0s linear 0.4s;
}

.yb-services__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.5s ease 0.1s, transform 0.6s var(--yb-ease) 0.1s, visibility 0s;
}

.yb-services__name {
	font-family: var(--yb-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--yb-white);
	margin: 0 0 20px;
}

.yb-services__text {
	font-size: var(--yb-fs-md);
	line-height: 1.65;
	color: var(--yb-text-muted);
	margin: 0 0 32px;
}

/* Две ссылки: «Ver serviço» — главная, «Marcar consulta» — тише. */
.yb-services__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
}
/* -------- адаптив -------- */

@media (max-width: 1100px) {
	.yb-services__body {
		--yb-services-gap: 48px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px) minmax(0, 280px);
	}

	.yb-services__tab {
		font-size: var(--yb-fs-md);
		padding: 6px 0;
	}

	.yb-services__tab.is-active {
		font-size: var(--yb-fs-lg);
	}
}

/* 12 пунктов рядом с фото не помещаются — список становится горизонтальной лентой над фото. */
@media (max-width: 900px) {
	.yb-services {
		padding: 72px 20px;
	}

	.yb-services__title {
		margin-bottom: 32px;
	}

	.yb-services__body {
		--yb-services-gap: 20px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"nav"
			"media"
			"text";
		row-gap: 28px;
	}

	/* Лента выходит к краям экрана, чтобы было видно: её можно листать. */
	.yb-services__nav {
		display: flex;
		gap: 8px;
		margin: 0 -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.yb-services__nav::-webkit-scrollbar {
		display: none;
	}

	.yb-services__tab {
		flex: none;
		width: auto;
		align-items: center;
		gap: 8px;
		padding: 10px 16px;
		border: 1px solid var(--yb-line);
		font-family: var(--yb-font-body);
		font-size: var(--yb-fs-ui);
		font-weight: 400;
		white-space: nowrap;
		scroll-snap-align: center;
		opacity: 0.6;
	}

	.yb-services__tab.is-active {
		border-color: var(--yb-marsala-text);
		font-size: var(--yb-fs-md);
	}

	.yb-services__progress {
		bottom: -4px;
	}

	.yb-services__tab::before {
		display: none;
	}

	.yb-services__bullet {
		width: 10px;
	}

	.yb-services__media {
		aspect-ratio: 4 / 5;
		max-height: 70vh;
		width: 100%;
	}

	.yb-services__backdrop {
		top: -16px;
		left: -16px;
		right: 16px;
		bottom: 20%;
	}

	.yb-services__panel {
		max-width: none;
	}

	.yb-services__name {
		font-size: 30px;
		margin-bottom: 14px;
	}

	.yb-services__text {
		margin-bottom: 24px;
	}
}

@media (max-width: 480px) {
	.yb-services {
		padding: 56px 16px;
	}

	.yb-services__title {
		font-size: 34px;
	}

	.yb-services__nav {
		margin: 0 -16px;
		padding: 0 16px 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Без мозаики и без автосмены: только мягкая смена кадра по клику. */
	.yb-services__tiles {
		display: none !important;
	}

	.yb-services__progress {
		display: none;
	}

	.yb-services__img,
	.yb-services__panel {
		transform: none !important;
	}

	.yb-services__img,
	.yb-services__panel,
	.yb-services__tab::before {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
	}
}