/* ==================== HERO SLIDER (mytoy_new.pen → hero) ==================== */

/* Слайды — записи типа «slide» (админка → «Слайдер»), выводит Query Loop:
   .hero-slides > .wp-block-query > ul.wp-block-post-template > li > cover.hero-slide
     (p.hero-slide__tag + post-title.hero-slide__title + p.hero-slide__desc + button.hero-slide__link).
   Фото на всю ширину, слева — затемнение градиентом и текст. Высота фиксированная (--hero-height: 560 / 380 / 280),
   слайды лежат друг на друге. Без JS виден первый слайд; hero-slider.js переключает .is-active, добавляет стрелки и точки. */

.hero-slides{
	position: relative;
	overflow: hidden;
	height: var(--hero-height);
	background: var(--color-dark);
}

.hero-slides .wp-block-query,
.hero-slides .wp-block-post-template{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* li «схлопнуты» — каждая обложка позиционируется относительно .hero-slides. */
.hero-slides .wp-block-post-template > li{
	display: contents;
}

.hero-slides .wp-block-cover{
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	align-items: center;
}

.hero-slides:not(.hero-slides--js) .wp-block-post-template > li:first-child > .wp-block-cover,
.hero-slides.hero-slides--js .wp-block-cover.is-active{
	display: flex;
}

.hero-slides.hero-slides--js .wp-block-cover.is-active{
	animation: hero-fade .5s ease;
}

@keyframes hero-fade{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

/* затемнение слева направо (overlay макета: #1A1A1A CC → 00) */
.hero-slides .wp-block-cover .wp-block-cover__background{
	opacity: 1 !important;
	background: linear-gradient(90deg, rgba(26, 26, 26, .8) 0%, rgba(26, 26, 26, .45) 45%, rgba(26, 26, 26, 0) 100%) !important;
}

.hero-slides .hero-slide--dark .wp-block-cover__background{
	background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.hero-slides .wp-block-cover .wp-block-cover__inner-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hero-gap);
	width: 100%;
	max-width: var(--container-max);
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 var(--page-gutter);
	color: #fff;
}

.hero-slides .wp-block-cover .wp-block-cover__inner-container > *{
	margin: 0;
}

.hero-slides .hero-slide__tag{
	display: var(--hero-tag-display);
	padding: var(--hero-tag-pad);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: #fff;
	font-size: var(--hero-tag-size);
	font-weight: 600;
	line-height: 1.3;
}

.hero-slides .hero-slide__title{
	max-width: var(--hero-title-width);
	color: #fff;
	font-family: var(--font-heading);
	font-size: var(--hero-title-size);
	font-weight: 700;
	line-height: 1.15;
}

.hero-slides .hero-slide__desc{
	max-width: var(--hero-desc-width);
	color: rgba(255, 255, 255, .8);
	font-size: var(--hero-desc-size);
	line-height: 1.6;
}

.hero-slides .hero-slide--dark .hero-slide__title{
	color: var(--color-text);
}

.hero-slides .hero-slide--dark .hero-slide__desc{
	color: var(--color-text-2);
}

.hero-slides .hero-slide__more{
	margin-top: calc(var(--hero-gap) / 3);
}

.hero-slides .hero-slide__link .wp-block-button__link{
	font-size: var(--hero-btn-size);
}

/* ---------- стрелки и точки (hero-slider.js) ---------- */

.hero-slides__arrow{
	display: var(--hero-nav-display);
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(4px);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s ease;
}

.hero-slides__arrow::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-65%, -50%) rotate(45deg);
}

.hero-slides__arrow--prev::before{
	transform: translate(-35%, -50%) rotate(-135deg);
}

.hero-slides__arrow:hover{
	background: var(--color-accent);
}

.hero-slides__arrow--prev{
	left: 24px;
}

.hero-slides__arrow--next{
	right: 24px;
}

.hero-slides__dots{
	position: absolute;
	bottom: var(--hero-dots-bottom);
	left: 50%;
	z-index: 3;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.hero-slides__dot{
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.hero-slides__dot.is-active{
	width: 24px;
	background: var(--color-accent);
}

/* Редактор: все слайды друг под другом в обычном потоке — каждый можно править. */

.editor-styles-wrapper .hero-slides{
	height: auto;
	overflow: visible;
}

.editor-styles-wrapper .hero-slides .wp-block-cover{
	display: flex !important;
	position: relative !important;
	inset: auto !important;
	height: var(--hero-height) !important;
	margin: 0 0 12px !important;
}