/* mod_kinopremiery — горизонтальная лента кинопремьер (позиция in-news-top) */

.mod-kinopremiery {
	/* Карточка 126px = прежние 180px минус 30 %; постер 2:3 */
	--kp-card: 126px;
	--kp-poster-h: 189px;
	--kp-gap: 14px;

	position: relative;
	box-sizing: border-box;
	/* Выравнивание по левому краю текста «Афиша Москвы» */
	padding-left: 6.5px;
	margin: 0 0 6px;
}

.mod-kinopremiery .kinopremiery-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

/* «Показать все» — справа от заголовка, серым и мелко:
   заметно, но не спорит с лентой */
.mod-kinopremiery .kinopremiery-all {
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1.2;
	font-weight: 400;
	color: #767676;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.mod-kinopremiery .kinopremiery-all-arrow {
	margin-left: 4px;
}

.mod-kinopremiery .kinopremiery-all:hover,
.mod-kinopremiery .kinopremiery-all:focus-visible {
	color: #111;
	border-bottom-color: currentColor;
}

.mod-kinopremiery .kinopremiery-title {
	margin: 0;
	font-size: 12px;
	line-height: 1.25;
}

.mod-kinopremiery .kinopremiery-strip {
	position: relative;
}

/* Скроллбар скрыт: листаем стрелками, колесом и свайпом */
.mod-kinopremiery .kinopremiery-scroll {
	display: flex;
	gap: var(--kp-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mod-kinopremiery .kinopremiery-scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.mod-kinopremiery .kinopremiery-card {
	flex: 0 0 var(--kp-card);
	max-width: var(--kp-card);
	scroll-snap-align: start;
}

.mod-kinopremiery .kinopremiery-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mod-kinopremiery .kinopremiery-poster {
	position: relative;
	display: block;
	width: 100%;
	height: var(--kp-poster-h);
	overflow: hidden;
	border-radius: 7px;
	background: #e9e9e9;
}

.mod-kinopremiery .kinopremiery-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.mod-kinopremiery .kinopremiery-link:hover .kinopremiery-poster img {
	transform: scale(1.03);
}

/* Оценка IMDb — слева сверху, поверх постера */
.mod-kinopremiery .kinopremiery-imdb {
	position: absolute;
	left: 6px;
	top: 6px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .82);
	color: #f5c518;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.mod-kinopremiery .kinopremiery-imdb::before {
	content: "IMDb ";
	color: #fff;
	font-weight: 400;
}

/* Жанр, год и дата премьеры — внизу постера на затемнении */
.mod-kinopremiery .kinopremiery-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 6px 5px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .66) 55%, rgba(0, 0, 0, .86) 100%);
	color: #fff;
	text-align: left;
	pointer-events: none;
}

.mod-kinopremiery .kinopremiery-genre {
	display: block;
	font-size: 9px;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mod-kinopremiery .kinopremiery-date {
	display: block;
	margin-top: 1px;
	font-size: 9px;
	line-height: 1.25;
	font-weight: 700;
}

/* При наведении подпись на постере увеличивается — иначе 9px не читаются */
.mod-kinopremiery .kinopremiery-genre,
.mod-kinopremiery .kinopremiery-date {
	transition: font-size .18s ease;
}

.mod-kinopremiery .kinopremiery-link:hover .kinopremiery-genre,
.mod-kinopremiery .kinopremiery-link:focus-visible .kinopremiery-genre {
	font-size: 10px;
}

.mod-kinopremiery .kinopremiery-link:hover .kinopremiery-date,
.mod-kinopremiery .kinopremiery-link:focus-visible .kinopremiery-date {
	font-size: 12.5px;
}

.mod-kinopremiery .kinopremiery-body {
	display: block;
	padding-top: 6px;
}

/* Название: чёрное, ровно две строки, дальше — многоточие */
.mod-kinopremiery .kinopremiery-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #111;
	font-size: 11px;
	line-height: 1.3;
	min-height: 2.6em;
}

/* Стрелки: крупные, по центру постера у правого края */
.mod-kinopremiery .kinopremiery-nav {
	position: absolute;
	right: 4px;
	top: calc(var(--kp-poster-h) / 2 - 48px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mod-kinopremiery .kinopremiery-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #222;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: background .2s ease, transform .2s ease;
}

.mod-kinopremiery .kinopremiery-arrow:hover {
	background: #fff;
	transform: translateY(-1px);
}

/* Стрелки прячем, если лента целиком влезает в экран */
.mod-kinopremiery.is-static .kinopremiery-nav {
	display: none;
}

@media (max-width: 575px) {
	.mod-kinopremiery {
		--kp-card: 98px;
		--kp-poster-h: 147px;
		--kp-gap: 10px;

		/* На главной content-inner без padding: отступ как у карточек новостей ниже */
		padding-left: 5px;

		/* Убираем лишний просвет под лентой */
		margin-bottom: 10px;
	}

	/* На телефоне заголовок такой же мелкий, как «Показать все» */
	.mod-kinopremiery .kinopremiery-title {
		font-size: 11px;
		line-height: 1.2;
	}

	.mod-kinopremiery .kinopremiery-arrow {
		width: 38px;
		height: 38px;
		font-size: 22px;
	}

	.mod-kinopremiery .kinopremiery-nav {
		top: calc(var(--kp-poster-h) / 2 - 41px);
	}
}