/*
 * Events Manager — единый формат списка мероприятий.
 * Шаблон: plugins/events-manager/formats/event_list_item_format.php.
 */

.em .gp-events-list {
	--gp-events-accent: var(--global-palette-highlight, #ff7011);
	--gp-events-muted: var(--global-palette5, #6b788e);
	--gp-events-surface: var(--global-palette8, #f8f9fc);
	--gp-events-hover-surface: var(--global-palette7, #e6edf4);
	--gp-events-radius: 6px;

	list-style: none;
	margin: 0;
	padding: 0;
}

/* Строка намеренно остаётся лёгкой: ритм создаёт чередование фона и маркер слева. */
.em .gp-events-list__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px 12px 10px 16px;
	border-radius: var(--gp-events-radius);
	background: transparent;
	transition: background-color .18s ease;
}

.em .gp-events-list__item:nth-child(even) {
	background: var(--gp-events-surface);
}

.em .gp-events-list__content {
	flex: 1 1 auto;
	min-width: 0;
}

.em .gp-events-list__thumbnail {
	flex: 0 0 104px;
	width: 104px;
	height: 78px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: var(--gp-events-radius);
	background: var(--gp-events-surface);
	box-shadow: 0 2px 7px rgba(11, 26, 51, .10);
	transition: box-shadow .22s ease, transform .22s ease;
}

.em .gp-events-list__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	/* Верх кадра сохраняет лица на вертикальных афишах. */
	transform-origin: center top;
	transition: transform .28s cubic-bezier(.2, .65, .3, 1);
}

/* Hover не нужен на тач-устройствах: там он может «залипать» после касания. */
@media (hover: hover) {
	.em .gp-events-list__thumbnail:hover img {
		transform: scale(1.14) rotate(2deg);
	}

	.em .gp-events-list__thumbnail:hover {
		transform: translateY(-1px);
		box-shadow: 0 5px 13px rgba(11, 26, 51, .16);
	}
}

.em .gp-events-list__thumbnail:focus-visible img {
	transform: scale(1.14) rotate(2deg);
}

.em .gp-events-list__thumbnail:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 5px 13px rgba(11, 26, 51, .16);
}

.em .gp-events-list__thumbnail:focus-visible {
	outline: 2px solid var(--gp-events-accent);
	outline-offset: 2px;
}

/* Акцентная полоса показывает активную строку, не добавляя разделителей. */
.em .gp-events-list__item::before {
	content: '';
	position: absolute;
	top: 11px;
	bottom: 11px;
	left: 3px;
	width: 2px;
	border-radius: 999px;
	background: var(--gp-events-hover-surface);
	transition: background-color .18s ease, width .18s ease;
}

.em .gp-events-list__item:hover,
.em .gp-events-list__item:focus-within {
	background: var(--gp-events-hover-surface);
}

.em .gp-events-list__item:hover::before,
.em .gp-events-list__item:focus-within::before {
	width: 3px;
	background: var(--gp-events-accent);
}

.em .gp-events-list__date {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 4px;
	color: var(--gp-events-muted);
	font-family: 'Inter Tight', sans-serif;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.em .gp-events-list__date::before {
	content: '';
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 15h3M13 15h3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 15h3M13 15h3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.em .gp-events-list__title {
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.em .gp-events-list__title a {
	color: var(--gp-events-accent);
	text-decoration: none;
}

.em .gp-events-list__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.em .gp-events-list__title a:focus-visible {
	outline: 2px solid var(--gp-events-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.em .gp-events-list__item.is-cancelled {
	opacity: .65;
}

@media (max-width: 600px) {
	.em .gp-events-list__item {
		gap: 10px;
		padding: 10px 8px 10px 13px;
	}

	.em .gp-events-list__item::before {
		left: 1px;
	}

	.em .gp-events-list__date {
		font-size: 12px;
	}

	.em .gp-events-list__title {
		font-size: 15px;
	}

	.em .gp-events-list__thumbnail {
		flex-basis: 72px;
		width: 72px;
		height: 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.em .gp-events-list__item,
	.em .gp-events-list__item::before,
	.em .gp-events-list__thumbnail,
	.em .gp-events-list__thumbnail img {
		transition: none;
	}

	.em .gp-events-list__thumbnail:hover,
	.em .gp-events-list__thumbnail:focus-visible,
	.em .gp-events-list__thumbnail:hover img,
	.em .gp-events-list__thumbnail:focus-visible img {
		transform: none;
	}
}