/**
 * Content slider — horizontal row of any blocks, left/right arrows.
 * Targets: .wp-block-group.is-style-content-slider
 */

.wp-block-group.is-style-content-slider {
	--jofei-slider-gap: var(--wp--preset--spacing--20, 0.75rem);
	--jofei-slider-slide-size: 78%;
	--jofei-slider-arrow-inset: max(0.375rem, env(safe-area-inset-left, 0px));
	position: relative;
}

@media (min-width: 600px) {
	.wp-block-group.is-style-content-slider {
		--jofei-slider-slide-size: 42%;
	}
}

@media (min-width: 1024px) {
	.wp-block-group.is-style-content-slider {
		--jofei-slider-slide-size: 28%;
	}
}

/* Before JS: stack vertically */
.wp-block-group.is-style-content-slider:not(.is-slider-ready) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jofei-slider-gap);
}

.wp-block-group.is-style-content-slider:not(.is-slider-ready) > * {
	flex: 1 1 calc(50% - var(--jofei-slider-gap));
	min-width: 0;
}

@media (min-width: 1024px) {
	.wp-block-group.is-style-content-slider:not(.is-slider-ready) > * {
		flex: 1 1 calc(33.333% - var(--jofei-slider-gap));
	}
}

/* —— Viewport —— */
.jofei-content-slider__viewport {
	overflow: hidden;
	width: 100%;
}

.jofei-content-slider__container {
	display: flex;
	margin-left: calc(var(--jofei-slider-gap) * -1);
	touch-action: pan-x pinch-zoom;
}

.jofei-content-slider__slide {
	flex: 0 0 var(--jofei-slider-slide-size);
	margin-left: var(--jofei-slider-gap);
	min-width: 0;
}

/* Clickable cover wrapper inside slider */
.jofei-content-slider__slide.jofei-cover-link,
.jofei-content-slider__slide > .jofei-cover-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.jofei-cover-link .wp-block-cover {
	flex: 1 1 auto;
	min-height: 100%;
}

/* —— Arrows —— */
.jofei-content-slider__arrow {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0px solid var(--wp--preset--color--accent-2, #9c3939);
	border-radius: 999px;
	box-shadow: none;
	color: var(--wp--preset--color--accent-2, #9c3939);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	line-height: 1;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
	position: absolute;
	z-index: 42;
}

.jofei-content-slider__arrow span {
	display: block;
	font-size: 1.25rem;
	line-height: 1;
}

.jofei-content-slider__arrow:hover:not(:disabled),
.jofei-content-slider__arrow:focus-visible {
	background: #9c39394d;
	color: var(--wp--preset--color--base, #fff);
}

.jofei-content-slider__arrow:focus {
	outline: 0px solid var(--wp--preset--color--accent-2, #9c393969);
}

.jofei-content-slider__arrow:active {
	outline: 2px solid var(--wp--preset--color--accent-2, #ffffff);
	outline-offset: -2px;
	background: var(--wp--preset--color--accent-2, #9c393974);
}

.jofei-content-slider__arrow:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}


.jofei-content-slider__arrow--prev{
	left: -2.25rem;
}
.jofei-content-slider__arrow--next{
	right: -2.25rem;
}


/* Mobile: arrows above the track */
@media (max-width: 767px) {
	.wp-block-group.is-style-content-slider {
		padding-bottom: 3rem;
	}

	.jofei-content-slider__arrow--prev {
		position: absolute;
		top: 0;
		left: var(--jofei-slider-arrow-inset);
	}

	.jofei-content-slider__arrow--next {
		position: absolute;
		top: 0;
		right: max(0.375rem, env(safe-area-inset-right, 0px));
	}
}

/* Tablet+: arrows beside the track */
@media (min-width: 768px) {
	.wp-block-group.is-style-content-slider {
		display: grid;
		gap: 0;
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}

	.jofei-content-slider__arrow {
		transform: none;
	}

	.jofei-content-slider__viewport {
		grid-column: 2;
	}
}

/* —— Cover overlay hover fade —— */
.jofei-cover-link .wp-block-cover__background {
	transition: opacity 0.35s ease !important;
}

.jofei-cover-link:hover .wp-block-cover__background {
	opacity: 0.45 !important;
}

@media (prefers-reduced-motion: reduce) {
	.jofei-cover-link .wp-block-cover__background {
		transition: none !important;
	}
}

.jofei-content-slider--reduce-motion .jofei-cover-link .wp-block-cover__background {
	transition: none !important;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
	.jofei-content-slider__slide {
		transition: none;
	}
}

.jofei-content-slider--reduce-motion .jofei-content-slider__slide {
	transition: none;
}

/* —— Editor: static grid —— */
.editor-styles-wrapper .wp-block-group.is-style-content-slider,
.block-editor-block-list__layout .wp-block-group.is-style-content-slider {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jofei-slider-gap);
}

.editor-styles-wrapper .wp-block-group.is-style-content-slider > *,
.block-editor-block-list__layout .wp-block-group.is-style-content-slider > * {
	flex: 1 1 calc(50% - var(--jofei-slider-gap));
	min-width: 0;
}

@media (min-width: 1024px) {
	.editor-styles-wrapper .wp-block-group.is-style-content-slider > *,
	.block-editor-block-list__layout .wp-block-group.is-style-content-slider > * {
		flex: 1 1 calc(33.333% - var(--jofei-slider-gap));
	}
}