/* Случайная тренировка поверх эмблемы на главной (Hero_Pick).
   Карточка лежит в том же .hero-art, что и эмблема, и перекрывает её целиком. */

.hero-art {
	position: relative;
}

.yoga-hero-pick {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	/* Текст карточки — СВЕРХУ. Внизу .hero-art уже висит плашка расписания из
	   темы, и она рисуется поверх карточки: вместе с подписью снизу они
	   накладывались друг на друга. */
	justify-content: flex-start;
	overflow: hidden;
	/* Тема даёт .hero-emblem z-index:1 и mix-blend-mode:multiply, поэтому без
	   своего уровня эмблема рисовалась ПОВЕРХ обложки и подмешивалась в фото.
	   Тот же z-index, что у эмблемы: при равном уровне выигрывает элемент ниже
	   по DOM, то есть карточка. Плашка расписания (.float, z-index:2) остаётся
	   выше — она нужна поверх. */
	z-index: 1;
	border-radius: 24px;
	text-decoration: none;
	color: #fff;
	/* Скрыта до перелистывания. visibility, а не только opacity: прозрачная
	   ссылка иначе перехватывала бы клики по эмблеме. */
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}

.yoga-hero-pick.is-shown {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility 0s;
}

.yoga-hero-pick__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Затемнение снизу — иначе белый текст утонет в светлой обложке. */
.yoga-hero-pick__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	background: linear-gradient(to bottom, rgba(12, 34, 33, .82) 0%, rgba(12, 34, 33, .5) 55%, rgba(12, 34, 33, 0) 100%);
}

.yoga-hero-pick__kicker {
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .9;
}

.yoga-hero-pick__title {
	font-size: 19px;
	line-height: 1.25;
	font-weight: 600;
	/* Названия автозаписей длинные — держим карточку в двух строках. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.yoga-hero-pick__body {
		padding: 14px;
	}

	.yoga-hero-pick__title {
		font-size: 17px;
	}
}

/* Кому системно отключены анимации — показываем сразу и без перехода:
   само перелистывание и есть анимация, ради которой всё затевалось. */
@media (prefers-reduced-motion: reduce) {
	.yoga-hero-pick {
		transition: none;
	}
}