/* ===========================================================================
   onesta/carousel — 汎用カルーセル
   ========================================================================== */

.onesta-carousel {
	container-type: inline-size;
	container-name: onesta-carousel;
	position: relative;
	inline-size: 100%;
	min-inline-size: 0;
	overflow: visible;
}

.onesta-carousel .splide__track {
		max-inline-size: 100%;
		overflow: hidden;
	}

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"] {
		--onesta-carousel-columns: 1;
		--onesta-carousel-gap: 1rem;
		--onesta-carousel-slide-size: calc((100% + var(--onesta-carousel-gap)) / var(--onesta-carousel-columns) - var(--onesta-carousel-gap));
	}

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-compact="2"] { --onesta-carousel-columns: 2; }

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-compact="3"] { --onesta-carousel-columns: 3; }

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-compact="4"] { --onesta-carousel-columns: 4; }

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-compact="5"] { --onesta-carousel-columns: 5; }

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-compact="6"] { --onesta-carousel-columns: 6; }

.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"] .onesta-carousel__slide {
		box-sizing: border-box;
		flex: 0 0 var(--onesta-carousel-slide-size);
		inline-size: var(--onesta-carousel-slide-size);
		min-inline-size: 0;
	}

.onesta-carousel .splide__slide {
		display: flex;
		flex-direction: column;
	}

.onesta-carousel .onesta-carousel__slide > * {
		flex: 1;
		inline-size: 100%;
		min-inline-size: 0;
	}

.onesta-carousel .splide__arrow {
		position: absolute;
		inset-block-start: 50%;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 44px;
		block-size: 44px;
		border: 0;
		border-radius: 50%;
		background: rgb(255 255 255 / 0.9);
		box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
		cursor: pointer;
		transform: translateY(-50%);
		transition:
			background var(--onesta-duration, 160ms),
			box-shadow var(--onesta-duration, 160ms);
	}

.onesta-carousel .splide__arrow:hover {
		background: #fff;
		box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
	}

.onesta-carousel .splide__arrow svg {
		inline-size: 0.75rem;
		block-size: 0.75rem;
		fill: currentcolor;
	}

.onesta-carousel .splide__arrow--prev {
		inset-inline-start: 0.25rem;
		transform: translateY(-50%) rotate(180deg);
	}

.onesta-carousel .splide__arrow--next {
		inset-inline-end: 0.25rem;
	}

.onesta-carousel .splide__arrow:disabled {
		cursor: default;
		opacity: 0.3;
	}

.onesta-carousel .splide__pagination {
		display: flex;
		justify-content: center;
		gap: 0.375rem;
		margin: 0;
		padding: 1rem 0 0.5rem;
		list-style: none;
	}

.onesta-carousel .splide__pagination__page {
		display: inline-grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		transform: none;
	}

.onesta-carousel .splide__pagination__page::before {
		content: "";
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: 50%;
		background: var(--wp--preset--color--neutral-300, #d1d5db);
		transition:
			background var(--onesta-duration, 160ms),
			transform var(--onesta-duration, 160ms);
	}

.onesta-carousel .splide__pagination__page.is-active::before {
		background: var(--wp--preset--color--primary, #333);
		transform: scale(1.3);
	}

.onesta-carousel.onesta-carousel--auto-scroll .splide__track {
		cursor: default;
	}

@container onesta-carousel (inline-size >= 600px) {
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-medium="1"] { --onesta-carousel-columns: 1; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-medium="2"] { --onesta-carousel-columns: 2; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-medium="3"] { --onesta-carousel-columns: 3; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-medium="4"] { --onesta-carousel-columns: 4; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-medium="5"] { --onesta-carousel-columns: 5; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-medium="6"] { --onesta-carousel-columns: 6; }

		.onesta-carousel .splide__arrow svg {
			inline-size: 1rem;
			block-size: 1rem;
		}

		.onesta-carousel .splide__arrow--prev {
			inset-inline-start: 0.75rem;
		}

		.onesta-carousel .splide__arrow--next {
			inset-inline-end: 0.75rem;
		}
	}

@container onesta-carousel (inline-size >= 900px) {
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-wide="1"] { --onesta-carousel-columns: 1; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-wide="2"] { --onesta-carousel-columns: 2; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-wide="3"] { --onesta-carousel-columns: 3; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-wide="4"] { --onesta-carousel-columns: 4; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-wide="5"] { --onesta-carousel-columns: 5; }
		.onesta-carousel .onesta-carousel__splide[data-onesta-responsive-per-page="true"][data-onesta-per-page-wide="6"] { --onesta-carousel-columns: 6; }
	}

@media (prefers-reduced-motion: reduce) {
		.onesta-carousel .splide__arrow,.onesta-carousel .splide__pagination__page::before {
			transition: none;
		}

		.onesta-carousel .splide__pagination__page.is-active::before {
			transform: none;
		}
	}

/* Editor — タブ切替式スライド編集UI */
.onesta-carousel-editor {
	border: 2px solid var(--wp--preset--color--secondary, #1b6ca8);
	border-radius: 0.5rem;
	overflow: visible;
}
.onesta-carousel-editor .onesta-carousel-editor__header {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.625rem 0.875rem;
		border-radius: 0.375rem 0.375rem 0 0;
		background: var(--wp--preset--color--secondary, #1b6ca8);
		color: #fff;
		font-size: 0.8125rem;
		font-weight: 600;
	}
.onesta-carousel-editor .onesta-carousel-editor__icon {
		font-size: 0.625rem;
		opacity: 0.8;
	}
.onesta-carousel-editor .onesta-carousel-editor__meta {
		margin-inline-start: auto;
		font-size: 0.75rem;
		font-weight: 400;
		opacity: 0.8;
	}
.onesta-carousel-editor .onesta-carousel-editor__tabs {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.625rem 0.875rem;
		border-block-end: 1px solid #e5e7eb;
		background: #f3f4f6;
	}
.onesta-carousel-editor .onesta-carousel-editor__tab,.onesta-carousel-editor .onesta-carousel-editor__tab-add {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2rem;
		block-size: 2rem;
		padding: 0;
		border-radius: 50%;
		line-height: 1;
		cursor: pointer;
	}
.onesta-carousel-editor .onesta-carousel-editor__tab {
		border: 2px solid #d1d5db;
		background: #fff;
		color: #6b7280;
		font-size: 0.8125rem;
		font-weight: 700;
		transition:
			background var(--onesta-duration, 160ms),
			border-color var(--onesta-duration, 160ms),
			color var(--onesta-duration, 160ms);
	}
.onesta-carousel-editor .onesta-carousel-editor__tab:hover {
		border-color: var(--wp--preset--color--secondary, #1b6ca8);
		color: var(--wp--preset--color--secondary, #1b6ca8);
	}
.onesta-carousel-editor .onesta-carousel-editor__tab.is-active {
		border-color: var(--wp--preset--color--secondary, #1b6ca8);
		background: var(--wp--preset--color--secondary, #1b6ca8);
		color: #fff;
	}
.onesta-carousel-editor .onesta-carousel-editor__tab-add {
		border: 2px dashed #d1d5db;
		background: transparent;
		color: #9ca3af;
		font-size: 1.25rem;
		font-weight: 400;
		transition:
			border-color var(--onesta-duration, 160ms),
			color var(--onesta-duration, 160ms);
	}
.onesta-carousel-editor .onesta-carousel-editor__tab-add:hover {
		border-color: var(--wp--preset--color--secondary, #1b6ca8);
		color: var(--wp--preset--color--secondary, #1b6ca8);
	}
.onesta-carousel-editor .onesta-carousel-editor__slides {
		min-block-size: 6.25rem;
		padding: 1rem;
	}
/* Gutenbergのアペンダーより強い編集UI専用契約。 */
.onesta-carousel-editor .onesta-carousel-editor__slides > .block-list-appender {
		display: none !important;
	}
@media (prefers-reduced-motion: reduce) {
		.onesta-carousel-editor .onesta-carousel-editor__tab,.onesta-carousel-editor .onesta-carousel-editor__tab-add {
			transition: none;
		}
	}