/* Caijun Gallery Carousel —— 原生画廊块（包在 .cj-gallery-carousel 组内）→ 自动滚动轮播
 * 触发条件：任意元素带自定义类 .cj-gallery-carousel（本版本 WP 的 wp:gallery 块会丢弃
 *   className，故用 group 承载该类；内部仍为原生画廊块，客户可在编辑器零代码替换图片）。
 * 默认态（JS 未就绪 / 被禁用）：横向可滚动图条，所有图片可见 —— 安全降级。
 * JS 就绪后（加 .cj-gallery-ready）：把图片包进 .cj-gallery-track 并克隆一份，
 * 实现 -50% 无缝循环动画；hover/focus 暂停；两侧渐隐；reduced-motion 降级为可滚动。
 * 仅作用于带该类的元素，不影响其它块。
 */
.cj-gallery-carousel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 16px;
	margin: 0 0 2.5rem;
	padding: 0;
	-webkit-overflow-scrolling: touch;
}
/* 画廊渲染出的图片可能包在 group 的 inner-container 里，扁平化使其直接成为 flex 子项 */
.cj-gallery-carousel > .wp-block-group__inner-container {
	display: contents;
}
.cj-gallery-carousel > figure.wp-block-image,
.cj-gallery-carousel > li.blocks-gallery-item,
.cj-gallery-carousel > img,
.cj-gallery-carousel > .wp-block-group__inner-container > figure.wp-block-image,
.cj-gallery-carousel > .wp-block-group__inner-container > li.blocks-gallery-item {
	flex: 0 0 auto;
	margin: 0;
}
.cj-gallery-carousel :is(li.blocks-gallery-item, figure.wp-block-image) {
	margin: 0;
}
/* 默认态图片尺寸（未就绪时）；就绪后由 .cj-gallery-ready 规则覆盖 */
.cj-gallery-carousel:not(.cj-gallery-ready) img {
	height: 240px;
	width: auto;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

/* JS 就绪后的无缝轮播态 */
.cj-gallery-carousel.cj-gallery-ready {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.cj-gallery-carousel.cj-gallery-ready .cj-gallery-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: cj-gallery-scroll 45s linear infinite;
}
.cj-gallery-carousel.cj-gallery-ready .cj-gallery-track > * {
	flex: 0 0 auto;
	margin: 0 16px 0 0;
}
.cj-gallery-carousel.cj-gallery-ready .cj-gallery-track > * img {
	height: 360px;
	width: auto;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}
.cj-gallery-carousel.cj-gallery-ready:hover .cj-gallery-track,
.cj-gallery-carousel.cj-gallery-ready:focus-within .cj-gallery-track {
	animation-play-state: paused;
}
@keyframes cj-gallery-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (max-width: 600px) {
	.cj-gallery-carousel:not(.cj-gallery-ready) img {
		height: 160px;
	}
	.cj-gallery-carousel.cj-gallery-ready .cj-gallery-track > * img {
		height: 200px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cj-gallery-carousel.cj-gallery-ready .cj-gallery-track {
		animation: none;
	}
}